Layer Basics

[ LiB ]

To work well with CSS layers in Dreamweaver, you must first understand where they're coming from and what they're doing. With that groundwork , you can make the most of them without painting yourself into any nasty corners.

CSS-P and Layers in the Browser

The original CSS1 specification covered various text and other formatting options for page content in HTML. But the W3C wasn't finished there. CSS-P introduced the capability to govern how elements are positioned on the page ( P is for positioning). An expanded version of CSS-P then became part of the CSS2 standard. In addition to positioning, CSS-P allows page elements to be assigned a width, visibility, and even depth (z-index), allowing elements to be layered on the page. (Hence, the term layer. )

How CSS Positioning Works

Table 12.1 lists some of the style attributes possible with CSS-P and CSS2, and what they can do. Of these, positioning has been the most exciting to web designers. Through positioning controls, any page element can be turned into a free-standing entity, andtheoretically, at leastweb designers need no longer be slaves to the tyranny of tables for simple things such as putting page contents where they want them.

Table 12.1. CSS-P and CSS2 Styles

Style Property	Values	Description
`position`	`static` , `absolute` , `relative` , or `fixed`	Positions the element on the page (see the text for details).
`left` , `right` , `top` , `bottom`	Measurement in pixels, percent, and so on	Specifies the element's distance from the edge of its parent element.
`width` , `height`	Measurement in pixels, percent, and so on	Specifies the element's dimensions.
`z-Index`	Number	Specifies the element's place in the stacking order. Higher numbers are in front of lower numbers .
`Visibility`	`true` / `false`	Specifies whether the element is visible (used mainly for scripting purposes).
`Clip`	`clip: rect` ( `top right bottom left` )	Specifies whether the entire element will display or whether only a rectangle within the element's width and height will display.
`Overflow`	`visible` , `hidden` , `scroll` , `auto`	Determines what happens to content that won't fit within the width and height of the element.

Positioning Types

Positioning comes in three flavors: absolute, relative , and static. These types work like this:

Static positioning makes the element a static part of the document's normal flow. This is where the element would sit on the page if no positioning were specified. The element appears on the page as part of the normal flow of elements. The code for static positioning of an element might look like this:
```
 <h1 style="position:static;">Howdy!</h1> 
```
Absolute positioning places the page element an absolute distance from the edges of the browser window or the item's parent element. This distance can be specified in pixels, percent, or other units of measurement supported by CSS. The code for absolute positioning of an element might look like this:
```
 <h1 style="position:absolute; left:0px; top:0px; ">  Howdy!</h1> 
```
Assuming that this element isn't inside a table, div element, or other page element, it's a direct child of the body tag and hugs the upper-left corner of the browser window, regardless of what other page elements might proceed it in the HTML flow.
Relative positioning places the page element relative to other page content. This is similar to static positioning, in that the element's default position is after or below elements that precede it in the HTML and before or above elements that follow it in the HTML. But a relatively positioned element can be offset from its default position by assigning left , top , right , or bottom values. The code for relative positioning of an element might look like this:
```
 <h1 style="position:relative; left:50px; top:10px; ">  Howdy!</h1> 
```
Assuming that this element occurs below a table on the page, the code here will move its left edge to be 50 pixels to the right of where it would otherwise sit below the table, and move its top edge 10 pixels down from where it would otherwise sit.
Fixed positioning is similar to absolute positioning, except that when the page scrolls in the browser window, fixed elements do not scroll with it. The code for fixed positioning of an element might look like this:
```
 <h1 style="position:fixed; left:0px; top:0px; ">Howdy!</h1> 
```
Assuming that this element is not nested in any other elements (except the body itself), it will hug the upper-left corner of the browser window and will stay there even if the user scrolls down the page to view other content. (Unfortunately, fixed positioning is not as well-supported as the other positioning types, even in modern browsers.)

Positioning and Nesting

Positioning gets more complex when elements are nested inside other elements. In most browsers, and in the CSS-2 specification, how an element's positioning is interpreted depends on whether the element's parent also has positioning specifiedand specified as nonstatic. If the parent has no position attribute set or has the position set to static , a child with absolute position will be positioned relative to the closest ancestor with absolute or relative positioning. If no such ancestor exists (including the document body), the child will be positioned relative to the window.

