Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use dreamweaver to make web pages". In daily operation, I believe many people have doubts about how to use dreamweaver to make web pages. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to use dreamweaver to make web pages". Next, please follow the editor to study!

Dreamweaver this professional web page production software, I believe that the relevant professional personnel will not be unfamiliar. It can be said that it is the first set of visual web development tools specially developed for professional web designers, and it can be used to easily create dynamic web pages across platform restrictions and browser restrictions.

Here Xi Xi brings you a tutorial on making web pages with dreamweaver, which can be referenced by friends who are beginners in DW.

First, define the site

1. Create a folder under any root directory (we assume E disk here), such as MyWeb.

* Note: all files used in the website should be named in English.

2. Open Dreamweaver, select "site-New site", and open the dialog box. Enter the name of the site in the site name (available in Chinese) and select the folder you just created (E:web) in the local root folder. And then make sure.

* Note: if you open Dreamweaver again, you will automatically find the site you just set up. If you have more than one site, you can select it from the menu "site-Open site".

Create a page

1. In the space under the local folder E:\ MyWeb, right-click and select "New File". This will create a page, and the default file name is untitled.htm. Htm means that the web page file is a static HTML file. Rename it index.htm.

The name of the first page of a website is usually index.htm or index.html. You can choose the names of other pages.

2. Double-click index.htm to enter the editing state of the page. Enter the page name in the title space, press the right button to select the page properties, and open the Page Properties window. Here you can set the title, background color or back image of the site, the color of the hyperlink (usually by default), and the rest by default.

3. When the cursor is in the upper left corner, you can enter a sentence, such as "Welcome to my home page". Select the text, open the properties panel with the menu "window / Properties", select the text size of 6, center the text, and then place it in the middle of the page with several carriage returns in front of the text.

4. To select a font, select the last item in the font: edit the font list. Then select the + sign in the dialog box, then select a font that you want to add to the font list in the available fonts bar, and click the button in the middle to join.

* Song characters are most commonly used on web pages. Don't add special fonts to the list, because you can't see them if they're not installed on other people's computers. If you need to use it, make a picture before you use it.

* * the way to type a space on a web page is to adjust the input method to full width.

* the way to change lines on a web page is: shift+Enter. Only press Enter to change the paragraph.

Add pictures to the page

1. In the space under the local folder E:\ MyWeb, right-click and select "New folder". This creates a folder that can be renamed tu or pic or images.

2. Open the object panel with the menu "window / object", 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 save it to the folder you just built.

3, select the picture, open the properties panel, you can name the picture above, reset the height and width of the picture, drag the point on the corner of the picture to change the size. Hold down the shift key, and then drag the point on the corner to make the picture stretch in proportion to width and height. To restore the original size, click the resize button in the lower right corner.

4. "Link" can enter the address directly here. "substitution" is the description of the picture, that is, the mouse points to the text displayed in the picture; "border" is the width of the picture border, and "alignment" is the alignment.

Add hyperlinks

1. Add links to the text.

For example, type "my article" on the page, then select it, open the properties panel, and in the "links" box, select the page to which it wants to link. The next box "goal" we generally use is self that is to open a new window instead of the existing window, or select blank to open a new window.

2. Add a link to the picture

In the same way as the link above, insert the picture and select it in the link box in the properties panel.

* pictures can create multiple links. The methods are as follows:

In the property panel, under the "map" item, there are some graphics, such as clicking on the square, the cursor becomes a cross, and draw a blue rectangular hot area on the picture. At this time, you can set the link address for this hot area on the property panel. The mouse pointer will be displayed. Similarly, if you set a hot spot with a circle, you can set other links for the picture.

3. Add E-mail links

Select the text or picture to which you want to add an E-mail link, 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 the middle.

4. If you link to a file that the browser cannot open, such as exe, Zip, etc., then the viewer will download the file or play it online when you click on the link.

5. Use of forms

1. Click insert / form and open the form panel to set up. The number of rows, columns, width, borders, etc., "cell fill" is the distance between the inside of the cell and the content; "cell spacing" is the distance between cells, all in 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 properties panel you see is the properties panel of the cell. You can also do a variety of operations on cells. Such as background color, background map, border, merge, split and so on.

VI. Other operations on the form

First, the principle of making thin line tables:

1. Select the entire table and set its background to black (that is, the color of the table line).

2. Select all cells and set their background to white.

Two automatic formatting forms

1. Make a table first, and then select it.

2. Select the command / format table in the menu. That is, you can choose some of the preset table styles.

Trinity pixel splitter bar

