48 practical tips for DW Chinese Super League (share)

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

label in the status bar, and you will see these two buttons in the table properties tool panel that is displayed subsequently. As the name suggests, "Convert Table widths to Pixels" is to express the width of all cells in the table in pixels, while "Convert Table widths to Percent" is to express the width of all cells in the table in percentages. Think carefully about their role. If the width of a table is expressed in pixels, but when the browsing window is enlarged, the table will not enlarge the width of the cells accordingly. Using "Convert Table widths to Percent" allows a 100% wide table you create at 640×480 resolution to still maintain 100% width at a higher resolution. Therefore, making full use of these two functions can make web page layout more efficient.

************************************************ ******************

****************************** ******************************

33. Call Style without confusing the original code of the web page

There are many ways to call Style. You can right-click and select Custon Style to call the Style specification, or you can right-click on the element list in the status bar to call Style. Although the effects achieved by different methods seem to be the same, the HTML codes actually generated are completely different. For example, using Custon Style to call the Style specification will generate a tag in the web page code. If there are too many tags, the file will be very bloated and affect the browser's parsing speed, so I recommend using the element list in the status bar as much as possible. to call Style. There is another little trick. If you want to use a Style to define all the text in a table cell, just call the Style in the

tag, instead of defining the

tags one by one. Note that this method does not apply to the

tag, because the text format defined with Style in the tag will be ignored by Netscape.

************************************************ ******************

****************************** ******************************

34. Use the custom window function to test the effect of web pages under different resolutions

No one wants to see the webpage they have worked so hard to create become unrecognizable at different resolutions, so testing the browsing effect of webpages at different resolutions is a very important step in webpage production. We can adjust the window size by selecting the required resolution in the middle of the status bar in the Dreamweaver operation interface, so as to test the web page effect at different resolutions.

************************************************ ******************

****************************** ******************************

35. No need to use third-party FTP software when uploading your website

Dreamweaver incorporates FTP functionality and is optimized for website uploads. We can make a simple comparison. When you use general FTP software to upload a website, do you create a new directory in the server according to the website directory on the local machine, and then upload files one by one? This approach is indeed correct, but because not every file in the website directory on the local machine is called by the web page (such as the backup files left when building the web page), only the user knows the heavy workload of filtering files. However, it is much more convenient to use Dreamweaver to upload web pages. Since the FTP function does a lot of necessary work for users behind the scenes, users only need to upload the relevant HTML files in the site map, and Dreamweaver will automatically upload all the relevant HTML files to the website. Upload other local files together (such as images, ZIP files, FLASH files and even various REAL files). The specific method of using the FTP function included in Dreamweaver is: edit the SITE that has been defined, and select "Web Server Info" in the "Site Definition for..." panel. If the web page is uploaded through FTP, set "Server Access" to FTP, add the address of the FTP server in FTP Host, add the remote login directory in Host Directory, add the user name in Login, and then fill it out. Password. After the above settings, you can press the Connect button in the Site panel. When Dreamweaver successfully connects to the server, the Connect button will automatically change to Disconnect, and a small green light will light up next to it. The next thing to do is to right-click on the HTML file to be uploaded and select "Put". When the HTML file is uploaded successfully, Put Depanding File will be displayed in the status bar, indicating that Dreamweaver is uploading other local files called by this HTML file. Not only that, Dreamweaver can also directly download files on the server for modification. How to do it? Just try the Get button next to Put.

************************************************ ******************

****************************** ******************************

36. To achieve the effect of underline appearing when pointing the link with the mouse

Some links to web pages are not underlined originally. When you point the mouse at the link, the underline will appear. When you remove the mouse, the underline will disappear again. This effect can actually be achieved using Cascading Style Sheets (CSS). There is no need to write code to edit Cascading Style Sheets in Dreamweaver. The specific operation method is as follows:

(1) Click the Cascading Style Sheets button in the Quick Launch Bar (Put the mouse over the button that displays "show css styles"), double-click (none) on the pop-up CSS Styles panel;

(2) At this time, you can see the pop-up Edit Style Sheet panel , press the New button on this panel;