Applying Positioning to Page Elements

A page element can be positioned with an inline style definition, like this:

 <h1 style="position:absolute; left:150px; top:80px">Howdy!</h1>

Or, it can be positioned by assigning it a custom class that includes positioning, like this:

 .logotest { position: absolute; left:150px; top:80px; } <h1 class="logotest">Howdy!</h1>

And because a particular style definition that includes positioning may be used only once in a document, the CSS style information can also be attached to a page element's unique ID attribute, like this:

 #logotest { position: absolute; left: 150px; top: 80px; }; <h1 id="logotest">Howdy!</h1>

If the style definition shown here is placed in an external style sheet document and is attached to a number of HTML pages, each page can have one element with the logotest ID, which will have its placement controlled by the style.

As with all CSS, the inline method is the least efficient because the information can never be reapplied to any other page elements in this or any other document.

Using div and span as Page Elements for Positioning

Theoretically, any page element can be absolutely positioned using CSS-P. Block elements (such as tables, headings, and paragraphs) are most commonly used for this, although inline elements (such as images) can also be used. But what if you want to position a group of elements, such as a heading and a following paragraph? You would enclose the entire group in a tag that doesn't have any of its own characteristics to interfere with page display, and apply a custom class or inline style to that tag. The two tags used for this are div (block element) and span (inline). Coding for positioning a group of elements might look like this:

 <div style="position:absolute; left:150px; top:80px;  width:200px">    <h1>Howdy!</h1>    <p>Welcome to my brand-new website!</p> </div>

or this:

 <span style="position:absolute; left:150px; top:80px; width:200px">    <h1>Howdy!</h1>    <p>Welcome to my brand-new website!</p> </span>

div and span elements can be nested inside each other. Other HTML elements nested inside div and span elements can also have positioning applied, like this:

 <div style="position:absolute; left:150px; top:80px;">    <h1 style="position:absolute; left:50px; top:50px;">  Howdy!</h1> </div>

How Layers Work in Dreamweaver

Dreamweaver layers provide an interface for dealing with CSS-P in Design view. Like any tool, they can be used or abused. Remember to always keep track of what's happening in the code while you're working with layers.

Drawing and Inserting Layers

The simplest and most intuitive way to get into building layers is to insert Layer objects with the Draw Layer object, found in the Layout Insert bar (see Figure 12.1). To use this tool, choose it from the Insert bar, position the cursor in the Document window, and drag to draw. When you're done, Dreamweaver displays a layer fitting your dimensions.

Figure 12.1. The Draw Layer object.

You can also choose Insert > Layout Objects > Layer, which inserts a layer with default dimensions and positioning into the document.

If you check Code view after your layer is created, you'll see that Dreamweaver built it as an empty div tag with an inline style where absolute positioning, dimensions, and stacking index are specified:

 <div id="Layer1" style="position:absolute; width:200px;  height:115px; z-index:1; left: 113px; top: 117px;"></div>

Absolutely positioned elements don't require all of these attributes, but they're all supplied by default.

Working with Layer Properties

Select your layer, and the Layer Property Inspector appears (see Figure 12.2). You can use this to change or remove any properties, or to change the tag used for the layer from div to span . To change the defaults for inserting layers, you can also choose Edit > Preferences/Layers (see Figure 12.3). Or, you can change your layer's size and position interactively by moving or resizing it in the Document window.

Figure 12.2. The Layer Property Inspector.

Figure 12.3. Setting Layer preferences.

Invisible Elements: Layer Markers

Because layers created with the Layer object use absolute positioning, their placement in the Design view layout isn't necessarily anywhere near where their code has been inserted. The code for the layer might be immediately after the opening body tag, while the layer itself sits at the bottom of the page. To help you keep track of the code, Dreamweaver gives you the option of seeing code icons where the code itself sits. To enable these, go to Preferences (Edit > Preferences) and, in the Invisible Elements category, make sure the Anchor Points for Layers option is selected. Then from the View Options menu, choose Visual Aids and select Invisible Elements. Figure 12.4 shows these visual aids at work.

Figure 12.4. Showing invisible anchor points for layers.

Managing Layers with the Layers Panel

