Shulou(Shulou.com)06/02 Report--

The purpose of this article is to share with you what are the practical skills of making web pages in Dreamweaver. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Use the style flexibly

Netizens who are familiar with web design know that there are many ways to call Style. We can click the right mouse button and select Custon Style to call the Style standard, or we can right-click on the list of elements in the status bar to call Style. Although different methods seem to achieve the same effect, the actual HTML code generated is completely different. For example, use Custon Style to call the Style standard and generate a < span > tag in the web page code, which will make the file very bloated and affect the browser's parsing speed, so we should try our best to use the list of elements in the status bar to call Style.

2. Use Format Table command flexibly

In the complex web page design, the application of tables is the most, because the use of tables can freely control the specific location of text and images on the web page, so as to make the whole web page look compact and unified. Dreamweaver is not far behind in this respect, and we can use the "Format Table" command to quickly apply pre-designed styles to tables. To use a pre-designed style, first place the cursor in any cell of the table, then select the "Command" → "Format Table" command, 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 you are 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 hyperlinks can only be linked to one page at a time. If we want to open the document in a different frame page at once, we can use the "Go To URL" javascript behavior. Open a framed web page, select the text or image, and then select "Go To URL" from the behaviors panel. We will notice that Dreamweaver displays 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, then select another frame and enter another URL.

4. Do not give the document a Chinese name

After we have finished the web page, we usually give the web page a representative Chinese name, which enables people to roughly understand the contents of the file as soon as they look at the file name, and on the other hand, it is convenient for each hyperlink to call each other. But if you do this in Dreamweaver, you will find that Dreamweaver does not support Chinese file names very well, and there will often be incorrect page calls, so when we save web pages in Dreamweaver, try to use English or numbers as file names, so we can avoid the above errors.

5. Skillfully set the font resolution

When we are making web pages, we often have this kind of experience, that is, a good web page is normal when browsing on a local computer, but when browsing on another computer, we find that the originally beautiful web page has become crooked. Why? It turns out that the resolution of each computer should make your home page display normally at different resolutions, which has been well solved in Dreamweaver. In the lower right corner of the document window, Dreamweaver displays the resolution size at which the current document is designed. Click which number to specify the display resolution for the current page in the pop-up menu, which can be modified to make your home page more flexible. So that different resolutions of the display can be better displayed.

6. Skillfully hide the label

If an invisible element is inserted into a web page, Dreamweaver automatically adds a corresponding element tag to the page so that we can select the invisible element. But this is not all a good thing, for example, if we insert a table in the first row of a page with many layers, we will find that the table automatically falls back to the second row of the page because there are too many layer element tags in the first row. Although it does not affect the effect when browsing, but it does hinder our work. So when we think that an element tag is in the way, we just block it out. To do this, press Ctrl+U to open the Preferences panel, select Invisibel Elements in the Category, and all the element tags will appear on the right side of the panel. As long as you uncheck the tag of an unwanted element, it will not appear again.

7. Make good use of drag and drop techniques

When we use Dreamweaver to edit web pages, we often need to insert some images and so on. Assuming that there are a lot of images to insert, it is very troublesome to operate according to the conventional method. We can use drag-and-drop techniques to solve this problem. First of all, we turn the Dreamweaver operation window into an active window to make room to display the Explorer window. After finding the image files to be inserted, drag them one by one to the appropriate part of the web page with the mouse, Dreamweaver will automatically add the url of these images to the HTML code of the file, of course, the image file to be dragged must be gif, jpg and other web image format files. The same is true for images that are already on the web page, just drag them over. But if there is a hyperlink on the image being dragged, you can no longer use the drag technique, because only the hyperlink address is dragged in at that time.

8. Automatically set the update time

We know that if a web page wants to get more head-turning rate, a very important thing is to update it constantly. But for us personal web pages, it is not easy to update them every day. Therefore, we hope that the web page can be updated automatically, here is a source code that can automatically update the modification time, we just need to add this source code to … The purpose of updating time can be achieved between:

Second, use the mouse to click Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag in Dreamweaver, and select a from it, then select none in decoration, and finally click OK.

9. Skillfully copy the text

Copying text between several different applications is something we may often do in practice. However, if we copy the text in the edit area from Dreamweaver to another application, the HTML code and the text will be copied together, so how can we copy only the text in the edit area? We know that we usually use the shortcut key Ctrl-C to copy, and if we press one more C key when copying, then Dreamweaver will only copy the selected text.

10. Make good use of shortcut keys

To improve the efficiency of the operation, we can use keyboard shortcuts in Dreamweaver, such as Ctrl-B or Ctrl-I to apply bold or italic formatting to text, or some keyboard shortcuts below to apply HTML formatting to selected text:

Ctrl-0: unformatted Ctrl-T: paragraph Ctrl-1: heading 1 Ctrl-2: title 2 Ctrl-3: title 3 Ctrl-4: title 4 Ctrl-5: title 5 Ctrl-6: title 6

11. Automatically close the web page

If we want our web page to close automatically within a specified period of time, we might as well add the following code after the tag in the source code of the web page:

12. Skillfully set the object name

When we use Dreamweaver to create very complex effects, we may need to use one or more objects repeatedly, for example, we often need to locate a specific table, image, etc., if we do not name multiple objects in a web page, then in the repeated application of these objects, it may be troublesome or prone to errors. In order to make it easy to call these objects, we should remember to give it a representative and 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 effects to image links

Sometimes we want to be dynamic when we move the mouse over a link in order to achieve a realistic effect. You can easily achieve this effect with Dreamweaver. When designing, we first need to prepare two images, the first is the original image, and the second is the image after the mouse is moved up. Then click the first picture with the mouse, fill in the link to the file in the link bar in the properties panel, then click the F8 key on the keyboard, click the "+" sign in the pop-up Behaviors window, then select "swap image", select the second image in the next window, and finally click OK.

Thank you for reading! This is the end of this article on "what are the practical skills for making web pages in Dreamweaver?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.