1. Define the site
1. Create a folder in any root directory (we assume it is drive E here), for example, name it MyWeb.
***Note: All files used in the website must have English names.
2. Open Dreamweaver, select "Site - New Site" to open the dialog box. Enter the name of the website in Site Name (Chinese is available), and select the folder you just created (E:web) in the local root folder. Then confirm.
***Note: When you open Dreamweaver again, you will automatically find the site you just created. If there are multiple sites, you can select them in the menu "Site - Open Site".
2. Create a page
1. In the blank space under the local folder E:MyWeb, right-click and select "New File" to create a page. The default file name is untitled.htm. htm means that this web page file is a static HTML file. Rename it index.htm.
***The name of the first page of the website is usually index.htm or index.html. You can choose the names of other pages yourself.
2. Double-click index.htm to enter the editing state of the page. Enter the name of the web page in the title box, right-click and select Page Properties to open the "Page Properties" window. Here you can set the title, background color or back image of the website, and the color of the hyperlink (usually the default is enough), and keep everything else as default.
3． At this time, the cursor is in the upper left corner and you can enter a sentence, such as "Welcome to my homepage". Select the text, use the menu "Window/Properties" to open the properties panel, select the text size as 6, then center the text, and then use a few carriage returns in front of the text to position it in the middle of the page.
4. To select a font, select the last item in Font: Edit Font List. Then select the + sign in the dialog box, then select a font that needs to be added to the font list in the "Available Fonts" column, and click the button in the middle to add it.
***The most commonly used Chinese characters on web pages are Song fonts. Do not add special fonts to the list for use, because others will not be able to see them if they are not installed on their computers. If you need to use it, make it into a picture before using it.
***The way to enter spaces on a web page is to adjust the input method to full-width.
***The way to wrap lines on a web page is: shift+Enter. Just press Enter to change paragraphs.
3. Add pictures to the page
1. In the blank space under the local folder E:MyWeb, right-click and select "New Folder". This creates a folder and uses it to put pictures. You can rename it tu or pic or Images are OK.
2. Use the menu "Window/Object" to open the object panel, click "Insert Image", and select the picture to be inserted in the dialog box. If a dialog box appears: "Would you like to copy this file to the root folder?", you must select "Yes" and then save it to the folder you just created.
3. Select the picture and open the properties panel, where you can name the picture, reset the height and width of the picture, and drag the dots on the corners of the picture to change the size. Hold down the shift key and drag the corner points to stretch the image while maintaining the aspect ratio. To restore the original size, click the "Resize" button in the lower right corner.
4. "Link" can directly enter the address here. "Replacement" is the description of the picture, that is, the text displayed when the mouse points to the picture; "Border" is the width of the picture border, and "Alignment" is the alignment method.
4. Add a hyperlink
1. Add a link to the text.
For example, enter "My Article" on the page, then select it, open the properties panel, and in the "Link" box, select the page it wants to link to. In the next "target" box, we usually use self to open a new window instead of the currently open window; or select blank to open a new window.
2. Add a link to the image in the same way as the link to the text above. Insert the image, and then select it in the link box in the properties panel.
****Pictures can create different multiple links. Here's how:
There are some graphics under the "Map" item in the properties panel. For example, click on the square, the cursor changes to a cross, and draw a blue rectangular hot zone on the picture. At this time, you can set the link address for this hot zone on the properties panel. , the mouse pointer will display. Similarly, by setting up a hot spot using a circle, you can set other links for the image.
3. Add an E-mail link. Select the text or picture that you want to add an E-mail link to, open the properties panel, and enter the email address in the "Link" box. The format is as follows: mailto: email address. Note that there are no spaces in between.
4. If the link is to a file that cannot be opened by the browser, such as exe, Zip, etc., then when the viewer clicks on the link, the file download or online playback function will be realized.
5. Use of tables
1. Click Insert/Table to open the table panel for settings. The number of rows, columns, width, borders, etc., "cell filling" is the distance between the inside of the cell and the content; "cell spacing" is the distance between cells, and the unit is pixels.
2. After inserting the table, click on the border of the table to select the entire table. Then you can make various settings in the properties panel below.
3. Move the cursor to one of the cells, and the property panel you see now is the property panel of the cell. You can also perform various operations on cells. Such as background color, background image, border, merge, split, etc.
6. Other operations on tables
- Principle of making thin-line tables:
1. Select the entire table and set its background to black (this color is the color of the table lines).
2. Select all cells and set their background to white.
2. Automatically format tables 1. First make a table and then select it.
2. Select Command/Format Table in the menu. That is, you can choose some preset table styles.
Sany Pixel Divider 1. Insert a table with 1 row and 1 column, a width of 200 pixels, and a border and margin of 0.
2. Select the table, set the table height to 1 pixel, and set a background color (that is, the desired line color).
3. Switch to the code and design window and delete the code.
7. Use tables to build a complete page
- the top of the web page (generally including icons, advertisements, navigation menus)
1. Create a table with 1 row and 2 columns, a width of 760 pixels, and a border and margin of 0.
2. Select the table, set the arrangement to center alignment, and the background color to #3366CC.
3. Place the cursor in the left cell, set its horizontal arrangement to left alignment, and its vertical arrangement to top alignment, and then insert an image. Generally, the website icon, that is, the logo is inserted here.
4. Place the cursor in the cell on the right, set its width to 500, align the horizontal arrangement to the center, and the vertical arrangement to the middle, and then insert an image, usually a web page advertisement, that is, a banner.
5. Place the cursor after the table you just completed, and click Insert/Table to create a table with 1 row and 1 column, a width of 760 pixels, and a border and margin of 0.
6. Select the table you just created, set the arrangement to center alignment, and the background color to #005173.
7. Insert multiple images into the table one after another as navigation bar menus.
2. The middle part of the web page (column list on the left, website news in the middle, column list on the right)
1. After the navigation bar table, click Insert/Table to create a table with 1 row and 3 columns, a width of 760 pixels, and a border and margin of 0. And set the arrangement mode to center alignment and the background color to #FFFFFFFF.
2. Place the cursor in the left cell, set its width to 18%, align it horizontally to the center, and align it vertically to the top, then insert an image and a navigation bar.
3. Place the cursor after the picture you just inserted, click Insert/Table, and insert a table with 12 rows and 1 column and a width of 90%. Set its cell spacing to 1 and its background color to #CCCCCC.
4. Place the cursor in the first cell of the table, set its height to 20, and its background color to #FFFFFF. Insert/Image, inserts a small dot in front of the navigation text. Set the other 11 cells similarly, so that the column classification list on the left is completed.
5. Place the cursor in the middle cell of the main table, set its width to 66%, align it horizontally to the center, and align it vertically to the top, then insert /image to insert a navigation bar.
6. Place the cursor after the image, click Insert/Table, and insert a table with 4 rows and 1 column and a width of 95%. Set its cell spacing to 1 and its background color to #CCCCCC.
7. Place the cursor in the first cell of the table, drag the mouse to select all 4 cells, set the height to 60, and the background color to #FFFFFF.
8. Place the cursor in the cell on the right side of the main table, set its width to 16%, align it horizontally to the center, and align it vertically to the top, use Insert/Image, and insert a navigation bar.
9. Place the cursor after the image, click Insert/Table, and insert a table with 7 rows and 1 column and a width of 90%. Set its spacing to 1 and its background color to #CCCCCC.
10. Hold down the Ctrl key, use the mouse to click on cells 1, 3, 5, and 7 of the table you just inserted, and then set their height to 55 and their background color to #FFFFFF.
11. Select cells 2, 4, and 6, set their height to 6, and their background color to #FFFFFF.
12. Switch to the source code window and delete the space symbols " " in cells 2, 4, and 6.
The bottom of three web pages (generally including copyright information and other related content)
1. Place the cursor on the main table and click Insert/Table to create a table with 2 rows and 2 columns, a width of 760 pixels, and a border and margin of 0.
2. Select the table, set the arrangement to center alignment, and the background color to #3366CC.
3. Place the cursor in the left cell of row 1 of the table, set its width to 50%, horizontal arrangement to default, vertical arrangement to baseline, background color to #FFFFFF, and then enter copyright information. The content color can be whatever you want.
4. Place the cursor in the right cell of row 1 of the table, click Insert/Image, insert a rounded image, enter the word Email after it, and set its size and color to 1 and #FFFFFF.
5. Insert/Form Object/Text Field, insert a text field, the width can be arbitrary.
6. Insert/Image, insert a GO image.
7. Set page properties. Click the menu Edit/Page Properties, enter a title in the Title column, select the background image, and set the top border to 0.
*** Putting the entire web page into different parts and combining them in different tables can also speed up the time it takes for the browser to read the page. ; Because the browser displays the content after reading the entire table, it is best not to frame the entire table.
8. Use the layout table to build a complete page
1. Click Insert/Layout, and the layout view button inside will switch to the layout view state (the default is standard view). You can also use View/Table View/Layout View in the menu to enter.
2. First click the Draw Layout Table button, and then create a layout table on the page like drawing.
3. Just like the previous example, draw the large table at the top, then the middle, and then the bottom of the web page.
4. Click the Draw Layout Cell button again, and then draw the layout cell in the already drawn layout table.
5. Return to the standard view, insert small nested tables into the divided tables, refine the page, and complete the design of the entire page.
****Be careful to put the entire page in a large layout table, because the browsing speed of such a web page will be very slow. Several layout tables should be divided according to the layout and content of the page, and then layout cells should be inserted into them.
9. Use of layers
1. Click Insert/Layer. You can also click on the icon and drag the mouse to create a layer.
3. Select the created layer and look at the properties panel. Just use the default "Layer Number" and "Label". The "layer number" is needed for programming, but we generally don't use it now. "Top" is the distance from the top border of the page; "Left" is the distance from the left border. The "z-axis" is the order of the layers, with larger numbers stacked on top of smaller numbers.
****If no color is set, the layer is transparent.
4. Click the small box in the upper left corner of the middle layer to drag the layer around, and the size can also be adjusted.
5. In the "overflow" column, when the text exceeds the size of the layer, visible (the excess part is still displayed), hidden (the excess part is hidden), scroll (the scroll bar is displayed regardless of whether it is exceeded), auto (there is The scroll bar only appears when it is exceeded).
6. Click the menu Window/Others/Layer, and the layer management window will appear. There you can modify the layer's name and Z-axis value, or click the eye icon to make the layer visible or invisible. There is also an option to prevent overlapping.
7. Alignment of layers. Hold down the shift key and select several layers at the same time. Then use Modify/Align, using the options here.
8. Nesting layer. ⑴First insert a layer in the document. ⑵ Place the cursor within the layer, and then continue to insert a layer to get a nested layer. ⑶The inside is called the child layer, and the outside is the parent layer. Their Z-axis order is the same. When you drag the parent layer, the child layers will also move relative to each other. When you move a child layer, the parent layer does not move with it.
10. Understand the timeline
1. Click Insert/Layer in the menu to insert a layer.
2. Insert a picture into the layer, such as a picture of an airplane. (The picture here can also be a small animated .gif image)
3. Click Window/Others/Timeline in the menu to open the Timeline window.
4. Select the layer created on the page, press and hold the small box icon in the upper left corner of the layer with the mouse, and drag the layer to the first frame of the timeline. At this time, a timeline with a length of 15 frames is automatically created.
5. Select frame 1 on the timeline, drag the layer on the page to the upper left corner of the page, where the animation starts.
6. Select frame 15 on the timeline and drag the frame to any length, such as 30 frames.
7. Select the 30th frame and drag the layer to the lower right of the page. At this time, the window displays the movement trajectory of the layer from the 1st frame to the 30th frame. (The motion is a straight line at this time)
8. You can click on the 15th frame, right-click and select "Add Keyframe". With the 15th frame selected, drag the layer to the middle and lower part of the page.
9. Check the "Autoplay" item.
11. Make a rolling bulletin board
1. Insert a layer on the page, and then set a background for the layer as the frame of the bulletin board.
2. Then insert a nested layer into the created layer and move the nested layer below the parent layer.
3. Enter text in the nested layer and center it.
4. Open the Timeline panel and add the sublayer as an object to the panel.
5. Create an upward path for the child layer and move it above the parent layer.
6. Drag the last keyframe to increase the animation time, and then check "Autoplay" and "Loop".
7. Select the parent layer and set the "overflow" property to "hidden" in its properties panel.
12. Use flash animation in the page
1. Click the Flash button in Insert to insert an animation into the page. You can also select the menu Insert/Media/Flash to complete this step.
2. Select the inserted animation and look at the properties panel. Here you can set its width and height, or change the size by dragging.
3. You can click "Play" here to preview the animation.
13. Make the inserted flash animation transparent
1. When there is already a background on the web page, or you want to insert a flash animation on a picture, and the flash animation itself also has a background color, so it will affect the appearance, then we need to Make it a transparent animation.
2. For example, insert an image on the page.
3. Insert a layer on the image and insert the required flash animation in the layer.
4. Select the flash animation and click the "Parameters" button in the properties panel.
5. Enter "wmode" in the left box of "Parameters". Enter "transparent" in the "Value" box on the right.
14. Play sound on the page
1. After completing the entire page, if you want to add background music to the page, please note that the background music is usually a *.midi file. Such sound files are very small and easy to download quickly. Other formats are not suitable. as background music.
2. In addition to all tables on the page, (note that only this item is displayed in the label selection bar at the lower left of the editing window at this time, or click on the lower left corner to ensure that this behavior is added to the entire page) . Click the "+" button on the behavior window, (or use the menu Window/Behavior to open the behavior window.)
3. Select "Play Sound" from the pop-up menu. Opens a dialog box.
4. Use "Browse" in this dialog box to select the sound you want to play and confirm.
5. At this time, the behavior panel automatically displays the event as onload and the action as playing sound. Click on this row and a button will appear in the middle. Click the button to set the event under which this sound will be played. You can choose "Show Events"/"IE5.0.
6. We commonly use Onload (when the page is loaded), OnClick (click the mouse), OnMouseOver (move the mouse over the object), OnUnload (when the page is closed), etc.
7. This behavior can also be set on pictures and text links. Before playing the sound on the text link, first add an empty link to the text, that is, select the text and enter a "#" symbol in the link box.
15. Pop-up window
1. First make a page (such as a.htm) to be displayed in a small window. Since the pop-up window cannot be too large, the content should be less.
2. Open a created page, move the cursor outside all my tables on the page, click the "+" button on the behavior window, and select "Open browser window" from the pop-up menu.
3. Enter the corresponding settings in the dialog box. The URL to be displayed is a.htm. The width and height of the window are determined by yourself, in pixels. Check all parameters in the properties as needed.
4. After completing the settings, click "OK". At this time, the behavior of opening the browsing window will be displayed in the behavior window. The trigger condition is Onload. If this is not required, set it yourself.
5. This behavior can also be set on pictures and text links. .
6. You can use this method to express welcome to the visitor when opening, website announcement, farewell when leaving, etc.
16. Control status bar information
1. Open the page and select a picture.
2. Click the "+" button on the behavior window and select Set Text/Set Status Bar Text.
3. In the "Message" column in the dialog box, enter the words that need to be displayed, such as an introduction to this picture.
4. You can set the trigger condition of the behavior to OnMouseOver (mouse moves over the object), so that when the mouse passes over this picture, relevant information will appear in the status bar.
5. If you need this message to disappear after the mouse is removed, use this behavior again, write nothing in the "Message" column, and then change the trigger condition to OnMouseOut (mouse removed).
6. This behavior can also be set on a piece of text. Or you can set it on the entire page.
17. Pop-up information
1. Open a created page and click the item in the lower left corner. Click the "+" button on the behavior window and select the "Popup Information" item from the popup menu.
2. Enter the message you want to display in the "Message" column in the settings window.
3. If the trigger condition is set to Onload (when the page is loaded), it can be used as a welcome message for opening the page. If set to OnUnload (when the page is closed), it can be used as a farewell message when the user closes the page.
4. You can also set a pop-up message on a certain paragraph of text. For example, if you don't want others to copy a piece of text, select the entire text. Note that <P> is displayed in the lower left corner, which is a paragraph.
5. Then do the same and enter statements such as copyright in the message. Just set the trigger condition to OnBeforeCopy (triggered when the right button is pressed), or OnCopy (triggered when the right button is pressed to copy).
18. Dynamic picture button
1. Prepare two pictures of the same size. The common method is to use one as a grayscale photo and one as a color photo. Or one with concave buttons and one with raised buttons.
2. Example: Insert a table with 3 rows and 1 column, and set the width to 180 pixels.
3. Place the cursor on the first line and insert a grayscale picture.
4. Enter the address to be linked in the "Link" column in the properties panel, and add a name to the image, such as tu1.
5. Click the "+" button on the behavior window and select "Swap Image" from the pop-up menu.
6. At this time, the image to be exchanged is displayed in the "Image" column, and then the exchanged image is selected in the "Temple original file is" column.
7. There are two parameters below, "Preload image" and "Restore image when mouse slides away", both of which must be selected.
8. Create two other dynamic buttons in the same way.
19. Lay out pages with frames.
Frames consist of two main parts - framesets and individual frames.
1. Click the inserted frame to display the 13 defined frame styles. Let’s take the upper-middle-lower structure as an example.
2. Click the icon of the "Top-Middle-Bottom" frame structure. At this time, two frames, upper and lower, are inserted on the page, dividing the entire page into three parts. We enter "upper" on top, "middle" in the middle, and "lower" below.
3. Save it first. Click File/Save All in the menu. At this time, first save the frameset file, and you can modify the name yourself, such as kuangjia.htm. The other pages in the frameset will then be saved separately. When saving the corresponding page, this part will be framed with a dotted line, so that the above part can be saved as shang.htm. The lower part is saved as xia.htm. The middle part is saved as zhong.htm.
4. So far, we have saved four pages, namely the frameset and the upper, middle and lower pages that make up the frameset. Therefore, in fact, this frame is composed of four pages, so using the frame will slow down the user's browsing speed.
5. Click Window/Others/Frames to open the frame panel. Click on a frame here to select it. When a frame is selected, a dotted line appears on the corresponding frame in the editing window.
6. For example: select the topframe above, and the properties of the above frame are displayed on the property panel. Also select the middle frame and the lower frame, and you can also set their properties separately.
7. In the editing window, place the mouse on the border between the two frames. The cursor will change into an up and down arrow shape. At this time, click on the border to select the entire frame set.
8. At this time, the properties of the entire frame group appear on the property panel. Here you can set whether the frame set has borders, width and color, etc. But the most important thing is that you can set the size of each frame in the frame set here.
9. Select the upper frame on the right icon of the properties panel, set its behavior to 80 pixels, and its border to 0.
10. Select the frame below and set the line height to 30 pixels and the border to 0.
11. Select the middle frame, set the row height to 1, and the unit to relative. (Relative means: the proportion of the current row relative to other rows. Setting it to 1 means occupying all the remaining space of the browsing window except the top and bottom.
12. Example: Place the cursor on topFrame, right-click and select Page Properties, and set the background color to #FF6600. Then insert/table, insert a table with 1 row and 2 columns, and the border margin is 0. Set the width of the first cell to 116 pixels, and then insert a picture. Set the horizontal alignment of the second cell to the center and the vertical alignment to the bottom, and then enter the words "Leo", "Capricorn", and "Gemini" in sequence.
13. Place the cursor in the middle frame mainFrame, right-click and select Page Properties, and set the background color to #FFFFCC. Then insert a large image.
14. Place the cursor in the bottomFrame, right-click and select Page Properties to set a background image.
15. Make three additional pages as the pages to be linked to by "Leo", "Capricorn" and "Gemini".
16. Select "Leo", set the page to be linked to in the properties, and then select "mainframe" in "Target", that is, the content will be displayed in the middle frame.
17. Also set the links for "Capricorn" and "Gemini".
20. Jump menu
1. Click Insert/Form Object/Jump Menu in the main menu. You can also use the jump menu icon in Insert/Form to bring up the jump menu setting window.
2. First, enter the words "Please select the relevant website" in the "Text" column. Then click the "+" button on the window. At this time, there is an additional option in the menu. This option has no link and is only used as a description text for the jump menu.
3. Enter the desired website in the text column, such as "Sina", and then enter the website link address http://www.sina.com.cn in the "When selecting, go to URL" column. At this time, the menu item There is another option in the column, this option corresponds to the link address of a network.
4. Use the same method to add other options and corresponding links to the menu. You can also use the "up" and "down" buttons to adjust their order.
5. Do not select the "Insert Go Button After Menu" option in the settings window. Select the item "Select the first item after changing the URL", so that after using the jump menu to go to a certain page, if you return to the jump menu page, the jump menu in the page will still display the first item by default. content.
6. Click "OK" after completing the settings.
****Because the jump menu is a form, the form (red dotted area) is actually inserted first, and then the drop-down menu is inserted into the form.
7. If you want to modify the options, you can select the drop-down menu on the page. At this time, click "List Value" in the properties panel to modify various contents.
8. When the jump menu is selected, the behavior also appears in the behavior window. Double-click the behavior to enter the settings window and reset it.
9. If the first item in "Menu Items" is a link instead of a prompt as mentioned above, then select "Insert Go Button after Menu" in "Options". Add a "Go" button.
21. Using plug-ins (Dreamweaver function extension)
1. First download the required plug-ins. The example here is Animate Browser Window. This is a plug-in that dynamically changes the size of the window. Open the Dreamweaver Extension Manager and install the downloaded plug-in.
2. Start Dreamweaver, on the created page, right-click the lower left corner <body>, then click the "+" button in the behavior window, select "Animate Browser Window", and then make the corresponding settings. Here, the height and width are set to 0 before the window is opened, and to fill the screen after opening. The trigger condition is onLoad.
22. Rolling subtitles
1. Place the cursor insertion point where you want to insert rolling subtitles.
2. Click the "Tag Selector" in the insertion panel.
3. Select the marquee tag and click the "Insert" button. Then close the "Tag Selector".
4. Switch to code view. Place the cursor insertion point between the two marquee tags.
5. Select "Window"/"Tag Inspector". Various uses of tags can be set in the Tag Inspector.
6. Click the drop-down arrow on the right side of the behavior setting item and select the movement method of the scrolling subtitle content. The meanings of the three options are: Alternate: the content rolls in opposite directions. Scroll: Content scrolls in the same direction. Slide: The content stops scrolling when it touches the subtitle border.
7. The direction attribute sets the scrolling direction of the subtitle content. The four options mean: down: downward movement. Left: Move left. Right: Move to the right. Up: upward movement.
8. The scrollamount attribute sets the speed of subtitle scrolling. Generally set to 1.
9. The scrolldelay attribute sets the pause time when the subtitle content is scrolled, in milliseconds. If you want scrolling to look smooth, the value should be as small as possible. In the example, it is set to 1 millisecond.
10. The width attribute sets the width of the rolling subtitles. This is arbitrary, for example set to 300.
11. The onMouseOver event sets the action when the mouse moves to scroll subtitles, and is often set to stop scrolling. The onMouseOut event sets the action when the mouse leaves the scrolling subtitles, and is often set to start scrolling. These two items cannot be selected and can only be entered manually. Enter "this.stop();" after onMouseOver and enter "this.start();" after onMouseOut.
12. The style attribute sets the style of the subtitle content. In the example, to set the subtitle text size, you also need to manually enter "font:12px;".
13. The loop attribute sets the number of times the subtitle content is scrolled. The default value is unlimited. "-1" is also infinite.
14. All codes: Rolling subtitle content
23. Create CSS style sheet
1. Enter some text on the web page.
2. Open the "CSS Style" panel, or use "Window/CSS Style" to open it.
3. There are four buttons at the bottom of the panel, namely Add Style, New Style, Edit Style, and Delete Style.
4. Click "New Style" to open the dialog box. Enter a name and note that there is a period before the name. For example, name it .zi (Chinese names are not acceptable). Type: Create a custom style, defined in: This document only.
5. At this time, open another dialog box, select "Type" in the category on the left, and then set the font to Song Dynasty on the right, the size to 14 pixels, and any color. Then OK.
6. Select the text on the page, and then click Style.zi in the window. At this time, the CSS style is applied to this text.
7. If you want to modify the CSS style just defined, you can click on it and then click the Edit Style button below.
24. Create a dynamic link style sheet
1. Click the "New CSS Style" dialog box, select "Only for this document" in the "Defined in" column, and select "Use CSS Selector" in the "Type" column.
2. When the style sheet type selects "Use CSS Selector", the name of the drop-down menu changes to "Selector", indicating that the input content is a CSS selector. Click the drop-down button to see the 4 states of the dynamic link.
a:link - the normal state of the hyperlink; a:visited - the visited hyperlink state.
a:hover - the state when the cursor moves to the hyperlink; a:active - the state when the hyperlink is selected.
3. Next, set these states separately. First, select a:link from the drop-down menu. Click the "OK" button to pop up the style sheet setting window. Set the style to have no underline and the color to #FF6600 (orange).
4. Use the same method to set a:visited, set it to no underline, and set the color to #FFFF00 (yellow).
5. Next set a:hover, set it to be underlined, and set the color to #FF6600 (orange).
6. There is no need to set a:active, it will automatically depend on a:hover.
7. Enter a sentence on the web page and set its link to "#" in the properties panel. That’s it.
****Note: It must be set in the order of a:link, a:visited, a:hover, and a:active, otherwise the expected effect will not occur.
If we need two or more link effects on a page, we can use the following method:
1. Click the New Style button, select "Use CSS Selector" for the style type, directly enter a.link2:link in the "Selector" column, and then set a.link2:link to red without underline.
2. Continue to define the following two styles. Enter the names directly and set them to a.link2:visited, with no underline in purple. a.link2:hover, blue and underlined.
3. At this time, there is a custom style named link2 under the "CSS Style" option.
4. Enter a paragraph in the page, add a # link to it, select the link, and then click style link2 in the style sheet window to apply this style to the link.
5. The same method can be used to create different link formats on the same page.
****In order to maintain a certain style, it is not advisable to create too many link styles on the same page.
25. External style sheet
***Apply the same style sheet in different pages.
1. Create a new style sheet, give it a name, then select "Create Custom Style" for type, and select "New Style Sheet File" for definition.
2. After confirmation, open the window to save the external style sheet. Then just save it to your local site.
3. At this time, you can see that a new style sheet file has been added in the style sheet window, and the suffix of the file is css.
4. If an internal style sheet in the current page wants to be exported to an external style sheet file for use by other pages, you can click the gray icon in the upper right corner of the style sheet window and select "Export Style Sheet". At this time, you can select the style sheet name and save as an external file.
5. When other pages need to use external style sheets, you can click the first button "Attach Style Sheet" in the style sheet window to open the window, then select the external style sheet file, select "Link" in Add As, and confirm. Can.
26. Other CSS
****The background in CSS is to set text background, table background image, etc.
****Blocks in CSS refer to setting the text spacing, alignment, subscript, superscript, arrangement, etc. of text.
****The box in CSS refers to setting the blank distance between images and text content, and the method of mixing images and text.
**** The border in CSS refers to the beautification of the table text area, buttons, etc.
****List in CSS refers to setting the style of list items. That is, an outline-like paragraph.
****Positioning in CSS refers to setting the relative and absolute positioning of images on the page.
****Extension in CSS, the cursor can be set to the cursor style, which can be set to hand (hand type), crosshair (cross type), text ("I" type), wait (waiting type), default ( Default type), help (help type), and arrow types in various directions.
****Extensions in CSS, the filters in it, can be used to create CSS filter effects, that is, to process the transparency, glow, etc. of images. However, the effect is not very obvious. It is better to use software that specializes in image processing.
27. Create online album
1. First of all, install FireworksmX software.
2. Machining the photos that need to be placed on the Internet, process them into the same size, and put them in a folder.
3. Click the command/create a website album in the menu and open the setting window.
4. Enter album title, sub -label information, other information (can be modified in the future). "Source image folder", select the folder that just saved the photo.
5. "target folder", click the "Browse" button to select the current site directory. (The upcoming photos are stored in the site)
6. One item of "shrinking the diagram" can be selected as needed, "Display file name", and select the file name of each picture in the generated album.
7. The "column" is a picture displayed in each line. The default is 5. You can change it yourself.
8. The following two "formats" are generally selected "high quality".
9. Select "Build a Guide Page for each picture". Just make sure.
28. Customized web transition function
****** Web transition refers to different refresh effects presented by the page when the viewer enters or leaves the webpage, such as rolling and shutter. The webpage will look more dynamic, but it is also necessary to pay attention to it, otherwise the changes that are too fancy will easily cause the villagers' resentment. step:
1. Open a page, click the insert/file header/meta in the menu, and the Meta dialog box will pop up.
2. Select the HTTP-EQUIVALENT option in the drop-down list of the attribute options in the dialog box. Type the page-ins in the value of the value, indicating that there is a web transition effect when entering the webpage.
3. Type Revealtrans (duration = 4, transition = 2) in the contents of the content, duration = 4 indicates that the duration of the web transition effect is 4 seconds, and transition represents the transition effect method, which indicates a circular contraction when the value is 2.
4. After entering, click OK, save the disk. In this way, when we click a hyperlink to enter this page, we can see the effect.
5. There are more than 20 more effects for you to choose. Just change the value of the transition to the corresponding effect
.
Box -shaped contraction 0 dissolved 12
Box -shaped expansion of about 1 to shrink to the central part 13
Round contraction 2 to the middle to the left and right 14
Round Expand 3 contracted up and down to the central part 15
Wipe upward 4 in the middle of the part of the center 16
Wipe down the 5 staircase to the left and down 17
Eliminate the 6 staircase to the left to the top of the left 18
Right to the right 7 staircases to the bottom right 19
Vertical louver 8 staircase 8 to the right up to 20
Horizontal Clover 9 Random horizontal line 21
Horizontal chessboard 10 random vertical line 22
Vertical checkerboard 11 random 23
twenty -nine, the application of the library
**** some content in the website needs to be repeatedly used, such as a website icon made by yourself. At this time, you can save this component in the Curry and call it at any time.
1. Open a page and select a component that needs to be saved, such as a icon.
2. Click the menu window/resource to open the resource window. Then select the button of the bottom book sample to open the panel.
3. Click the new button below to save the icon you just selected to the Curry. At this time, you can also name it.
4. When applying the content of the library on a new page, open the library panel, select the icon you need to use, and then click "Insert" below.
30. Use the template to quickly complete the site (homepage or a certain page)
1. First plan the website you want to make, and design the contents of its various neck links. Such as my website:
The links on the homepage include: web version, animation version, please leave a message, about me, contact me, and the wish bottle page version of the web version are: webmaster profile ¦ ¦ ¦ ¦ ¦ ¦ ¦ ¦ ¦ ¦ ¦ ¦ Picking Beibei 人 人 ¦ ¦ Let me let me a letter ¦ ¦ ¦ ¦ ¦ ¦ ¦ ¦ ¦ ¦
The links on the animated version are the same as the web version.
The following links to various articles or courseware pages. For example, the link to "Classroom Search" is all pages of the title of the lesson plan, and then the title of each lesson plans is linked to the page of the lesson plan. Others.
2. Download the web template that is more suitable for your own planning and favorite. (The template website is better, such as: http://www.mbsky.com ). General It is usually a folder named Images, that is, what we call is used to place pictures.
3. Define the sites, and then copy these two files (clips) to the site folder.
4. Double -click index.htm file, that is, the editing status of the homepage. Then you can modify this page for it to meet your needs. This can complete the homepage.
Thirty -one, save existing web pages as template
**** when there are a large number of pages that appear repeated in a website. (Before new and use templates, you must define a good site)
1. Select a certain page, click the file/store as a template, and save the current page into a template. At this time, the "Save template" window was opened, named the template, and then saved.
2. At this time, you can find a folder called Templates in the site, which has a template we save in this directory. Its extension is .dwt
3. This template is currently unable to modify when it is used. Therefore, the editing area of the template must be set.
4. For example, in the current template page, you need to edit the middle part of the page, so that you can add content when using the template. Select the table cell cell in the middle of the page (click the Ctrl key to click on the cell grid), and click the insert/template object/edit area in the main menu. At this time, the dialog box will be opened, named the template in it, and then determined.
5. At this time, the editable area defined is frame by light blue lines, and the name of the area in the upper left corner. Save and close the template file.
6. Click the file/newly built in the main menu, click the "template" option above in the new page window.
7. At this time, the currently defined site is listed in the "Template for" column. Select a certain site. In the middle of the window, the template file owns by the site. Select a template and preview the template in the "Preview" column. Then click the "Create" button to create a new page.
8. In the new page that appears, other parts cannot be modified except for editing areas.
32. Upload your website
1. Apply for website space and upload it to the Internet. At present, there is basically no free space. Free space needs to be placed in advertisements, or applying for a charging space. It will provide a trial period of about ten days. It can be used as a website test.
2. After clicking the application, a form of registration will appear. Generally, the user name, password, mailbox, contact phone number, province, homepage name, homepage category, homepage profile, etc.
3. After filling in all, you can get the following: ① Username (just filled in) ② Password (just fill in) ③ FTP Upload address ④ homepage address (sometimes the above items are sent to the filling in the mailbox)
4. Download and install FTP upload software, you can use Cuteftp (Kunshan window/software can be downloaded, free)
5. Open the Cuteftp software and click the file/site manager in the main menu.
6. Fill in the FTP upload address, FTP site user name, FTP site password in the open dialog box, and then click on to connect to the site server. (Automatically connect to the second time, no need to fill in again)
7. After the connection is connected, the frame appears on the page. The left side is the file on the local computer, and the right side is a remote computer. As long as the files on the left (that is, the website files that are done) are dragged one by one to the right, and the upload is completed.
33. Promote
how your website lets the website address let others know, there are two methods:
1. Use special software to log in to the major search engines.
2. Log in manually. If you open Baidu ( www.baidu.com ), there is a link "Website login" below. After clicking, you will be required to fill in the website address, name, content, etc., and then you will be included in Baidu's search engine, so that others can search for search. Go to your website. Other websites log in to the same reason.