The ultimate course of Dreamweaver erection website

dreamweaver| Tutorial

First, define the site

1, create a folder in any root directory (we assume that this is e-disk), such as the name MyWeb.
Note: The documents used in the website should be in English name.
2, open Dreamweaver, select "Site-new site", open the dialog box. In the site name, enter the name of the Web site (available in Chinese), and in the local root folder, select the folder you just created (E:web). Then make sure you can.
Note: Open Dreamweaver again, will automatically find the site just set up. If you have more than one site, you can select it in the menu site-open site.

Second, create the page

1, in the local folder E:\MyWeb the space below, press the right key to select "New file", so that a page is built, the default file name is untitled.htm. HTM indicates that this Web page file is a static HTML file. Give it a name for index.htm.
The name of the first page of the website is usually index.htm or index.html. The names of other pages can be taken by themselves.
2. Double-click index.htm to enter the edit status of the page. Enter the page name in the title space, right-click the page property, and open the Page Properties window. Here you can set the site's title, background color or back image, hyperlink color (generally by default), and others remain the default.
3. At this point the cursor is located in the upper left corner, you can enter a sentence, such as "Welcome to my home page." Select text, use menu window/properties to open the property panel, select text Size 6, center the text, and then use several carriage returns to the middle of the page before the text.
4. To choose a font, select the last item in the font: Edit the Font list. Then in the dialog box, select the + number, and then in the "Available fonts" column you need to add a font to the list of fonts, click on the middle button to join.
The most commonly used on Web pages is italicized word. Do not add special fonts to the list because they are not visible when they are not installed on the computer. If necessary, make a picture and use it again.
The way to enter a space on a Web page is to adjust the input method to full angle.
The way to change lines on a Web page is: Shift+enter. Press ENTER only to change the paragraph.

Third, add a picture to the page

1, in the local folder E:\MyWeb in the space below, press the right key to select "New Folder", so that a folder, with it to put pictures, can be renamed Tu or pic or images can be.
2, with the Menu "window/Object" Open the object panel, click "Insert Image", in the dialog box to select the picture to insert. If a dialog box appears: "Would you like to copy the file into the root folder?" , you must select Yes, and then save it to a newly-built folder.
3, select the picture, open the property panel, you can name the picture above, reset the picture high, wide, stall the point on the picture angle can be changed size. Hold down the SHIFT key and drag the point on the corner to keep the picture wide and high in proportion to stretch. To restore the original size, click the Reset Size button in the lower-right corner.
4, "link" can enter the address directly here. "Substitution" is a description of the picture, that is, the mouse points to the text displayed by the picture, the border is the picture border width, alignment is the alignment.

Four, add Super link

1, add links for text.
For example, enter "My article" on the page, and then select it, open the Properties panel, and in the link pane, select the page to which you want to link. Next to the "target" we usually use the new window that is open by self instead of the open window, or select blank to open a new window.
2. Add links for pictures
Links to the above text similarly, insert a picture, and then select it in the links in the Properties panel.
A picture can create different multiple links. The method is as follows:
In the property panel of the "map" under a number of graphics, such as Click on a square, the cursor into a cross, in the picture to draw a blue rectangular hot area, at this time in the property panel can be set for this hot zone address, the mouse point will be displayed. Again, set up a hot area with a circle, and then set up another link for the picture.
3, add e-mail links
Select the text or picture you want to add an e-mail link to, open the Properties panel, and enter the email address in the link pane. The format is as follows: mailto: email address. Note that the middle is not blank.
4, if the link to the browser can not open the file, such as EXE, zip and other files, then the viewer clicks on this link, it will achieve the file download, or online playback function.

V. Use of Forms

1, click Insert/table, open the table panel to set. Rows, columns, widths, borders, and so on, cell padding is the distance from the inside of the cell to the content, and cell spacing is the distance between cells, in pixels.
2, after inserting the table, click on the border of the table, you can select the whole table. You can then make various settings in the following property panel.
3. Move the cursor to one of the cells, and the property panel that you see at this point is the cell's property panel. You can also perform various operations on cells. such as background color, background map, border, merging, split, and so on.

Vi. other actions on the table