(3) Then click Redefine HTML Tag (redefine HTML tag) on ​​the pop-up New Style panel and select "a" (hyperlink tag) in Tag After marking, press the OK button; (4) At this time, you can see the pop-up Style dehinition for a dialog box. In this dialog box, you can set many attributes of the hyperlink. You can set them as you wish, but here we mainly We want to remove the annoying underline, so we select "none" in the decoration attribute, so that the underline is removed; then we select the color: #339966. Press the OK button to return to the Edit Style Sheet panel;

(5) Press the New button on the Edit Style Sheet panel;

(6) Click Use CSS on the pop-up New Style panel Selector, then select "a:hover" in the selector selection box on the panel (define the properties of the link when the mouse is on the hyperlink), press the OK button;

(7) In the pop-up Style dehinition In the for a:hover dialog box, we select "underline" in the decoration attribute, so that the underline is added; then we select the color: #FF3300. Press the OK button to return to the Edit Style Sheet panel;

(8) Press the Don button again on the Edit Style Sheet panel. At this point, all settings are completed. You will see the changes in the Dreamweaver source code view window. The code shown below:

37. Implement the defined hyperlink text color

The color of the text hyperlink (including the color of unvisited links, the color of mouse links, and the color of The color of visited links, etc.) can be defined using Cascading Style Sheets (CSS). Here is how to set the color of text links as you like.

(1) The default color of hyperlinks is: unvisited hyperlinks are blue, visited hyperlinks are purple;

(2) If you want to use CSS to define Color works, do not fill in anything in the color attribute of the hyperlink text;

(3) If you have defined the color of the text and find that the hyperlink color defined in CSS does not work, you can cancel the color definition of the text, or cancel the hyperlink and redefine it, and the color defined by CSS will work. It works;

(4) The relationship between the text color of the hyperlink in various states: Once the color of the visited link is defined (A: visited), when the link is visited, the color of the link The color will no longer change, that is, defining the color of the mouse on the hyperlink (a: hover) will no longer work. If the color of the visited link is not defined (A: visited), the color defined in a: hover will be displayed when the mouse is on the hyperlink, and the color defined in a will be displayed when the mouse moves away.

As can be seen from the above, the color of the text link can actually only be changed between two colors. It cannot be changed between multiple colors as mentioned in some articles, but because of the use of that You can choose any two colors, so the range of color choices should be relatively large.

************************************************ ******************

****************************** ******************************

38. Put the graphic in the middle in Dreamweaver

Click to select the graphic. There is a drop-down box next to Align in the upper right corner of the graphic's property panel. Select it in the drop-down box and the text will wrap around the image. If a single image is in the middle, just click on the center property on the image panel.

************************************************ ******************

****************************** ******************************

39. How to use the Behaviors function without linking to anywhere

Select the element (a picture or a piece of text) to be used as a hyperlink, do not fill in any link address in the address bar (Link) on the properties panel, just add a "#" sign, (no quotation marks included). This way you can use the Behaviors feature without linking to anywhere.

************************************************ ******************

****************************** ****************************

40. Create several pictures on one (larger) picture Different Links

In Dreamweaver, this is done using a setting called "Image Hot Zones". First select the image, and then there is a "Map" toolbar on the image properties panel. Below it are three light blue tool icons, namely "Rectangle", "Circle" or "Polygon". You can select one according to your needs. (Just click with the mouse), then move the mouse over the image, press the left mouse button, and drag the mouse to draw a light blue area (don’t worry that this light blue area will destroy your image. It will not be displayed in the browser), then you can just add the address of the web page to be linked in the properties panel. Draw as many areas as you need for as many links as you like.

************************************************ ******************

****************************** ******************************

41. Make a directory tree

in front of the general directory There is a " ". Click this " " to display its subdirectories. " " changes to "-". Click "-" to hide its subdirectories, just like in the resource manager. This You need to make two pages, one page to write the general directory, and one page to write the subdirectories. Set the " " sign on the general directory page as a hyperlink, and add the address of the subdirectory page in the "Link" column. Set the "-" sign on the sub-directory page as a hyperlink, and add the address of the general directory page in the "Link" column. For specific effects, you can take a look at Dreamweaver's help document. In this help document, click the main directory to pop up the subdirectory. Press the main directory on the subdirectory to return to the main directory, but it is not represented by " " or "-" . If you look at the source code of the document, it will be clear at a glance.

