Chapter 14. Layer Behaviors

Layers provide a third dimension to your web documents—they can be stacked like glass plates so their contents overlap. Layers also offer absolute positioning of elements in a document. You can create visual effects by modifying a layer’s visibility, contents, and position over time.

Layer Size and Position

Layers require 4.0+ versions of the major browsers. For maximum compatibility with Netscape Navigator and Internet Explorer, create layers using the <div> tag. For example, a layer implemented with a <div> tag using absolute positioning might look like this:

<div id="Layer1" 
  style="position:absolute; visibility:visible; 
    left:67px; top:39px; width:161px; height:172px; 
    z-index:1; overflow:scroll">
</div>

Avoid <span> tags, which work in IE only, and avoid <layer> and <ilayer> tags, which work in NN4.x only. For more details, see Section 4.2 in Chapter 4.

Layers are controlled using the attributes discussed in Table 4-5. These attributes can be set in the Property inspector, as shown in Figure 4-7. A script can reference a layer’s id (in this case, Layer1) to modify its properties. By default, when you add a layer to your document, Dreamweaver adds the MM_reloadPage behavior to ensure that layers are properly updated when resizing the Netscape browser window. If your site does not support Netscape browsers, you can shut this option off under Edit Preferences Layers Netscape 4 Compatibility. You can add or remove this JavaScript manually in a document ...

Get Dreamweaver in a Nutshell now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.