The principle of making a thin table:
1. Select the entire table and set its background to black (the color is the color of the form line).
2. Select all cells and set their background to white.

Two auto format tables
1, first make a table, and then select.
2. Select the command/Format form in the menu. That is, you can select some of the preset table styles.

31 Pixel split Bar
1, insert a 1 row 1 columns, a width of 200 pixels, border margins are 0 table.
2, select the table, set the table height of 1 pixels, and set a background color (that is, the line color required).
3, switch to the Code and Design window, the code <td> Delete.

Building a complete page with a table

Top of a Web page (generally include icons, ads, navigation menus)
1, create a 1 row 2 columns, a width of 760 pixels, borders and margins are 0 tables.
2, select the table, set the arrangement is centered alignment, background color for #3366cc.
3, put the cursor in the left cell, set its horizontal alignment to the left, vertically aligned to the top, and then insert an image, generally inserted in this is the site's icon, that is, logo.
4, put the cursor in the right cell, set its width to 500, horizontally arranged for the center, vertical alignment for the middle, and then insert the image, is generally web ads, that is, banner.
5. Place the cursor after the table you just completed, insert/table, create a 1 row 1 column, a table with a width of 760 pixels, a border and a margin of 0.
6, select the newly created table, the arrangement is centered alignment, background color for #005173.
7. Insert multiple images in the table as navigation bar menu.

Two pages in the middle (left column list, middle Web news, right column list)
1, after the navigation bar table, insert/table, create a 1 row 3 columns, 760 pixels wide, border and margin are 0 table. The arrangement is centered and the background color is #fffffff.
2, place the cursor in the left cell, set its width to 18%, align horizontally to the center, align vertically to the top, and insert an image to insert a navigation bar.
3, place the cursor after the picture that you just inserted, insert/table, insert a table with 12 rows 1 columns and a width of 90%. Sets its cell spacing to 1, and the background color is #cccccc.
4, place the cursor in the first cell of the table, set its height to 20, and the background color to #ffffff. Inserts/images, inserts a small point in front of the navigation text. Also set the other 11 cells so that the list of columns on the left is complete.
5, place the cursor in the middle cell of the main table, set its width to 66%, align horizontally to the center, align vertically to the top, and then insert/image to insert a navigation bar.
6, after placing the cursor in the image, insert/table, insert a table with 4 rows 1 columns and a width of 95%. Sets its cell spacing to 1, and the background color is #cccccc.
7, place the cursor in the first cell of the table, drag the mouse, select all 4 cells, set the height to 60, and the background color to #ffffff.
8, place the cursor in the cell to the right of the main table, set its width to 16%, align horizontally to the center, align vertically to the top, insert/image, insert a navigation bar.
9, after placing the cursor in the image, insert/table, insert a column of 7 rows, a table width of 90%. Set its spacing to 1 and the background color to #cccccc.
10, hold down the CTRL key, with the mouse click on the table just inserted in the 1th, 3, 5, 7 cells, and then set their height of 55, background color for #ffffff.
11, select the 2nd, 4, 6 cell, set its height to 6, the background color is #ffffff.
12, switch to the Source code window to delete the space symbol "" in the 2nd, 4, 6 cells.

Three pages at the bottom (generally including copyright information and other related content)
1, after placing the cursor in the main table, insert/table, create a 2 row 2 columns, width of 760 pixels, borders and margins are 0 tables.
2, select the table, set the arrangement is centered alignment, background color for #3366cc.
3. Place the cursor in the left cell of the 1th row of the table, set its width to 50%, level by default, arrange vertically as the baseline, #ffffff the background color, and then enter the copyright information, the content is casual.
4. Place the cursor in the right cell of the 1th row of the table, insert/image, insert a fillet image, and then enter the email message after it, setting its size and color to 1 and #ffffff.
5, insert/Form object/Text field, insert a text field, width can be arbitrary.
6, insert/image, insert a go image.
7, set page properties. Click on the menu to modify/page properties, enter the title in the title column, select the background image, and set the top border to 0.
You can also speed up the time the browser reads pages by putting the entire page in a separate table. Because the browser does not display the content until it has finished reading the entire table, it is best not to have the box in the entire table.