************************************************ ******************

****************************** ******************************

42. Easily set line spacing in Dreamweaver

Use Cascading Style Sheet (CSS) is implemented. There is no need to write code to edit Cascading Style Sheet in Dreamweaver. The specific operation method is as follows:

(1) Click the Cascading Style Sheet button in the Quick Launch Bar (that is, put the mouse on it button that displays "show css styles"), double-click (none) on the pop-up CSS Styles panel;

(2) At this time, you can see the pop-up Edit Style Sheet panel, click on the panel New button;

(3) Click Redefine HTML Tag on the pop-up New Style panel, then select the "body" tag in Tag and press the OK button;

(4) At this time, you can see the pop-up Style dehinition for body dialog box. In this dialog box, you can set many attributes of the "body" tag. You can set them as you wish, but we mainly set them here. Line spacing, so we fill in the number of pixels for line spacing in the line attribute input box. For now popular nine-point fonts, the line spacing is generally 12. Press the OK button to return to the Edit Style Sheet panel. At this time, the line spacing of "body" has been set. ;

(5) Since the line spacing defined in "body" does not work for the table, we press the New button again on the Edit Style Sheet panel;

(6) Then click Redefine HTML Tag on the pop-up New Style panel, select the "td" tag in Tag and press the OK button;

(7) In the pop-up Set the line spacing of td in the Style dehinition for td dialog box. Press the OK button to return to the Edit Style Sheet panel;

(8) Press the Don button again on the Edit Style Sheet panel. At this point, all settings are completed. You In the source code view window of Dreamweaver, you will see the following code between If you are satisfied, you can modify the settings.

43. How to design so that the font size setting of the web page does not work when the viewer is browsing.

Use CSS cascading style sheets to forcefully control the font (pixels).

************************************************ ******************

****************************** ****************************

44. Achieve the effect of refreshing the web page every five minutes

Select the "head" function group panel on the Dreamweaver function panel, click the "Refresh" function icon on this panel, and in the pop-up "Insert refresh" dialog box, enter the interval to be refreshed in "Delay". Measured in seconds, for example: to refresh every five minutes, enter 300. Then select "Refresh This Document" (refresh the current window) on the dialog box, press OK, and you're done. When you browse the page again, it will automatically refresh every five minutes.

************************************************ ******************

****************************** ****************************

45. Solve the problem of using IE to preview normal link web pages, but uploading them to the website fails to view The missing phenomenon

Just unify all the file names on the web page into lowercase (or uppercase), and then upload them. Because many servers use the UNIX operating system, which is very case sensitive, that is to say, uppercase file names and lowercase file names are considered two files. You must pay attention to the case when uploading. Also note: Hyperlinks should use relative paths, not absolute paths, and don't use Chinese file names.

************************************************ ******************

****************************** ******************************

46. Create a hyperlink that opens a new window to open the web page (i.e. the original The web page will not be overwritten)

In Dreamweaver, set the "target (target)" to "_blank" in the properties panel of the link.

************************************************ ******************

****************************** ****************************

47. Hide unnecessary tags

When the user is When an invisible element is inserted into a web page, Dreamweaver will automatically add a corresponding element tag to the page to facilitate users to select the invisible element. But this is not always a good thing. For example, if you insert a table in the first row of a page with many layers, you will find that the table automatically retreats to the first row of the page because there are too many layer element tags arranged in the first row. The second line, although it does not affect the effect when browsing, it will indeed hinder your work. So when you feel that an element tag is intrusive, simply block it. The method is to press Ctrl U to open the Preferences panel, select Invisibel Elements in Category, and all element labels will appear on the right side of the panel. Just remove the check mark from the tag of the element you hate, and it will be guaranteed not to appear again in the future.

************************************************ ******************

****************************** ******************************

48. Solve the problem of the table sticking to the upper left corner

There are several solutions to this problem.

(1) Press Ctrl J to pop up Page Properties, and set all Left, Top, Margin Width, and Margin Height to 0.

(2) Add the following code to yours: topmargin="0" leftmargin="0". This method only applies to IE.

(3) Add the following code:, this method is suitable for Netscape

For more programming related knowledge, please visit:

Programming Teaching

! !

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!