Setting layer properties

Use the Property inspector to view and set properties for a layer.

To set properties for a layer:

1. Set any of the following options:

   Layer ID allows you to specify a name to identify the layer in the Layers panel and in JavaScript code.

   Enter a name. Use only standard alphanumeric characters; do not use special characters such as spaces, hyphens, slashes, or periods. Every layer must have its own unique ID.

   L and T (left and top) specify the position of the layer’s upper-left corner relative to the upper-left corner of the page, or of the parent layer if nested.

   W and H specify the width and height of the layer.

   NOTE

   If the content of the layer exceeds the specified size, the bottom edge of the layer (as it appears in the Design view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the layer appears in a browser, unless the Overflow property is set to Visible.)

   The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent layer’s corresponding value). The abbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.

   Z-Index determines the z-index, or stacking order, of the layer.

   In a browser, higher-numbered layers appear in front of lower-numbered layers. Values can be positive or negative. It’s easier to change the stacking order of layers using the Layers panel than to enter specific z-index values (see Changing the stacking order of layers).

   NOTE

   Netscape layers (those that use the layer or ilayer tag) can be stacked relative to other layers on the page. When you select a Netscape layer, two additional options appear in the lower-right corner of the Property inspector. Select the name of another layer from the new pop-up menu in the lower-right corner (only layer names you’ve already defined appear in this menu); then use the A/B option to indicate whether the specified layer should appear Above (in front of) the current layer or Below (behind) it. Note that you can’t specify both an Above/Below stacking order and a z-index for a given layer.

   Vis specifies whether the layer is initially visible or not. Select from the following options:

   • Default does not specify a visibility property.

     When no visibility is specified, most browsers default to Inherit.

   • Inherit uses the visibility property of the layer’s parent.
   • Visible displays the layer contents, regardless of the parent’s value.
   • Hidden hides the layer contents, regardless of the parent’s value.

     Note that hidden layers created with ilayer still take up the same space as if they were visible.

   Use a scripting language, such as JavaScript, to control the visibility property and dynamically display layer contents.

   Bg Image specifies a background image for the layer.

   Click the folder icon to browse to and select an image file.

   Bg Color specifies a background color for the layer.

   Leave this option blank to specify a transparent background.

   Tag specifies the HTML tag used to define the layer.

   Overflow controls how layers appear in a browser when the content exceeds the layer’s specified size.

   Visible indicates that the extra content appears in the layer; effectively, the layer stretches to accommodate it. Hidden specifies that extra content is not displayed in the browser. Scroll specifies that the browser should add scroll bars to the layer whether they’re needed or not. Auto causes the browser to display scroll bars for the layer only when needed (that is, when the layer’s contents exceed its boundaries.)

   NOTE

   The overflow option has uneven support across browsers.

   Use Left, Top or PageX, PageY (layer and ilayer only) lets you specify whether to position a layer in relation to its parent or to the page.

   The Left, Top option places the layer relative to the upper-left corner of its parent. The PageX, PageY option places the layer in an absolute location relative to the upper-left corner of the page, regardless of the position of the parent layer.

   Clip defines the visible area of a layer.

   Specify left, top, right, and bottom coordinates to define a rectangle in the coordinate space of the layer (counting from the upper-left corner of the layer). The layer is "clipped" so that only the specified rectangle is visible. For example, to make a layer’s contents invisible except for a 50-pixel-wide, 75-pixel-high visible rectangle at the upper-left corner of the layer, set L to 0, T to 0, R to 50, and B to 75.

   NOTE

   Although the Cascading Style Sheets specification specifies different semantics for clip, Dreamweaver interprets clip the way that most browsers do.

   Src (layer and ilayer only) lets you display another HTML document within the layer. Click the folder icon to browse to and select the document.

   Note that Dreamweaver does not display the other document in the layer.

2. If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

Related topics

• Viewing and setting properties for a single layer