Eight, use the layout table to build the complete page

1, click Insert/Layout, inside the Layout view button, switch to Layout view state (default is Standard view). You can also use the view/table View/Layout view in the menu to enter.
2. Click the Draw Layout Table button First, and then create a layout table like a drawing in the page.
3, like the previous example, first draw the top of the page, then the middle, and then the big table at the bottom.
4, click the Draw Layout Cell button again, and then draw the layout cell in the layout table that you have already drawn.
5, return to the standard view, in the table has been divided into good, and then insert nested small table, the page is further refined, you can complete the design of the entire page.
Note that the entire page is placed in a large layout table, because such a web browsing speed will be slow. You should divide several layout tables according to the page layout and content, and then insert the layout cells separately.

Nine, the use of the layer

1, click Insert/Layer. You can also click on the icon and then drag to create a layer.
3. Select the layer you created and look at the properties panel. The layer number and label all use the default. "Layer numbering" is needed for programming, and we don't normally use it now. "Up" is the distance from the top edge of the page, and "left" is the distance from the left edge. The "Z axis" is the order of the layers, and the numbers are stacked on top of the smaller numbers.
If you do not set the color, the layer is transparent.
4, the point of the middle-left corner of the small box can be arbitrarily dragged layer, size can also be adjusted.
5, "Overflow" in the column, when the text is more than the size of the layer, the visible (the excess part of the display), hidden (more than part of the hidden), scroll (regardless of whether there is more than, show the scroll bar), auto (when there is more than the scroll bar)
6, click the menu window/other/layer, the Layer Management window will appear. You can modify the name of the layer and the Z-axis value, or you can click the eye icon to make the layer visible or invisible. There is also an option to prevent overlapping.
7, the level of alignment. Hold down the SHIFT key while selecting several layers. Then use the options here with the Modify/align.
8, nesting layer. ⑴ first inserts a layer into the document. ⑵ puts the cursor in the layer, and then continues to insert a layer, and the nesting layer is obtained. The ⑶ inside is called the child layer, outside the parent layer. Their z-axis order is the same. When you drag the parent layer, the children also move relative to each other. When you move a child layer, the parent layer does not move with it.

Learn about the timeline

1. Click on the Insert/layer in the menu to insert a layer.
2, insert a picture in the layer, such as a picture of the plane. (The picture here can also be a small animated. gif image)
3, click on the menu window/other/timeline, open the Timeline window.
4, select the layer created on the page, use the mouse to hold down the top left corner of the small box icon, drag and drop the layer into the timeline of the 1th frame. The timeline is automatically created with a length of 15 frames.
5. Select Frame 1th on the timeline, drag the layer in the page to the top left corner of the page, where the animation begins.
6, select the timeline on the 15th frame, you can drag the frame to any length, such as 30 frames.
7, select the 30th frame, drag and drop the layer to the lower right of the page, the window shows the layer from the 1th frame to the 30th motion trajectory. (At this point the motion is straight line)
8, you can point to the 15th frame, the right to select "Add key Frame", in the selected frame 15th, drag the layer to the bottom of the page.
9, check the "Auto Play" item.

Xi. production of Rolling bulletin board

1, insert a layer on the page, then set a background for the layer, as a bulletin board framework.
2, then insert the nesting layer in the created layer and move the nesting layer below the parent layer.
3. Enter text in the nesting layer and align it in the center.
4. Open the Timeline panel and add the child layer as an object to the panel.
5. Create an upward-moving path for the child layer and move it above the parent layer.
6, drag the last key frame, increase animation time, and then check the "AutoPlay" and "loop" two.
7. Select the parent layer and set the overflow property to "hidden" in its properties panel.

12, the use of Flash animation in the page

1, click the Insert in the Flash button, you can insert an animation for the page. You can also select Menu inserts/Media/flash to complete this step.
2, select the inserted animation, look at the property panel. You can set it wide or high, or you can resize it by dragging it.
3, you can click "Play" here to preview the animation.

13, let the Flash animation of the insertion become transparent

