ONLINEGRAPHICPROOFING.COM

proof of service by publication - www.onlinegraphicproofing.com

Menu


Modifying Layer Properties with the Layers Panel Another option for customizing layer properties is the Layers panel. You


can use the Layers panel as a way to set a layer's ID, Visibility properties, Z-Index, and whether or not layers can overlap each other. The Layers panel, shown in Figure 11.9, can be selected directly from the CSS Styles panel group or by choosing the Layers option from the Window menu or by pressing F2. Alternatively, you can right-click a layer's border to access the context menu and choose the Layers Panel option to open the Layers panel. Figure 11.9. Use the Layers panel to visually set visibility, Z-Index, layer ID, and overlapping properties.   With the Layers panel open, notice that the style and overall appearance is strikingly familiar, looking much like a Layers panel would in an image-editing program such as Fireworks. For instance, you can drag layers above or below other layers, effectively changing the Z-Index of the layers on the page. TIP If you drag a layer in the Document window that doesn't contain a Z-Index, Dreamweaver automatically adds one for you.   You can also click in the eyeball column to change the initial Visibility property for a layer. Finally, you can double-click in the Name column to change the Layer ID of the selected layer. All this and more is possible through the Layers panel. The following features are exposed from the Layers panel: Visibility: You can click in this column for a particular layer to change the Visibility property for a layer. Icons include a closed eye (which represents Hidden), an open eye (which represents Visible), and no eye, the default (which represents Inherit). Name: You can double-click the layer name in this column to change the layer ID for the specific layer. Z: You can double-click the layer in this column to change the Z-Index (stacking order) for the specific layer. Of course, you can also drag and drop layers above or below other layers in the Layers panel to accomplish the same task. Prevent overlaps: When designing layer-based sites, click this button to prevent layers from overlapping each other. This is important when you want to work with two layers next to each other but want to prevent them from falling into an area used by another layer. We'll discuss this option further in the next section. It's important to understand the place of the Layers panel. Sure, most of these properties can be set by simply selecting the layer and making the necessary change in the Properties Inspector. The difference between the Properties Inspector and the Layers panel however, is that the Layers panel allows you to work with layers even when they're hidden from view. Because the Properties Inspector becomes available only when a layer is selected, there is no way of changing the Visibility of a layer back to Visible once it's been Hidden if it weren't for the Layers panel. Also, it's important to note that the Layers panel represents the collection of layers on the page as opposed to a single layer, which is what the Properties Inspector is for. The Prevent Overlaps check box prevents all layers on the page from overlapping each other, as discussed in the next section. Preventing Layers from Overlapping As mentioned in the previous section, you can use the Prevent Overlaps check box in the Layers panel to prevent all layers on your page from accidentally overlapping each other when you position them. To demonstrate this feature, follow these steps: 1. Click the Prevent Overlaps check box in the Layers panel.