dreamweaver| Menu | Did you go to Microsoft's Web site? If you have been there, you should be amazed at the navigation bar of the folding menu above the station. ("Hey hei, still old lid strong.") "Ah, how can the eggs fly?!" Have you ever thought that you could do the same? Come on, do not envy, echocardiography as action!
The folding menu actually achieves this effect by showing and hiding layers. Now let me talk about how to make it. followme! first Open Dreamweaver (Dreamweaver support for the layer is very good, but also the necessary tools to do the Web page).
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. 1
Fourth step: The most critical step is coming! Set visual to hidden in the property bar of the layer (Hidden) so that the layer is not visible when you open the page (if you can see it, what kind of folding is it?!) ）。 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 must pay attention to one: Must watch! On 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, select the cell again until it succeeds. (Figure III)
Select a suitable browser in the behavior target (eventsfor), typically select "IE4.0". Then click the "+" button on the left to add the behavior. Select "Show or hide Layer" in the pop-up menu (show-hidlayers), 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 loads, this layer doesn't appear, and it only appears when we move the mouse over the cell. Cool, huh? stop! Do not be happy too early, do not forget that there is a 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. Ok! It's done.
Next, follow the steps from step two to fourth to manipulate the related software cell. After all is finished, press "F12", preview, hehe, how? A few simple steps, on 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.