1, when the Web page already has a background, or want to insert flash animation in a picture, and flash animation itself has a background color, so will affect the beauty, then we want to make it transparent animation.
2. Insert a picture on the page.
3, insert a layer on the image, insert a good flash animation in the layer.
4, select the Flash animation, in the property panel, click the "Parameters" button.
5, enter "Wmode" on the left of "parameter". Enter "Transparent" on the right "value".

14, play the sound in the page

1, after completing the full page, if you want to add background music for the page, note that background music is generally *.midi file, such a sound file is very small, easy to download quickly, other formats are not suitable for the background music.
2. In addition to all forms in the page, note that the tab selection bar in the lower left of the edit window shows only <body>, or <body> in 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, choose "Play sound" from the pop-up menu. Opens a dialog box.
4, in this dialog box with "Browse" to select the sound to play, and determine.
5, then the behavior panel automatically shows the OnLoad event, the action for playing sound. Click on this line and a button appears in the middle. Click the button to set the sound to play under what event. You can select "Show Events"/"IE5.0."
6, we commonly used such as onload (when the page load), OnClick (mouse click), OnMouseOver (mouse to move to the object), OnUnload (when the page is closed), and so on.
7, this behavior can also be set on the picture, text links. Before playing a sound on a text link, add an empty link to the text, which is the selected text, and enter a "#" symbol in the link.

Pop-up window

1, first make a ready in the small window to display the page (such as a.htm), because this pop-up window can not be too large, so the content is less.
2, open a made a good page, the cursor moved to the page in all my forms, click on the behavior window of the "+" button, from the pop-up menu to choose "Open browser window" one.
3, in the dialog box to enter the appropriate settings. The URL to display is a.htm, the window width and height are set by themselves, in pixels. Each parameter in the attribute needs to be ticked.
4, after setting up, point "OK". At this point the Behavior window will show open browsing window This behavior, the trigger condition for onload, if not to this, set their own.
5, this behavior can also be set on the picture, text links.
6, you can use this method to express the visitors open the Welcome, website announcements, leaving the farewell language.

16, control the status bar information

1, open the page, select a picture.
2, click on the behavior window "+" button, select the Set text/set status bar text.
3, in the dialog box in the "Message" column, input needs to display words, such as the introduction of this picture.
4, can set the behavior of the trigger conditions for onmouseover (mouse to move to the object), so when the mouse passed this picture, the status bar will appear related information.
5, if you need the mouse to move away, this information disappears, then use this behavior again, in the "message" in the column does not write anything, and then the trigger condition to onmouseout (mouse move away).
6. You can also set the behavior on a piece of text. Or it can be set on the entire page.

17, pop-up information

1, open a good page, the lower left corner <body>. Click the "+" button on the behavior window to select "Pop-up info" from the pop-up menu.
2, in the Settings window "message" In the column to enter the message you want to display.
3. The trigger condition is set to onload (when the page is loaded), it can be used as a welcome message to open 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, also can be in a paragraph of text to set up pop-up information. For example, a piece of text do not want to copy, select the entire paragraph, note that the lower left corner of the display 〈p〉, that is, paragraph.
5, and then the same operation, the message can be entered a statement such as copyright. Just set the trigger condition to be onbeforecopy (triggered when the right button is pressed), or oncopy (trigger when you select Copy when you right-click).

18. Dynamic Picture button

1, prepared two pictures of the same size, commonly used method is such as a grayscale photo, a color photo. or a button-sunken style, one is the button raised style.
2. Example: Insert a table with 3 rows and 1 columns and set the width to 180 pixels.
3, put the cursor in the first row, insert a picture of gray.
4, in the property panel "link" in the column to enter the address you want to link, and to add a name to the picture, such as TU1.
5. Click the "+" button on the behavior window and choose "Swap image" from the pop-up menu.
6, at this time in the "image" column has been shown to exchange images, and then in the "Temple of the original file for" a column to choose a good exchange after the picture.
7, the following two parameters, "pre-loading image" and "restore the image when the mouse is off", to select.
8, the same method to create two other dynamic buttons.

19. Layout page with frame

