Changing Layer Visibility


You can change layer visibility to show or hide a layer, which can be useful when using layers to add user interactivity. You might need to change the visibility of a layer if you are creating dynamic content that displays in response to user interaction.

1.

Select the Layer3 layer in the layers.html document. Click once in the Visibility column on the left side of the Layers panel to change the visibility of that layer.

A closed eye icon will appear in the column on the Layer3 row to indicate that the visibility has been changed to hidden, and the layer temporarily disappears.

Tip

To change the visibility of all layers at once, click the eye icon at the top of the column.

There are three visibility options on the Layers panel: Inherit, Visible, and Hidden.

  • Inherit uses the visibility property of the layer's parent. For this option, there is no icon displayed in the visibility column.

  • Visible displays the layer contents, regardless of the parent's value. For this option, there is an open eye icon displayed in the visibility column.

  • Hidden displays the layer content as transparent, regardless of the parent's value. If you set a layer to hidden, the layer markers and the Layers panel might be the only ways for you to select that layer. For this option, there is a closed eye icon displayed in the visibility column.

On the Property inspector, there is a fourth visibility option: Default does not specify a visibility property, but most browsers interpret it as inheriting the parent's value.

Tip

Choose Dreamweaver > Preferences (Macintosh) or Edit > Preferences (Windows) and select the Layers category to set the default visibility for new layers.

2.

Save the layers.html document and preview it in the browser.

When the Layer3 layer is selected in Dreamweaver, you can see it in the Document window. When it is not selected, the layer disappears, making the Document window look just as it does in the browser.

If the content in a hidden layer extends past the content of a visible layer, the browser window will continue to scroll past the end of the visible layer because of the hidden class content.

3.

Select the Layer3 layer in the Layers panel and choose Edit > Clear (Macintosh) or press Backspace (Windows).

Pressing Delete might not work with the Layers panel on the Macintosh. You can choose Edit > Clear or remove the layer from the Document window instead.

Leave this file open for the next exercise.




Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net