1. Insert a table with 1 row and 1 column, 200 pixels wide and 0 margins.

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.

Build a complete page with a table

The top of a web page (usually includes icons, advertisements, navigation menus)

1. Create a table with 1 row and 2 columns, with 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 is # 3366CC.

3, place the cursor in the left cell, set its horizontal arrangement to the left alignment, vertical arrangement to the top alignment, and then insert an image, which is generally inserted here is the site icon, that is, logo.

4, place the cursor in the cell on the right, set its width to 500, align it horizontally, align it vertically in the middle, and then insert an image, usually a web advertisement, that is, banner.

5. Place the cursor after the newly completed table, insert / table, and create a table with 1 row and 1 column, width of 760 pixels, border and margin of 0.

6. Select the table you just created, set the arrangement to center alignment, and the background color is # 005173.

7. Insert multiple images in turn in the table as the navigation bar menu.

Second, the middle of the web page (left column list, middle website news, right column list)

1. After the navigation bar table, insert / table and create a table with 1 row and 3 columns, width of 760 pixels, border and margin of 0. And set the arrangement to center alignment, 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, then insert an image and insert a navigation bar.

3. Place the cursor after the picture you just inserted, insert / table, and insert a table with 12 rows and 1 column, 90% wide. Set the cell spacing to 1 and the background color to # CCCCCC.

4. Place the cursor in the first cell of the table and set its height to 20 and the background color to # FFFFFF. Insert / image, insert a dot in front of the navigation text. Also set up the other 11 cells so that the column category list 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 center, vertically to top, then insert / image, insert a navigation bar.

6. Place the cursor behind the image, insert / table, and insert a table with 4 rows and 1 column, 95% wide. Set the 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 all four 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, and insert a navigation bar.

9. Place the cursor behind the image, insert / table, and insert a table with 7 rows and one column, 90% wide. Set the spacing to 1 and the background color to # CCCCCC.

10. Hold down the Ctrl key, click cells 1, 3, 5 and 7 of the table you just inserted with the mouse, and then set their height to 55 and the background color to # FFFFFF.

11. Select cells 2, 4 and 6, set their height to 6 and the background color to # FFFFFF.

12. Switch to the source code window and delete the space symbol in cells 2, 4 and 6.

Third, the bottom of the web page (generally including copyright information and other related content)

1. Place the cursor over the main table, insert / table, and create a table with 2 rows and 2 columns, 760 pixels wide, with a border and margins of 0.

2. Select the table, set the arrangement to center alignment, and the background color is # 3366CC.

3. Place the cursor in the left cell of the first row of the table, set its width to 50%, arrange it horizontally as the default, vertically arrange it as the baseline, and enter the background color as # FFFFFF, and then enter the copyright information.

4, place the cursor in the right cell of the first row of the table, 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 an GO image.

7. Set page properties. Click the menu modify / Page Properties, enter the title in the title column, select the background image, and set the top boundary to 0.

* combining the entire web page into different tables can also speed up the time for browsers to read the page. Because the browser does not display the content until it has read the entire table, it is best not to box in the entire table.

Build a complete page with a layout table

1, click insert / layout, inside the layout view button, switch to the layout view state (the default is standard view). You can also enter it using View / Table View / layout View in the menu.

2. Click the button to draw the layout table first, and then create the layout table on the page like a drawing.

3. As in the previous example, draw a large table at the top, middle, and bottom of the page.

4. Click the draw layout cell button, and then draw the layout cell in the layout table that has been drawn.

5, return to the standard view, in the already divided table, and then insert the nested small table, and then refine the page, you can 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 page will be very slow. You should divide several layout tables according to the layout and content of the page, and then insert layout cells into them.

IX. The use of layers

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. "layer number" and "tag" can be used by default. "layer number" is needed for programming, and we generally don't use it now. "Top" is the distance from the upper boundary of the page; "left" is the distance from the left boundary. "z axis" is the order of layers, with large numbers superimposed on top of small numbers.

If the color is not set, the layer is transparent.

4. The small box in the upper left corner of the middle layer can drag the layer at will, and the size can also be adjusted.

5. In the "overflow" column, when the text is more than 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 there is an excess or not), and auto (the scroll bar appears only when there is an excess).

6. Click the menu window / other / layer, and the layer management window will appear. You can change the name and Z-axis value of the layer, or click the eye icon to make the layer visible or invisible. There is also an option to prevent overlap.

7. Alignment of layers. Press and hold the shift key while selecting several layers. Then use modify / one alignment, use the options here.

