Dreamweaver MX 2004 from scratch(4)
Author：Eve Cole
Update Time：2009-05-31 21:02:51
The use of layers <BR> A layer is an area of a web page. There can be multiple layers in a web page. Its biggest charm is that each layer can overlap, and you can decide whether each layer is visible. At the same time, Ability to customize hierarchical relationships between layers. After mastering the layer technology, you can provide powerful page control capabilities for web pages.
Create layer
In order to illustrate the function of the layer, we first create a simple example effect as shown in Figure 1 (Figure 1).
Figure 1
The first step is to create a new page in Dreamweaver MX 2004 and run the "Insert→Layer Objects→Layer" command. At this time, a black rectangular frame will appear in the editing window, which is the inserted layer. When the mouse moves over the rectangular frame line, the mouse will change into a cross arrow shape. When the mouse is clicked, 8 black solid squares will appear around the frame line, and there is an empty square in the upper left corner, indicating that this layer is selected.
Tip: Use the mouse to drag the solid square to change the size of the layer, and drag the empty square in the upper left corner to change the position of the layer.
The second step is to click the mouse in the layer and enter "China Computer Education News", and then set the text to blue in the properties panel window.
The third step is to click the layer border to select the layer, then run the "Edit→Copy" command to copy the current layer, then click the mouse in other blank areas of the editing window, and run the "Edit→Paste" command, so that in the editing window Another layer appears, but currently they overlap and you need to move the layer before you can see the two layers.
The fourth step is to change the text color of one of the layers to black, and move the layer position so that the positions of the two layers differ by a few pixels, thus producing a shadow effect (Figure 2).
Figure 2
After completing the above operations, press the "F12" button to preview, and you can see the effect shown in Figure 1 in the IE browser.
Nested layers
The so-called nested layer refers to a layer created in another layer. For example, what is shown in Figure 3 is a typical nested layer (Figure 3). In fact, making this kind of nested layer is very simple. Just create a parent layer, click inside the layer with the mouse, and insert a layer again. However, nested layers do not mean that the sublayer must be inside the parent layer. There is an inheritance relationship between them.
Figure 3
The function of inheritance is to keep the visibility of the sublayer consistent with that of the parent layer. Since many dynamic web page special effects are achieved by controlling the visibility of the layer, when the visibility of the parent layer changes, the visibility of the sublayer changes. The visibility also changes. Moreover, the inheritance relationship can also keep the relative position of the child layer and the parent layer unchanged. For example, if we drag the parent layer to move, the child layer will also move with it. This will be very useful when making dynamic web pages. .
Layer Z-order
Compared with tables, the biggest advantage of layers is that they can overlap. In order to indicate which layer is on top and which is below, a serial number must be set for each layer. This serial number is the "Z-order". What it means is that in addition to the X and Y coordinates of the screen, a Z axis perpendicular to the screen is artificially added.
As shown in Figure 4, the four layers in the left area are obviously different from the four layers in the right area. It is also very simple to adjust the order of the layers. Just use the mouse to click and place them in the bottom, middle and The top layer will do. However, this operation method seems a bit troublesome when there are many layers, and it is inconvenient to adjust later, so we can make adjustments through the layer panel.
Figure 4
First run the "Window→Layers" command to activate the layers panel. At this time, you can see the panel window shown in Figure 5 (Figure 5). Here, just select the layer whose serial number needs to be changed, press the mouse and drag it up or down. Drag and release the mouse when a horizontal line appears between the two layers you want to insert, so that you can change the "Z-order" of each layer.
Figure 5
Tip: Click directly on the value of the "Z" box to change it to the required layer level.
Create tables using layers
Although using layers to locate web page elements is much more convenient than using tables, only IE 4.0 and above browsers support the layer function. Therefore, in order to allow friends using older browsers to see the work you have worked so hard to create. , the best way is to convert the layer into a table.
The first step is to select the "Prevent overlaps" checkbox in the upper part of the window shown in Figure 5, so that each layer cannot overlap each other, otherwise there will be a warning message during the conversion process.
The second step is to run the "Modify→Convert→Layers to Table" command. At this time, you can see the window shown in Figure 6 (Figure 6). In the "Table layout" area, select "Most Accurate" and "Use Transparent GIFs" respectively. Two options, the former creates a cell for each layer through precise conversion to ensure the distance between each cell; the latter will fill the last row of the converted table with a transparent GIF image, which ensures that all browsers All have the same appearance.
Figure 6
The third step is to complete the conversion operation from layer to table after pressing the "OK" button.
Tip: Dreamweaver MX 2004 also provides the conversion function from tables to layers, and the steps are similar.
If you want to make your own web pages colorful, you must master the layer technology. Otherwise, you will encounter many difficulties when making dynamic web pages in the future. Therefore, it is recommended that you study in depth through the above introduction to truly master the layers. technology.
