Section 8.6. The Layers Panel

8.6. The Layers Panel

The Layers panel (Figure 8-9) helps you manage the layers in a document. To open it, choose Window Layers, or press F2.

Figure 8-9. The Layers panel lets you name , reorder, and change the visibility of layers. Turning on the "Prevent overlaps" checkbox makes sure you can't position or drag a layer on top of another. This feature is intended to make it easy to convert a layer layout to a table-based layout using the Modify Convert Layers to Table. Dont do it! This creates horribly bloated HTML that easily falls apart as you add, edit, and adjust content on the page.

The panel lists all layers in the document, and the three columns provide information on each layer:

• Visibility . To change a layer's visibility, click in the column with the eye icon next to the layer's name. An open eye indicates a layer is visible; a closed eye, hidden. No eye icon at all represents the factory setting (that is, visible).

• Layer Name . If you use Dreamweaver's Draw Layer tool, Dreamweaver gives the layer a generic nameLayer1, for example. If you created it yourself, you probably already came up with a pretty good name like banner or navBar . But if you want to change that name (or provide a more descriptive name for a Dreamweaver-created layer), double-click the layer name and type a new name. (Layer names must start with a letter and can contain only letters and numbers . As Dreamweaver's quick to remind you, spaces and other punctuation aren't allowed.)

  Clicking a layer name in the Layers panel, by the way, is another way to select a layer in the document window.

  ---

  Tip: Don't rename a layer if you've already used it in a Dreamweaver behavior like the Show/Hide Layers action (see Section 11.4.5). JavaScript uses your layer names to "talk to" the layers. If you change a layer's name in the Layers panel, Dreamweaver doesn't automatically update the name in the JavaScript code in your page. The behavior, therefore, no longer works. In that case, you'll need to edit the behavior using the new layer name.

  ---

• Z-Index . The Z-Index provides a third dimension to layers, letting them overlap one another (Section 8.3.1.3). To change the Z-Index of a layer, click the number in the Z column and type another number. Software veterans will find that Dreamweaver's Layers panel works just as it does in Photoshop or Fireworks: you can drag a layer's name up or down the list to the desired position. The layer at the top of the list (highest number) is in front of all other layers, while the layer at the bottom of the list ( lowest number) appears behind all other layers.