Dreamweaver website Ultimate Tutorial

Transferred from: http://www.cnblogs.com/loveme513/archive/2006/04/03/365969.html

I. Define a site

1. Create the good one folder under any root directory (we assume the e-disk here), such as named MyWeb.
Note: All documents used in the website must be in English.
2. Open Dreamweaver and select "Site-new site" To open the dialog box. Enter the name of the Web site in the site name (in Chinese) and select the folder you just created (E:web) in the local root folder. Then make sure you can.
Note: When you open Dreamweaver again, the site you just established is automatically found. If you have multiple sites, you can select them in the menu "sites-open Sites".

Second, create the page

1, in the local folder E:\MyWeb the space below, press the right button to select "New file", so that a page is built, the default file name is untitled.htm. The HTM means that the Web file is a static HTML file. Rename it to 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 editing state of the page. Enter the page name in the title space, and right-click the page properties to open the Page Properties window. Here you can set the title of the site, background color or back image, hyperlink color (usually by default), others remain the default.
3. At this point the cursor is in the upper-left corner and you can enter a word like "Welcome to my page." Select the text, open the Properties panel with the menu window/properties, choose a text size of 6, then center the text, and then use a few carriage returns in front of the text to make it in the middle of the page.
4. To choose a font, select the last item in the font: Edit the Font list. Then select the + Sign in the dialog box and choose a font to add to the font list in the "Available Fonts" column, and click the middle button to join.
The most commonly used on a Web page 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 pictures and then use them.
The way to enter a space on a webpage is to adjust the input method to full-width.
The way to line up on a webpage is: Shift+enter. Press ENTER only to break the paragraph.

Third, add pictures for the page

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

Iv. Adding hyperlinks

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 "Links" pane, select the page that you want to link to. The next "target" we usually use is self, which opens a new window instead of the open window, or select blank to open a new window.
2. Add a link to a picture
In the same vein as the text above, insert the picture and select it in the links in the Properties panel.
Pictures can be created with different multiple links. Here's how:
In the Properties panel, there are some graphs under "map", such as clicking on a square, the cursor turning into a cross, and drawing a blue rectangular hot zone on the picture, where you can set the link address for the Hot zone on the properties panel, and the mouse pointer will be displayed. Again, setting a hot zone with a circle allows you to set up additional links for that picture.
3. Add e-mail link
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 "Links" box. The format is as follows: mailto: email address. Note that the middle is not a space.
4, if the link to the browser can not open files, such as EXE, zip and other files, the viewer will click on this link, the file download, or online playback function.

V. Use of Forms

1. Click Insert/table to open the table panel to set. Number of 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 to select the entire table. Various settings can then be made in the properties panel below.
3. Move the cursor to one of the cells, and the properties panel you see is the cell's Properties panel. You can also perform various operations on cells. such as background color, background map, border, merge, Split, and so on.

Vi. other operations on the table

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

Two automatic formatting tables
1, first make a table, and then select.
2. Select the command/Format table from the menu. That is, you can choose some of the preset table styles.

31 Pixel split Bar
1. Insert a table with 1 rows and 1 columns, a width of 200 pixels, and a border margin of 0.
2. Select the table, set the table height to 1 pixels, and set a background color (that is, the desired line color).
3. Switch to Code and design window, code <td> Delete.

Vii. Building a complete page with a table

A page at the top (typically including icons, ads, navigation menus)
1. Create a table with 1 rows and 2 columns, a width of 760 pixels, a border and a margin of 0.
2, check the table, set the arrangement for the center alignment, the background color is #3366cc.
3. Place the cursor in the cell on the left, set it to align horizontally to the left, align vertically to the top, and insert an image, which is usually inserted in the site's icon, that is, the logo.
4. Place the cursor in the right cell, set its width to 500, align horizontally with center, arrange vertically in the middle, then insert image, usually web page ad, i.e. banner.
5. After placing the cursor in the newly completed table, insert/table, create a table with 1 rows and 1 columns, 760 pixels wide, and a border and margin of 0.
6. Select the table you just created, set the alignment to center, the background color is #005173.
7. Insert multiple images in the table, in turn, as a navigation bar menu.

