Dreamweaver basic skills in full contact

dreamweaver| Skills Many friends use Dreamweaver for a period of time, began to be keen to find a variety of plug-ins, the pursuit of a variety of special effects, but for the basic function of Dreamweaver instead of in-depth research, In fact, there are many useful skills in Dreamweaver, if you use more, not only can improve efficiency, but also can achieve a lot of practical results. Today, I introduced some of the skills commonly used in the work to you, I hope for some use, but also hope to arouse the desire for in-depth study. I am prepared to introduce a variety of skills according to the different stages of the work.

　　 the planning stage--the technique of the site window

DREAMWEAVR's site window is often overlooked by many friends, in fact, using the Site window we can easily accomplish a lot of tasks. Let me introduce a few practical tips.

　　 1, quickly add site navigation。

Use the site map in the Site window to quickly create a prototype of the site and to easily add navigation links between pages. First press the icon below
Open the Sitemap window, select the Index.htm file, click and drag a small circle in the upper-right corner of the index.htm file in the Site Navigator window, drag it to a file in the left File window, as shown in the following figure;

Dreamweaver will automatically add mydesign.htm links to the index.htm file, and after doing this and pointing to other related linked files, the navigation window looks like this:

Open the index.htm file at this time, you can see the corresponding connection text and links have been added, we can according to the needs of their reasonable modification and organization. As shown in figure:

　　2, quickly modify the file title. many times we create new files often ignore the content of the set file title, after the need to modify, often have to open each file modified separately. In fact, this work can be easily completed in the Site window. Open the show Page Titles under the Site window View menu to make the files in the Site window appear in the file header instead of the original file name. The default file header is untitled document we can individually click two times to change the default text for the headers we need. As shown in figure:

　　3, quickly generate site map. sometimes we need to make a site map that contains all the file structures of the current site without finding the right method. Dreamweaver itself comes with this function by opening the File-save site Map command and entering the saved file name in the pop-up dialog, Dreamweaver automatically generates a. bmp or. png site picture in the root directory of the current site.

　　Second, the page layout stage skills

Dreamweaver is not just a good page-making tool, but it also allows for accurate page layout and layout, which we introduce in a few page layouts.

　　1, open the auxiliary table. design friends are particularly interested in the precise positioning of the page elements, they like each element can be the precise positioning of their own desires. The Dreamweaver's own grid feature can help with this hope implementation. Execute command view-edit grid to open coordinate assistance, you can select a mesh or point display, open Snap to Grid, and later insert or add new elements, will be accurate positioning according to your settings.

　　2, the Use of Table layout page skills. reasonable use of the table in the Dreamweaver function, you can easily achieve the purpose of beautifying the page, I introduce a few tips below.

1 Create a 1px border. Some friends complain that Dreamweaver can not make a single pixel table border, in fact, carefully using the table's property panel can make such a single pixel table. First, you use the object panel to insert a table that defines the width, height, and number of rows and columns of the table. At this point, the default Cellpad and Cellspace, border for inserting tables in Dreamweaver are 0. The border of the table in the Properties panel is 0,cellpad 5 (this allows 5 pixels between the contents of the cell and the edge of the cell), and the Cellspace is 1, which keeps the cell spacing between 1 elements. Sets the background color of the table to be dark (such as #999999), and sets the background color of the cell to be light (such as #ffffff). You can see the effect in the browsing.

2 Import the data table. Sometimes we need to import some of the tables created in the Execel file into Dreamweaver, and we can save the original Execel file as a tab-delimited. txt text file. Executing insert-tabular date in Dreamweaver opens the following window:

After you have added each parameter, you can import the data into a table in Dreamweaver.

3 Format the table. If you're tired of repeating the parameters of each cell, use the Format Table command to help you format the table quickly, with a variety of table color schemes in the Command menu, which you can choose from, Dreamweaver will automatically apply the color scheme to the form you selected. As shown in figure:

　　4. Tables and layers turn each other. some friends like to freely arrange his page content, always do not like the way the table works. You can actually use a flexible layer to arrange your page content and then convert it to a table when you feel satisfied. Select the layer you want to convert and execute the command modify-convert-layers to Table. As shown in figure:

　　5. Update multiple frames page at the same time. there are two or more frames that we need to update at the same time as we click on a link, which can be done using the Dreamweaver behavior in the following steps.

1 Select the linked text or picture.

2 Open the Behavior panel (behaviors), click the plus sign to add the Go URL behavior.

3 in the Go URL dialog box shows the current existing frame window, we select a window name, you can individually set each window will be updated file content. Dreamweaver will add a "*" number to the window after the target file is set, indicating that the frame window has a URL set.

4 after the completion of the point of determination, we click this link, will also update the contents of multiple windows.
　　Third, the content of the article

How to organize content faster and more easily is something that every friend wants to know, and maybe you know it, maybe not, but the important thing is that by using it constantly, you'll find it's superior.

　　1. Quick label editing. for friends who are familiar with handwriting code, it is often necessary to switch to the code window to manually add some code. In fact, the use of Dreamweaver Quick Tag Editor can quickly insert a variety of HTML tags, one is to click the Property panel icon inserted, another shortcut is Ctrl+t, both methods will open the Quick Tag Editor, you can directly from the list to select the desired source code labels, The following figure:

　　2, quickly add picture border. for many pictures inserted in a Web page, there is no border, sometimes we need to add a border to the picture, we do not need to open the image processing software to achieve. One way to do this is to define border as 1px directly in the property panel after selecting the picture, this adds a 1-pixel border to the picture, and another way is to define a style, and we can define the IMG tag directly as a style with four sides of 1px, and all the inserted pictures in the page will have the same border. As shown in figure:

