Controlling page elements with Dreamweaver mx

dreamweaver| Control | Page browsing with drop-down menu pages, we often notice that when changing the display resolution, the position of the Drop-down menu has not changed, which is also easy to ignore when we design the page, in fact, through the CSS control page elements accurately positioned, This is not difficult to achieve.

Create the main menu bar New page, execute menu "insert/table" command to open the "Insert Table" dialog box, insert a row of multiple columns of tables, the number of columns by your menu items, and set the "Cell Padding", "Cell Spacing" and " Border "parameter (Figure 1). In the establishment of the table to enter the main menu navigation text, select the table and text, with the shortcut key "CTRL+F3" open its Properties window, we can define a font control CSS to control the text properties, adjust the relevant parameters.

The CSS implementation relative positioning menu bar defines a CSS relative positioning of the definition control, the relative positioning model (menu bar table) defined as this CSS property. The browser creates a new coordinate system by taking the upper-left corner of the relative positioning model as the Origin point. Then the relative positioning model is inserted into the layer, so that the relative positioning model is positioned. The layer that is inserted in the table after using CSS control is not dragged, and changing its position can enter the parameter values of L and t directly on its property panel.
Open the CSS Styles panel, click on the "New Style" button, and in the New style window, define a CSS property named. Pos, and select ' type ' and ' This Document ' for ' Make custom Style '. 0NL "Define" type, "confirm" into "Style defintion for. pos" window, select "positioning" definition type to "relative" OK. Select the menu bar table and add the CSS control to the table in which the menu bar is located. Make the relative Positioning Model (table) a new coordinate system, as long as we insert the Drop-down menu layer, and set the layer content and the main menu of the mouse response events can make the Drop-down menu accurate positioning.
Insert menu column cursor move into the first column of the table, execute menu "Insert/layer" to insert a new layer, as the "menu One" Drop-down menu, click inside the layer, execute the "insert/table" command, set the table row number, column number, and set the table line width to "0", Table background color for preference, input menu item text, set text CSS control effect, and adjust menu size. Make other Drop-down menu layer effects in the same way.

Set layer properties and mouse response events selected layer Layer1, Layer2, Layer3, Layer4, in its Properties window to the "Vis" to "Hidden", the 4 layers hidden.
Select "Menu One" in the main menu, use the shortcut "SHIFT+F3" to open the "Behaviors" Behavior window, click the "+" button, execute menu "show-hide Layers" command, select "Layer ' Layer1" in pop-up window, click "Show" button, and then set its two layers to "Hide." The action indicates that the "Layer1" is displayed while the other layers are hidden. Finally, click on the arrow to the right of the behavior just defined under "events" in the "Behaviors" window and select "OnMouseOver" mouse to respond to the event in the pop-up menu.

The same way you make other drop-down menu effects, when you "F12" preview, you will find that even if the resolution changes, the position of the Drop-down menu layer will not change.