Dreamweaver Web page Production Tutorial: Table design

dreamweaver| Tutorials | design | Web page

Form Design

Tables are an important part of modern web page production. Tables are important because they enable the precise layout and positioning of Web pages. The tutorials in this section are divided into two steps. First look at an instance of the table operation. Then look at some basic methods of table manipulation. Before we start making a table, let's first make an introduction to the names of the parts of the table. (Look at the picture below)

A table is called horizontally, and the column is called vertically. The cross section of a row is called a cell.

The distance between the contents of the cell and the border is called the margin. The distance between cells and cells is called spacing. The edges of the entire table are called borders.

Here's a look at an example of a page we made using a table

The layout format of this page, if used in the way we talked about the alignment is not possible. So we need to use a table to do it. It's actually made from two rows of two-column tables.

1. Select in the Insert Bar

button or Insert menu > select Table. The System Pop-up Table dialog box is shown below. We have all known these parameters. Line: 2. Column: 2. The rest of the parameters retain their default values ...

2. A table is generated in the Edit view interface. The black dots in the right, bottom, and lower right corners of the table are the adjustment handles that adjust the table's height and width. The height and width of the table can be adjusted separately when the cursor is moved to the point. You can also adjust to the border line of the table. (pictured below)

3, in the first block of the table hold down the left button, drag down the selection of two cell cell. (pictured below)

Then select the merged cell button in the expanded Properties panel (as shown in the figure red box below). Merges the cells of a table. If you want to split a cell, you can use the button to the right of the merged cell button.

The results of the merge are shown below.

4, drag the table with the mouse to adjust the border to the appropriate size.

5, click on the left cell, and then enter the "Photographic Works Appreciation" text, and resize, because the vertical row should be a return of each word. If you need to adjust the size of the grid. Only need the mouse cursor to move to the border to drag and drop.

6, in the right upper and lower cell inserts the picture and the text respectively. The basic appearance of the page has.

7. Click to move the cursor to the border of the table. An adjustment box appears around the table to indicate that the entire table is selected. Then, in the property panel, set the "border" value to the appropriate value, if 0, the border in the edit state, the dotted line, the browse is not visible.

A page that meets the requirements is done with the help of the table.

Through the above operation we have a preliminary understanding of the table. Also note that the corresponding property panel is different for the entire table operation and for a cell operation.

Table color settings, select the entire table, and use the property panel's color selector to set the background color. Cells can also be set individually. Mouse in the need to set the cell point, the rest of the operation ibid.

Let's take a look at the differences between these property panels.

The table's property panel, to appear this panel must first select the entire table, the method has been mentioned above. You can fill in the required parameters in a number of options. The following figure:

When the cell is selected, the property panel changes as follows. Select a row or column to belong to the selected cell. The following figure:

Several common ways to manipulate a table:

Merge: Merges the selected contiguous cells into a single cell.

Split: Splits a cell into several cells.

Horizontal alignment: Divided into (left) (middle) (right) three kinds.

Vertical alignment: Divided (top) (centered) (bottom) (baseline alignment)

The table can also add or delete rows or columns. Right-click in a cell. Select table Options >> Select Insert Rows or columns in the right-click menu. The system will pop up the dialog box below.

Fill in the Data in the dialog box. The last thing to say is how to select the various elements in the table:

Select a row, move the cursor to the left of the leftmost cell of the row, and the cursor becomes an arrow. Click to select a row.

Select a column, move the cursor over the top cell of the column, and the cursor becomes an arrow, and then click to select a column.

Select the entire table, and move the cursor to the upper-left or right or bottom border line of the table. Click to select the entire table. A black box appears around the selected table to indicate that the entire table is selected. Please look at the following signal:

Select the cell. You can select more than one cell at a time. Select the contiguous cell, the first cell that is selected by the cursor, and press the SHIFT key to select the last cell. Select cells that are not contiguous. Hold down the CTRL key and click the cell you want.

We are talking about the use of the table here, table is the basic technology of Web page production, only through continuous practice to fully grasp.