Two page middle (left column list, middle site news, right column list)
1, after the navigation bar table, insert/table, create a 1 row 3 column, width 760 pixels, border and margin are 0 tables. and set the alignment to center, the background color is #fffffff.
2, place the cursor in the cell to the left, set its width to 18%, align horizontally to the center, align vertically to the top, then insert an image and insert a navigation bar.
3. After placing the cursor in the image you just inserted, insert/table, insert a table with 12 rows and 1 columns and a width of 90%. Set its cell spacing to 1 and the background color to #cccccc.
4, place the cursor in the first cell of the table, set its height to 20, and the background color to #ffffff. Insert/image, insert a small dot in front of a navigation text. Also set the other 11 cells so that the left column category list 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, then insert/image, insert a navigation bar.
6, place the cursor after the image, insert/table, insert a table with 4 rows and 1 columns and a width of 95%. Set its cell spacing to 1 and the background color to #cccccc.
7, place the cursor in the first cell of the table, drag the mouse, select 4 cells, set a height of 60, the background color is #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, and insert a navigation bar.
9. After placing the cursor in the image, insert/table, insert a 7 row and a column with a width of 90% table. Set its spacing to 1 and the background color to #cccccc.
10, hold down the CTRL key, click the 1th, 3, 5, and 7 cells of the table you just inserted, then set their height to 55 and the background color to #ffffff.
11, select cell 2nd, 4, 6, set its height to 6, the background color is #ffffff.
12. Switch to the Source code window and delete the space symbol "" in cells 2nd, 4, 6.

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 column, 760 pixels wide, border and margin are 0 tables.
2, check the table, set the arrangement for the center alignment, the background color is #3366cc.
3. Place the cursor in the cell at the left of the 1th row of the table, set its width to 50%, arrange it horizontally as the default, align vertically as a baseline, #ffffff the background color, and enter the copyright information.
4. Place the cursor in the cell at the right of the 1th row of the table, insert/image, insert a rounded image, enter the email word after it, set 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 menu Modify/Page properties, enter a title in the Title field, and select the background image to set the top border to 0.
The entire Web page is grouped into different tables, which also speeds up the time the browser reads the page. Because the browser does not display content until the entire table has been read, it is best not to frame the entire table.

Viii. Building a complete page with layout tables

1. Click Insert/Layout, the Layout view button inside, switch to Layout view state (default is Standard view). You can also access it using the view/table View/Layout view in the menu.
2. Click the Draw Layout Table button and create a layout table in the page like a drawing.
3, like the previous example, first draw the top of the page, then the middle, and then the bottom of the large table.
4. Click the Draw Layout Cell button, and then draw the layout cell in the layout table that you have already drawn.
5, return to the standard view, in the already divided table, and then insert a small nested table, the page refinement, you can complete the design of the page.
Note that the entire page is placed in a large layout table, because such a page can be viewed slowly. You should divide a few layout tables by the layout and content of the page, and then insert the layout cells separately.

Ninth, the use of the layer

1. Click Insert/Layer. You can also click the icon and drag the mouse to create a layer.
3. Select the created layer and look at the properties panel. Both the "Layer number" and "label" are used by default. "Layer number" is required for programming, we do not normally use it. "Up" is the distance from the top edge of the page; "Left" is the distance from the left edge. The "z-axis" is the order of the layers, with large numbers superimposed on the small numbers.
If you do not set the color, the layer is transparent.
4, point 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, visible (the outside part of the same display), Hidden (out of the partially hidden), scroll (whether or not exceeded, the display scroll bar), auto (scroll bar appears when there is out).
6, click the menu window/other/layer, the Layer Management window will appear. You can modify the name and z-axis values of the layer, or click the Eye icon to make the layer visible or invisible. There is also an option to prevent overlap.
7, the alignment of the layer. Hold down the SHIFT key while you select several layers. Then use the options here to modify/align.
8, nesting layer. ⑴ first inserts a layer into a document. ⑵ the cursor over the layer and then continues to insert a layer, 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 a parent layer, the child layer also moves relatively. When you move a child layer, the parent layer does not move with it.

Ten, understand the time axis