The framework consists of two main parts--a frameset and a single frame.
1. Click on the frame in the insert, which shows the style of the 13 frames that have been defined. Our upper-middle-lower structure is an example.
2, click on the "top-middle-bottom" frame structure of the icon, this time on the page insert up and down two frames, the entire page divided into 3 parts. We enter "Above" on the above, enter "medium" in the middle, enter "below" below.
3, save first. Click on the file in the menu/save all. This is the first time you save the frameset file, you can modify your name, such as Kuangjia.htm. The other pages in the frameset are then saved separately. When you save the corresponding page, the section is dotted with a dashed box, which saves the above section as a shang.htm. The following section is saved as xia.htm. The middle section is saved as a zhong.htm.
4. At this point, we have saved four pages, namely the frameset, and the top, middle, and bottom three pages that make up the frameset. So, in fact, this framework is composed of four of pages, so using the framework will reduce the speed of a little user browsing.
5, click the window/other/frame, open the frame of the panel. Click a frame here to select the frame. When the frame is selected, the corresponding frame in the editing window appears dashed.
6, such as: Select the above Topframe, at this time the property panel shows the above frame properties. Also select the middle frame and the frame below, or you can set their properties individually.
7, in the editing window, put the mouse over the border between the two frames, the cursor will become up and down arrow, click on the border, select the entire frameset.
8. The properties of the entire frame group appear on the property panel at this time. Here you can set whether the frameset has borders, widths, colors, and so on. But the most important thing is that you can set the size of each frame in the frameset here.
9, in the property panel on the right side of the icon to select the above frame, set its behavior 80 pixels, the border is 0.
10, select the frame below, set the row height to 30 pixels, the border is 0.
11, select the middle frame, set row height to 1, the unit is relative. (The relative meaning is the proportion of the current row relative to the other rows.) Set to 1 means to occupy the remaining space of all browsing windows except the top and bottom.
12, Example: Put the cursor on the above frame topframe, right-click the page properties, set background color for #ff6600. Then insert/table, insert a table with 1 rows and 2 columns with a border margin of 0. Set the width of cell 1th to 116 pixels, and then insert a picture. Set the 2nd cell to the horizontal alignment centered, the vertical arrangement to the bottom, and then enter the words "Leo", "Capricorn", "Gemini".
13. Place the cursor in the middle frame mainframe, right-click the page property and set the background color to #ffffcc. Then insert a large image.
14, put the cursor in the frame bottomframe below, right-click the page properties, set a background image.
15, another three pages, as a "Leo", "Magic Scorpion", "Gemini" to link the page.
16, select "Leo", in the attribute for it to set the page to link, and then in the "target" select "mainframe", that is, the content in the middle of that frame display.
17, the same set "Magic Scorpion", "Gemini" link.

20, Jump Menu

1, click on the main Menu insert/Form object/Jump menu, you can also use the Insert/form, in the Jump menu icon, to bring up the Jump Menu Settings window.
2, first in the "text" in the column to enter the "Please select the relevant site" words. Then click the "+" button on the window. There is an extra option in the menu, this option has no links, only as a jump menu description text.
3, in the text column to enter the required web site, such as "Sina", and then "Select, go to the URL" column to enter the site link address http://www.sina.com.cn, at this time, the menu item in a column with an extra option, this option corresponds to a network link address.
4, use the same method, add some other options and corresponding links in the menu. You can also adjust their order by using the buttons "up" and "down".
5, set the window "After the menu insert Go to button" one of the first choice. Select the first item after changing the URL so that when you use the Jump menu to a page, if you return to the Jump Menu page, the Jump menu on the page defaults to the 1th item.
6, set up after the click "OK" can be.
Because a jump menu is a form, you actually insert the form (the red dotted area), and then insert the Drop-down menu in the form.
7, want to modify the options, you can select the page on the Bar menu, click on the property panel in the "list value" to modify the contents of the.

8. When the Jump menu is selected, behavior also occurs in the Behavior window. Double-click the behavior, or you can go to the Settings window and you can set it again.
9, if the "menu item" in the first item is a link, rather than the above mentioned a hint, then select "Option" in the menu after the insert to go button. Add a "Go" button.

21, the use of Plug-ins (Dreamweaver function Expansion)