8. Nesting layer. ⑴ first inserts a layer in the document. ⑵ places the cursor inside the layer and then continues to insert a layer, resulting in a nested layer. The inside of the ⑶ is called the sub-layer, and the outer parent layer. Their Z-axis order is the same. When you drag the parent layer, the child layer also moves relative. 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 in the layer, such as a picture of an airplane. (the picture here can also be a .gif image of a small animation.)

3. Click window / other / Timeline in the menu to open the Timeline window.

4. Select the layer created on the page, hold down the small box icon in the upper left corner of the layer with the mouse, and drag and drop the layer to the first frame of the Timeline. A timeline of 15 frames is automatically created.

5. Select frame 1 on the Timeline, drag and drop the layer in the page to the upper-left corner of the page, where the animation begins.

6. Select frame 15 on the Timeline and drag it to any length, such as 30 frames.

7. Select frame 30, drag and drop the layer to the lower right of the page, and the window shows the trajectory of the layer from frame 1 to frame 30. (the motion is a straight line at this time)

8, you can click frame 15, right-click "add Keyframe", in the selected frame 15 state, drag the layer to the bottom of the page.

9. Check the "autoplay" item.

11. Making 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 in the created layer and move the nested layer below the parent layer.

3. Enter the text in the nested layer and arrange it in the center.

4. Open the Timeline panel and add sub-layers to the panel as objects.

5. Create an upward moving 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 "Auto play" 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 the insert to insert an animation for the page. You can also choose 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 you can drag to resize it.

3. Click "play" here to preview the animation.

XIII. Make the inserted flash animation transparent

1, when the page already has a background, or want to insert flash animation on a picture, and flash animation itself also has a background color, so it will affect beauty, then we want 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. Type "wmode" in the left square of "parameters". Enter "transparent" in the "value" box on the right.

14. Play sound on the page

1. After completing the full page, if you want to add background music to the page, note that the background music is generally * .midi file, which is very small and easy to download, and other formats are not suitable for background music.

2, in addition to all the tables on the page, (note that only this item is displayed in the label selection bar at the lower left of the editing window, or click 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. Select "play Sound" from the pop-up menu. Open a dialog box.

4. Use "Browse" to select the sound you want to play in this dialog box, and make sure.

5. At this time, the behavior panel automatically shows that the event is onload and the action is playing sound. Click on this line and a button appears in the middle. Click the button to set the event under which the sound will be played. You can select Show events / IE5.0.

6, we commonly used such as Onload (when the page loads), OnClick (click the mouse), OnMouseOver (move the mouse over the object), OnUnload (when the page is closed) and so on.

7. This behavior can also be set on pictures and text links. Before playing the sound on the text link, add an empty link to the text, that is, select the text and enter a "#" symbol in the link box.

Pop-up window

1, first make a page to be displayed in a small window (such as a.htm), because the pop-up window can not be too large, so the content should be less.

2. Open a finished 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, and the width and height of the window are determined by yourself, in pixels. Check the parameters in the property if necessary.

4. After setting up, click "OK". At this point, the behavior of opening the browsing window will be displayed in the behavior window, and the trigger condition is Onload. If you don't want this, set it yourself.

5. This behavior can also be set on pictures and text links.

6. This method can be used to express the welcome to the visitor when opening, the announcement of the website, the farewell when leaving, etc.

XVI. 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 text.

3. In the "message" column of the dialog box, enter what you need to display, such as an introduction to this picture.

4, you can set the trigger condition of the behavior to OnMouseOver (move the mouse over the object), so that when the mouse passes over the picture, the status bar will appear relevant information.

5. If you need this information 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 (move the mouse).

6. You can also set this behavior on a paragraph of text. Or set it on the entire page.

XVII. Pop-up messages

1. Open a finished page and click on the item in the lower left corner. Click the + button on the behavior window and select the pop-up message item from the pop-up menu.

2. Enter the message you want to display in the "message" column in the settings window.

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. Pop-up messages can also be set on a certain paragraph of text. For example, if a paragraph of text does not want to be copied, select the whole paragraph and notice that < P >, that is, the paragraph, appears in the lower left corner.

5. then do the same, and the message can enter statements such as copyright. Just set the trigger condition to OnBeforeCopy (triggered when you press the right button), or OnCopy (triggered when you press the right button to select replication).

18. Dynamic picture button

1. Prepare two pictures of the same size, such as one grayscale photo and one color photo. Or one is the button concave style, the other is the button protruding style.

2, for example: insert a table with 3 rows and 1 column, and set the width to 180 pixels.

At this point, the study on "how to use dreamweaver to make web pages" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.