Practical tips for creating Web pages with Dreamweaver

Source: Internet
Author: User

Dreamweaver This software for web design friends certainly is not unfamiliar, this software is said to be the web design necessary, because it can greatly improve our efficiency .

1. Flexible use of Style

users familiar with web design know that there are many ways to call style, and we can either click the right mouse button to choose Custon style to invoke the style standard, or you can right-click on the list of elements in the status bar to invoke style. Although the effects of different methods seem to be the same, the actual 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, such a lot of tags will make the file is very bloated and affect the resolution of the browser, so we should try to use the status bar in the list of elements to call the style.

2. Utilize the Format Table command

in complex web design, the application of tables is the most, because the use of tables can freely control the text and image on the page to appear on the specific location, so that the entire page looks compact and unified. Dreamweaver is also behind this, and we can use the Format Table command to quickly apply a pre-designed style to a table. To use a pre-designed style, 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 "Apply" key to see the effect, if not satisfied, you can also reset or modify the values of some parameters, such as border thickness, background color and so on.

3. Link to two pages at a time

we all know that hyperlinks can only be attached to one page at a time. If we want to open a document in a different frames page at once, you can use the "Go to URL" javascript behavior. Open a framed page, select a text or image, and 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 and enter the appropriate URL before selecting another frame and entering another URL.



4, do not give documents in Chinese name

everyone in the production of the Web page, will usually give the page a representative of the Chinese name, one can give people a look at the file name can probably understand the contents of the file, and secondly, can facilitate the mutual calls between hyperlinks. But if you do this in Dreamweaver, you will find Dreamweaver support for Chinese filenames is not too good, often there is a page call incorrect phenomenon occurs, so we later in the Dreamweaver save the page, try to use English or numbers as the file name, In this way, you can avoid the above error phenomenon.

5. Cleverly set the font resolution

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

6. Smart Hide Label

If an invisible element is inserted into a Web page, Dreamweaver automatically adds a corresponding element label to the page so that we can select the invisible element. But this is not all a good thing, for example, when we insert a table in the first row of a page with many layers, we find that the table is automatically returned to the second row of the page because there are too many layer element labels in the first row, although it does not affect the effect while browsing, it really does hinder our work. So when we think that an element tag is in the right place, we simply block it out. By pressing Ctrl+u to open the Preferences panel, select Invisibel Elements in the category and all the element labels will appear to the right of the panel. Just remove the unwanted element tag before it is guaranteed to be no longer present.

7, the use of drag and drop skills

when we use Dreamweaver to edit Web pages, we often need to insert some images or something, assuming that there are a lot of images to insert, it is very troublesome to follow the usual method. We can use drag-and-drop techniques to solve this problem well. First we turn the Dreamweaver operation window into the active window to make room for the Explorer window, find the image file to insert, 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 like gif or JPG. The same is true for images already in the web, just drag them over. However, if there is a hyperlink on the dragged image, you can no longer use the drag technique, because the only hyperlink that was dragged around was the address of the hyperlink.


8. Automatically set update time

we know a Web page to get more heads, a very important thing is to keep updating. But for our personal web pages, it is not easy to update every day. Therefore, we hope that the webpage can be updated automatically, the following author provides a source code that can automatically update the modification time, we just add this source code to ...</body> to achieve the purpose of the update time:

< Script language= "JavaScript" > </script>; Second, click Text/custom style/edit/style sheet/in dreamweaver with the mouse New/redefine the HTML Tag and select a from it, then select None in decoration, and then click OK to succeed.

12. Clever copying of text

copying text between several different applications is something that we may want to do in our actual work. However, if we copy the text from the edit 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 it is usually copied with the shortcut key ctrl-c to operate, If we press a C key more when copying, Dreamweaver will only copy the selected text.

13. Use shortcut keys

to improve the efficiency of your 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

14. Automatically close Web pages

If we want our web page to be closed automatically at a specified time, we may add the following code to the tag in the source code: < script language= "JavaScript" > </script> Where 3000 in the code represents 3 seconds, which is in milliseconds.

15. 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, etc., if we do not name multiple objects in a particular page, It can be cumbersome or error-prone when you re-apply these objects. To make it easier to invoke these objects, we should remember to give it a representative and easy-to-remember name every time a new object is created. When naming these objects, we can do it through the object's Properties panel.

16. Add dynamic effect to image link

sometimes in order to achieve a realistic effect, we want the mouse to move to a link when the movement can be generated. 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 the mouse, fill in the link bar in the Properties panel to link the file, 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 window that appears, and then click OK.

there's more . Website Production Tutorials can login e Mentor Network learning.

This article is from the "Add Language" blog, please make sure to keep this source http://yuguotianqing.blog.51cto.com/9292883/1549661

Practical tips for creating Web pages with Dreamweaver

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.