Practical production techniques in web design

We know a Web page to get more heads, a very important one is to keep updating.

1, flexible use of style

Familiar with web design users know that the way to call style is very much, we can click the right mouse button to select Custon style to invoke the style standard, but also in the status bar in the list of elements on the right click 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 a complex web design, tables are used most of the way, because tables allow you to control exactly where text and images appear on a page, making the entire page look compact. Dreamweaver In this regard, we can use the "Format table" (formatted table) command to quickly apply a pre-designed style to the 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, if not satisfied, you can reset or modify the values of some parameters, such as boundary thickness, background color, and so on.

3. Link to two Web pages at the same time

We all know that the ultimate link can only be connected to one page at a time. If we want to open the file in a different frames page at once, we 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

Everyone in the production of the Web page, usually give a representative of the Chinese name of the Web page, one can make people look at the file name can probably understand the contents of the file, and secondly to facilitate each of the ultimate links between the call. 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 numbers as the name of the file, 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 very 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, in the Dreamweaver has been a better solution. In the lower-right corner of the file window, Dreamweaver displays the resolution size that the current file is designed to be. Click which number to specify the display resolution for the current page in the pop-up menu, and modify to make your home page more flexible. 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 that's not all good, like when we insert a table on the first line of a very multilayered page, 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 hook is removed from the label of the element that is not necessary, he will make sure that it does 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 so 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 very well. First we turn the Dreamweaver operation window into the active window to make room to display the Explorer window, find the image file to insert, and drag them to the appropriate part of the Web page with the mouse. Dreamweaver will automatically add the URLs of these images to the HTML code of the file, and of course the image files that need to be dragged here must be files in a Web image format such as GIF, JPG, and so on. For the images that are already in the Web page, it's the same, just drag it over. But if you have the ultimate link on the image being dragged, you can't use the drag technique anymore, because it's just the ultimate link address that's 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 pages, it is not very 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 original code, we just add the original 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 between 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 operational efficiency, we can use shortcut keys in Dreamweaver, such as using Ctrl-b or ctrl-i to apply bold or italic formatting to text, or use 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 page to be automatically closed within a specified time, add the following code to the label in the original page: script language= "JavaScript" "/script>" the code in the 3000 for 3 seconds, he 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 in a particular Web page, then when we apply these objects repeatedly, may be very troublesome or error prone. To make it easy to invoke these objects, we should remember to give him a representative and more memorable name every time we create a new object. When naming these objects, we can do so through 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. Using Dreamweaver can be very easy to achieve this effect. 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.