1, first download a good need for plug-ins, here for example with the animate Browser Window. This is a plug-in that dynamically changes the size of the window. Open Dreamweaver Extension Manager and install the downloaded plugin.
2, start Dreamweaver, in the Good page, right click on the lower left corner 〈body>, and then click the Behavior window in the "+" button, in which select "Animate Browser window", and then make the appropriate settings. This set the window to open before the high width is 0, open to fill the screen. The trigger condition is onload.

22, scrolling subtitles

1. Place the cursor insertion point where you want to insert a scrolling marquee.
2, click the Insert Panel "tag Selector".
3, select Marquee Label, click the "Insert" button. Then close the label selector.
4, switch to Code view. Place the cursor insertion point between the two marquee tabs.
5. Select "Window"/"tag checker". You can set the various uses of labels in the tag inspector.
6, click on the behavior settings to the right of the Drop-down arrow, select the scrolling marquee content of the movement. Three of these options mean: alternate: The content rolls around in the opposite two directions. Scroll: Content scrolls in the same direction. Slide: The content stops scrolling when it touches the marquee border.
7, the Direction property sets the scrolling direction of the caption content. The four options mean: down: Move Down. Left: Move to the ieft. Right: Move to the left. Up: Move up.
8, the ScrollAmount property sets the speed of the caption scrolling. Generally set to 1.
9. The Scrolldelay property sets the time, in milliseconds, to pause when the caption content scrolls. If you want scrolling to look smooth, the value should be as small as possible. The instance is set to 1 milliseconds.
10. The Width property sets the length of the scrolling marquee. This arbitrary, for example, is set to 300.
11, onmouseover events set the mouse to move to the scrolling marquee action, often set to stop scrolling. The onmouseout event sets the action when the mouse leaves a scrolling marquee, often set to start scrolling. The two items are not selectable and can only be entered manually. After the onmouseover, enter "This.stop ();" After onmouseout enter "This.start ();"
12, Style property to set the styles of the caption content. The text size of the caption is set in the instance, and the font:12px is also entered manually.
13, the Loop property sets the number of marquee content scrolling, the default value is infinite. "-1" is also infinite.
14, all code: <marquee behavior= "scroll" direction= "left" width= "" loop= "-1" scrollamount= "1" scrolldelay= "1" style= " font:12px; "> Scrolling marquee content </marquee>

23. Create CSS style sheet

1, enter some text on the webpage.
2, open the CSS styles panel, you can also use the "window/css style" open.
3, there are four buttons below the panel, respectively, the additional style, new style, edit style, delete style.
4, click "New Style", open the dialog box. Enter a name and note that there is a dot before the name. If it is named. Zi (not in Chinese name). Type: Create custom style, defined in: only for this document.
5. Open a dialog box at this time, select "type" in the category on the left, and then set the font to the right of the song, size 14 pixels, color arbitrary. Then determine.
6, select the text on the page, and then click the style in the window. Zi. This text now has a CSS style applied to it.
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, in the "Definition in" column select "Only the document", in the "Type" column select "Use CSS selector."
2. When the style sheet type chooses "Use CSS selector", the Drop-down menu name becomes "selector", which means that the input is a CSS selector, and click the Drop-down button to see the 4 states of the dynamic link.
a:link--the normal state of the hyperlink; a:visited--visited the hyperlink state.
The state of the a:hover--when the cursor is moved over the hyperlink; a:active--Select the status of the hyperlink.
3, next to these several states are set, first from the Drop-down menu to select A:link, click the "OK" button pop-up style table Settings window, set the style without underlining, color for #ff6600 (orange).
4, with the same method set a:visited, set it to no underline, the color is #ffff00 (yellow).
5, Next set a:hover, set it to be underlined, the color is #ff6600 (orange).
6, a:active without setting, it will automatically according to A:hover.
7, enter a word on the page, in the property panel set its link to "#". Can.
Note: You must set this in the order of A:link, a:visited, a:hover, a:active, otherwise the expected effect will not occur.

If we need two or more link effects on a page, you can use the following methods:
1, click the new Style button, style type select "Use CSS selector", in the "selector" column, directly enter A.link2:link, and then set A.link2:link to red without underlining.
2, continue to define the following two styles. Names are entered directly, set them to a.link2:visited, purple without underlining. A.link2:hover, Blue is underlined.
3, at this time in the "CSS style" option under the more a name called LINK2 custom style.
4, enter a paragraph in the page, add a # link for it, select the link, and then click the Style Sheet window in the style link2, apply this style to the link.
5. The same method can be used to make different link formats on the same page.
To maintain a style, it is not advisable to create too many link styles on the same page.