1. Click Insert/Layer in the menu to insert a layer.
2. Insert a picture in the layer, such as a picture of a plane. (The picture here can also be a small animated. gif image)
3. Click the window/other/timeline in the menu to open the Timeline window.
4. Select the layer created on the page and drag the layer to the 1th frame of the timeline by holding down the small box icon in the upper-left corner of the layer. A timeline with a length of 15 frames is created automatically.
5. Select Frame 1th on the timeline to drag and drop the layers in the page to the upper-left corner of the page, where the animation starts.
6, select Frame 15th on the timeline, you can drag the frame to any length, such as 30 frames.
7, check the 30th frame, drag and drop the layer to the bottom right of the page, the window shows the layer from the 1th frame to the 30th frame of the motion trajectory. (This time the movement is a straight line)
8, you can click on the 15th frame, right-click "Add Keyframe", in the selected frame 15th, drag the layer to the bottom of the page.
9. Tick the "AutoPlay" item.

Xi. production of a rolling bulletin board

1. Insert a layer on the page, and then set a background for the layer as the framework for the bulletin board.
2. Then insert a nested layer in the created layer and move the nested layer below the parent layer.
3. Enter text in the nesting layer and arrange 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 keyframe, increase the animation time, and then tick the "autoplay" and "loop" two items.
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 the insert to insert an animation for the page. You can also choose a menu insert/media/flash to complete this step.
2. Check the inserted animation to see the Properties panel. You can set its width, height, or drag to change the size.
3, you can click "Play" here to preview the animation.

13. Let the inserted flash animation become transparent

1, when the page has a background, or want to insert a flash animation on a picture, and the Flash animation itself has a background color, so it will affect the beautiful, then we want to make it transparent animation.
2, such as inserting an image on the page.
3. Insert a layer on the image and insert the desired flash animation in the layer.
4. Select the Flash animation and click the "Parameters" button in the Properties panel.
5. Enter "Wmode" on the left side of the "parameters". On the right, "value", enter "Transparent".

14. Play the sound in the page

1, after the completion of the full page, if you want to add background music for the page, note that the background music is generally *.midi file, such a sound file is very small, easy to download, other formats do not work as background music.
2, in the page all the tables, (note at this time the edit window in the bottom left of the label selection bar only show <body> this item, or in the lower left corner of the <body>, so as to ensure that this behavior is added throughout the page). Click the "+" button on the Behavior window (or Use the menu window/behavior to open the Behaviors window.) ）
3. Select "Play Sound" from the pop-up menu. Opens a dialog box.
4. In this dialog box, use "Browse" to select the sound you want to play and make sure.
5, then the behavior panel automatically shows the event is onload, action for playing sound. Click 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 page loading), OnClick (mouse click), OnMouseOver (mouse over the object), OnUnload (when the page is closed) and so on.
7, the 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, select the text, and enter a "#" symbol in the link.

XV, pop-up window

1, first make a ready to display in the small window page (such as a.htm), because this pop-up window can not be too large, so the content is less.
2. Open a well-made page, move the cursor over all my forms in the page, click the "+" button on the Behavior window and select "Open browser Window" from the pop-up menu.
3. Enter the appropriate settings in the dialog box. The URL to be displayed is a.htm, and the width and height of the window are set in pixels. The parameters in the property need to be ticked.
4. After Setup is complete, click "OK". This behavior is displayed in the Behavior window when the Browse window opens, and the trigger condition is onload, which you set if you don't want this.
5, the behavior can also be set on the picture, the text link.
6, you can use this method to express the opening of the browser welcome, site announcements, leaving the farewell language.

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 dialog box "message" column, input needs to display, such as the introduction of this picture.
4, you can set the behavior of the trigger condition is onmouseover (mouse over the object), so when the mouse through the picture, the status bar will appear relevant information.
5, if the need to remove the mouse, the information disappears, then use this behavior again, in the "message" column do not write anything, and then change the trigger condition to onmouseout (mouse off).
6. You can also set this behavior on a paragraph of text. Or it can be set on the entire page.

17. Pop-up information

