Here Xixi brings you a tutorial on dreamweaver making web pages, which DW beginners can refer to.
First, define the site.
1. Create a folder in any root directory (here we assume it is E disk), such as MyWeb.
* * * Note: All documents used in the website should use English names.
2. Open Dreamweaver and select Site-New Site to open the dialog box. Enter the website name (Chinese) in Website Name, and select the folder just created (E:web) in the local root folder. Then make sure.
* * * Note: If you open Dreamweaver again, you will automatically find the website you just set up. If there are multiple sites, you can select them in the menu "Sites-Open Sites".
Second, create a page.
1. In the blank space under the local folder E:\MyWeb, right-click and select "New File", thus creating a page with the default file name of untitled.htm. Htm means that the web page file is a static HTML file. Renamed index.htm.
* * * The name on the homepage of a website is usually index.htm or index.html. You can choose the name of other pages yourself.
2. Double-click index.htm to enter the editing status of this page. Enter the name of the webpage in the title bar, and right-click Page Properties to open the Page Properties window. Here, you can set the title, background color or background image of the website, the color of hyperlinks (usually the default color), and keep everything else as the default color.
3. At this point, the cursor is located in the upper left corner, and you can enter a sentence, such as "Welcome to my home page". Select the text, use the menu Window/Properties to open the property panel, select the text size as 6, then center the text, and then use several carriage returns before the text to center the text on the page.
4. If you want to select a font, please select the last item in the font: edit the font list. Then select the+sign in the dialog box, and then select the font that needs to be added to the font list in the Available Fonts column, and click the middle button to join.
* * * Song typeface is the most commonly used word on web pages. Don't add special fonts to the list, because you can't see them without them on other people's computers. If you need to use it, you should make a picture before using it.
* * * The way to type spaces on a web page is to set the input method to full width.
* * * The way to wrap a line on a web page is: shift+Enter. Just press Enter to change the segment.
Third, add pictures to the page.
1. In the blank space under the local folder E:\MyWeb, right-click and select "New Folder", thus creating a folder for placing pictures, which can be renamed as tu or pic or images.
2. Use the menu window/object to open the object panel, click Insert Image, and then select the image to be inserted in the dialog box. If a dialog box appears: "Do you want to copy this file to the root folder?" , you must select Yes and save it in the folder you just created.
3. Select the picture and open the property panel, where you can name the picture, reset the height and width of the picture, and 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 stretch the picture in proportion to its width and height. To restore the original size, click the Resize button in the lower right corner.
4. "Link" can directly enter the address here. "Substitution" is a 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 method.
Fourth, add hyperlinks.
1. Add a link to the text.
For example, enter "My Articles" on a page, then select it, open the property panel, and select the page it wants to link to in the Link box. In the latter "target", we usually use self, that is, to open a new window to replace the existing window; Or select blank to open a new window.
2. Add a link to the picture
Just like the link to the above text, insert a picture, and then select it in the link box of the property panel.
* * * * Pictures can create different multiple links. The method is as follows:
There are some graphs under the Map item in the property panel. For example, if you click the square, the cursor will turn into a cross and a blue rectangular hotspot will be drawn on the picture. At this point, you can set the link address of the hotspot on the property panel and the mouse will display it. Similarly, you can set other links for pictures by setting hotspots with circles.
3. Add an email link
Select the text or picture to which you want to add an e-mail link, open the property panel, and enter the e-mail 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 when the browser clicks this link, it will realize the function of file download or play online.
The use of verb (verb abbreviation) table
1. Click Insert/Form to open the form panel for setting. Number of rows, columns, width, borders, etc. , "cell filling" is the distance between the inside of the cell and the content; Cell spacing is the distance between cells in pixels.
2. After inserting the table, click the border of the table to select the whole table. Then you can make various settings in the property panel below.
3. Move the cursor to one of the cells, and the property panel you see at this time is the property panel of that cell. You can also perform various operations on cells. Such as background color, background image, border, merging, splitting, etc.
Six, about other operations of the form
1. The principle of making thin line table:
1. Select the whole table and set its background to black (the color is the color of table lines).
2. Select all cells and set their background to white.
2. Automatically format tables
1. Make a table first, and then select it.
2. Select the command/table format from the menu. In other words, you can choose some preset table styles.
Trinity pixel separator
1. Insert a table with 1 row 1 column, with a width of 200 pixels and a border margin of 0.
2. Select the table, set the height of the table to 1 pixel, and set the background color (that is, the required line color).
3, switch to the code and design window, code
Seven, use the table to build a complete page.
The top of a web page (usually including icons, advertisements and 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 mode to center alignment, and the background color is #3366CC.
3. Place the cursor in the cell on the left, set its horizontal arrangement to left alignment, set its vertical arrangement to top alignment, and then insert the image. The logo of general websites are inserted here.
4. Place the cursor in the cell on the right, set its width to 500, center it horizontally and center it vertically, and then insert an image, usually a web advertisement, that is, banner.
5. Place the cursor after the table you just finished, and then insert /table to create a table with 1 rows and 1 columns, with a width of 760 pixels and a border and margin of 0.
6. Select the newly created table, set the arrangement mode to center and the background color to #005 173.
7. Insert multiple images into the table in turn as a navigation bar menu.
The middle part of the web page (column list on the left, website news in the middle and column list on the right)
1. After the navigation bar table, insert /table to create a table with 1 row and 3 columns, with a width of 760 pixels and a border and margin of 0. Set the arrangement mode to center alignment and the background color to #FFFFFFF.
2. Place the cursor in the left cell, set its width to 18%, center it horizontally, align it vertically upwards, and then insert the image and navigation bar.
3. After placing the cursor on the picture just inserted, insert/table, and insert a table with rows of 12 and columns of 1 with a width of 90%. Set the 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 set the background color to #FFFFFF. Insert/Image, insert a point before the navigation text. Also set other 1 1 cells, so that the column sorting list on the left is completed.
5. Place the cursor in the middle cell of the main table, set its width to 66%, align it horizontally in the center and vertically at the top, and then insert/image and insert the navigation bar.
6. After placing the cursor on the image, insert/table, and then insert a table with 4 rows 1 column and a width of 95%. 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 and select all four cells. Set the height to 60 and the background color to #FFFFFF.
8. Place the cursor in the cell on the right side of the main table, set its width to 16%, align horizontally with the center, vertically with the top, insert/image and insert the navigation bar.
9. After placing the cursor on the image, insert/table, and then insert a table with 7 rows 1 column and 90% width. 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 just inserted, and then set their height to 55 and the background color to #FFFFFF.
1 1. Select the second, fourth and sixth cells, set their height to 6, and set the background color to #FFFFFF.
12. Switch to the source code window and delete the space symbol ""in cells 2, 4 and 6.
The bottom of a web page (generally including copyright information and other related content)
1. After placing the cursor in the main table, insert /table to create a table with 2 rows and 2 columns, 760 pixels wide, zero borders and zero margins.
2. Select the table, set the arrangement mode to center alignment, and the background color is #3366CC.
3. Place the cursor in the left cell of line 1 of the table, set its width to 50%, set the horizontal arrangement as the default, set the vertical arrangement as the baseline, set the background color to #FFFFFF, and then enter the copyright information. The content color is arbitrary.
4. Place the cursor in the right cell of line 1 in the table, insert /image, insert a rounded image, then enter the word Email, and set its size and color to 1 and #FFFFFF.
5. Insert/form an object/text field. Insert a text field of any width.
6. Insert/image, insert the image of GO.
7. Set page properties. Click Modify/Page Properties, enter a title in the Title column, select the background image, and set the top border to 0.
* * * Merging the whole web page into different tables can also speed up the browser's reading time. ; Because the browser only displays the content after reading the whole table, it is best not to frame it in the whole table.
Eight, use the layout table to build a complete page.
1. Click Insert/Layout, and the internal layout view button will switch to the layout view state (standard view by default). You can also use View/Table View/Layout View in the menu to enter.
2. First click the "Draw Layout Table" button, and then create a layout table in the page like drawing.
Just like the last example, draw a big table at the top, middle and bottom of the page.
4. Click the "Draw Layout Cells" button again, and then draw layout cells in the layout table that has been drawn.
5. Return to the standard view, insert a small nested table in the partition table, and refine the page, and you can complete the design of the whole page.
* * * * Pay attention to putting the whole page in a large layout table, because such a web page will be very slow to browse. You should divide several layout tables according to the layout and content of the page, and then insert layout cells in them respectively.
Nine, 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 view the property panel. Use the default values for Layer Number and Label. Programming requires "layer number", which we generally don't use now. "Top" is the distance from the top boundary of the page; "Left" is the distance from the left boundary. The "Z-axis" is the order of layers, with larger numbers superimposed on smaller numbers.
* * * * If no color is set, the layer is transparent.
4. Click the small box in the upper left corner of the middle layer to drag the layer at will, and the size can also be adjusted.
5. In the "Overflow" column, when the text is larger than the size of the layer, display (still display the excess), hide (hide the excess), scroll (display the scroll bar whether it exceeds or not) and automatically (display the scroll bar only when it exceeds).
6. Click the menu window/Other/Layers to open the layer management window. You can modify 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. Hold down the shift key and select multiple layers at the same time. Then use Modify/Align and use the options here.
8. Nested layers. (1) First, insert a layer into the document. ⑵ Place the cursor in this layer, and then continue to insert a layer to obtain a nested layer. (3) The interior is called the child layer and the exterior is the parent layer. Their z-axis order is the same. When you drag the parent layer, the child layer also moves relatively. When you move a child layer, the parent layer does not move with it.