- Downloading the Project Files
- Part 1: Layers 101
- Part 2: Setting the Z-Index
- Part 3: Setting the Initial Visibility Status
- Part 4: Attaching the Show-Hide Layers Behavior
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Part 3: Setting the Initial Visibility Status
In this section, you'll get an overview of what the visibility status is and how it works. Then you'll learn how to set a layer's initial visibility status a couple of different ways in Dreamweaver.
Visibility Overview
Layers have a visibility property, which can be set to hidden, visible, inherit, or default. Hidden and visible are self-explanatory. Default is the same as visible. Inherit means that a layer takes the property of its parent layer. For example,: let's assume that you have a layer named layer1. The visibility property for layer1 is set to inherit. Also assume that you place layer1 inside another layer named layer2. If the visibility property for layer2 is hidden, layer1 will "inherit" that property and be hidden as well.
Setting Visibility Through the Layers Panel
When Dreamweaver creates layers, it sets the visibility property to default, which is the same as on. When the drop-down menu page loads, you want all of the layers to appear except the dropdown and hidedropdown layers, so you'll need to modify those two.
To change a layer's visibility status to hidden, do the following:
Identify the layer you want to change.
In the left column of the layer, click until a closed eye appears, as shown in Figure 30.
Figure 30 Changing the visibility status of a layer.
)
Figure 30When a layer's visibility status is set to hidden (represented by a closed eye), Dreamweaver also hides the layer in Design view.
Working with Hidden Layers
To work on a hidden layer, click the hidden layer's name in the Layers panel. The layer appears for you to manipulate. When you're finished working on the layer and click outside it, Dreamweaver hides it again.
Setting Visibility Through the Property Inspector
In this exercise, you'll change the visibility property of the hidedropdown layer:
In the Layers panel, or in Dreamweaver's document window, select the hidedropdown layer.
In the Property inspector, select Hidden from the Vis menu, as shown in Figure 31.
Figure 31 Setting visibility status through the Property
inspector.
)
Figure 31You're now finished setting the initial visibility status of the layers on the page. Your document window will look similar to the one in Figure 32.
)
Figure 32 The drop-down menu page, displaying only the layers with an
initial visibility status of default or visible.
You're now ready for the final part of this article: attaching the Show-Hide Layers behavior to the appropriate page elements.