1. Open a well-made page, click the lower left corner <body> item. Click the "+" button on the Behaviors window and select "Pop-up Info" from the pop-up menu.
2. In the "Message" field in the Setup window, 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. When 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 pop-up information on a section of text. For example, a text does not want people to copy, select the whole paragraph of text, notice at this time the lower left corner shows 〈p〉, that is, paragraph.
5, then the same operation, the message can enter the copyright and other statements. Just set the trigger condition to onbeforecopy (triggered when the right button is pressed), or oncopy (triggered when you right-click Copy).

18. Dynamic Picture button

1, prepare two pictures of the same size, commonly used method is like a grayscale photo, one for color photos. or a button sunken style, one is the button raised style.
2, Example: Insert a 3 row 1 column table, set the width of 180 pixels.
3. Place the cursor on the first line and insert a grayscale image.
4. In the "Link" field in the Properties panel, enter the address you want to link to, 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 point in the "image" column has shown the image to be exchanged, and then in the "Temple original file for" a column to choose a good swap of the picture.
7, the following are two parameters, "pre-loading images" and "mouse slide to restore the image", should be selected.
8, the same method to create two other dynamic buttons.

19. Use Frame Layout page

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 for example.
2, click on the "top-middle-bottom" frame structure of the icon, at this time, insert the top and bottom two frames on the page, the entire page is divided into 3 parts. We enter "Up" in the above, enter "medium" in the middle, enter "under" below.
3, save first. Click File/Save all in the menu. 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 framed with a dashed line, which saves the above section as shang.htm. The following section is saved as xia.htm. The middle section is saved as zhong.htm.
4. To this point, we have saved four pages, which are the frameset, and the top, middle, and bottom three pages that make up the frame set. So, in fact, this framework is composed of four pages, so the framework will reduce the speed of the user browsing.
5. Click the window/other/frame to open the frame's panel. Click a frame here to select the frame. When the frame is selected, a dashed line appears in the corresponding frame in the editing window.
6, such as: Check the above Topframe, the property panel is displayed above the properties of this frame. Also select the middle frame and the following frame, or you can set their properties separately.
7. In the edit window, place the mouse over the border between the two frames, the cursor will become up and down arrow, click the border, select the entire frameset.
8. The properties of the entire frame group appear on the properties panel at this time. Here you can set whether the frameset has borders, widths, colors, and so on. But most importantly, you can set the size of each frame in the frameset here.
9. On the right side of the properties panel, select the frame above, set its behavior 80 pixels, the border is 0.
10. Select the frame below to set the row height to 30 pixels and the border to 0.
11. Select the middle frame, set the row height to 1, the unit is relative. (The relative meaning is: the ratio of the current row to the other rows.) Set to 1 refers to the remaining space of all browse windows that occupy the top and bottom.
12, Example: The cursor is placed above the frame topframe, right-click on the page properties, set the background color of #ff6600. Then insert/table, insert a 1 row 2 column, the border margin is 0 of the table. Set the 1th cell to a width of 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", "Scorpion", and "Gemini".
13, put the cursor in the middle frame mainframe, right-click the page properties, set the background color of #ffffcc. Then insert a large image.
14, put the cursor in the frame below the BottomFrame, right-click the page properties, set a background image.
15, in addition to do three pages, as "Leo", "Scorpion", "Gemini" to link the page.
16. Select "Leo", set the page for which you want to link in the attribute, and then select "mainframe" in "target", that is, the content is displayed in the middle frame.
17, also set the "Scorpion", "Gemini" link.

20. Jump Menu

1. Click the Insert/Form object/Jump menu in the main menu, or you can use the Jump menu icon in the Insert/form to bring up the Jump Menu Settings window.
2, first in the "Text" column, enter "Please select the relevant website" word. Then click on the "+" button on the window. There is one more option in the menu, this option is not linked, only as the caption of the Jump menu.
3, in the text column to enter the desired site, such as "Sina", and then in the "Select, go to the URL" column, enter the site link address http://www.sina.com.cn, at this time, the menu item in one more option in the column, this option corresponds to a web link address.
4, use the same method, add some other options and corresponding links in the menu. You can also use the "Up" and "Down" buttons to adjust their order.
5, set the window "After the menu insert go to the button" do not select the first. Select the Select first item after changing URL, so that when you use the Jump menu to a page, if you return to the Jump Menu page, the Jump menu in the page is still the 1th item by default.
6. Click "OK" when you are finished setting up.
Because the Jump menu is a form, the form is inserted first (the red dotted area) and then the drop-down menu is inserted in the form.
7, want to modify the options, you can select the page on the bottom bar menu, click on the Properties Panel "list values" to modify the contents.

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