25. External style sheet

Apply the same style sheet to different pages.
1, new style sheet, name, and then type select "Create custom Style", defined in the Select "New style sheet file."
2, after the confirmation, open the window to save the external style sheet. Then save it to the local site.
3. At this point, you can see a new style sheet file in the Stylesheet window, with the suffix named CSS
4. If an internal style sheet in the current page is to be exported as an external style sheet file for use by other pages, click the gray icon in the upper-right corner of the Stylesheet window and select Export style sheet, where you can name and save the style as an external file.
5, when other pages need to use an external style sheet, you can point to the first button in the Style sheet window "Additional style sheet", open the window, and then select an external style sheet file, in the Add to choose "link", OK.

26, other CSS

CSS in the background, is to set the text background, table background map and so on.
CSS in the block, is to set the text spacing, alignment, subscript, superscript, arrange the way and so on.
The box in the CSS is the way to set the blank distance between the picture and the text content, as well as the graphic mixed line.
CSS inside the border, refers to the setting of the table text area, buttons and so on landscaping.
The list in CSS is the style of setting list items. That kind of outline of the sentence.
CSS positioning, refers to the setting of the page in the relative and absolute positioning of the picture.
CSS extension, where the cursor, you can set the style of the cursor, can be set to hand (hand), crosshair (cross), Text ("I" type), wait (waiting type), default (Defaults), Help (helper type), There are also arrow types in various directions.
CSS extension, which filters, can be used to do CSS filter special effects, which are used to process the image of transparent, luminous and so on. But the effect is not very obvious, or with specialized processing picture software to complete better.

27. Create an online album

1, the first to install a good fireworksmx software.
2, the processing of the need to put online photos, processing them into the same size, put in a folder.
3, click the command in the menu/create the site album, Open the Settings window.
4, the input album title, Vice-standard information, other information (can be modified later). Source image folder, select the folder where you just saved the photo.
5, the target folder, click the Browse button to select the current site directory. (All photos will be saved to the site)
6, "Thumbnail size", you can select, as needed, "show file Name" item, select the file name that will display each picture in the generated album.
7, "column" is the number of pictures displayed in each row, the default is 5, you can change your own.
8, the following two "format" generally choose "high quality."
9. Select the "Create a navigation page for each picture" item. sure you can.

28. Custom Web page transition function

Web page transition means that when the viewer enters or leaves the page, the page renders a different refresh effect, such as scrolling, blinds and so on. Web pages will look more dynamic, but also pay attention to enough, otherwise too fancy changes can easily arouse the viewers disgust. Steps:
1, open a page, click on the menu insert/file header tag/meta, will pop up Meta dialog box.
2. Select the Http-equivalent option in the Drop-down list of the property options in the dialog box, and type Page-enter in the value grid to indicate a page transition effect when entering the page.
3, in the content of a box type Revealtrans (duration=4,transition=2), duration=4 means that the duration of the Web page transition effect is 4 seconds, Transition represents the transition effect way, the value of 2 indicates a circular contraction.
4, after the input after the click OK, save disk. This way we can see the effect when we click on a hyperlink to enter this page.
5, there are more than 20 kinds of effect for you to choose, as long as the value of the transition to the corresponding effect of the code can be, the specific effects and settings shown in the following table

Effect Transition effect Transition
box-like contraction 0 dissolve 12
Box Expansion 1 to the middle contraction 13
Round contraction 2 center to left and right expand 14
Circular expansion 3 down to middle contraction 15
Erase up to 4 in the middle to expand 16
Wipe down the 5 ladder to the left and the bottom to expand 17
6 Steps to the erase, 18 to the left.
Wipe Right 7 step down, expand 19 to the right.
Vertical Blinds 8 Ladder-shaped to the right, expand 20
Horizontal Blinds 9 Random horizontal line 21
Horizontal checkerboard 10 Random vertical line 22
Vertical Checkerboard 11 Random 23

