2. Quickly modify the file title. Many times when we create new files, we often ignore the content of the file Title. When we need to modify it later, we often have to open each file and modify it separately. In fact, this work can be easily completed in the site window. Open Show Page Titles under the View menu of the site window to make the files in the site window display the file header instead of the original file name. The default file header is Untitled Document. We can click twice to change the default text to the file header we need. As shown in the picture:
3. Quickly generate site maps. Sometimes we need to make a sitemap that contains all the file structures of the current site and can't find a suitable method. Dreamweaver itself has this function. The method is as follows: Open the File—Save Site Map command and enter the saved file name in the pop-up dialog box. Dreamweaver will automatically generate a .bmp or .png format site in the root directory of the current site. picture.
2. Techniques in the page layout stage
Dreamweaver is not only a good page creation tool, but it can also perform precise page typesetting and layout. In this section, we introduce several page layout techniques.
1. Open the auxiliary form. Friends who have done design especially hope to accurately position web page elements. They like that each element can be positioned accurately according to their wishes. The Grid function that comes with Dreamweaver can help realize this hope. Execute the command View—Edit Grid to turn on coordinate assistance. You can choose grid or point display, and turn on Snap to Grid. When inserting or adding new elements in the future, they will be accurately positioned according to your settings.
2. Use table layout page techniques. Proper use of the table function in Dreamweaver can easily achieve the purpose of beautifying the page. I will introduce a few techniques below.
1) Create a 1px border. Some friends complain that Dreamweaver cannot create a single-pixel table border. In fact, you can create such a single-pixel table by carefully using the properties panel of the table. First use the Object panel to insert a table and define the width, height, rows and columns of the table. At this time, the default CellPad, CellSpace, and Border of the table inserted in Dreamweaver are all 0. Define the Border of the table in the properties panel to 0, CellPad to 5 (this will keep 5 pixels between the content in the cell and the edge of the cell); CellSpace is 1 (this will keep 1 pixel between cells) spacing between items). Set the background color of the table to a dark color (such as #999999), and set the background color of the cells to a light color (such as #FFFFFF). Just browse it and observe the effect.
2) Import the data table. Sometimes we need to import some tables created in Excel files into Dreamweaver. We can save the original Excel files as tab-delimited .txt text files. Executing Insert—Tabular Date in Dreamweaver opens the following window:
After adding each parameter, the data can be imported into a table in Dreamweaver.
3) Format the table. If you are tired of repeatedly setting the parameters of each cell, you can use the Format Table command to quickly format the table. This command is under the Command menu. This command comes with multiple table color schemes. You can choose one. , Dreamweaver will automatically apply the color scheme to the table you selected. As shown in the picture:
4. Interchange between tables and layers. Some friends like to arrange the content of their pages freely, but they don't like the way tables work. In fact, you can use flexible layers to arrange your page content, and then convert it into a table when you are satisfied. Select the layer you want to convert and execute the command Modify—Convert—Layers to Table. As shown in the picture:
5. Update multiple frame pages at the same time. There is a need for us to update the content of two or more other frame pages at the same time when a link is clicked. This can be achieved using Dreamweaver's behavior through the following steps.
1) Select the text or image of the link.
2) Open the Behaviors panel (Behaviors) and click the plus sign to add the Go to URL behavior.
3) In the Go to URL dialog box, all currently existing frame windows are displayed. We select a window name respectively and can individually set the file content to be updated in each window. Dreamweaver will add a "*" sign after the window where the target file is set, indicating that the URL has been set for this frame window.
4) Click OK after completion. When we click this link, the contents of multiple windows will be updated at the same time.
3. Content
How to organize content faster and more conveniently is what every friend wants to know. You may or may not know the following tips, but the important thing is that through continuous use, you will discover its advantages. .
1. Quick label editing. For friends who are familiar with handwritten code, they often need to switch to the code window to add some code manually. In fact, you can quickly insert various HTML tags using Dreamweaver's Quick Tag Editor. One is to click on the properties panel.
Icon insertion, another shortcut is Ctrl+T, both methods will open quick tag editing, you can directly select the required source code tag from the list, as shown below:
2. Quickly add picture borders. Many pictures inserted into web pages have no borders. Sometimes we need to add borders to pictures. We do not need to open image processing software to achieve this. One method is to select the image and directly define the Border to 1px in the properties panel, which will add a 1-pixel border to the image; the other method is to define a style. We can directly define the img tag as a style with 1px on all sides. Then all pictures inserted in the web page will have the same border. As shown in the picture:
3. Use dragging to add links. Dreamweaver supports dragging links directly from the document to other files in the site. We can place the site window and the document window side by side, as shown in the figure:
Then select the text that needs to be linked in the document, open the properties panel, and point the Point to File after the link address bar to the target file in the site window, as shown below:
4. How to add background sound. Many friends are a little confused about the insertion of some multimedia sound files in Dreamweaver. In fact, it is very simple. Click the tab in the lower left corner of the Dreamweaver working window, open the Behavior panel, click the + sign in the pop-up behavior window, select Play Sound, and select The sound files you need can be added. Select the sound file logo in the document window and click Parameters in the properties panel to set the number of loops of the background music, whether to automatically play and other properties, as shown in the figure:
4. Beautification
Beautifying various web page elements is a time-consuming and not always effective task. The following tips may help you a little bit.
1. Quickly create color schemes. We often need to set the text color of each link status. Some friends feel that their color sense is not very good, so they always look for some color matching manuals. In fact, Dreamweaver itself already comes with some color schemes. Open the Commands-Set Color Scheme command, and we can see that there are many sets of color schemes, each of which defines the background color, text color, and color of each link state. You only need to select Just one kind is enough, see the picture below:
2. CSS link style skills. Text links generally have four states, link, hover, active, and visited. We usually define different colors and styles for each state of text links. However, friends often find that the styles they defined do not look as expected when browsing. . The main reason is that there are certain requirements for the definition order of links in the style sheet. The correct order is: A:link—A:visited—A:hover. For ordinary friends, in fact, many times they just want the hover status to change. A little trick is not to define the link style according to the above method, but only to define the styles of a and a:hover status, so that there is only the hover status. The style is different from other states. The modification method is as shown below;
3. Create connecting text and underlines in different colors. Ordinary link text and link underline have the same color. In fact, we can also use the Border attribute in the style sheet to replace the underline of ordinary links. Since Border has more control parameters and styles, as long as the Border color and Our purpose can be achieved by different color definitions of text. For example, we can define the text as black and the underline as red in the Border option, as shown below;
5. Techniques for improving efficiency
Dreamweaver also contains many commands that can greatly improve work efficiency, including the creation of library projects, the use of templates, the history panel function and the search and replace function. Here I introduce a few small tricks to demonstrate the power of these commands.
1. Tips for cleaning up Word files. We often need to convert some Word files into HTML files, but the result of this conversion is that the generated HTML files are very large and contain a lot of repeated code. Using several functions of Dreamweaver can easily clean up the useless code. First, open the HTML file generated by Word and execute the Clean Up Word HTML command under the Commands menu. The program will automatically identify the original Word version and remove the useless code. However, the file at this time still contains a lot of repeated code, mainly containing a large number of and
tags. We can execute the Clean up HTML command under the Commands menu again, select the Specific Tag(s) option in the pop-up dialog box, and Enter span and p tags, separated by spaces. After executing the command, all span and p tags will be cleared.
But at this time, each image attribute in the file also contains attributes similar to v:shapes="_x0000_i1025", and we still need to clear these attributes. Open the Find and Replace panel and set the replacement rules as shown below. After execution, these attributes of all images will be cleared. As shown in the picture;
2. Quickly replace file titles. Earlier I introduced that you can replace the file title in the site window, but you can only replace the title of one file at a time. We can try to use the find and replace command introduced in the previous step to replace the titles of multiple files at once. Usually the titles of our newly created files are Untitled Document. You can open the Edit-Find And Replace command and make the following settings to replace all files on the current site titled Untitled Document with our own titles.
3. Set the default document format. Although the above method is fast, every time we create a new file, the default file title is still Untitled Document. Because when creating a new document, Dreamweaver will call a default page as the default format. This file is Dreamweaver 4ConfigurationTemplatesDefault.html, so that we can set some unified formats in our site, such as background color. , font size, file title, etc., then save it overwriting the Default.html file above. When we create new files in the future, Dreamweaver will automatically apply the format we set, which can greatly improve work efficiency.
6. Post-maintenance
Okay, after so many introductions above, we have mastered some web page production skills, but will your finished page no longer contain errors? Are your links all the correct links? Does your page perform well across browsers? Do you still have a lot of files on your site that you no longer need? Many similar problems still exist, and these belong to the later detection and maintenance of the site. Here we introduce a few more post-detection techniques.
1. Link detection. Execute the menu File—Check Links command, Dreamweaver will automatically detect all links in the current site and detect invalid links, as shown below:
Double-clicking a detected result will automatically open the corresponding page and directly locate the wrong link, which is very convenient for us to modify the link error.
2. Quickly detect useless files. Executing the menu command Site—Check Links Sitewide can turn on the link file detection function. We can also use this function to check useless files in the site and delete them. Just select Orphaned Files in the top drop-down box, and all useless files in the site will be listed below. Select them all and press the Delete key to delete them.