21, the use of plug-ins (dreamweaver function extension)

1, first download the necessary plug-ins, here is an example of the animate Browser Window. This is a plugin that dynamically changes the size of the window. Open the Dreamweaver Extension Manager and install the downloaded plugin.
2, Start Dreamweaver, on the Good page, right-click on the lower left corner 〈body>, and then click the "+" button in the Behavior window, select "Animate Browser window", and then make the corresponding settings in it. Here the setting window opens before the height width is 0, after opening to fill the screen. The trigger condition is onload.

22. Scrolling subtitles

1. Place the cursor insertion point where you want to insert the scrolling caption.
2. Click the tab selector in the Insert panel.
3. Select the Marquee tab and click on the "Insert" button. Then close the tag Selector.
4, convert to Code view. Place the insertion point of the cursor between the two marquee tags.
5, select window/Label Inspector. You can set various uses of labels in the tag inspector.
6. Click the drop-down arrow to the right of the behavior setting to select how you would move the marquee content. Three of these options mean: Alternate: Content rolled in the opposite two directions. Scroll: Content scrolls in the same direction. Slide: Content touches the caption border to stop scrolling. The
7, Direction property sets the scrolling direction of the caption content. The four options mean: down: Move Down. Left: Movement to the left. Right: Move to the left. Up: Move up. The
8, ScrollAmount property sets the speed of the caption scrolling. Generally set to 1. The
9, Scrolldelay property sets the time to pause when the caption content scrolls, in milliseconds. If you want to make scrolling look smooth, the values should be as small as possible. The instance is set to 1 milliseconds. The
10, Width property sets the length of the scrolling caption. This arbitrary, for example, is set to 300. The
11, onmouseover event sets the action that the mouse moves to a scrolling caption, and is often set to stop scrolling. The onmouseout event sets the action of the mouse when it leaves the scrolling caption, often set to start scrolling. These two items cannot be selected and can only be entered manually. Enter "This.stop () after onmouseover," enter "This.start () after onmouseout;" The
12, style property sets the styles for the caption content. Set the caption text size in the instance, and enter "FONT:12PX;" manually. The
13, loop property sets the number of caption scrolls, and the default value is unlimited. "-1" also for Infinity.
14, all code: <marquee behavior= "scroll" direction= "left" width= "loop="-1 "scrollamount=" 1 "scrolldelay=" 1 " Style= "FONT:12PX;" onmouseover= "this.stop (); onmouseout=" This.start (); " > scrolling subtitle content </marquee> 

23. Create a CSS style sheet

1, enter some text on the webpage.
2. Open the CSS styles panel, or you can open it with the window/css style.
3. There are four buttons at the bottom of the panel, which are additional styles, new style, edit style, delete style.
4. Click "New Style" to open the dialog box. Enter a name and note that there is a point number before the name. If the name is. Zi (not in Chinese). Type: Create a custom style, defined in: only for that document.
5. At this point, open a dialog box, select "Type" in the category on the left, then set the font to the right of the song body, the size is 14 pixels, the color arbitrary. And then determine.
6. Select the text on the page and click on the style in the window. Zi. CSS styles are applied to this text at this time.
7, if you want to modify the CSS style you 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 "Definition 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 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 hyperlink state.
a:hover--the state of the hyperlink when the cursor is moved to the hyperlink; a:active--the status of the hyperlink selected.
3, the next set of these various states, first select A:link from the drop-down menu, click the "OK" button to pop up the style Sheet Settings window, set the style without an underscore, the color is #ff6600 (orange).
4, use the same method to 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 do not set, it will automatically according to A:hover and determined.
7. Enter a word on the Web page and set its link to "#" in the Properties panel. Can.
Note: This must be set in the order of A:link, a:visited, a:hover, a:active, otherwise the expected effect will not occur.

