Dreamweaver in a Nutshell

Layers

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.

Tip

Unlike other HTML elements, the visual position of a layer on the page is unrelated to the location of the layer tag within your HTML code. Instead, layer positioning is controlled by the coordinate attributes specified within the tag itself.

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

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

Preference	HTML	Description
Tag	<div>, <span>, <layer>, or <ilayer>	Creates layers using the specified tag. You should use DIV.
Visibility	visibility:default | inherit | visible | hidden	Controls visibility of the layer when the document loads.
Width	width: length ;	The layer width in pixels.
Height	height: length ;	The layer height in pixels.
Background Color	background-color: RGBcolor | colorname ; and layer-background-color: RGBcolor |colorname ;	The layer’s background color. Both properties are used to support the major browsers.
Background Image	Background-image: url ; and layer-background-image: url ;	The layer’s background image. Both properties are used to support the major browsers.
Nesting	N/A	Allows nested layers. It is not supported by Netscape Navigator.
Netscape 4 Compatibility	See the discussion following this table.	Refreshes layers in Netscape Navigator when the browser window is resized.

Tip

If you use layers with Netscape Navigator, turn on the “Netscape 4 Compatibility: Add Resize Fix When Inserting Layer” option under Edit → Preferences → Layers.

If you enable the Netscape 4 Compatibility checkbox, Dreamweaver inserts special JavaScript code into any document that uses layers. The JavaScript ensures that layers are properly resized by reloading the page when NN4 users resize the browser window. To add or remove this JavaScript code manually, choose Commands → Add Remove Netscape Resize Fix.

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, however—layers 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:

• Shift-click the layer. This technique can also be used to deselect a layer or select multiple layers.

• Click the shield icon representing the layer. Note that the shield icon isn’t always located near the layer on the page. Moving the shield icon simply rearranges the underlying HTML code (and can be used to un-nest a nested layer), but it doesn’t reposition the layer on the page.

• Click within the layer and then click on the tab that appears in its upper-left corner.

• Click the layer’s border (see View → Visual Aids → Layer Borders).

• Click the layer’s name in the Layers panel (discussed later in this chapter).

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

Property	HTML	Description
LayerID	id="string"	The layer name (used by scripts) should start with a letter and should not contain spaces.
Left (L)	left= integer | percentage | auto | inherit	The position of a layer’s left edge relative to the browser window, frame, or parent layer.
Top (T)	top= integer | percentage | auto | inherit	The position of a layer’s top edge relative to the browser window or frame.
Width (W)	width= integer | percentage | auto | inherit	A layer’s width in pixels.
Height (H)	height= integer | percentage | auto | inherit	A layer’s height in pixels.
Z-Index	z-index= integer | auto	Specifies the layer’s stacking order. Higher-numbered layers are drawn in the foreground. (Page’s z-index is 0.)
Visible (Vis)	visibility=default | inherit | visible | hidden	Controls layer visibility when the document loads (it can be modified via JavaScript).
Background Image (Bg Image)	background-image= url | none and layer-background-image= url | none;	Sets a layer’s background image. Both properties are used to support major browsers.
Background Color (Bg Color)	background-color= RGBcolor | colorname and layer-background-color= RGBcolor | colorname ;	Sets a layer’s background color. Both properties are used to support major browsers.
Tag	<div>, <span>, <layer>, or <ilayer>	Determines the tag used to create layers. Use DIV.
Overflow	overflow=visible | hidden | scroll | auto | inherit	Controls the display when content exceeds layer dimensions.
Clip (L T R B)	clip = " left , top , right , bottom " or clip = " right , bottom "	Controls the clipping of images with the layer. Values are in pixels measured from the top-left corner of the layer.

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.

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.

Static

Static positioning treats a layer as a rectangular box that is rendered in the document flow as with any normal element. It allows layers to move on the page depending on the content that precedes them. This mode also causes layers to affect the position of other elements that follow them on the page

Relative

Relative positioning is the same as static positioning except that the layer’s position is offset by the values of the top, right, bottom, and left attributes.

Absolute

Absolute positioning places a layer at coordinates defined by the height, width, top, right, bottom, and left attributes. This is the only mode supported by Dreamweaver. The contents of absolutely positioned elements neither affect nor are affected by the position of other content on the page. Therefore, they may obscure other content displayed on the same page. Coordinates are typically relative to the upper-left corner of the document. Internet Explorer will position nested layers relative to the upper-left corner of the parent layer; Netscape positions nested layers relative to the upper-left corner of the document (it ignores nesting).

Fixed

Fixed positioning uses window-relative coordinates. Whereas absolutely positioned layers will move if the document is scrolled, fixed layers will not, making them suitable for headers and footers. Netscape Navigator 6 is the only browser to support fixed positioning; Internet Explorer and earlier versions of Netscape do not support this mode.

Inherit

Nested layers whose position attribute is set to inherit will inherit the positioning attribute of their parent.

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

Control	Description
Visibility	Toggles the visibility of the layer on your screen, not the default setting of the property in your document. Nested layers are hidden when the parent layer is hidden.
Layer Name	Specifies the name of the layer. You can select a layer by clicking its name.
Z-Index	Identifies the vertical stacking order of the layer. 0 is level of the document and a higher-numbered layer appears stacked above that. (The first layer in the Layers panel is in the foreground and the last one is in the background.) See Modify → Arrange → Send to Back and Modify → Arrange → Bring to Front.
Prevent Overlaps	Forces all layers to lie next to one another, preventing the creation of overlapping layers (equivalent to Modify → Arrange → Prevent Layer Overlaps). This option does not affect existing layers’ unless you try to move or resize one. Nor does it prevent layers from overlapping when setting their positions via the Property inspector.

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.

Tip

Netscape Navigator 4 does not handle nested layers properly and often ignores positioning and visibility settings. Avoid nested layers when supporting NN4.

You can create nested layers by:

• Dragging the Draw Layer tool within a parent layer and then releasing it.

• Clicking inside a parent layer and selecting Insert → Layer.

• Ctrl-dragging (Windows) or Cmd-dragging (Macintosh) the name of one layer onto another layer in the Layers panel. The dropped layer becomes a child of the layer you dropped it on.

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:

• Reposition its shield icon (which moves the HTML tags, not the layer itself); or

• In the Layers panel, Ctrl-drag (Windows) or Cmd-drag (Macintosh) the layer’s name to the area below any of the listed layers.

• Hand-edit the HTML code.

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:

• Use the resize handles to resize or move it.

• Use the arrow keys to move a layer one pixel (holding down the Shift key moves it by ten pixels).

• Use Ctrl-arrow (Windows) or Cmd-arrow (Macintosh) to resize a layer by one pixel (holding down the Shift key resizes it by ten pixels).

• Specify Left, Top, Height, or Width in the Property inspector using supported units, such as % (percent), px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (font height), ex (height of x in current font). Specify units without an intervening space, as in 50pt to indicate 50 points.

• Note that negative coordinates cause the layer to be positioned outside the browser’s visible area (use the keyboard or Property inspector to position layers offscreen).

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

Align	Windows	Macintosh
Left	Ctrl+Shift+1	Cmd+Shift+1
Right	Ctrl+Shift+3	Cmd+Shift+3
Top	Cltr+Shift+4	Cmd+Shift+4
Bottom	Cltr+Shift+6	Cmd+Shift+6
Make Same Width	Cltr+Shift+7	Cmd+Shift+7
Make Same Height	Cltr+Shift+9	Cmd+Shift+9

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.