Step 1: Press and drag the mouse in the upper two cells in the first column of the table. At this time, two cells can be selected. Then click the "Merges selected cells using spans" button in the property template to merge the two selected cells into one cell. According to this method, the two cells on the right side of the first row of the table are merged into one cell.
Tip: After selecting a cell, click the "Splits cell into rows or columns" button in the properties panel to split the cell into multiple rows or columns.
Step 2: Select all three cells in the first column of the table, and then set the background color (Bg) in the attribute template to "#FFFF00", so that the background of the cells in the first column of the table becomes yellow.
Step 3: Enter the corresponding text in the table. For the sake of beauty, you can set it in the center in the properties panel.
Step 4: In order to make the table produce a three-dimensional effect, you can select the entire table, then set the width of the table border (Border) to 7 in the properties panel, and set the border color (Border color) to blue.
Tip: It is usually difficult to select the entire table. Here are four commonly used methods: 1. Move the mouse outside the right edge of the table, press the mouse and drag to the left to quickly select the entire table. 2. Run the "Modify→Table→Insert Table" command to select the entire table. 3． Right-click the mouse in the cell and select the "Table→Insert Table" command from the pop-up menu to select the entire table. 4. Click any cell with the mouse, and then press the "Ctrl+A" combination button twice to select the entire table.
After completing the above operations, we can customize a professional-level form in Dreamweaver MX 2004.
3. Table positioning
In fact, the web page positioning of the form mainly divides the web page content into several areas, and then fills in the corresponding content into different tables respectively, thereby making a very standardized and professional web page. Let’s take a look at how the website shown in Figure 2 is implemented through tables.
1. Title and navigation area
The top part of the web page consists of two large tables: the upper table is the picture area, and the lower table is the navigation area. The image area is divided into rows and columns. Use the "Insert→Image" command to insert the title image and logo icon of the website. The navigation area is a table with one row and nine columns. Enter the names of each sub-column respectively, and then use the "Insert→Hyper Link" command to create links for each navigation column.
2. Text area
Generally speaking, the text area is constructed from a large table with one row and three columns. Each column is inserted into a separate table or split to form multiple areas and enter corresponding information. For example, a table with 5 rows and 1 column can be inserted into the leftmost column to display the logo icon and corresponding text content; the middle column can be split into 3 to 4 cells, each cell used to display the main content of different columns. Content tip; the column on the right can also be split into 5 areas to display different content. In this way, multiple small cells are divided into a large table to form the main content of the web page. As for the specific cell operations, I won’t go into details here. You can try it yourself.
Although the most basic web page positioning can be achieved through tables, this method is not without its shortcomings. Its biggest problem is that downloading table content is time-consuming. It is often necessary to wait for all the content in a table to be downloaded before the table content can be displayed. Therefore, special attention should be paid to the nested use of tables, and try not to nest too many tables to affect the download speed of the page.