Understanding Layer Basics

---

To build DHTML elements, it's important to understand some key layer basics.

What's a layer?

Using layers doesn't mean you'll use a <layer> tag. The <layer> tag was a Netscape 4x tag that even Netscape doesn't support anymore. When working with layers in Dreamweaver, you will be working with a positioned <div> tag. A <div> is an empty HTML element. You can place it around other HTML elements. By itself, a <div> is pretty ordinary but when you use CSS to position it, it becomes magical — and, it becomes a layer. Lest you worry that you need to brush up on your CSS, relax; Dreamweaver contains a special Layers panel and Layer object that helps you build CSS-positioned <div>s without ever opening the CSS Styles panel. Working with the Layers panel, object, and the Property inspector (Figure 44-1), you can build layers by drawing or inserting them.

Figure 44-1: Layer tools include the Layers panel, the Draw Layer object, and the Property inspector.

Because layers are created with CSS, only version 4.0+ browsers recognize them. Like other CSS elements, a browser that doesn't understand CSS ignores it. But this doesn't mean your layer won't exist. It does, but only as a <div> with other HTML elements within it. The <div> is rendered inline where it occurs in the code rather than positioned with X, Y, and Z values.

Special layer properties

Layers have special properties that no other page elements have, and the Z-index is one of those properties. Besides the usual X, Y coordinates that all elements have (relative to the top-left corner of the current HTML document) layers have a third Z coordinate that indicates the layer's position in the Z-index or stack. Layers exist in the document and can overlap each other, much like stacking sheets of different-sized paper. To keep track of which layer is on top or below, the Z-index is used. The lower the value, the lower the layer is in the stack. The new document's default Z-index is zero.

Layers also have a visibility property. A layer may be visible, hidden, or can inherit either state from another layer. By default, layers are visible. There are many other special properties for layers that you will discover in the exercises given in this chapter. All layer properties may be edited with the Property inspector:

• Layer ID lets you specify a name to identify the layer in the Layers panel and in JavaScript code. Every layer must have a unique name — layer styles (CSS) are applied as IDs rather than classes. Names may use only standard alphanumeric characters. No special characters, such as spaces, hyphens, slashes, or periods, are allowed.

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

• W and H specify the width and height of the layer. Measurements (lengths) are pixels (px) by default but other units (mm, cm, in, pc, pt, and %) may be used. The unit must follow the value without any space between. Neither value is required and layers will "stretch" to accommodate content if the Overflow property is set to Visible. In many cases, it is best not to specify a height.

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

• Vis specifies whether the layer is initially visible. The default value is visible but may be set to Hidden or Inherit, which is derived from a Parent layer. Hidden hides the layer contents, regardless of the parent's value.

• 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. Generally (for cross-platform, cross-browser compatibility) use <div>.

• Overflow controls the way layers (created with <div> and <span> only) appear in a browser when the content exceeds the layer's specified size.

  • Visible — Extra content appears in the layer, and the layer stretches to accommodate.

  • Hidden — Extra content is not displayed in the browser.

  • Scroll — The browser should add scrollbars to the layer whether needed or not.

  • Auto — The browser displays scrollbars for the layer only when content exceeds the layer's boundaries.

  Caution 

  The Overflow option has uneven support across browsers.

• Clip defines the visible area of a layer. Left, top, right, and bottom coordinates define a rectangle in the containing layer (from the top, left corner of the layer). The layer is "clipped" so that only the specified rectangle is visible, like a view port.

• Src enables you to display another HTML document within the layer. Click the folder icon to browse to and select the document.

  Note 

  Dreamweaver does not display the other document in the layer.

Draw versus Insert Layer

The two main methods of adding layers to a page are to draw them with the Draw Layer object in the Common toolset of the insert bar or to use the Insert menu to choose Insert ® Layer. There are dramatic differences in the way your layers are rendered and behave in a browser based on how you created the layer.

Draw Layer places the <div> code above all other HTML content and below the <body> tag. Insert Layer places the <div> code in the document wherever your cursor is located. Where layer code is placed in the rest of the HTML code is important. For the most part, it should always be separate of the other (ordinary) HTML elements. After all, it's CSS that specifies where the layer appears in the page, not where the code is in the document. But the fact is, placing positioned <div> tags in other block elements (such as a table cell) can cause dramatic problems with your page. Different browsers render layers in different ways. Some browsers always measure from the top, left of the document; others look at the parent container, be it the document or a table cell.

Many developers believe that layer code should be placed below all other HTML elements, just above the closing </body> tag. Why? It's quite possible that a browser may have Styles disabled. Because positioned <div> tags require CSS, the positioning fails and the <div> renders inline. Would you rather have the mess be above your other content or below? It's up to you, but thankfully, you can easily move the <div></div> layers anywhere you want in Code view.

Tip 

You can select code in Code view and drag it to a new position.

Because layers and the tools used in Dreamweaver are so complex, this chapter will contain many exercises to show the finer points of DHTML in addition to explanations.

---