　　3, use the drag way to increase the link. Dreamweaver support for linking to other files within the site directly from within the document, we can place the Site window and document window side-by-hand, as shown in the figure:

Then select the text that you want to link to in the document, open the property surface version, point to file after the link address bar to the target files in the Site window, as shown below:

　　4, how to add background sound. in Dreamweaver for some multimedia sound file insertion, many friends are confused, in fact very simple, click Dreamweaver Work window the bottom left corner of the label, open the Behavior panel, in the pop-up behavior window dot + number, Choose Play Sound, select the sound file you want to join. In the document window, select the sound file identification, in the property panel click Parameters can set the background music cycle times, whether the automatic playback and other properties, such as figure:

　　Four, beautify the article

Landscaping a variety of web elements is time-consuming and not necessarily the effect of the work, the following I introduced a few tips may be able to help you a little busy.

　　1, quickly create a color scheme. we often need to set the link to each state of the text color, some friends feel that their color is not very good, always to find some color manual. In fact, Dreamweaver itself has brought some color scheme, open commands-set color Scheme command, we can see that there are many sets of color scheme, each defined the background color, text color, link the color of each state, you can only choose one, see the following figure:

　　2, CSS link style tips. text links typically have four states, link, hover, active, visited, we usually define different colors and styles for the various states of the text link, but often friends find that the styles they define are not as conceived as they are when viewed. The main reason is that there are certain requirements for the order of the links in the style sheet, in the correct order: A:link-a:visited-a:hover. For the general friend, in fact, many times just want to hover state change, there is a trick is not to define the link style in the above method, and only need to define a and a:hover state of style, so that only the hover state of the style and other state of the difference. Modify the method as shown below;

　　3, create different colors of the connection text and underline. Plain link text and link underline are the same color, in fact, we can also use the style sheet border attribute to replace the normal link line, because the border has more control parameters and styles, So as long as the color of the border and the color definition of the text can achieve our goal. For example, we can define the text as black, and the underline in the border option is red, as shown below;

　　V. Improving efficiency skills

Dreamweaver also contains a number of commands that can greatly improve productivity, including the creation of library items, the use of templates, the functionality of the history panel, and the search for replacement functions. Here I introduce a few small tips to demonstrate the power of these commands.

　　1, clean up Word file skills. we often need to convert some Word files to HTML files, but the result of this conversion is that the resulting HTML file is very large, contains a lot of duplicate code, comprehensive utilization of several features of Dreamweaver can easily clean out the useless code. First open the HTML file generated by word, execute the clean up Word HTML command under the Commands menu, and the program automatically recognizes the original Word version and clears the unwanted code. But there are still a lot of duplicate code at this point, mainly containing a lot of and

tags, we can again execute the Clean up HTML command under the Commands menu, select the specific tag (s) option in the pop-up dialog box, and enter the span and P tags, separated by spaces in the middle, and all the span and P tags are cleared out after the command is executed.

However, there are also properties in each picture attribute in the file that resemble the v:shapes= "_x0000_i1025", and we need to clear these properties. Open the Find Replace panel, set the replacement rules as shown in the following diagram, and then clear these properties for all pictures. As pictured;

　　2, quickly replace the file title. I described earlier that you can replace the header of a file in the Site window, but only one at a time, and we can try to replace the title of multiple files at once with the find substitution command described in the previous step. Usually our new file title is untitled document, and you can open the Edit-find and replace command to replace all file titles for the current site with untitled document with our own headings.

　　3, set the default document format. The above method is fast, but each time we create a new file, the default file title is still untitled document. Because when you create a new document, Dreamweaver calls a default page as the default format, which is \dreamweaver 4\configuration\templates\ Default.html, so that we can set some of the unified format of our site, such as background color, font size, file title, and so on, and then save it to cover the default.html file above. In the future, when we create a new file, Dreamweaver will automatically apply the format we have set, which can improve the productivity.

　　Vi. post-Maintenance post

Well, after so many of the above introductions, we have mastered some of the techniques of web making, but have you finished the page no longer contain errors? Are your links correctly linked? Does your page perform well in a variety of browsers? Do you have a lot of files in your site that you no longer need? Many similar problems still exist, these are the site of late detection and maintenance. Here we will introduce a few later detection techniques.

　　1, link detection. Execute Menu File-check links command, Dreamweaver automatically detects all links in the current site and detects invalid links, as shown in the following figure:

Double-click a detected result, will automatically open the appropriate page and directly navigate to the wrong link, it is convenient for us to modify the link error.

　　2, fast detection of useless files. Execute menu Commands Site-check links sitewide can turn on the link file detection feature, and we can also use this feature to check for unwanted files in the site and delete them. As long as you select the top dropdown box for orphaned files, all of the sites that are useless are listed below, select them all, and press the DELETE key to remove them.

　　 3, the rapid generation of site reports (Reports). Run menu commands site-reports can quickly generate site reports or file reports that meet certain criteria, such as empty tags that can be deleted, unnamed file headers, pictures without alt attributes, and so on. The following figure:

We need to first select the range that needs to be tested in the top Drop-down box. For example, the entire site, the current document, a folder, and so on, and then check the conditions below, the results will automatically appear in a dialog box, double-click one of them can also be directly open source file for modification. The following figure:

It is important to note that if you have a large number of site files, this command will consume a lot of system resources, so it is best to select only one condition at a time.

　　 PostScript:Write here I have introduced a lot of skills, in fact, there are many similar functions in Dreamweaver, but I personally think these can not be called skills, many are the basic functions that we need to master, but there will be many ways on the road to the goal, These may be some of the more rapid ways to achieve goals.