Dreamweaver super skills (part 2)

26. Make a dynamic menu that changes after moving the mouse up

The so-called dynamic menu is actually two images, one is not displayed with the mouse placed above, and the other is displayed with the mouse moving up. We can use the swap image in the behavior provided by Dreamweaver to achieve this effect. Insert an image, click it, and enter the webpage to be connected in the connection bar of the property area. Open the action panel, click "+", and select "swap image. Next, a window appears, asking you to select the image displayed after moving the mouse up. Select the second image and click "OK ". Well, the effect is complete. It's easy.

27. Use Dreamweaver to make a result similar to the drop-down menu

To create an effect similar to a drop-down menu, you need to use the hidden and display features of the layer. Specifically, insert a single row and multiple columns table in the page as your menu bar. The number of columns in a 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 the layer below the first column of the table. Similarly, you can perform the preceding operations on other menu items to insert corresponding layers. Change the display attribute (vis) of all layers to Hidden ).

Select the first unit of the table, and click window (Windows) → behavior (Behaviors) to bring up the behavior panel. Press "+" to add the Show-Hide layers behavior, change the Layer1 attribute to Show, and change the properties of other layers to Hide ). Then, edit the behavior in the behavior panel and change its trigger event (events) to onMouseover. In this way, when you move the cursor over the first table unit, the first drop-down menu is displayed. Then add a Show-Hide layers behavior and Hide the attributes of all layers. Then, edit the behavior in the behavior panel and change its trigger event (events) to onMouseout. In this way, when the mouse moves above the first table unit, the first drop-down menu is hidden. Repeat the preceding operations on other menu items. Note that when "Menu 2" is set, the second layer is displayed, and the other layer is hidden. When "menu 3" is set, the third layer is displayed, and the other layers are hidden. So proceed accordingly. Okay. Let's take a look at F12.

28. Easily create and download files

Using Dreamweaver is actually very simple. Just write the file name to be downloaded by the viewer, drag the mouse to select the text, and write the file name in the "Link" attribute input box on the property panel of the text. Note: If the downloaded file is not in the same directory as the webpage, the file name must contain a relative path. Otherwise, the system will prompt that the file cannot be found during download.

29. Use Dreamweaver bookmarks to Create Jump links

Using Dreamweaver bookmarks, we can implement this function. The specific method is: Move the cursor to the place you want to jump to, select "Insert> Name Anchor" in the menu, and enter the Name of the bookmarks. Next, enter "# bookmark name" in the target box of the link you want to call, so that the jump link in the page is ready. Here, if we enter the webpage name before the bookmark name, it will jump to the bookmarks on other pages. For example, when you click "“index.htm # top" in the link, the top bookmarks on the index page are displayed.

30. Remove the gaps between the image and the table

To keep the image and table in contact with each other, it is impossible to set the box line (border) to 0 only on the table attribute panel, you also need to set the two properties of cells to 0 (cellspacing = "0" and cellpadding = "0") on the properties panel of the table ").

31. Use TracingImage to help locate each element on the webpage

TracingImage is a very effective feature of Dreamweaver. It allows users to use the original pattern design as an auxiliary background on the webpage. In this way, you can easily locate the position of webpage elements such as text, images, tables, and layers on the page. The specific use of TracingImage is as follows: first, use various plotting software to create an imaginary web page layout diagram, save the image as a network image (including gif, jpg, jpeg, and png ). Use Dreamweaver to open your edited webpage, right-click in the blank area of the Page, and select "Page Properties... in the displayed dialog box, enter the location of the web page layout chart you just created in the Tracing Image item. Then set the TracingImage transparency in the Image Transparen, OK. In this way, you can easily locate each element on the current webpage. When a web page with TracingImage is edited using Dreamweaver, the background pattern is no longer displayed. However, when you use a browser to browse the webpage, the TracingImage is missing, what you see is the edited webpage (of course, the background pattern can be displayed ).

32. About "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 for Dreamweaver to set the Table width. When you open a webpage with a table, click the "table" tab in the status bar and you will be able to see the two buttons in the table attribute tool panel that is displayed later. As the name implies, "Convert Table widths to Pixels" indicates the width of all units in the Table in Pixels,

<