29, the application of the library

Some of the content of the site needs to be reused, such as the creation of a website icon, and so on, at this time to save this component in the library, you can call at any time.
1, open a page, select the components that need to be saved, such as an icon.
2, click the Menu window/resources, open the Resource window. Then select the bottom of the book-like button, open the Library panel.
3, click on the New button below, will just select the icon saved to the library, at this time can also give it a name.
4, in a new page to apply the contents of the library, open the Library panel, select the desired icon, and then click the "Insert" below.

30, with the template to quickly complete the site (home or a page inside)

1, first plan their own want to make the site, to its various links to the content of the design is good. As My site:
The links on the home page are: Web version, animated version, please leave a message, about me, contact me, wishing bottle
The links on the Web page are: Webmaster Introduction ¦¦ Teaching research paper ¦¦ Classroom Search for true ¦¦ original courseware ¦¦ Xinhai ¦¦ photos life ¦¦ give me a letter ¦¦ Yanguoliusheng ¦
The link on the animated version is the same as the page version.
The following links to a variety of articles or courseware pages. such as "classroom Search for the truth" link to all the title of the lesson plans, and then by the title of each lesson, and then link to put this lesson plan page. Other empathy.
2, download good more suitable for their own planning, like the page template, (template site is better, such as:http://www.mbsky.com Generally, it includes two files: one is index.htm, and the other is a folder named images, which we call to place the picture.
3, define a good site, and then copy the two files (folders) to the site folder.
4, double-click the index.htm file, that is, into the first page of the editing status. You can then modify the page so that it fits your needs. So you can complete the home page.

31, Save the existing Web page as a template

Used when there is a large number of recurring pages in a Web site. (Be sure to define the site before you create and use the template.)
1, select a page, click the file/Save as a template, save the current page as a template. The Save Templates window opens, names the template, and then saves it.
2, at this point can be found in the site automatically created a folder named templates, in the directory contains the template we saved. Whose extension is. dwt
3, this template is currently in use, can not be modified. So you want to set the editable region of the template.
4, for example, in the current template page, you need to make the middle part of the page editable, so you can use the template to add content. Select the table cell in the middle of the page (hold down the CTRL key to click in the cell) and tap the Insert/Template object/editable region in the main menu. The dialog box opens, names the template, and then determines.
5. The editable region defined at this time is a light blue Line box with the name of the area in the upper-left corner. Save and close the template file.
6, click on the main menu file/new, in the New page window click on the top of the "template" option.
7, at this time in the "template for" column lists the currently defined site, select a site, in the middle of the window in the column shows the template file owned by the site. Select a template, and you can preview the template in the Preview column. Then click the Create button and a new page is created.
8, in the new page appears, in addition to the editable region, the other parts can not be modified.

32, upload their own website

1, apply for Web site space, and then upload it to the Internet. There is basically no free space, free space also need to place ads, or to apply for a fee space, it will provide about 10 days of probation, can be used as a website test.
2, after clicking on the application, there will be a request for registration forms, generally include user name, password, mailbox, contact telephone, province, home page name, homepage category, home page introduction.
3, all completed, you can get the following: ① user name (just fill in) ② password (just fill in) ③ftp upload address ④ home address (sometimes the above items are sent to the completed mailbox)
4, download and install FTP upload software, you can use CuteFTP (Kunshan windows/software can be downloaded, free)
5, open the CuteFTP software, click on the main menu file/Site Manager.
6, in the Open dialog box to fill out the FTP upload address, FTP site user name, FTP site password, and then click on the connection, you can connect to the site server. (The second time Open on the automatic connection, no longer fill in)
7. After connecting, the frame appears on the page, the file on the left is the local computer, the right is the remote computer, as long as the left side of the file (that is, do a good job of the website file) one by one drag to the right, that completes the upload.

33, promote their own website

How to let the website address let others know, the method has two:
1, with specialized software, you can login to the major search engines.
2, Manual login. such as Open Baidu (www.baidu.com), there is a link below "Website Login", click will be required to fill in the site address, name, content, and so on, and then be revenue Baidu's search engine, so that others can search your site. Other web sites are similarly logged in.