- Introduction to Layers
- Creating Layers
- Deleting a Layer
- Embedding a Layer with Style Sheets
- Inserting Content into Layers
- Sizing, Positioning, and Modifying Layers with the Properties Inspector
- Modifying Layer Properties with the Layers Panel
- Designing a Page with Layers
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Modifying Layer Properties with the Layers Panel
The Layers panel can also offer great assistance when modifying and managing layers. Although not as many options are available through this panel as through the Properties Inspector, you might find it instrumental in selecting layers, adjusting their visibility, or even changing the stacking order of the z-index. Notice in Figure 12.16 that the Layers panel has several icons.
Eye Closed This icon represents a hidden layer.
Eye Open The open eye means that the visible attribute has been turned on.
No Icon This means the Vis attribute in the Properties Inspector has been set to default.
You also have the option of changing the layer's name. To change the name, double-click the text of the name to see a blinking cursor appear. Use the blinking cursor to delete or type anything that you want.
You can also use the Layers panel to change the z-index or stacking order of layers. You can control the stacking order by clicking and dragging a layer either above or below other layers, as shown in Figure 12.17.
)
Figure 12.16 The Layers panel has several icons representing different
attributes that have been set through the Properties Inspector.
)
Figure 12.17 You can change the stacking order of layers, much like you
would in any other graphics application; click and drag the layer either above
or below other layers in the panel.
Nesting with the Layers Panel
A common task that can be performed through the Layers panel is nesting and unnesting layers.
Creating Nested Layers with the Layers Panel
To create a parent-child nested layer relationship by using the Frames panel, follow these steps:
Make sure the Layers panel is visible. If it's not, choose Window, Layers to open the panel.
Draw two layers that are not nested in the document.
Notice that there are two layers now inside the Layers panel. To nest these layers, hold down the Command (Mac) key or Ctrl (Windows) key while dragging the layer you want to be nested on top of the other layer. After the layer is on top, release the mouse and notice that the layer disappears; however, an arrow (Mac) or plus sign (Windows) appears to the left of the layer name, as shown in Figure 12.18.
To reveal the nested or child layer, click the arrow or plus sign, as shown in Figure 12.19.
To undo the nested layer, drag the child or nested layer above or below the current layer.
As previously mentioned, nested layers can yield unpredictable results, especially in different browsers. It's important to keep that in mind when designing with layers.
)
Figure 12.18 When a layer is nested, it is indented underneath the parent layer
and an arrow appears at the left side of its name.
)
Figure 12.19 To reveal the nested layer in the Layers panel, click the
arrow to twirl it down.