Full access to Dreamweaver skills

Source: Internet
Author: User
Tags dreamweaver

2. Skills in page layout

Dreamweaver is not only a good page creation tool, but also an accurate page layout and layout. This section describes several page layout skills.

1. Open the auxiliary table.Our design friends especially hope to precisely locate webpage elements. They like that each element can be precisely positioned according to their own wishes. The built-in Grid function of Dreamweaver can help achieve this hope. Run View-Edit Grid to enable coordinate assistance. You can select Grid-like or point-like display, and enable Snap to Grid. When you insert or add new elements, it will be precisely positioned according to your settings.

 


2. Use the table layout page skills.The rational use of the table function in Dreamweaver can easily beautify the page. Below I will introduce several tips.

1) create a 1px border. Some friends complained that Dreamweaver could not make a single-pixel table border. In fact, they can make such a single-pixel table by carefully using the attribute panel of the table. First, insert a table on the Object panel to define the table width, height, number of rows, and number of columns. At this time, the default CellPad, CellSpace, and Border values of the inserted table in Dreamweaver are 0. In the attribute panel, define the table's Border to 0 and CellPad to 5 (this can keep the content in the cell and the cell edge between 5 pixels ); cellSpace is 1 (this option ensures the spacing of one element between cells ). Set the background color of the table to dark (for example, #999999), and set the background color of the cell to light (for example, # FFFFFF ). Observe the effect in the browser.

2) import a data table. Upload text file. Execute Insert-Tabular Date in Dreamweaver to open the following window:

 

After adding parameters, you can import the data to a Dreamweaver table.

3) format the table. If you are bored with repeatedly setting parameters for each cell, you can use the Format Table Command to quickly Format the Table. This Command contains a variety of Table color schemes under the Command menu, you can choose one. Dreamweaver automatically applies the color scheme to the selected table. As shown in the following figure:

 


4. Exchange between tables and layers.Some friends prefer to arrange their page content freely and do not like the way tables work. In fact, you can use a flexible layer to arrange your page content and convert it into a table when you are satisfied. Select the layer to be converted and run the Modify-Convert-Layers to Table command. As shown in the following figure:

 


5. Update multiple framework pages at the same time.We need to update the content of two or more frameworks at the same time when clicking a link, which can be achieved through the following steps using Dreamweaver behavior.

1) select the text or image of the link.

2) open the behavior panel (Behaviors) and click the plus sign to add the Go to URL behavior.

 


3) in the Go to URL dialog box, all existing frame windows are displayed. We select a window name to set the file content to be updated in each window separately. Dreamweaver will add a "*" after the window with the target file set, indicating that the URL has been set in the framework window.

 


4) click OK. Click this link to update the content of multiple windows at the same time.

 

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.