Use of Dreamweaver layers
A layer is an area of a Web page that can have multiple layers in a Web page, and its greatest charm is that each layer can overlap and determine whether each layer is visible, and also to customize the hierarchical relationships between layers. After mastering the layer technology, we can provide a powerful page control ability for the Web page.
Creating layers
To illustrate the function of the layer, let's start by making a simple instance effect as shown in Figure 1 (Figure 1).
Figure 1
The first step is to create a new page in Dreamweaver MX2004, run the "insert→layerobjects→layer" command, and a black rectangular box appears in the editing window, which is the inserted layer. When the mouse is moved to the border of the rectangle, the mouse will become a cross arrow shape, then click the mouse around the box appears 8 black solid box, the upper left corner also has a hollow box, indicating that the layer was selected.
Tip: Drag the black box with the mouse to change the layer size, drag the top left corner of the hollow box can change the position of the layer.
The second step is to click the mouse in the layer and enter the Chinese computer Education report, and then set the text to blue in the Properties panel window.
Step three click the layer border to select the layer, then run the edit→copy command to copy the current layer, click the mouse in the other space in the editing window, and run the "edit→paste" command so that a layer appears in the editing window, but now they overlap, You need to move the layer to see these two layers.
Step fourth changes the text color of one of the layers to black and moves the layer position so that the position of the two layers varies by several pixels, resulting in a shadow effect (Figure 2).
Figure 2
After you have done this, press the "F12" button to preview, and you can see the effect shown in Figure 1 in IE Explorer. : 1
Nesting layers
A nested layer is a layer created in another layer, as shown in Figure 3 is a typical nested layer (Figure 3). Actually making this nesting layer is simple, just create a parent layer, click inside the layer with the mouse, and insert a layer again. However, nested layers do not imply that the child layers must be inside the parent layer, and that there is an inheritance relationship between them.
Figure 3
The role of inheritance is to keep the visibility of the child layers consistent with the parent layer, because many dynamic Web pages have effects that are implemented by controlling the visibility of the layer, so the visibility of the child layer changes as the parent layer's visibility changes. And inheritance can also make the relative position of the child layer and the parent layer unchanged, such as we drag the parent layer to move, the child layer will also follow with the move, which will be useful when making dynamic Web pages.
"Z-order" of layers
The biggest advantage of a layer over a table is that layers can overlap, to indicate which of the layers is above and which is below, set an ordinal number for each layer, which is the "Z-order", which means to add a Z axis perpendicular to the screen in addition to the X and Y coordinates of the screen.
As shown in Figure 4, the four layers in the left area and the four layers in the right area are significantly different, and the order of the layers is simple, with the mouse clicking on the bottom, middle and top layers. But this mode of operation in many layers of time is a bit troublesome, late adjustment is also inconvenient, so we can through the level of the Panel to adjust.
Figure 4
First, run the window→layers command to activate the layers panel, you can see the panel window shown in Figure 5 (Figure 5), where you just select the layer that needs to change the ordinal number, press the mouse up or down and drag it down, and then release the mouse when you drag to a horizontal line between the two layers you want to insert. So that you can change each
"Z-order" of layersOut.
Figure 5
Tip: Click the value of the Z box to change to the layer level you want. : 2
Create a table using layers
Although it is much easier to use layers to locate page elements than to use tables, only browsers with IE4.0 above support layer functionality, so for friends who use older browsers to see your hard work, the best way is to convert layers into tables.
The first step is to select the upper "Preventoverlaps" checkbox in the window shown in Figure 5 so that each layer cannot overlap each other, or there will be a warning message during the conversion process.
The second step is to run the "modify→convert→layerstotable" command, where you can see the window shown in Figure 6 (Figure 6), and select "Mostaccurate" and "" in the "Tablelayout" area, respectively. Usetransparentgifs "two options, in which the former creates a cell for each layer by precise conversion, ensuring the distance between the cells; the latter fills a transparent GIF in the last row of the converted table, which ensures that the same appearance is available in all browsers.
Figure 6
The third step after pressing the "OK" button to complete the layer to the table conversion operation.
Tip: Dreamweaver MX 2004 also provides the ability to transform from a table to a layer, similar to the procedure.
If you want to make their own web page, you must master layer technology, otherwise the future of the production of Dynamic Web will encounter a lot of difficulties, so we suggest that through the introduction of the above in-depth study, can really grasp the layer technology.
