Layers are another alternative to frames or tables for controlling a web page's layout. Unlike other HTML elements, layers provide both compositing (i.e., two elements can occupy the same area) and absolute positioning (i.e., you can specify the coordinates of a layer relative to the upper-left corner of the browser window or relative to another layer). Layers are empty containers into which you can insert other elements, such as text and graphics.
Layers require CSS and therefore require at least IE4. Whereas NN4 supports layers, it doesn't support advanced features such as nested layers. See the discussion under Section P.4.3 in the preface for more information. Layers can also be used for special effects and animation as described in Chapter 14 and Chapter 17. Consider using Macromedia Flash or Shockwave for more demanding animations or interactivity.
Although layers were originally designed for page layout, tables still offer more reliable alignment in most browsers. If you like, you can design your page using the layer tools and then choose Modify Convert Layers to Table to transform your layers to tables (however, you can't convert layers to tables if any of the layers overlap). You can also convert layers to a table using the File Convert 3.0 Browser Compatible Layers to Table command. Converting tables to layers may create unnecessarily verbose HTML. Create tables using Dreamweaver's table tools for greater efficiency.
Conversely, you can convert tables to layers by using Modify Convert Tables to Layers. You can also export layers from Fireworks using its File Export command and setting the Save As Type option to CSS Layers ( .htm ).
4.2.1 Layer Preferences
Dreamweaver creates layers using <div> tags by default. This default can be changed in the Layer Preferences dialog box, which is accessed using Edit Preferences Layers and is shown in Figure 4-5. The <layer> and <ilayer> tags are supported in NN4 only (and aren't supported in NN6), so the LAYER and ILAYER options should not be used. The <span> tag is not supported in Netscape, so use the DIV option for maximum compatibility.
Figure 4-5. The Layer Preferences dialog box
The Layer preferences are explained in Table 4-4.
Table 4-4. Layer preferences
4.2.2 Creating a Layer
To draw a layer, use Insert Layer or the Draw Layer tool from the Objects panel's Common category, as shown in Figure 4-6 .
Figure 4-6. Drawing layers
Insert Layer draws a layer (of the default size specified in the preferences) at the current cursor location. Insert Layer doesn't set an absolute position for the layer's top-left corner, but the Draw Layer tool does.
Insert Layer and the Draw Layer tool can be used in Standard view only; they are not available in Layout view. Hold down the Ctrl key (on Windows) or the Cmd key (on Macintosh) to retain the Draw Layer tool when drawing multiple layers.
You can also use Modify Convert Tables to Layers to create layers from an existing table. Layers can also be placed within a table. Be careful, howeverlayers nested within tables won't display properly in some browsers.
As usual, Dreamweaver automatically creates the necessary HTML for your layers, and you can adjust layer properties via the Property inspector. The HTML tag for a layer is represented by a shield icon containing a C (whose visibility depends on the View Visual Aids Invisible Elements setting). The icon is usually gold (see Figure 2-23), but turns blue when the layer is selected. The C on the shield icon stands for CSS, because layers implemented with the <div> or <span> tags conform to the CSS standard. If the layer is implemented using the <layer> or <ilayer> tags, which are supported by Netscape only, Dreamweaver displays an N on the shield icon instead of a C.
You can select a layer in several ways:
4.2.3 Layer Properties
Layers are affected by a variety of properties available through the Property inspector, as shown in Figure 4-7.
Figure 4-7. The Property inspector showing layer properties
Table 4-5 explains the layer properties that can be set in the Property inspector. If you rename a layer after applying a behavior, you'll have to edit the behavior to use the new layer name.
Table 4-5. Layer properties
The default Overflow option is Visible, which causes the layer to expand, if necessary, to display the elements within it. The Hidden setting crops elements that are too large to fit within a layer's dimensions. The Scroll and Auto options add scroll bars (either fixed or only when necessary) but neither works in NN4 or Opera, so avoid them.
You can specify four values for the Clip property in the L, R, T, and B fields. If you specify just the R and B values, Dreamweaver assumes that L and T should be zero. If you don't set at least the R and B values, Dreamweaver won't create the clip attribute within your HTML.
4.2.4 Layer Positioning
Although not accessible in the Property inspector, layers also support a position attribute that can be set to static , relative , absolute , fixed , or inherit ; however, Dreamweaver always sets a layer's position attribute to absolute . To change this attribute, hand-edit the HTML code. (Subsequent changes made to the layer cause it to revert to absolute positioning). The five types of positioning are as follows .
4.2.5 Layers Panel
The Layers panel shown in Figure 4-8 helps manage layers. Open the Layers panel by using Windows Layers or F2. You can also open the Layers panel by right-clicking (Windows) or Ctrl-clicking (Macintosh) on a layer and selecting Layers Panel from the pop-up contextual menu.
Figure 4-8. The Layers panel
The Layers panel's options are explained in Table 4-6.
Table 4-6. Layers panel options
4.2.6 Nesting Layers
Layers can be nested inside one another, which allows a set of layers to move in unison and inherit values when the parent layer is modified by a script. Nesting layers groups them conceptually, but nested layers need not be graphically positioned within their parent layer (as in the case of nested tables and frames). Therefore, nested layers may or may not overlap on screen; only their HTML code is physically nested. Similarly, layers need not be nested to occupy the same physical space on a page.
You can create nested layers by:
If the Edit Preferences Layers Nest when Created Within a Layer option is set, Dreamweaver automatically nests layers when a layer is drawn inside another layer.
After creating a nested layer, you can drag the outline of the layer to reposition it on the page; it remains nested even when its position changes.
To un-nest a layer:
4.2.7 Layers Operations
The following layer- related operations can be accomplished by hand-editing the HTML, but these gestures manipulate layers more easily.
To delete a layer, select it and then press the Delete key.
To resize or reposition a layer, select it and then:
You can also align and resize layers using the Modify Align options as shown in Table 4-7. To use these alignment options, select multiple layers using Shift-click. The selected layers are aligned or resized to match the last selected layer.
Table 4-7. Modify Align Menu Options
In this chapter, you have seen how to use frames and layers to control the layout of elements on your web page. See Chapter 14 and Chapter 17 for more information on manipulating layers. The next chapter covers how Dreamweaver handles external source files such as Flash and Shockwave assets.