How to make a Web page collapse menu effect with Dreamweaver

Have you been to Microsoft's Web site? (Figure I) If you have been there, then you should be amazed at the navigation bar of the folding menu above the station? Have you ever thought that you could do that? Come on, do not envy, heart as action!

The folding menu actually achieves this effect by showing and hiding layers. Now let me talk about how to make it. Follow me! first Open Dreamweaver (Dreamweaver support for the layer is very good, but also do the necessary tools for Web pages).

First step: First insert a row, two columns of the table, by clicking Insert on the menu, then selecting Table, entering 1 in row, entering 2 in the column (Columns), and then clicking "OK." (figure II) in order to be beautiful, in the table's property bar, the width and height are set to 200px and 30px respectively, and the table's border color is all set to #ffffff, and then select two cells, respectively, in the property bar to set its border color to #6699ff. Enter the data tutorial and related software separately in two cells. and set the middle alignment in the cell property bar (by the way: not only can you set table horizontal alignment in Dreamweaver, but you can also set vertical alignment, in FrontPage you can only write code yourself, This is one of the reasons why I give up FrontPage to use Dreamweaver!)

The second step is to insert a layer in the Data tutorial unit then cell. Method: Click Insert on the menu, and then select Layer (Layer). At this point, a layer appears in the cell. At this point we are not satisfied with the position of the layer, so we have to move it. The movement of the layer is very easy, select the layer, and then press the arrow keys on the keyboard can be moved, and without any restrictions, oh, simple. In the same way, we can also set the size of the layer in the property bar for aesthetics, and set the width and height to 100px and 90px respectively.

Step three: Insert a three-row, one-column table in the layer, in the same way as the first step. and the width and height are set to 100px and 90px respectively to fill this layer. Then put the border color as the first step of the settings. Enter "DreamWeaver", "FrontPage", and "hotdog" in three cells. and set the middle alignment in the property bar.

Fourth step: The most critical step is coming! In the property bar of the layer, set visual to hidden (Hidden) so that the layer is not visible when you open the page (if you can see what kind of folding is called?!). Then select the cell, and then click the Show Behavior button on the right side of the Dreamweaver status bar (which is the middle, two-circle one) to add the behavior to the cell. Here to pay attention to a: must look good! In the title bar of the behavior bar, be sure to show "", which means that the behavior you want to add is added to the cell, and if not, then select the cell again until it succeeds. (Figure III)

Select a suitable browser in the "Behavioral Goals" (Events for) option, typically "IE 4.0". Then click the "+" button on the left to add the behavior. Select "Show or hide Layer" in the pop-up menu (Show-hid Layers), select "Layer" Layer1 "" in the pop-up window, that is the layer we just added, then click "Show" to make sure it is OK. In the behavior bar, we have just added this behavior. Then click the down arrow button to the right below events to select "Move Over" (OnMouseOver) in the pop-up menu. Okay, so when the page is loaded, this layer doesn't appear, and it only appears when we move the mouse over the cell, okay? Stop! don't be too early, don't forget that there is another problem: the mouse to move the cell after this layer is still displayed Ah! does not automatically disappear. (Don't take the computer as fully automatic, you don't tell it how to do it, it's just a pile of scrap metal.) ^_^) In fact, it is also very easy to solve this problem, we can add the behavior of the display layer, of course, can add hidden layer of behavior Ah! Click the "+" button, choose "Show or hide Layer", or choose "Layer1", but this time we clicked "hidden" (hide), and then determined. Then select events and click When mouse onmouseout. The ok! is finished.

Next, follow the steps from step two to fourth to manipulate the related software cell. After everything is finished, press the "F12", preview, hehe, how about? A few simple steps, the completion of such a dazzling effect, all or Dreamweaver credit Ah! (effect as shown in Figure IV)

There is also a need to note that the movement of the layer is sometimes not able to do "WYSIWYG" effect, in the editing of the original location is very satisfied, but the preview is a mess, this will be more than a few previews, many changes in order to get good results.