The Layers panel (see Figure 12.5) helps you manage your layers. It tells at a glance how many layers your document contains, what their names are, what their stacking order is (which is in front, which is behind), and whether they're visible. (Invisible layers are not too useful for creating page layout, but are a staple of DHTML scripting.) You can also use the Layers panel to select layers that might otherwise be tricky to select, either because they're invisible or because they're stacked behind some other layers.

Figure 12.5. The Layers panel, a vital layer-management tool.

To access the Layers panel, choose Window > Layers. After the Layers panel has been opened, it appears as part of the Advanced Layout panel group, docked with your other panels.

The layers you've placed on the current page are shown in the panel as a list of names that reflects their stacking order (or z-index). The stacking order can be manipulated by dragging layers up and down in the list.

The left column with the eye icon at the top enables you to change the visibility of layers. See Chapter 14, "Controlling Layers with JavaScript," for more on playing with layer visibility.

You can allow or disallow overlapping layers by checking or unchecking the Prevent Overlaps box. As discussed earlier, overlapping layers are at more risk of misbehaving in browsers than layers that don't overlap. You might also want to disable overlapping if you think you might later want to turn your layers into a table for a more browser-compatible layout. (You can do this with the Modify > Convert > Layers to Table command, although it creates unwieldy table structure.)

Designing with Layers in Design View

If you're a visual sort of person who feels quite at home creating and manipulating design elements in programs such as QuarkXPress or Photoshop, you'll love how intuitive it is to create page designs using layers in Design view.

Selecting Layers

A layer has three possible selection states, each represented in Design view by a different graphic state (see Figure 12.6):

Figure 12.6. The three different appearances of a layer in the Document window.

When the layer is selected, it displays a little white box in its upper-left corner, as well as eight solid black squares around its perimeter. The white box is the selection handle. The black squares are resizing handles.
When the insertion point is inside the layer, the layer appears as a box with a selection handle but no resize handles. The layer appears this way just after it has been inserted because Dreamweaver assumes that you want to start putting content in the newly created layer right away.
When the layer is not selected, it appears as a plain beveled box, with no selection or resize handles.

To select a single layer, do one of the following:

Click one of the layer's borders. (This is straightforward and obvious, but it requires a bit of hand-eye coordination to click precisely on the layer border.)
Click inside the layer so the selection handle shows in the upper-left corner, and click the handle. (This is a slower two-step process, but it requires less-accurate clicking.)
Click inside the layer and use the tag selector at the bottom of the Document window to select the div or span tag that is the layer.
If invisible elements are showing, click the layer's layer marker.
In the Layers panel, click the layer's name .

To select multiple layers from within the Document window, click on the borders or selection handle of the first layer you want to select and then Shift-click anywhere within each additional layer. If invisible elements are showing, you also can Shift-click on each layer marker, in turn. To select multiple layers using the Layers panel, Shift-click the names of the layers you want to select. (Discontiguous selections are allowed.) No matter which selection method you use, the last layer that you select will show its resizing handles in black; other selected layers will show resizing handles in white.

Naming Layers

Each layer in a document must have a unique ID. When you create a layer, Dreamweaver gives it an ID based on the naming scheme Layer1, Layer2, Layer3, and so on. Layer IDs are used for CSS reference and also for any scripts that reference the layers. Layer names must be one word only, with no special characters .

Although you don't need to change your layers' default names, it is a good idea to give your layers names that are more descriptive than Layer1 or Layer2 so that you can easily identify them as you work. Even better, name them according to a naming scheme in which each layer's name tells you something about its position or function. For example, you might name a layer containing a navigation bar LayerNav, and a layer holding the page footer LayerFooter.

You can use the Layers panel or Property Inspector to change a layer's name. Double-click the layer in the Layers panel and type the new name into the text field area, or change the name in the Layer ID field of the Property Inspector.

Inserting Content into Layers

Inserting content into a layer is simple: Just click inside the layer and insert in the usual way. Content can be inserted using the Dreamweaver Insert bar or Insert menu, dragged from the Assets panel or from elsewhere on the page, or pasted from the Clipboard.

Drag-Resizing Layers

To size a layer in the Document window, first select it so that its resize handles show. Then just click and drag any of its resizing handles. Use the corner handles to resize horizontally and vertically at the same time, or use the noncorner handles to resize in one direction only.

