Dreamweaver MX 2004 starting from zero (2)

Dreamweaver To position a Web page with a table
Table can be used to clearly display the data of the list, in fact, the table's role is far more than the data, it has been playing an important role in Web site positioning, especially for users with non-IE browsers, the use of table-positioned web pages than the use of the layer positioning of the page more advantages.


　　 first, create a table


Step one: Run the "insert→table" command in Dreamweaver MX 2004 to eject the property Settings window, where rows and Columns correspond to the number of rows and columns of the table, and table width represents the width of the table, and the Border thickness "is the width of the border, you can also set the style of the table, according to their own needs to set the corresponding properties of the table.

Small tip: The width and height of the table can be defined by the percentage of the browser window or by using absolute pixel values, such as setting the width to 60% of the window width, and the width of the table changes as the browser window changes, and if the width is 400 pixels, the size of the browser window, The width of the table will not change.

Step two: After clicking the "OK" button in the window, you can create a new table in Dreamweaver MX 2004, and adjust the parameters such as the color of the table line, the background color of the table, the alignment of the cell by the property panel in the lower part of the window.


　　 second, the basic use


Once we have created the table above, we can adjust it to use it. For example, if we need to make the table shown in Figure 1, we can insert a table with four rows and three columns, and then do the following.

First step: Press and drag the mouse in the top two cells in the first column of the table, and you can select two cells. Then click the Merges selected cells using spans button in the property template to merge the two selected cells into a single cell. In this way, merge the two cells to the right of the first row of the table into one cell.

Tip: When you select a cell, click the splits cell into rows or Columns button in the Properties panel to split the cell into rows or columns.

Step Two: Select all three cells in the first column of the table, and then set the background color (BG) In the property template to "#FFFF00" so that the cell background in the first column of the table turns yellow.

The third step: Enter the corresponding text in the table, in order to be beautiful can be in the property Panel to center setting.

Fourth step: In order for the table to have a stereo effect, you can select the entire table, and then in the Properties panel, set the width of the table border (Border) to 7, and set the border color (Border color) to blue.

Tip: It is often difficult to select the entire table, which provides four common methods: 1. Move the mouse to the right edge of the table, and then drag the mouse to the left, so you can quickly select the entire table. 2. Run the Modify→table→insert table command to select the entire table. 3. Right-click in the cell, and select the entire table from the pop-up menu by selecting the Table→insert Table command. 4. Click any cell with the mouse, and then press the CTRL + a combination button to select the entire table.

Once we've done that, we'll be able to customize the professional table in Dreamweaver MX 2004.
　　Third, table positioning


In fact, the page positioning of the table mainly by dividing the content of the page into several areas, and then fill in the corresponding content in different forms, so as to make a very normative and professional web pages. Let's take a look at how the Web site shown in Figure 2 is implemented through a table.

1. Title and navigation Area

The top of the page consists of two large tables: the above table is the picture area, below is the navigation area. The picture area is a row, and the "insert→image" command inserts the site's title map and logo icon. The navigation area is a row of nine columns, enter the name of each column, and then use the "insert→hyper link" command to create a link to each navigation column.

2. Body Area

The body area has to be built from a large table of three columns, each of which is then inserted into a separate table or Split method to form multiple regions and enter the appropriate information. For example, the leftmost column can be inserted into a table of 5 rows and columns, used to display logo icons and corresponding text content, the middle column can be divided into 3 to 4 cells, each cell is used to show the main content of different columns tips, the right column can be split into 5 areas to display different content. This makes the main content of the Web page by dividing multiple small cells in a large table. As for the specific cell operation in this will not repeat, we can try to experience.

Although through the table can achieve the most basic page positioning, but this method is not without drawbacks, the biggest problem is that the table content download more time-consuming, often have to wait for a table to download all the content after the completion of the table content, so especially attention to the table nested use, Try not to nest too many tables to affect the download speed of the page.