Using the Layers Panel The Layers panel, located by default in the Design group , provides a convenient way to view and modify the layout properties for the layers in a page. Use Window, Layers to display it if it is not visible. Layers appear in the list in the reverse order from which they were inserted, from the most recently inserted layers at the top to previously inserted layers at the bottom. Nested layers (layers contained within other layers) appear as a tree view descending from the parent layer. From the Layers panel, you can select layers, set their visibility, rename them, change their stacking order, nest them, and set the layer overlap setting. Layer Visibility The visibility of a layer can be changed by using the Layers panel. This is handy from a design standpoint because you can work on page layout with less clutter by hiding layers you don't need to see. The eye icon on the top left column of the panel indicates the current visible state for each layer. If the eye is open , the layer is visible; if closed, the layer is invisible; and if the eye icon does not appear, no visibility has been specified and the default value is applied as indicated in the Property inspector. You can toggle the initial visibility for the layer by clicking on the eye icon. Clicking the eye icon in the column header sets the visibility for all layers at once. You can also change layer visibility via behaviors, as discussed later in this chapter. Renaming Layers Although Dreamweaver inserts unique IDs for layers it creates, you'll frequently want to rename the layers to make them easier to remember and indicate their purpose. This way, you can easily tell which layer is being targeted by a JavaScript operation or behavior. To rename a layer from the Layers panel, double-click its name. The name then becomes editable, and you can simply type in a new name . You can also rename a layer from its Property inspector. Changing the Stacking Order The stacking order for layers, otherwise known as the z-order , specifies which layer is seen on top when two layers overlap. Let's say you want to create content boxes that have a slight overlap. Layers with a higher z-index appear on top of layers with a lower number. You can change the stacking order for layers in two ways: -
In the Layers panel, select the layer you want to change and drag it up or down the layer list to the desired position. A line is shown indicating the new layer position. Release the mouse button when the layer is in the correct position. Dreamweaver renumbers the values in the z-index column to reflect the new order. -
In the z column, click on the number for the layer you're changing. An edit box appears, and you can type a new number. Enter a higher number to move the layer up in the stacking order, or a lower number to move it down. Press (Return) [Enter], and the layer is then moved to the new position in the list. Nesting Layers Nested layers are layers contained within other layers. You can nest layers when creating them or by using the Layers panel. To nest a layer with the Layers panel, hold down the (Command) [Ctrl] key and drag a layer to the target layer. Careful here: Some browsers, especially certain versions of Netscape, do not properly display nested layers, so testing is in order! Layer Overlap When individuals size their browsers, content layers often overlap. To prevent this from happening, you should indicate whether you want to allow layers to overlap. This is handled in two different ways: -
In the Layers panel, check the Prevent Overlaps box. -
Check the Modify, Arrange, Prevent Layer Overlaps menu item. When the Prevent Layer Overlaps option is on, you cannot create a layer in front of another layer. If you move or resize a layer, it won't overlap other layers. Note, however, that when you activate this option, existing overlapping is not affected. The Prevent Layer Overlaps option overrides the Snap to Grid option. If both are enabled and you move a layer, it doesn't snap to the grid if doing so would cause it to overlap another layer. |