Moving Layers Around

To change a layer's position from within the Document window, just grab it either by the selection handle or over the border, and click and drag. The cursor turns into a four-headed arrow when it moves over the selection handle, or a grabber hand when it moves over the border, to indicate that clicking and dragging is possible.

Be careful not to grab the layer in its middle and drag. You won't be able to move the layer this way, and you might accidentally drag its contents (an image, for instance) out of the layer entirely.

To nudge a layer a pixel at a time, select it and use the arrow keys to move it. To nudge a layer 10 pixels at a time, hold down Shift while using the arrow keys to move it.

Aligning Layers

Graphic designers migrating from the print world will be happy to know that Dreamweaver has a lovely feature for aligning layers. To align one or more layers with a border of another layer, do this:

Determine which layer you want the other layer(s) to align to (which layer will remain stationary, in other words, as the others shift to align with it).
All layers will be aligned to the last layer selected. So, using any of the selection techniques outlined earlier, select the layers you want to align, selecting the aligned-to layer last. (Its resize handles will show in black, indicating that it will remain stationary.)
Go to Modify > Align and, from the submenu, choose one of the alignment options (Left, Right, Top, or Bottom).

Figure 12.7 shows several layers being aligned to one stationary layer.

Figure 12.7. Using Modify > Align to align two layers to a third.

Matching Layer Sizes

Following the procedure for aligning layers, you also can modify layers so that their dimensions match. To do this, just select your layers, go to Modify > Align, and choose Make Same Height or Make Same Width. As with aligning, the last layer selected determines the final height or width of all selected layers.

Nesting Layers

A nested layer is a layer created inside another layer. The code looks like this:

 <div id="Layer1" style="position:absolute; width:200px;  height:115px; z-index:1; left: 200px; top: 200px;">   <div id="Layer2" style="position:absolute; width:100px;  height:100px; z-index:1; left: 50px; top: 50px;">     [Layer2 content goes here]   </div>   [Layer1 content goes here] </div>

Nesting is often used to group layers. A nested layer moves along with its parent layer and can be set to inherit visibility from its parent.

To create a nested layer, use any of the following procedures:

Place the insertion point inside an existing layer and choose Insert > Layer.
Drag the Draw Layer button from the Insert bar and drop it into an existing layer.
Click the Draw Layer button in the Insert bar, hold down Alt/Opt, and draw a layer inside an existing layer.
In the Layers panel, select a layer and then Ctrl/Cmd-drag the layer's name onto the layer that you want to be its parent.
If invisible elements are showing, drag the child layer's layer maker inside the parent layer.

After one layer is nested inside another, the child layer (the nestee) might jump to a new location in the Document window. This is because the layer's position is now being calculated relative to the parent layer's position. This also means that from now on, if you move the parent layer, its child moves with itbut if you move the child, the parent won't move.

Figure 12.8 shows how nested layers appear in the various areas of the Dreamweaver interface. In the Document window, if invisible elements are showing, the gold anchor points indicate nesting status. In the Layers panel, a nested layer is shown with its name indented under its parent layer. Click the plus/minus (+/) button to the left of the parent layer name to show or hide its children.

Figure 12.8. One layer nested inside another as they appear in Design view, the Tag Selector, and the Layers panel.

Not all browsers respect the relative positioning of parent and child. If accurate and predictable positioning of page content is important to you, test your pages thoroughly in a variety of browsers, or don't use nested layers.

Exercise 12.1. Creating a Basic Layer Page

In this exercise, you'll build a simple page layout using layers. For the Student Ministries home page, you want to place some images on a page so that some of them overlap one another and some are transparent, allowing the images beneath to show through. You've chosen layers to achieve this result. Figure 12.9 shows the final effect you're looking for.

Figure 12.9. The desired layout for the Student Ministries home page.

Before you start, download the files from the chapter_12 folder on the book's website at www.peachpit.com to your hard drive. Define a site called Chapter 12, with this folder as the local root folder. All the files for this exercise are in the chapter_12/ministries folder.

