Dreamweaver skills

Source: Internet
Author: User
Tags dreamweaver
Create custom commands

One of the most useful functions of Dreamweaver is the "History Panel ". Based on the history panel, Dreamweaver can create a new command sequence. To create a command, simply execute the steps you want to record. Then, on the history panel, select the step you want to save, click the "save as" icon in the lower right corner, start a name, and click OK. In this case, your custom commands appear in the "command" menu and can be used at will.

Create custom object

The "object panel" is very helpful for quickly inserting projects, such as forms and frameworks, into pages. To create a custom object, first create a file that contains the code you want to insert into the document. For example, to create a "CNET internal", and then create a new panel in the object window, create a folder under "ConfigurationObjects" in the Dreamweaver installation directory. The name can be set as needed, for example, "My Objects ". Place the file named newsletters.htm in this directory. At the same time, an icon file is required to represent the new object. You can create an icon file by yourself, or simply insert a normal icon into Dreamweaver. If you create your own icons, create an 18x18 pixel GIF file. Save the graphic file in the same directory with the same name as the new object.

Now, restart Dreamweaver or re-import Extensions (press Ctrl and click the object window pop-up menu). You can see a new function page in the object window, the icon is the one you set. You can drag the new object to the page like other objects.

If you are familiar with Javas APIs, you can create more complex objects and other extensions, such as floating panels and actions. Alternatively, you can simply download a ready-made object from Macromedia Exchange.

Changes the viewer's mouse status

This is achieved by editing the CSS style sheet. Select "text> CSS style> edit style sheet". In the edit style sheet window, click "new. Select "create custom style", name the style table, and click OK. Edit the style sheet, select "extension" on the left, and select the expected pointer effect from "cursor" on the right.

Use the Dreamweaver anchor tag to create a jump link on a page

Using Dreamweaver's "anchor tag", we can implement this function. The specific method is: Move the cursor to the place you want to jump to, select "Insert> Name anchor" in the menu, and enter the anchor name. Next, enter "# bookmark name" in the target box of the link you want to call, so that the jump link in the page is ready. Here, if we enter the webpage name before the anchor name, it will jump to the bookmarks on other pages. For example, if you input "“index.htm # top" in the connection, when the viewer clicks this link, it will jump to the "top" anchor on the index page.

Remove the gaps between images and tables

It is not acceptable to set the border to "0" only on the table attribute panel so that there is no gap between the image and the table, you also need to set the two attributes of the cell to "0" (cellspacing = "0" and cellpadding = "0") on the attribute panel of the table ").

Use tracking images to help locate the positions of various elements on the web page

"Image tracking" is a very effective feature of Dreamweaver, which allows users to use the original design draft as an auxiliary background on the webpage. In this way, you can easily locate the position of webpage elements such as text, images, tables, and layers on the page. The specific use of image tracking is as follows: first, use various plotting software to create an imaginary web page layout pattern map, save the image as a network image (including gif, jpg, jpeg, and png ). Use Dreamweaver to open your edited webpage, and select "modify> Page attribute" in the menu ", in the displayed dialog box, enter the position of the web page layout chart you just created in "tracking Image. Then set the transparency of the tracking image in the image transparency. OK. In this way, you can easily locate each element on the current webpage. The webpage that uses the tracking image does not display the background pattern when editing with Dreamweaver. However, when browsing with a browser, the tracking image disappears, what you see is the edited webpage (of course, the background pattern can be displayed ).

About "convert table width to Pixels" and "convert table width to percentages"

Converting table width to pixels and converting table width to percentages are two important functions of Dreamweaver to set table width. When you open a webpage with a table, select a table and you will be able to see the two buttons in the table attribute tool panel that is displayed later. As the name implies, "converting the table width to pixels" means that the width of all cells in the table is represented in pixels, "Convert table width to percentage" indicates the width of all cells in the table as a percentage. Think about their functions. If the width of a table is all expressed in pixels, the table will not enlarge the cell width when the browser window is enlarged. After converting the table width to pixels, the 640-width table created in the "480 x 100%" resolution is still 100% wide at a higher resolution. So using these two features can make web page layout more efficient.
<

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.