Dreamweaver 4 concise tutorial (7. Web page layout)

Author：Eve Cole Update Time：2009-05-30 18:35:53

7. Web page layout

Use of tables

Tables are a very important element of web pages. Because HTML itself does not provide more layout methods, we often need to use tables to achieve fine layout of web pages. It can be said that tables are the most important skill in web page production. How well tables are used directly reflects the level of web designers.

Click on the object panel

, you will see the following dialog box:

① Rows: the number of rows in the table; Columns: the number of columns in the table;

② Width: The width of the table, the unit can be Pixels (number of pixels) or Percent (percentage). The size of the table defined in pixels is fixed, while the table defined in percentages will change according to the size of the browser. The difference between the two definition methods will be explained in depth later;

③ Border: width of table line;

④ Cell Padding: cell spacing; Cell Spacing: cell margin. The so-called cell refers to each small cell in the table.

After setting as shown in the figure, you will get the following form:

Click on the table line to select the entire table. You can see this in the properties panel:

① Rows, Cols: rows and columns of the table;

② W, H: The width and height of the table. Normally, we do not define the height of the table;

③ CellPad, CellSpace: cell spacing and cell margins; Border: width of table lines;

④ Ailgn: Alignment of the table, you can move the table to the left (Left), center (Center), or right (Right)

⑤

: Eliminate row height settings;

: Eliminate column width settings;

: Convert the table width setting from percentage to pixels;

: Convert the table width setting from pixels to percentage;

⑥ Bg Color: Set the background color of the table;

⑦ Brdr Color: Set the color of the table line;

⑧ Bg Image: Set the background image of the table. If the background image is set, the background color will be invalid; click the briefcase button at the back to select the background image;

If we move the cursor to one of the cells, the properties panel we see is different:

①

: Merge cells (you must first select the corresponding cells to be merged);

: Split cells into multiple rows or columns;

② Horz: Horizontal alignment within the cell, the function is the same as

similar;
Vert: Vertical alignment inside the cell;

③ W, H: width and height of the cell;

④ Bg: cell background image;

⑤ Bg: cell background color;

⑥ Brdr: cell border color.