Select File > New to create a new HTML document. Save it in the chapter_12/ministries folder as student_ministries.html . To get your workspace ready for layer work, open the Layers panel (Window > Layers). To achieve the desired layout, you'll need to create overlapping layers; if Prevent Overlaps is selected in the Layers panel, deselect it.
Create your first layer by drawing it. In the Insert bar, click the Draw Layer button. The cursor changes to a crosshair, ready for drawing. In the Document window, drag to draw a layer roughly the size and shape shown in Figure 12.10. (You'll adjust the size later.)

Figure 12.10. Drawing the first layer.
Now put some contentan imageinside the layer. Click inside the layer to give focus to its content area. Go to the Insert bar and click the Image button. When the Select File dialog box opens, browse to the file images/student_ministries.jpg (in the chapter_12/ministries folder) and insert it.
To create the second layer, click the Draw Layer button again and draw a layer roughly the size and shape shown in Figure 12.11. For this layer's content, insert the images/three_guys.jpg image.

Figure 12.11. The second layer drawn in the Document window.

Note that you need to place the layers and their graphics only approximately at this point. Later, you'll position them exactly the way you want them.
Add two more layers, inserting images/quote1.gif into the first and images/quote2.gif into the second. These images will look a little funny at this point because they're designed to sit in front of a black background. You're working on a white background for now because layers are hard to see and select against a black background. You'll switch the background color later. Your document should now look somewhat like Figure 12.12.

Figure 12.12. The student_ministries.html file with four layers drawn and content inserted.
Now add a nested layer. You want to place another graphic so that it displays along with the Student Ministries graphic, regardless of how you rearrange the layers. To do this, you'll nest a layer within the layer containing that graphic. Click the Draw Layer button on the Common tab of the Insert bar to choose the Draw Layer object. Starting from within the layer that holds the Student Ministries graphic, Alt/Opt-drag to draw a new, smaller layer. When you've done this, put the cursor inside the new layer and insert the images/thursday.gif graphic into it.
You're getting quite a collection of layers here. Before proceeding any further, take a moment to name them. In the Layers panel, select the layer that Dreamweaver has named Layer1. Double-click its name and give it a more useful name: studentministries . (Layer names must consist of only letters and numbers.) Rename Layer2 threeguys .

Can you see a naming convention developing here? Each layer is being named after the image it contains, minus the filename extension. Continuing this convention, rename the other three layers. When you're done, your Layers panel should look like the one shown in Figure 12.13.

Figure 12.13. The newly named layers of student_ministries.html as shown in the Layers panel.
To change the page background, choose Modify > Page Properties. In the Appearance category, find the Background color setting and use the color picker to assign a color of black (#000000). Figure 12.14 shows this happening.

Figure 12.14. Changing the page background color.

Click OK to close the dialog box. Your page now shows a black background. Try selecting your layers. It is a little trickier. If you feel comfortable working with the black background, leave it. If not, just choose Edit > Undo to undo the change and return to the white background.
You've added images to each layer, but the size of the layer doesn't reflect the size of the image, and it is best if they are set to exactly the same dimensions. First, select the studentministries.gif image and examine the Image Property Inspector. You'll see that the image has a width of 417 and a height of 198.

The studentministries layer should have these same dimensions. Select this layer either by clicking its name in the Layers panel or by clicking one of the layer's edges in the Document window. You can tell that the layer is selected when the Layer Property Inspector appears (not the Image Property Inspector or Text Property Inspector). If you're working with a white background, you can also see the eight solid black squares around the perimeter of the latter.

Set the W value of the studentministries layer to 417px and the H value to 198px . (Remember to add the px after the number, with no space in between.)
Repeat this process for the remaining layers. Select each image, remember or jot down its dimensions, and then select the image's containing layer and assign the W and H values to those dimensions. (Remember to add the px .)

In the Layer Property Inspector, be careful not to confuse the L and T (Left and Top) fields with the W and H (Width and Height) fields.
Next, arrange the layers on the page by dragging them, and arrange their stacking order as necessary using the Layers panel. If you want, you can imitate the design shown in Figure 12.9, or you can be creative and come up with your own. Remember that the whole point of using layers here is to enable you to overlap your images somewhat, so be sure to experiment with some overlapping. You'll probably want to leave your background color black from this point on, to see the design the way it is intended, and you'll want to save and preview in a browser frequently.
Save your page and preview in a browser. Note that some older browsers might have problems displaying this page.