Setting layer properties

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.

    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).

    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.)

    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.

    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

Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Laying Out Pages with CSS
Managing Templates
Adding Content to Pages
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly