Practical production techniques in Dreamweaver Web pages

dreamweaver| Skills | Web page

1, flexible use of style

Familiar with web design users know that the way to call style a lot, we can click the right mouse button to select Custon style to invoke the style standard, you can also click on the status bar in the list of elements on the right button to invoke style. Although different methods achieve the same effect, the resulting HTML code is completely different. For example, using the Custon style to invoke the style standard, in the Web page code to generate a 〈span〉 tag, so that a lot of labels will make the file is very bloated and affect the browser parsing speed, so we should try to use the status bar in the list of elements to call style.

2. Utilize format Table command

In complex web design, tables are used most of the way, because tables allow you to control exactly where text and images appear on a Web page, making the entire page look compact. Dreamweaver in this area, we can use the Format table (formatted table) command to quickly apply a predesigned style to a table. To use a predesigned style, first place the cursor in any cell in the table, select command → Format Table, and in the dialog box that appears, select a design from the list on the left. Press the Apply key to see the effect, and if not, you can reset or modify the values of some of the parameters, such as boundary thickness, background color, and so on.

3. Link to two Web pages at the same time

We all know that hyperlinks can only be linked to one page at a time. If we want to open the document in a different frames page at once, you can use the go to URL JavaScript behavior. Open a frames page, select the text or image, and then select Go URL from the behavior panel. We will notice that Dreamweaver will display all available frames in the Go to URL dialog box. Select one of the frames we want to link to and enter the corresponding URL before selecting another frame and entering another URL.

4, does not give the document the Chinese name

After making a good web page, we usually give a representative Chinese name to the Web page, one can make people look at the file name can probably understand the contents of the file, and secondly can facilitate the mutual call between the hyperlinks. But if you do this in the Dreamweaver, you will find that Dreamweaver is not too good for Chinese filename, often the phenomenon of incorrect page calls, so we later save the page in Dreamweaver, as far as possible in English or number as the file name, This will prevent the above error phenomenon.

5, cleverly set the font resolution

When we make a Web page, we often have this experience, that is, the production of a good web page on the local computer browsing is normal, but on another computer browsing on the discovery of the original beautiful pages become crooked, this is why? The original resolution of each computer to make your home page at different resolutions can be normal display , it has been solved well in Dreamweaver. In the lower-right corner of the document window, Dreamweaver displays the resolution size that the current document is designed to be. By clicking which number, you can specify the display resolution for the current page in the pop-up menu, and you can make your homepage more flexible by modifying it. So that the different resolution of the display can be better display.

6, cleverly hidden tags

If you insert an invisible element into a Web page, Dreamweaver automatically adds a corresponding element label to the page so that we can select invisible elements. But it's not all good, like we're inserting a table on the first line of a page with many layers, you will find that because the first row arranges too many layer element tags to make the table automatically back to the second row of the page, although it does not affect the effect of browsing, but it really will hinder our work. So when we think an element tag is in the right place, we simply block it out. The method is to press Ctrl+u to open the Preferences panel, select Invisibel Elements in category, and all element labels appear on the right side of the panel. As long as the unwanted element tag is removed before it is guaranteed to not appear again.

7, the use of drag and drop skills

When we use Dreamweaver to edit a Web page, we often need to insert some image or something, assuming that there are many images to insert, it is very troublesome to operate in the usual way. We can use the drag-and-drop technique to solve this problem well. First we turn the Dreamweaver operation window into the active window to make room to display the Explorer window, find the image files to insert, and drag them one by one with the mouse to the appropriate parts of the Web page. Dreamweaver will automatically add the URLs of these images to the HTML code of the file, which, of course, requires the dragged image file to be a file in a Web image format such as GIF, JPG, and so on. For images that are already on the web, just drag them over. However, if there is a hyperlink on the image being dragged, you can no longer use the drag technique, as it is simply the hyperlink address that was dragged over.

8, automatically set the update time

We know a Web page to get more heads, a very important one is to keep updating. But for our personal web pages, it is not easy to update every day in a timely manner. Therefore, we hope that the Web page can be automatically updated, the following author to provide an automatic update to modify the time of the source code, we just add this source code to ... The purpose of the update time between the/body> is:

Script language= "JavaScript" and "/script>"; the second is to click Text/custom style/edit/style sheet/new/redefine HTML in Dreamweaver by clicking the mouse Tag and select a from it, then select None in decoration, and the last click OK succeeds.

9, clever copy text

Copying text among several different applications is something we might want to do in the actual work. However, if we copy text from the editing area from Dreamweaver to another application, the HTML code and the text will be copied together, so how can we just copy the text in the edit area? We know that we usually use shortcut keys to ctrl-c when we copy, If we press a C key more when copying, then Dreamweaver will only copy the selected text.

10. Use shortcut keys

To improve the efficiency of operations, we can use shortcut keys in Dreamweaver, such as using Ctrl-b or ctrl-i to apply bold or italic formatting to text, or you can use some of the following keyboard shortcuts to apply HTML formatting to selected text: Ctrl-0: Unformatted Ctrl-t : paragraph Ctrl-1: Title 1 Ctrl-2: Title 2 Ctrl-3: Title 3 Ctrl-4: Title 4 Ctrl-5: Title 5 Ctrl-6: Title 6

11. Automatically close Web page

If we want our web pages to be automatically closed within a specified time, add the following code to the tags in the source code: script language= "JavaScript" "/script>" the code in 3000 represents 3 seconds, which is in milliseconds.

12, cleverly set the object name

When we use Dreamweaver to make very complex effects, it is possible to use one or more objects frequently and repeatedly, for example, we often need to locate a particular table, image, and so on, and if we do not name multiple objects on a particular page, then when we apply these objects repeatedly, It may be troublesome or error prone. To make it easy to invoke these objects, we should remember to give it a representative and easy to remember name every time we create a new object. When naming these objects, we can do so by using the object's Properties panel.

13. Add dynamic effect to image link

Sometimes in order to achieve a realistic effect, we want the mouse to move to a link can be a dynamic production. This effect can be easily achieved with Dreamweaver. Design, we first need to prepare two images, the first is the original image, the second is the mouse moving up the image. Then click the first picture with your mouse, and in the link bar in the property panel, fill in the file you want to link to. Then click the F8 key on the keyboard, click the "+" number in the pop-up Behaviors window, then select "Swap Image", select the second image in the window that appears, and then click OK.