If we need to have 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 red without underlining.
2. Continue with the definition of the following two styles. Names are entered directly, set them to a.link2:visited, and purple without underlining. A.link2:hover, Blue is underlined.
3. At this point, there is a custom style named Link2 under the CSS styles option.
4. Enter a paragraph in the page, add a # link to it, select the link, and then click the style link2 in the Style sheet window to apply this style to the link.
5. The same method can make different link formats on the same page.
To maintain a style, it is not appropriate 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. When you are sure, open the window that holds the external style sheet. Then save it to your local site.
3. At this point, you can see a new style sheet file in the Stylesheet window with a file suffix called CSS
4. If an internal style sheet in the current page is exported as an external style sheet file for use by another page, you can click the gray icon in the upper right corner of the style sheet window and choose Export Style sheet, at which point you can name and save the style as an external file.
5, when other pages need to use an external style sheet, you can click the first button in the Style sheet window "Attach style sheet", open the window, and then select the external style sheet file, added as a "link", OK.

26. Other CSS

CSS background, is to set the text background, table background map and so on.
The block in CSS refers to the text spacing, alignment, subscript, superscript, arrangement and so on.
The box in CSS refers to the space between the picture and the text content, as well as the method of mixed graphics.
CSS in the border, refers to the setting of the table text area, buttons and other landscaping.
The list in CSS refers to the setting of the list item style. That is, the outline of a paragraph of words.
Positioning in CSS refers to setting the relative and absolute positioning of the images in the page.
CSS extension, where the cursor, you can set the style of the cursor, can be set to hand (hand type), crosshair (cross type), text ("I" type), wait (wait type), default (type), Help (type), There are also arrow types in all directions.
CSS extension, which filter, can be used to do CSS filter effects, that is used to process the image of transparent, luminous and so on. But the effect is not very obvious, or with special processing of the picture software to complete the better.

27. Create an online album

1, first to install good fireworksmx software.
2, processing the need to put on the online photos, processing them into the same size, put in a folder.
3. Click the commands in the menu/create a website album to open the Settings window.
4, enter the album title, sub-standard information, other information (can also be modified later). Source Images folder, select the folder where you just saved your photos.
5, "Destination Folder", click the "Browse" button to select the current site directory. (All photos will be saved to the site)
6, "Thumbnail size" an item, you can select as needed, "show file name", select will display the file name of each picture in the generated album.
7, "column" one is the number of pictures displayed on each line, the default is 5, you can change.
8, the following two "format" is generally selected "high quality".
9. Select the "Create a navigation page for each image". Ok.

28. Customized Web page transition function

Web page transitions are when a browser enters or leaves a page, the page renders different refresh effects, such as scrolling, blinds, etc. Web pages will look more dynamic, but also pay attention to enough, otherwise too flashy changes will easily arouse the dislike of visitors. Steps:
1. Open a page and click the Insert/File Header tab/meta in the menu to pop up the Meta dialog box.
2. Select the Http-equivalent option in the drop-down list of property options in the dialog box, and type Page-enter in the value one to indicate a page transition when you enter the page.
3. Type Revealtrans (duration=4,transition=2) In the content pane, duration=4 indicates that the page transition effect lasts 4 seconds, Transition represents the transition effect, and a value of 2 indicates a round contraction.
4. Click OK when you are finished, and save the disk. So when we click on a hyperlink to enter this page we can see the effect.
5, there are more than 20 kinds of efficiency for you to choose, as long as the value of the transition to the corresponding effect of the code, the specific effects and settings as shown in the following table

Effect Transition effect Transition
Box-shaped contraction 0 dissolution 12
Box-shaped expansion about 1 to the middle of contraction 13
Round contraction 2 central to left and right expand 14
Circular expansion 3 shrink to Middle 15
Wipe up 4 mid-to-bottom expansion 16
Wipe down 5 steps to the left to expand 17
To erase, except 6 steps to the left, expand 18.
Erase right 7 steps to the right, expand 19
Vertical Blinds 8 Ladder-shaped right up 20
Horizontal Blinds 9 Random horizontal line 21
Horizontal Checkerboard Type 10 random vertical line 22
Longitudinal Checkerboard 11 Random 23

