This article will share with you 48 dreamweaver super practical skills. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Related recommendations: "dreamweaver tutorial"
48 super practical skills in DW
1. Use Dreamweaver 4.0 to easily design web pages that will automatically adjust flexibly
The first thing you need to ensure is that your page content is in table format, then open the page you want to edit and press "Ctrl F6" Or the menu "View→TableView→Layout? View" switches to layout view. At this time, you can see the column width of the cell. There is a small drop-down arrow next to the column width number. Click the small arrow above the column you want to set flexible display, and then select "Set column as flexible display" "(Make Column Autostretch). A wavy line will appear above the column box instead of the number indicating the column width. After completion, your page will become a flexible page. Also, be careful not to include images that are too large on the page.
************************************************ ******************
****************************** ******************************
2. Use Dreamweaver 4.0 to create a Flash button with flashing effect
Select the menu Insert→Interactive?Images→Flash?Button to see which embedded buttons are there. In the pop-up dialog box, you can select the button style you want in the "Style" list, and you can see the effect of this style in the preview (Sample) window. After selecting, enter the text on the button in the "Button? Text" window, select the font in the "Font" window, enter the text size in the "Size" window, enter the target of the link in the "Link" window, and enter the target in the "Target" window Select the way to open the link, select the button background color in "BgColor", and enter the saved file name in the "Save? As" window. After completing this, press the "OK" button and you will have completed a Flash button. This button will also be automatically inserted into your web page. Then select the button you just created in the Dreamweaver editing window. The properties window will display the properties of the button. Click the "Play" button above and you can directly create the button in the editing window. Preview the flashing effect of this button. It should be noted that this feature of Dreamweaver?4.0 does not support Chinese fonts.
************************************************ ******************
****************************** ****************************
3. Customize keyboard shortcuts in Dreamweaver 4.0
Select the menu "Edit→Keyboard?Shortcuts". In the dialog box, a list of currently enabled and changeable shortcut keys will be listed. You can change the shortcut keys here to what you are used to. If you want to change a shortcut key, first select the command you want to change, then select the current shortcut key. The shortcut key will appear in the "Shortcuts" list, and then enter the shortcut key you want to use in the "Press Key" window. , and then click the "Change" button to complete the change. You can also use the " " and "-" buttons to add or delete the current shortcut keys.
************************************************ ******************
****************************** ******************************
4. Integrate Dreamweaver?4.0 with Fireworks
If If Dreamweaver/Fireworks is installed on your computer at the same time, you can use the Fireworks integration function provided by Dreamweaver? 4.0. Using this function, you can modify your GIF images to be more attractive and easily achieve animation effects. Select the GIF image you want to modify in the Dreamweaver editing window, and then click the "Edit" button in the image properties window. The system will automatically start the Fireworks software to edit the image. If you look carefully, you will find that the text and pattern Editing?From?Dreamweaver have appeared in the Fireworks picture editing window, which means that this picture is for picture editing on the Dreamweaver page. Now we select the picture to be edited in Fireworks and select the menu "Modify→Animate→Animate?Selection". Set the properties of the animation in the pop-up window: the number of frames of the selected animation, the direction of animation movement, transparency, etc. Then export the modified file. In this way, the Dreamweaver editing window will automatically update the file you just modified, making your page pictures move.
************************************************ ******************
****************************** ****************************
5. How to use the website reporter
in Dreamweaver? 4.0 provides a website reporter, which can help you quickly find and fix errors in the many files of your website. Click the menu "Site→Reports" to start the reporter, select the items you want to check, and then click the "Run" button to find out general problems on your website. You can also write your own reporter to detect some specific problems on the website (general problems are usually some text is missing or the document is not named).
**************************************************** ***********
************************************ *************************
6. Quickly restore multiple operations
When making the page, we We may need to constantly modify the page, and sometimes we need to restore past operations. We can use the "Undo" command in the "Edit" menu, but this command can only be restored once at a time. If we need to restore multiple operations, then It’s really annoying to have to “Undo” all the time. A History window is provided in Dreamweaver? 4.0, which allows us to easily restore multiple operations. Select "History" in the "Windows" menu to open this history window. In this window, every operation you perform is retained. Using the sliding pointer on the left side of the window, you can continuously restore and undo every operation, including those that have been saved. And you can also save this historical record and share it.
************************************************ ******************
****************************** ****************************
7. Hide floating panel
Open Dreamweaver and give The first impression is of a bunch of floating panels, which often dazzles you. Although it can be dragged away, it occupies a very limited screen after all. If you close it, you have to open it again when you use it. In fact, you only need to press the F4 key once, and all floating panels will disappear. Press F4 again and they will all reappear on the screen.
************************************************ ******************
****************************** ****************************
8. Quickly preview the webpage
When you are new to Dreamweaver, you often find Without the preview menu, I have to start IE browser to preview the actual effect of the web page. In fact, the preview menu of Dreamweaver is placed under the File menu. To preview the web page being edited, just press the F12 key, which is very convenient! It can also be set to preview in different browsers. Select Edit Browser List in Preview in Browser under the File menu to select different browsers for preview. To test the adaptability of your web pages to different browsers.
************************************************ ******************
****************************** ******************************
9. Display line numbers and automatic line wrapping in the HTML inspector
Although Dreamweaver's Behaviors is a macro collection of small JavaScript programs, many JavaScript programs that achieve special web page effects do not require manual programming. However, sometimes when you need to write a small program, it is particularly necessary to display the program line number, especially when When an error occurs in the program, there is often a prompt of "Error in line XX". If you count the line numbers line by line, it is not only too tiring but also easy to make mistakes. In FrontPage, you always worry about counting the wrong line numbers. This is convenient in Dreamweaver. As long as you select the "Line Numbers" check box in the HTML source code viewer window, the line number will be automatically displayed for each HTML statement in the source code viewer window, making it clear at a glance. . Similarly, sometimes a line of code is longer. As long as the "Warp" (automatic line wrapping) check box is selected in the HTML source code viewer window, the automatic line wrapping feature of the window will be activated, and the overly long code will automatically wrap around the edge of the window. .
************************************************ ******************
****************************** ******************************
10. How to get the hexadecimal code of a color
When designing web pages, sometimes hexadecimal color codes are used. I used to have a headache about this. In Dreamweaver, just press the small triangle in the lower right corner of the small box next to "bg" on the properties panel, and in the pop-up color Wherever you point the mouse on the board, the hexadecimal code of the corresponding color will be displayed immediately, which is really convenient.
************************************************ ******************
****************************** ******************************
11. Make background music
Insert background in Dreamweaver Music is very easy to implement. Here are two methods for you to choose.
(1) Insert an empty layer in an inconspicuous place on the page, and put an ActivX object in the layer. Double-click the object, select a MIDI music file in the opened dialog box, and then select the layer object properties Set its visibility in the panel to "Hidden", save the changes and press F12 to preview the web page and listen to see if there is music.
(2) Another method is to use Dreamweaver's "Behaviors" behavior editor, click the "+" button, select the "Play Sound" option, and select a music file in the pop-up dialog box. Can. Give it a try yourself!
************************************************ ******************
****************************** ****************************
12. Make the background image not scroll
Different from FrontPage , the background image inserted in Dreamweaver will scroll with the text. Sometimes we need to create a fixed background image, what should we do? First define a background image, press "F10" to open the HTML source file, find the statement that defines the background image, such as background="images/background.JPG", and add the sentence bgproperties="fixed" in a blank space after it. Preview it and feel a little sense of accomplishment.
************************************************ ******************
**************************************************** *************
13. Define text that remains unchanged in size
Why do the text on other people’s web pages look so beautiful, no matter how you press the font button on the browser? size, their font size will not change. In fact, they use the "CSS" style sheet technology in web pages, and it is very simple to implement this function in Dreamweaver. First press "F7" or select the "Style Sheet" option in the "Window" menu to open the style sheet editor, right-click in the window and select "New", and enter the name of the style sheet that needs to be defined in the pop-up dialog box. Press "OK", then select the first item "Type" in the list, and define parameters for the specific text attributes (generally speaking, it is more appropriate to select 10.5 for the text size on an 800×600 screen). After pressing "OK" , the defined style sheet appears. Select the text in the web page editing window and click the new style sheet name to see the changes to the selected text. Preview it and try to see whether the defined text font size will change according to the browser's selected font size.
************************************************ ******************
****************************** ******************************
14. Insert Flash animation
Flash animation from Macromedia Because of its interactivity and fast transmission speed, it has gradually become a new weapon in web page production. If you can insert a Flash animation on your web page, it will definitely make your work more colorful. It is very easy to insert SWF format animation produced by Flash in Dreamweaver. Click the Flash logo on the object toolbar or click "Flash" under "Media" to open the dialog box for selecting the SWF animation file. Select the file Then you can set the playback parameters in its properties panel, and you're done.
************************************************ ******************
****************************** ****************************
15. Leave the table blank on the webpage
In Dreamweaver When entering text on a new webpage, the default format is overwhelming and very unsightly. It is actually very simple to avoid this shortcoming, as long as everyone uses table tools well. The specific method is: insert a center-aligned table on the new page. In order to make the table easy to control, it is best to set an odd number of columns and the values should not be too large. In this way, the text entered in the cell is limited to an area whose width can be adjusted at will, so you don't have to worry about the text being out of control.
************************************************ ******************
****************************** ******************************
16. Change the status bar prompt text
Generally , when the browser loads a page, the address name of the page is displayed on its status bar, which is very dull. Have you ever thought about adding a little personality to your browser's status bar? If so, please follow the steps below to customize the text you like! First open the "Behaviors" behavior editing window, click the "+" button, select the "Text Of Status Bar" option under "Set Text Set", and then enter your own text in the box, such as "Welcome to my homepage" ” and so on, click “OK”.
************************************************ ******************
****************************** ******************************
17. Integrated text code editor
Visual web page The biggest inconvenience of editing software is that it is difficult to edit source code, let alone javascript; but Dreamweaver will make it extremely easy for you to handle code. The main new features of this built-in text code editor are: automatic indentation (you can select multiple lines at a time for indentation), and it can also detect symbols. If you forget a "" when writing code, it will give hint. The drop-down menu in the tool list will list all customized javascript< /I> functions in the current webpage, allowing you to jump freely in the original code of the webpage. The "Source Code Navigation Tool" allows professionals to easily handle javascript< /I> function, enter the javascript code in the text code editor, the system will display it in different colors.
************************************************ ******************
****************************** ******************************
18. Enter multiple spaces in Dreamweaver
us The spaces you usually enter are half-width characters, but you can only enter one in Dreamweaver. If you want to enter multiple spaces, just enter a full-width space. The method to input full-width spaces is: open the Chinese input method and press Shift Space to switch to full-width state. At this time, the spaces you enter are full-width spaces.
************************************************ ******************
****************************** ****************************
19. Solve one of Dreamweaver’s BUG
In the Behavior inspector in Dreamweaver 3.0, the "Events for" drop-down menu item cannot be opened. As a result, many special effects are useless and cannot be produced at all. In fact, this should be regarded as an incompatibility between Dreamweaver 3.0 and Chinese Windows98. This problem does not exist in English Windows98. In fact, this menu can still be opened, but it cannot be displayed correctly. After selecting the drop-down menu, we can use the up and down keys to select the browser we want to use.
************************************************ ******************
****************************** ****************************
20. Use the Dreamweaver 3.0 template to create a web page and set the behavior (Behavior)
No new behaviors can be added to web pages created using templates. This is because the new behavior requires inserting javascript into the Head part of the HTML file, and after using Template, the Head part of the HTML file will be "blocked". If you want to apply behavior to a web page generated using a template, you need to define the behavior in the template in advance and then define it as an editable area of the template. You can then change this behavior on the web page. But this is only limited to changing the specific content of the triggering events (events) and actions (actions) of the behavior, but not the type of the action.
************************************************ ******************
****************************** ******************************
21. Apply behavior to text and create dynamic text effects
In Dreamweaver, ordinary text is measured in characters and cannot be used as an object. That is, some very useful javascript events cannot be assigned to text. Because text does not have specific "marks" like pictures and other controls, text misses many special effects. In order to add special effects to text, the only way to deal with it is to make the text into a hyperlink. In this way, the text becomes an object and can impose actions. But this brings some unnecessary hyperlink attributes, such as underline, and color changes such as hover and visited. If you want to simply add special effects to text, you can first make the text you want to set into a hyperlink, then add behaviors on top of it, and finally convert the hyperlink into ordinary text. The specific steps are as follows:
Select the text you want to edit and fill in a few characters in the link target box. Select this link, click Windows → Behaviors, and the behavior panel will pop up. Press " " to add the behavior you want, such as play sound, etc. Open the Dreamweaver hypertext editor, find this link, and change it to. Finally delete "href=...". Save this page. Press F12 to preview. The effect is not bad!
************************************************ ******************
****************************** ******************************
22. Accurately locate the position of each element in the web page
There are two ways to pinpoint the position of individual elements on a web page: using tables or layers. Using tables is a common practice at present. The specific method is: first create a table on the web page, and note that the border width of the table should be 0. Then place each element in each table cell according to your requirements. Carefully adjust the size of the table cell and the position of the table border, and the elements in the table cell will also move accordingly. In this way, you can more accurately locate the position of each element in the web page. The advantage of using tables is that they are universal, and almost every version of browser can support tables. Its disadvantages are that it is cumbersome to use, requires careful adjustment, and is not very precise in positioning. Layers can be placed anywhere in a web page, so we can use layers for precise positioning. The method of use is to insert a layer into the web page, and then place the element you want to position in the layer. Then we can place the layer wherever we want. Additionally, you can use rulers and grids for precise positioning. Since layers are only supported in the latest browsers, to be compatible with older browsers, we can convert the layer into a table. The method is to select "Modify→Layout Mode→convert layers to table". Note that the layers at this time cannot overlap. We can select "View → Prevent layer overlaps" before inserting the layer to avoid layer overlap. Generally speaking, the converted page may have some changes and we need to make manual adjustments. One last thing to note is that when converting tables and layers, it is best not to use layers and tables at the same time on one page, as this may make your page a mess
23. Change the viewer The mouse shape
This is achieved by editing the style sheet. The specific method is: select "Text (text) → Custom Style (CSS Style) → Edit Style Sheet (Edit Style Sheet)", the editing style sheet window will pop up, and select "New (new)" in it. Then select "Make custom style", give the style sheet a name, and click OK. Edit the style sheet, select the extension, and select the pointer effect to appear in the cursor item (Cursor) on the right.
**************************************************** ***********
********************************** *************************
24. Remove the underline under the hyperlink text
This effect This is achieved by editing the style sheet. The specific method is: "Click on the text (text) → Customize the style (CSS Style) → Edit the style sheet (Edit Style Sheet)". The editing style sheet window will appear, and select "new (new)". Then select Redefine HTML Tag and select a in the Tag menu below. Edit the style sheet, select the type, and select none in the decoration on the right.
************************************************ ******************
****************************** ****************************
25. Make an image that follows the page
This One effect is achieved through javascript. Generally speaking, achieving such an effect requires certain programming skills, but now we can easily achieve it through the Dreamweaver plug-in. You can download this plug-in from http://www.computerinfo.com.cn/classroom/chajian/chajian2.zip. How to install the plug-in: Unzip it and copy it to a new folder in the folder Configuration\Objects under Dreamweaver. After restarting Dreamweaver, we can find the newly installed plug-in in the object panel. Click the plug-in icon and fill in the image storage address and image display position in the pop-up dialog box.
************************************************ ******************
****************************** ****************************
26. Create a dynamic menu that changes when the mouse is moved over it
The so-called dynamic menu is actually two pictures, one is displayed when the mouse is not placed on it, and the other is displayed when the mouse is moved up. We can use the swap image in the behavior provided by Dreamweaver to achieve this effect. First insert a picture, click it with the mouse, and enter the web page to be connected in the connection column of the properties panel. Then open the behavior panel, click the " " sign, and select swap image. Then a window will appear, asking you to select the picture that will be displayed after moving the mouse up. Select the second picture here and click "OK". Okay, the effect is completed, how simple.
************************************************ ******************
****************************** ******************************
27. Use Dreamweaver to create an effect similar to a drop-down menu
To create an effect similar to a drop-down menu, you need to use the hiding and showing properties of the layer. The specific method is: insert a single-row, multi-column table into the page as your menu bar. The number of columns in the table is determined by the number of menu options. Insert a layer, enter the content of the first drop-down menu in the layer, and move this layer below the first column of the table. In the same way, do the same for other menu items and insert the corresponding layers. Change the display attribute (vis) of all layers to hidden (Hidden).
Select the first cell of the table, click Window (Windows) → Behaviors (Behaviors), and the behavior panel will pop up. Press " " to add the behavior Show-Hide layers, and change the properties of the first layer (Layer1) to Show (Show), and the properties of other layers to Hide (Hide). Then edit this behavior in the behavior panel and change its trigger event (events) to onMouseover. This way, when the mouse moves over the first table cell, the first drop-down menu will appear. Then add another behavior Show-Hide layers and change the properties of all layers to hidden. Then edit this behavior in the behavior panel and change its trigger event (events) to onMouseout. This will hide the first drop-down menu when the mouse moves away from the first table cell. Repeat for other menu items. But please note that when "Menu Two" is set, the second layer is displayed and other layers are hidden; when "Menu Three" is set, the third layer is displayed and other layers are hidden; and so on. Okay, it's done, press F12 to take a look.
************************************************ ******************
****************************** ****************************
28. Easily create download files
It is actually very easy to use Dreamweaver It's simple, just write the name of the file you want viewers to download, then drag the mouse to select this text, and write the file name in the "Link" attribute input box on the text attribute panel. Note: If the downloaded file is not in the same directory as the web page, the file name must include a relative path, otherwise it will prompt that the file cannot be found when downloading.
************************************************ ******************
****************************** ******************************
29. Use Dreamweaver’s bookmarks to create jump links
We can achieve this function using Dreamweaver's bookmarks. The specific method is: move the cursor to the place you want to jump to, select "Insert → Bookmark (Name Anchor)" in the menu, and enter the name of the bookmark. Next, fill in "#bookmark name" in the link target box where you want to call the link, so that the jump link within the page is ready. Here, if we fill in the name of the web page before the bookmark name, it will jump to the bookmark in other pages. For example, if we fill in "index.htm#top" in the Link, when the viewer clicks on this link, it will jump to the top bookmark in the index page.
************************************************ ******************
****************************** ******************************
30. Remove the gaps where the picture and table touch
To ensure that there is no gap between the picture and the table, it is not enough to just set the border to 0 on the table properties panel. You also need to set the two properties of the cell to 0 on the table properties panel. (i.e. cellspacing="0" and cellpadding="0").
************************************************ ******************
****************************** ******************************
31. Use TracingImage to help locate the position of each element in the web page
TracingImage is a very effective feature of Dreamweaver, which allows users to use the original pattern design as an auxiliary background in a web page. In this way, users can easily locate text, images, tables, layers and other web page elements on the page. The specific use of TracingImage is as follows: first use various drawing software to make an imaginary web page layout diagram, and then save this picture as a network image format (including gif, jpg, jpeg and png). Use Dreamweaver to open the web page you are editing, right-click on a blank area of the page, select "Page Properties...", and then enter the location of the web page layout pattern you just created in the Tracing Image item in the pop-up dialog box. Then set the transparency of TracingImage in Image Transparen, OK. In this way, you can easily locate the position of each web page element in the current web page. Web pages that use TracingImage will no longer display the background pattern when edited with Dreamweaver. However, when browsing with a browser, the opposite is true. The TracingImage disappears and all you see is the edited web page (of course the background pattern can be displayed).
************************************************ ******************
****************************** ******************************
32. Regarding “Convert Table widths to Pixels” and “Convert Table widths to Percent”
“Convert Table widths to Pixels” and “Convert Table widths to Percent” are two important functions of Dreamweaver to set the table width. When you open a web page with a table, click the
| tag, instead of defining the tags one by one. Note that this method does not apply to the |
The above is the detailed content of 48 practical tips for DW Chinese Super League (share). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
