"Layer" precise positioning in Web page making

Web page

When making Web pages, we often refer to layers. The layer here refers to in the Dreamweaver, through its application to achieve the Web page objects in the vertical direction overlap each other, such as the use of QQ friends must to Tencent homepage (http://www.tencent.com/) browsed, its Pull-down menu is very distinctive, This is the use of layers of application to achieve. The practice is very simple, there are many users in the Web page to use the layer can be easily implemented, but do you notice when you change the resolution of the monitor, your layer or in the original position, the Web page can automatically adapt to the resolution of the user settings? I think if you do not know the level of absolute positioning and relative positioning of the concept, you can not do the Tencent homepage on the Drop-down menu effect, the following combination of examples
To introduce the precise positioning of the layer.

Trick One: Table Positioning method

Step 1: Open Dreamweaver, create a new page, use the shortcut "Ctrl+alt+t" to insert a two-row table, and set the second row to place the layer so that it is positioned relative to the table. Enter text to set the table properties at the same time (Figure 1).

Step 2: Move the cursor into the second row table, insert a layer in the row, open its property panel, and delete the L, T values so that it is empty (Figure 2).

These two parameters must not have a numerical value, otherwise it will not achieve the precise positioning of the layer. Of course, the layer parameter is fixed, and the layer cannot be moved as the parent layer, but the size can be changed by using the cursor.

Step 3: Define the cursor in the parent layer, insert a layer again, and set the layer content. When you use F2 to open the Layer Control Panel, you will see the child layer underneath the parent layer (Figure 3), which can be dragged as a child because it is positioned relative to the parent layer.

Step 4: Set the mouse response event for the main menu to show how the layer is displayed when the mouse is moved and away from the main menu. F12 Preview and change the resolution to see if your submenu is not misplaced.

Trick two: CSS positioning method

After all, this is not a professional designer's expectations, we can do a CSS relative positioning of the definition, the relative positioning model (such as tables) defined as this CSS attribute.

Step 1: Enable the browser to create a new coordinate system with the upper-left corner of the relative positioning model as the origin. Then insert the layer below the relative positioning model so that it is absolutely positioned in the relative positioning model. Of course, this layer is also not drag, change its position can be directly in its property panel to enter the value of the left top.

Step 2: Press "SHIFT+F11" to open the CSS styles panel, click the "New Style" button, and define a CSS property named. Pos in the new style window that pops up, and select the type of the make custom style and this Document 0nl define type, confirm enter style defintion for. pos window, select positioning definition type to relative OK (Figure 4).

Step 3: Select the defined table, right-click the. POS in the CSS style panel, and execute the Apply command in the pop-up menu (Figure 5). Make the relative Positioning Model (table) a new coordinate system, as long as we insert the layer in it, and set the layer content and the main menu of the mouse response event can make the layer achieve relative positioning.

The above two strokes, we may wish to try, if extrapolate, you can make a variety of use layer and automatically adapt to the user resolution Settings page effect!