8.6 The Layers Panel

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

The Layers panel is where you name, reorder, and change the visibility of layers. Turning the Prevent Overlaps checkbox on or off does the same thing as choosing ModifyArrangePrevent Layer Overlaps.

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 name—Layer1, 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 only contain letters and numbers. As Dreamweaver is 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.

  NOTE

  Don't rename a layer if you've already used it in a Dreamweaver behavior like the Show/Hide Layers action (see Section 12.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, will no longer work. In that case, you'll need to edit the behavior using the new layer name (see Section 12.2.3).

• Z-Index. The Z-Index provides a third dimension to layers, letting them overlap one another (Section 8.3.1.4). 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.