29, the application of the library

Some of the content in the site needs to be reused, such as a website icon made by yourself, and this component is stored in the library and can be called at any time.
1. Open a page and select the component you want to save, such as an icon.
2. Click the menu window/resource to open the Resources window. Then open the Library panel by selecting the button at the bottom of the book.
3. Click the New button below to save the icon you just selected in the library, and you can also give it a name at this time.
4, on a new page to apply the contents of the library, open the Library panel, select the icon you want to use, and then click "Insert" below.

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

1, first planning the site you want to make, to the content of its various links are well designed. such as my website:
The links on the homepage are: Web version, animated version, please leave a message, about me, contact me, wishing bottle
The links on the Web page are: Webmaster introduction ¦¦ Research papers ¦¦ Classroom Search Real ¦¦ Original courseware ¦¦ Xinhai a photo life ¦¦ give me a letter ¦¦ ¦¦ ¦
The links on the animated version are the same as the Web pages.
The following links are linked to pages of various articles or courseware. such as "Classroom Search for Truth" link to the whole is the title of the lesson plan page, and then by each lesson plan title, and then link to put this lesson plan page. The other same.
2, download good more suitable for their own planning, like the page template, (template site is better such as: http://www.mbsky.com In general, it includes two files: one is index.htm, the other is a folder named images, which is what we say to place the image.
3, define the site, and then copy the two files (folders) to the site folder.
4, double-click the index.htm file, that is, enter the editing state of the homepage. Then you can modify the page so that it fits your needs. This completes the home page.

31. Save the existing page as a template

Used to have 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 File/Save as template, save the current page as a template. The Save Template window opens, naming the template, and saving it.
2. At this point, you can find that a folder named templates is automatically created in the site, in which we have saved templates. Its extension is. dwt
3, this template is currently in use, is unable to modify. So you want to set the editable area of the template.
4, for example, in the current template page, you need to make the middle part of the page editable, so that the template can be used to add content. Select the table cell in the middle part of the page (CTRL + click in the cell), and click Insert/Template object/editable area in the main menu. The dialog box opens, in which you name the template, and then you determine.
5. The editable area defined by this time is framed by a light blue line, and the upper-left corner has the name of the area. Save and close the template file.
6. Click on the file/New in the main menu and click on the "template" option above in the New page window.
7. At this point in the "template for" column lists the currently defined site, select a site, in the middle of the window is displayed in the template file that the site owns. Select a template, and in the preview column you can preview the template. Then click the Create button and a new page is created.
8, in the new page that appears, except editable area, other parts cannot be modified.

32. Upload your own website

1. Apply for website space, then upload it to the Internet. There is basically no free space, free space is also required to place ads, or to apply for a fee space, it will provide 10 days or so of the trial period, can be used as a website test.
2, after clicking on the application, there will be a request for registration of the form, generally including the user name, password, email, telephone, province, the name of the home page, the category of the home page, such as the introduction.
3, all completed, you can get the following items: ① User name (just fill in) ② password (just filled out) ③ftp upload address ④ home address (sometimes the above items sent to the filled in mailbox)
4, download and install the FTP upload software, you can use CuteFTP (Kunshan windows/software can be downloaded, free)
5. Open the CuteFTP software and click File/Site Manager in the main menu.
6. In the Open dialog box, fill in the FTP upload address, FTP site user name, FTP site password, and then click Connect, you can connect to the site server. (The second time to open the automatic connection, no need to fill out)
7, after the connection, the frame appears on the page, the left side of the file on the local computer, the right is a remote computer, as long as the left file (that is, a good website file) dragged to the right, that is completed the upload.

33. Advertise your website

How to let the website address let others know, method has two:
1, with special software, you can log the website to the major search engines.
2, Manual login. If you open Baidu (www.baidu.com), there is a link "Website login", click will be asked to fill in the site address, name, content, and then be the revenue Baidu search engine, so that others can search your website. Other websites sign in similarly.

Dreamweaver website Ultimate Tutorial