Form design of Dreamweaver Web page making

Source: Internet
Author: User
Tags dreamweaver

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.