Shulou(Shulou.com)06/02 Report--

This article will explain in detail how dreamweaver makes web page folding menu effects. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Have you ever been to Microsoft's website? (figure 1) if you've been there, you should be impressed by the navigation bar of the folding menu above this station, right? Did you ever think you could do the same thing? Come on, don't be envious, it's better to act than to move.

The folding menu actually achieves this effect through the display and hiding of layers. Now let me tell you how to make it. Follow Me! Open DreamWeaver first (DreamWeaver has good support for layers and is a necessary tool for making web pages).

The first step: first insert a row, two columns of the table, method: click the menu "insert" (Insert), and then select "table" (Table), in the "row" (Row), enter 1, in the column (Columns) enter 2, click "OK". (figure 2) in order to be beautiful, in the property bar of the table, set the width and height to 200px and 30px respectively, and set the border color of the table to # FFFFFF, then click on two cells, and set the border color to # 6699FF in the property bar. Enter "material tutorial" and "related Software" in the two cells, respectively. And set it to middle alignment in the cell properties bar (by the way: in DreamWeaver, you can set not only the horizontal alignment of the table, but also the vertical alignment, so you have to write your own code in FrontPage, which is one of the reasons why I gave up using DreamWeaver in FrontPage!)

The second step is to insert a layer into the tutorial cell. Method: click Insert on the menu, and then select Layer. At this point, a layer appears in the cell. At this point, we are not satisfied with the position of the layer, so let's move it. The movement of the layer is very easy, select the layer, and then press the arrow key on the keyboard to move, and without any restrictions, ha ha, simple. Similarly, we can also set its size in the layer's properties bar for beauty, setting the width and height to 100px and 90px, respectively.

Step 3: insert a table with three rows and one column in the layer, using the same method as the first step. The width and height are set to 100px and 90px respectively to fill the layer. Then set the border color as in the first step. Enter "DreamWeaver", "FrontPage" and "HotDog" in the three cells. And set it to middle alignment in the property bar.

Step 4: here comes the most critical step! Set "visible" to "Hidden" in the layer's properties bar so that you can't see the layer when you open the page (what kind of folding is it if you can see it?). Then select the cell, and then click the "Show behavior" button to the right of the status bar at the bottom of the DreamWeaver (the one in the middle, the one made up of two circles) to add behavior to the cell. Pay attention to one here: be sure to watch it! Be sure to show "" on the title bar of the behavior bar, which means that the behavior you want to add is added to the cell, and if not, then re-click the cell until it is successful. (figure 3)

Select an appropriate browser in the "behavior goal" (Events For), usually "IE 4.0". Then click the "+" button on the left to add the behavior. Select "Show or hide layer" (Show-Hid Layers) in the pop-up menu, select "Layer" Layer1 "in the pop-up window, which is the layer we just added, and then click" Show "to confirm it. At this point, the behavior we just added appears in the behavior bar. Then click the down arrow button on the right under "Events" and select "when mouse moves up" (OnMouseOver) in the pop-up menu. Okay, so this layer doesn't appear when the page is loaded, but only when our mouse moves over the cell, okay? Cool, huh? Stop! Don't be happy too early, don't forget that there is another problem: this layer is still displayed after the mouse moves away from the cell! It doesn't just disappear. Don't think of the computer as fully automatic. When you don't tell it what to do, it's just a pile of scrap iron. In fact, it is very easy to solve this problem, we can add the behavior of display layer, of course, we can also add the behavior of hidden layer! Then click the "+" button, select "Show or hide layer", or select "Layer1", but this time we click "Hide" and then confirm. Then select events and click when the mouse moves away (OnMouseOut). OK! It's done.

Next, follow the process from step 2 to step 4 to manipulate the "related software" cell. When everything is done, press "F12" to preview it, hehe, how about it? A few simple steps, completed such a dazzling effect, everything is still thanks to DreamWeaver ah! (the effect is shown in figure 4)

There is also a need to note that the movement of the layer sometimes can not achieve the "WYSIWYG" effect, the original position is very satisfactory when editing, but the preview is a mess, which requires a few more previews and more modifications in order to get good results.

This is the end of the article on "how to make web folding menu effects in dreamweaver". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.