Chapter 14. Using Layers for Page Layout

CONTENTS

 

•  Layers: The Basics
•  Working with Layers in Dreamweaver
•  Clip
•  Taking Dreamweaver Layers Further
•  Interview: M. Kosloff
•  Summary

What is a layer? If you search an HTML reference, you'll find that there is a Netscape-specific tag called <layer>, but this is not what is meant by the term in Dreamweaver or its current usage. This book uses layer as it is now commonly used, to refer to a specific page building block produced by Dreamweaver. A layer is a <div> (or occasionally a <span>) element, positioned with inline CSS styles.

Topics discussed in this chapter include layer basics (uses, cautions, and how they're coded), working with layers in Dreamweaver, setting layer properties, setting layer preferences, and strategies and tips for making layers work well. Last, we'll look at true CSS Positioning, the cutting-edge technique that is a distant relative of the layer.

Layers: The Basics

On one level, Dreamweaver layers are an attempt to give web designers the kind of control over the positioning of elements on a page as is available in print media. To some extent, layers do provide that kind of functionality. To those new to web design, layers often appear to be the web's answer to the concept of text boxes in programs such as Microsoft Publisher. A text box is a rectangular container that can be placed anywhere on the page to position elements exactly as desired. For reasons we'll discuss later, however, it's best not to use layers in this way.

But layers do have a lot of great uses. For example, layers are the best choice for achieving effects such as:

• Swapping images that have different dimensions

• Displaying pop-up text messages

• Moving elements around on the screen

• Building drop-down or fly-out menus

• Incorporating DHTML visual effects into your sites

If the design you have in mind can be accomplished using tables or frames, however, that is usually a better choice for cross-browser compatibility. For more about the different ways of laying out a page with Dreamweaver, see Chapter 8, "Design Issues."

Layers and CSS-P

Layers are defined and positioned with CSS, and in this respect are related to the technique known as CSS positioning (CSS-P). In true CSS-P, however, <div>s and other elements are positioned with external, linked style sheets, achieving the kind of separation of structure and presentation that is part of the essential concept for HTML. (See Chapter 4, "Working with Text," for more on this concept.) With true CSS Positioning, the idea that inspired the web begins to come into bloom. Dreamweaver layers, with their inline CSS declarations, make use of CSS but don't separate structure and presentation, and so miss the mark on one of the main purposes of CSS-P.

CSS-P is discussed later in this chapter. Although using standard Dreamweaver layers is not the same as using CSS-P, they can be an extremely powerful and useful tool especially for animating web pages with scripting. Chapters 17, "Controlling Layers with JavaScript," and Chapter 18, "Animating Layers," handle this in detail; here you'll learn the basics of laying out page elements with layers.

You Are Now Free to Move About the Page: The Benefits of Layers

Layers enable you to create effects that are just not possible without them. Layers can be stacked one on top of another and can be positioned anywhere on the page. You can hide some layers while showing others, move a layer across the screen with a timeline, or allow images to appear and then fade. The possibilities are almost limitless, and with Dreamweaver you can achieve these effects from within its point-and-click interface.

When Worlds Collide: The Risks of Using Layers

The primary danger in using layers is the lack of browser support. Only IE 4.0 and later browsers display layers correctly. In Netscape 4 and other older browsers, a page dependent on layers might display very poorly, with elements not placed even approximately where you intended. Further, even in newer browsers, support for layers isn't consistent.

A document containing layers is only as sturdy as the browser from which it is viewed; if that browser doesn't completely understand or support the code used to create layers, much could go wrong.

It's important to decide from the outset whether the use of layers is called for in a given situation. As you proceed through this chapter, you'll come across some specific strategies and tips to help you avoid problems with layer-based pages.

How Layers Are Coded

When you insert a layer into a page, Dreamweaver MX writes HTML code for you using one of two tags: <div> or <span>. <div> is a block-level element, and <span> an inline element.

By default, Dreamweaver uses the <div> tag to create layers; this default can be changed in your Dreamweaver preferences, as discussed later in the "Setting Layer Preferences" section.

The <div> tag is given several attributes that describe its position, dimensions, stacking order, and visibility.

HTML code for a single layer looks something like this:

<div ID="Layer1" STYLE="position:absolute; left:150px; top:80px;  width:350px; height:165px; z-index:1"></div>

HTML code for a layer nested within a layer looks something like the following:

<div ID="Layer1" STYLE="position:absolute; left:150px; top:80px;  width:350px; height:165px; z-index:1">        <div ID="Layer2" STYLE="position:absolute; left:80px; top:50px;  width:195px; height:65px; z-index:1"></div>        </div>

If you are at all familiar with CSS, you might recognize the attributes of the <div> tags in the preceding examples as inline CSS code.

Working with Layers in Dreamweaver

Dreamweaver makes working with layers easy, at least in the sense that its point-and-click tools enable you to add layers to your pages and set properties for them without any knowledge of the underlying code. However, be careful that this ease of use doesn't lull you into a false sense of security; the fact that Dreamweaver enables you to add an element on a page that generates code doesn't mean that this code will work in every browser and every situation. In working with layers, as with any and all web design work, it is necessary to test your pages early and often in a number of different browsers, at least in the browsers that will be used by your target audience.

Creating Layers

Dreamweaver gives you several options for creating layers. Your main choice is one of work style would you rather draw your layers, like you would in a graphics or page layout program? Or would you rather insert your layers ready-made, without drawing?

Drawing Layers

To draw a layer, follow these steps:

1. In the Common tab of the Insert bar, click the Draw Layer button (see Figure 14.1). The cursor will turn into a crosshair, ready for drawing.

   Figure 14.1. The Draw Layer object in the Insert bar.

   

2. In the Document window, click-and-drag to draw the layer the size you choose.

3. As soon as you release the mouse button, the cursor will return to normal and you're out of the Draw Layer tool.

Note

You must be in Standard view, not Layout view, to insert layers.

To draw multiple layers one after another, do this:

1. Click the Draw Layer button.

2. Press and hold the Ctrl key (Windows) or Cmd key (Mac).

3. Draw your first layer. When you release the mouse button, the cursor remains in its crosshair persona, and the Draw Layer tool remains active.

4. When you're finished drawing layers, release the Ctrl/Cmd key and the cursor returns to normal.

Inserting Layers

If you prefer not to draw, you can insert your layers instead. To insert a layer, do one of the following:

• Drag and drop a layer onto the Document window from the Draw Layer button on the Insert bar (Common objects tab).

• Place the insertion point on the page where you want the layer and choose Insert > Layer.

Dreamweaver will create your inserted layer with a default width and height.

Invisible Elements: Layer Markers

As soon as you've created/drawn/inserted a layer, if you have invisible elements turned on, you'll see a little gold icon appear in the upper-left corner of the Document window. For every subsequent layer you draw, another gold icon will be added. These icons are layer markers; they represent the code for each layer. Why are they here? With most page content, it's easy to tell from within Design view where the code for an item has been inserted: If the item is at the top of the page, that's because its code is at the top of the <body> section. If the item is halfway down the page, right after a big banner image, that's because the code for the item is halfway down in the <body> code, right after the <img> tag for the banner.

But because layers use absolute positioning, their placement in the Design view layout isn't necessarily anywhere near where their code has been inserted. So Dreamweaver gives you layer markers as a visual indicator of where the code is actually sitting in relation to the code for other items on the page. Figure 14.2 shows these visual aids at work. If you don't find layer markers helpful, you can hide layer markers by choosing View > Visual Aids > Invisible Elements (this command toggles invisible elements on and off).

Figure 14.2. A document showing several newly created layers and their anchor point icons.

Managing Layers with the Layers Panel

The Layers panel (see Figure 14.3) helps you manage your layers. It tells at a glance how many layers your document contains, what they're names are, what their stacking order is (which is in front, which is behind), and whether they're visible or not. (Invisible layers are not too useful for creating page layout, but are a staple of DHTML scripting.) You also can 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. To access the Layers panel, choose Window > Others > Layers. After the Layers panel has been opened, it appears as part of the Advanced Layout panel group, docked with your other panels.

Figure 14.3. The Layers panel, a vital layer management tool.

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 17, "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. (See Chapter 10, "Using Dreamweaver's Page Layout Aids," and the section on "Converting Layers to Tables" later in this chapter, for more about this.)

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 like QuarkXPress or Photoshop, you'll love how intuitive it is to create page designs using layers in Design view. The following sections discuss how to perform all the basic layer-manipulating tasks you can do in Design view, with a few tips and tricks along the way. (For more information on manipulating layers numerically, see the section "Setting Layer Properties" later in this chapter.)

Selecting Layers

There are three possible selection states for a layer, each represented in Design view by a different graphic state (see Figure 14.4):

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

• When the layer is selected, it will display 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 will appear 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 you want to start putting content in the newly created layer right away.

• When the layer is not selected, it will appear 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 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 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 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 name. When you create a layer, Dreamweaver gives it a name based on the naming scheme Layer1, Layer2, Layer3, and so on. In the code, these names become ID attributes. (ID is a CSS selector somewhat like class, except that an ID selector should appear only once on an HTML document.) 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.

While 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 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 and/or function. For example, you might name a layer containing a navigation bar LayerNav, and a layer holding the page footer LayerFooter.

Use the Layers panel to change a layer's name. Double-click the layer in the Layers panel and type the new name into the text field area.

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 its resize handles show. Then just click-and-drag any of its resizing handles (see Figure 14.5). Use the corner handles to resize horizontally and vertically at the same time, or the non-corner handles to resize in one direction only.

Figure 14.5. Resizing a layer by dragging.

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 will turn 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.

Warning

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 ten 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:

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

2. 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 align-to layer last. (Its resize handles will show in black, indicating that it will remain stationary.)

3. Go to Modify > Align, and from the submenu choose one of the alignment options (Left, Right, Top, or Bottom).

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

Figure 14.6. 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 will determine the final height or width of all selected layers.

Nesting Layers

A nested layer is a layer created inside another layer. Nesting is often used to group layers. A nested layer will move 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 (Windows) or Option (Mac) and draw a layer inside an existing layer.

• In the Layers panel, select a layer, and then Ctrl+drag (Windows) or Cmd+drag (Mac) the layer's name onto the layer 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 it; but if you move the child, the parent won't move.

Figure 14.7 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 14.7. One layer nested inside another as they appear in Design view, the tag selector, and the Layers panel.

Warning

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.

Deleting Layers

To delete a layer, select the layer (in the Document window or Layers panel) and press the Delete key. To quickly delete multiple layers, do one of the following:

• Shift-click to select the layers you want to delete (in the Document window or Layers panel) and then press Delete.

• Hold down the Delete key and then (in the Document window) click on each layer you want to delete in turn.

Exercise 14.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 in such a way that some of them overlap one another and some are transparent, allowing the images beneath to show through, so you've chosen layers to achieve this result. Figure 14.8 shows the final effect you're looking for.

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

Before you start, copy the files from the chapter_14 folder on the CD to your hard drive. Define a site called Chapter 14, with this folder as the local root folder. All the files for this exercise are in the chapter_14/ministries folder.

1. Select File > New to create a new document. Save it in the chapter_14/ministries folder as student_ministries.html. To get your workspace ready for layer work, choose Window > Other > Layers (or press F2) to show the Layers panel. To achieve the desired layout, you'll need to create overlapping layers; so if Prevent Overlaps is selected in the Layers panel, deselect it.

2. You'll 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 14.9. (You'll adjust the size later.)

   Figure 14.9. Drawing the first layer.

   

3. Now put some content an image inside 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_14/ministries folder) and insert it.

4. To create the second layer, click the Draw Layer button again and draw a layer roughly the size and shape shown in Figure 14.10. For this layer's content, insert the images/three_guys.jpg image.

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

   

   Note that you only need to place the layers and their graphics approximately at this point. Later you'll position them exactly the way you want them.

5. 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 14.11.

   Figure 14.11. The student_ministries.html file with four layers drawn and content inserted.

   

6. Now add a nested layer. You want to place another graphic in such a way 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.

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

   Figure 14.12. The newly named layers of student_ministries.html as shown in the Layers panel.

   

8. You've now added four layers and an image in each one, and named your layers. Save your page. It should look something like the layout shown in Figure 14.8. Note that the quote graphics will look a little odd until you set the dark background color. In Exercise 14.2, you'll edit and adjust the properties of the layers you've created.

Setting Layer Properties

When a layer is selected in the Document window, the Layer Property inspector displays, allowing you to format your layer and work with it numerically (see Figure 14.13). The following sections describe the options available in this inspector.

Figure 14.13. The Layer Property inspector.

Tag

The Tag field determines the HTML tag used as a basis for the layer. As mentioned earlier, Dreamweaver defaults to <div>. Either <div> or <span> will make a layer that will work in both Netscape 4+ and Internet Explorer 4+.

Layer ID

Layer ID is the identifying name for a layer. See the section on "Naming Layers," earlier in this chapter, for more on this. When you change a layer's name in the Layers panel, you're changing the Layer ID. If you assign a new Layer ID using the Property inspector, a new layer name will appear in the Layers panel.

L and T (Left and Top Coordinates)

These fields determine the left and top coordinates of the selected layer. The numbers describe the location of the top-left corner of your layer, relative to the top-left corner of the page or of the containing element.

W and H (Width and Height Coordinates)

Use these fields to set the width and height of a layer in pixels. When Dreamweaver enters width and height properties for a layer, it adds px to specify pixels; when you're typing in your own dimensions, you need to add the px yourself. You also can specify pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent element's value). The abbreviations must follow the value without a space: for example, 300px.

Z-Index

A layer's z-index is the order in which it is stacked relative to other layers inside the same document. The layer with the highest z-index will be the topmost layer. The layer with the lowest z-index (you can even use negative numbers for z-indexing) will be the layer farthest to the back. When you rearrange layers in the Layers panel, you're adjusting the z-index of the layers. You can also change the z-index value here in the Property inspector and see the changed stacking order in the Layers panel.

Background Colors and Images

Use these fields to assign a background color (bgcolor) or image (background-image) for a layer, if desired. Any background image you assign to a layer will be tiled if the layer's dimensions are larger than the image's dimensions.

Vis (Visibility)

Use this field to specify the visibility property of the selected layer. In Dreamweaver, new layers are assigned a visibility of Default. Most browsers understand this to mean that the layer should be visible. If you want to be sure that the layer is visible in every browser, set this field to Visible. To hide a layer, set it to Hidden. This property is used most often with Show-Hide Layer behaviors. (See Chapter 17 for more about using behaviors with layers.)

Overflow

If you insert contents into a layer that are larger than the set width or height of the layer, the overflow attribute determines what happens to the excess. This setting becomes important because different browsers render certain contents particularly text in different sizes. It is possible that the page won't need an overflow property in one browser, but will need it in another. Note that the overflow attribute is completely ignored in Netscape 4.x.

When there is text in a layer, you should use an overflow setting. Although some methods of sizing text provide more control than others, methods cannot be overridden by the user's preferences in some browsers.

Overflow settings and their effects are as follows:

• Visible. This choice increases the layer's size as necessary so that all of its contents can be seen. The layer expands to the right and toward the bottom of the browser window. Note that this setting can cause the contents of one layer to expand over the contents of another layer.

• Hidden. Content that doesn't fit into the layer's set size will be hidden from view.

• Scroll. In browsers that support layer scrollbars, this option provides them, and they will appear even if the layer's contents are larger than the set size.

• Auto. Scrollbars will appear even if the layer's contents are larger than its set size (again, assuming the browser supports these scrollbars).

Figure 14.14 shows the various overflow settings at work.

Figure 14.14. Visible, hidden, and scroll overflow attributes as seen in a browser.

Clip

If you want to show only a section of a layer's contents, and hide the rest from view, use the clip option. Working in pixels, clip out layer contents by specifying values that represent the amount of distance from the layer's boundaries (see Figure 14.15). Note that T (top) and L (left) values must be relative to the layer, not to the page.

Figure 14.15. A layer without, and one with, clip parameters set.

Setting Properties for Multiple Layers

When two or more layers are selected at the same time, a modified Layer Property inspector appears, offering a subset of the usual layer properties. The upper portion of this Property inspector displays text properties (see Figure 14.16).

Figure 14.16. The Layer Property inspector with multiple layers selected.

With multiple layers selected, various properties can be set for all layers simultaneously, including position, size, and visibility. This can be a handy way to quickly align layers or make them the same size (comparable to the Modify > Align commands).

Exercise 14.2 Editing Layer Properties

Building on Exercise 14.1, here you edit and adjust properties of the layers you've added and become familiar with using the various Dreamweaver tools for working with layers.

If you haven't done so already, copy the files from the chapter_14 folder on the CD to your hard drive. Define a site called Chapter 14, with this folder as the local root folder. All the files for this exercise are in the chapter_14/ministries folder.

1. Start by opening the student_ministries.html file to which you added layers and images in Exercise 14.1.

2. First, have a look at the page with the black background it is intended to have. To change the page background using CSS, open the CSS Styles panel and switch to Edit Styles mode by selecting its radio button. On the left side of the panel, find and double-click the word body to edit the CSS styles already applied to the <body> tag. This opens the CSS Style Definition for Body dialog box (see Figure 14.17).

   Figure 14.17. Changing the body background color using CSS.

   

   In the dialog box, go to the Background category. In the Background Color text field, change #FFFFFF to #000000. 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.

3. In the previous exercise, you 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 (and 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 later.

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

4. Repeat this process for the remaining layers. Select each image, remember or jot down its dimensions, then select the image's containing layer and assign the W and H values to those dimensions. (Remember to add the px.)

   Tip

   

   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.

5. Next, arrange the layers on the page by dragging them, and arrange their stacking order as necessary using the Layers panel. If you like, you can imitate the design shown in Figure 14.18, 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.

   Figure 14.18. A suggested final layout for the student_ministries.html page.

   

6. Save your page and preview in a browser. Note that some older browsers might have problems displaying this page.

Layer Preferences

Layer preferences determine what default attributes Dreamweaver will assign for layers as you create them, and what kind of code gets added to your document when you use layers. If you find that the default settings aren't the settings you use most often or if you have a specific use for layers, and you make the same type of layer over and over you might want to set layer preferences to match your needs.

To change Layer preferences, go to Edit > Preferences and choose the Layer category (see Figure 14.19). (For Mac OS X users, choose Dreamweaver > Preferences.) The following sections describe the defaults you can change in this dialog box.

Figure 14.19. Setting layer preferences.

Default Layer Properties

When you create a layer, by drawing or inserting it, Dreamweaver determines how the layer will be coded and what attributes it will be given based on the settings found here. Changing the Tag, Visibility, Background Color, and Background Image properties changes how all new layers are created. Changing Width and Height changes what dimensions will be assigned to layers created by inserting. Any of a layer's default properties can of course be changed after its creation.

Layer Nesting

This option determines whether a layer drawn within the boundaries of an existing layer will be nested, or stacked on top of, the existing layer. Whether you choose to enable nesting here or leave it disabled, you can temporarily switch the preference as you're creating a new layer by holding down Alt (Windows) or Opt (Mac) as you draw the layer.

Netscape Compatibility

Netscape 4.x has a well-known problem maintaining the layout of layers-based pages when the browser window is resized. The workaround solution to this problem is to add JavaScript to documents containing layers, instructing the browser to reload the page every time the user resizes the window. If the Netscape compatibility option is enabled in Layer preferences, the proper JavaScript code will be added to your document automatically as soon as you draw or insert your first layer.

The code added by this preference is the same code that can be added to a document manually through the Commands > Add/Remove Netscape Resize Fix command. If you enable Netscape compatibility, and then later decide that a particular document doesn't need that JavaScript fix, you can choose Commands > Add/Remove Netscape Resize Fix to remove it (see Figure 14.20). If you disable it, and want to add the code later, choose the same command. Dreamweaver is smart enough to determine whether the JavaScript is there to be removed, or needs to be added.

Figure 14.20. The Add/Remove Netscape Resize Fix command, a JavaScript workaround to the Netscape 4 problem with displaying layers.

Note

Why would you want to disable Netscape compatibility? If you know for certain that your page will never be viewed in Netscape 4 (for instance, if your document is destined for an intranet), you needn't clutter up your page or use up bandwidth with the extra JavaScript.

Converting Layers to Tables

There are various reasons why you might start out designing a page in layers and end up needing to rebuild it using tables for layout. Perhaps you create your masterpiece and then discover the hard way that not all browsers will display your layout the way you want. Perhaps you want to create an alternate page for users with older browsers, or those with non-cooperative newer browsers. Dreamweaver offers two tools for converting a layers-based layout to a table-based layout: the Layers to Table command and the 3.0 Browser Compatible command. Whichever of these commands you use, you cannot have any overlapping layers or the command will not work. (If you really love those overlapping graphics, like in Exercise 14.2, consider substituting one large graphic constructed from overlapping pictures, or even a sliced image, instead.)

If you want to change your existing document from layers to a table, choose the Modify > Convert > Layers to Table command. This command rewrites the code of your page to replace all layer code with one large table. (See Chapter 10 for a full discussion of this command.)

If you want your existing document to remain in layers, but want to create a backward-compatible alternative for your visitors, choose File > Convert > 3.0 Browser Compatible. This command creates a duplicate of your current document with the layer code replaced by a table, but leaves the current code untouched. After you've created both versions of your page, you can give visitors the choice of which to view, or you can ferry them to the proper page based on browser kind and version by adding a Check Browser behavior to your page. (See Chapter 16, "Getting Interactive with Behaviors," for a full discussion of the Check Browser behavior.)

Taking Dreamweaver Layers Further

The Dreamweaver interface for handling layer-based layouts is not limited to working with Dreamweaver-generated layers. Starting with Dreamweaver MX, any page element styled with CSS positioning will appear in Design view as a layer, with its own Layer Property inspector and taking advantage of all the techniques and commands for dragging-and-dropping, nudging, aligning, and eyeballing, that Dreamweaver's own layers have regardless of what HTML tag is being used to create them, or even whether the positioning attributes are coded as an inline style or a custom class in an internal or external style sheet. Working with this kind of layer code is still not quite as slick and easy as just dragging and dropping layers around the page but it's close!

Creating True CSS-P Pages with Dreamweaver MX

The general procedure for building a CSS-positioned page in Dreamweaver is this: Using the CSS Styles panel, create the class that contains the CSS-P formatting; using any of Dreamweaver's visual or coding tools, create page element(s) and use the class to style them; in Design view, using the various tools available there, refine your page design and create whatever special effects tickle your fancy.

Creating a Custom Class for CSS Positioning

A custom class for formatting CSS positioned elements is just the same as any custom CSS class (see Chapter 13, "Using Cascading Style Sheets," for more on this), except that it takes advantage of the various formatting options related to positioning block elements. To create a class that includes CSS positioning, follow these steps:

1. If you want the custom class to be stored as part of an internal style sheet, open the document you plan to format. If you want the class to be stored in an external style sheet, open and save an HTML document that you want the style sheet to link to.

2. In the CSS Styles panel, click the New CSS Style button. When the dialog box comes up, set it to Create New Custom Style, in the current document or in a new style sheet file or in an existing CSS document, if you have one you'd like to use. Figure 14.21 shows this happening.

   Figure 14.21. The New CSS Style dialog box set up to create a custom class for CSS-P.

   

3. Click OK to close this dialog box and open the CSS Style Definition dialog box. From here, start by choosing the Positioning category. Set the Type to absolute, and set any other formatting options you like (see Figure 14.22). While you're at it, you can also choose formatting from any of the other categories in the dialog box as well. But the only crucial attribute, to make Dreamweaver treat elements with this class as layers, is the position attribute.

   Figure 14.22. Setting positioning properties for a custom class (and for all layers that will use this class).

   

   Note

   

   While absolute positioning is the most common and well-supported CSS positioning method, it's not the only choice. Absolute positioning treats the layer as a free-standing entity, whose position is determined relative to the origin point of the window (or, in the case of nested layers, the origin point of the parent layer). Static positioning places the layer in the normal flow of page elements, as if there were no CSS positioning applied at all. Relative positioning begins by determining the layer's static position, but then allows left, top, right, and bottom values to be specified that will shift the element from that position. Dreamweaver-generated layers always use absolute positioning, but if you're creating your own custom CSS-P class, you can specify any of these options. As long as you specify one of them, Dreamweaver will treat the page element as a layer for purposes of editing and display.

4. When you're finished, click OK to close the dialog box. The positioning attributes you've just added to this class are the same attributes that appear in the Layer Property inspector for Dreamweaver-generated layers but after you've entered them in the CSS Style Definition dialog box, they become part of the class instead of part of an inline style governing only one layer.

Designing with CSS-Positioned Elements in Dreamweaver

After you've got the class defined, it's time to create the page elements that will refer to that class. If you're using an external style sheet, begin by linking each document that will use that class to the external style sheet. After you've done that, to create page elements that use that class, choose from one of the following methods.

Method #1: Using the Draw Layer Tool

Assuming that you want your class to format a layer created with <div> or <span>, you can use the Draw Layer tool, with just a little tweaking of its code. Do this:

1. Create a layer using the Draw Layer object or the Insert > Layer command.

2. With the layer selected, go to the CSS Styles panel, switch to Apply Styles mode, and click on your custom class to apply it to the layer.

3. If you look at your layer's code, you'll see something like this:

<div id="Layer1" style="position:absolute; left:94px; top:40px;  width:127px; height:85px; z-index:1" class="myClass"></div>

In Design view (and in the browser), the size and position of your layer aren't reflecting the instructions set in the class because the layer's inline style is overriding the class. To stop this from happening, you need to remove the style attribute and its values. You can do this by any of the following methods:

• In Code view or the Quick Tag Editor, select and delete the entire style attribute and value.

• In the Tag Inspector, select the <div> or <span> tag. Find the style attribute and remove it by deleting the value associated with it. (Figure 14.23 shows this happening.)

  Figure 14.23. Using the Tag Inspector to remove the style attribute from a Dreamweaver-generated layer.

  

• Choose Modify > Edit Tag. In the tag editor, go to the Style Sheet/Accessibility category and remove the information from the Style input field.

As soon as you do any of these, your layer will adopt the formatting indicated in the class.

Method #2: Creating and Wrapping Content

This method assumes you already have some content you want to put in your CSS-P layer, or don't mind creating the content first. Do this:

1. In Design view, enter whatever text, image, or other content that should eventually sit inside the CSS-P layer.

2. Select the content.

3. Enter the Quick Tag Editor (Ctrl/Cmd+T, or click the Quick Tag Editor button on the Property inspector). Toggle to Wrap Tag mode.

   Note

   

   See Chapter 32, "Technical Issues," for more on using the Quick Tag Editor and setting its preferences.

4. Start typing the tag that you want to wrap your content in. If you have code hints enabled in your Quick Tag Editor preferences, Dreamweaver will help you with your typing. Include the class attribute, set to the name of your custom style, and the id attribute, set to any unique name (see Figure 14.24). When you're finished, don't type the closing tag; Quick Tag Editor will do that for you.

   Figure 14.24. Using the Quick Tag Editor to wrap existing content in a CSS layer.

   

Method #3: Using the Tag Chooser

If you really hate typing code, here's another method that can be done entirely without it. Do this:

1. Click to place the insertion point anywhere within Design view. (It doesn't matter where your code is entered, because absolute positioning will govern the page appearance.)

2. From the Insert bar (Common tab), click the Tag Chooser button. This opens the Tag Chooser dialog box, from which you can select the tag you want to insert. To insert a <div>, choose Markup Languages > HTML Tags > Formatting and Layout > div.

3. Click Insert. The tag editor will open. Go to the Style Sheet/Accessibility category and enter a unique ID and the name of your class.

4. Click OK, and Close to exit all dialog boxes.

Method #4: Using Other Block Elements

When you're in charge of generating your own CSS code, you're not limited to using <div> and <span>. Any block level page element (<p>, <h1> <h6>, and so on) can be used as a "layer" when it's styled with CSS positioning. To use elements other than <div> and <span> as layers, do this:

1. Create whatever content you want to go in the layer, formatted so it sits inside a <p>, <h1>, or other block level HTML element.

2. Select the block element. (Use the tag selector for safest and quickest selecting.)

3. In the CSS Styles panel, choose Apply Styles mode and click to apply the custom class you created earlier; or, if the element is a text tag, in the Property inspector choose CSS mode and use the CSS style pop-up menu to apply the custom class.

Design View and the Property Inspector for CSS-Positioned Elements

After you've followed any of the above methods to apply the custom class with its positioning attributes, a wonderful thing happens Dreamweaver Design view displays the element as a layer, with CSS Styles positioning and formatting applied (see Figure 14.25)! Select the element, and the Layer Property inspector appears (even if the block element being styled is not <div> or <span>). And best of all, in the Property inspector, any changes made to properties that are part of the class will automatically update the class thus updating all other documents that use this class. That's the power of CSS2 at work.

Figure 14.25. A CSS-positioned page element in Design view displaying as a layer.

Exercise 14.3 Designing a Set of Web Pages Using CSS Positioning in an External Style Sheet

This exercise gives you a chance to take some of the new Dreamweaver layer-related tools for a spin. You'll create a set of custom classes in an external style sheet, attach them to elements within several documents within a site, and use the Dreamweaver layers interface to quickly format the entire site by formatting one page. Along the way, you'll also get a good look at how forms separate content to make a more flexible web site.

If you haven't done so already, copy the files from the chapter_14 folder on the CD to your hard drive. Define a site called Chapter 14, with this folder as the local root folder. The files for this exercise are all in the chapter_14/enviro_site folder.

1. Begin by opening any one of the six HTML documents that comprise the Enviro "mini-site." Examine the page in Design view and Code view to see that it's built from unformatted images and text. The page isn't very pretty yet (see Figure 14.26) because there is no layout this is just content without formatting. All the pages in this folder are built exactly the same way, with comparable content.

   Figure 14.26. One of the documents in the Enviro site (chapter_14/enviro_site) showing unstructured content ready for styling.

   

2. Your first task is to create all the CSS building blocks (such as the custom classes) that this content requires. Don't close the document you've been examining. Open the CSS Styles panel (Window > CSS Styles or expand the Design panel group).

   Click the New Style button to open the New CSS Style dialog box. Set your new style to be a custom class named.banner, part of a new style sheet document (see Figure 14.27). Click OK to close the dialog box. When the Save Style Sheet File As dialog box appears, name your new style sheet siteStyles.css, and save it in the chapter_14/enviro_site folder.

   Figure 14.27. Creating the first custom class for the Enviro site, along with the external style sheet that will contain it.

   

3. When you click OK to close the Save Style Sheet File As dialog box, the CSS Style Definition dialog box opens. For now, you only need to set one property. Go to the Positioning category and set the Position pop-up menu to absolute (see Figure 14.27). When you've done that, click OK to close this last dialog box.

4. Repeat the previous two steps for each class your files will need. In addition to the .banner class you just created, define the following classes:

   .title

   .bodycopy

   .divider

   .handsbutton

   .dropsbutton

   .scalebutton

   .stampbutton

   .peoplebutton

   .phonebutton

   For now, don't worry about assigning any properties except positioning to these classes. Figure 14.28 shows what your CSS Styles panel should look like when you're finished.

   Figure 14.28. All the custom classes needed for the Enviro site documents.

   

   Here's where the fun starts! By applying the custom classes with their absolute positioning to your various page elements, you'll be creating Dreamweaver layers.

5. Start with the banner (the banner graphic at the top of the page). Your strategy for this element is to embed it in a <div> tag and apply the class to that. Do it this way (the process is shown in Figure 14.29):

   Figure 14.29. Wrapping the banner image in a <div> tag governed by the .banner CSS class.

   

   • Select the banner.gif graphic.

   • Press Ctrl+T (Windows) or Cmd+T (Mac) to open the Quick Tag Editor. You want Wrap Tag mode to show in the editor. Keep pressing Ctrl/Cmd+T until it does.

   • When your Quick Tag Editor looks like the one in Figure 14.29, type div class="banner".

   • Close the Quick Tag Editor by pressing Enter.

     If you look in Code view now, you should see the <img> tag for the banner enclosed within a pair of <div> tags. In Design view, the image shows with a layer.

     Note

     

     For more on the Quick Tag Editor, see Chapter 33, "Writing Code in Dreamweaver." If you don't want to use the Quick Tag Editor, you also could cut the image out of the document (Edit > Cut), create a layer (Insert > Layer), and paste the image into the new layer (Edit > Paste). If you use this method, remember that Dreamweaver adds inline style information when it creates layers. You'll have to use the Tag Inspector or some other method to remove the layer's style attribute, then use the CSS Styles panel to apply the .banner class.

6. Next, you'll apply the .title class to the page's main heading, this time by applying it directly to the <h1> tag. Click the cursor somewhere inside the heading. In the Property inspector, click the CSS button to engage CSS mode. From the pop-up list of available styles, choose heading.

   Look at the interesting happenings! In Code view, the <h1> tag now has a class. In Design view, the heading looks like it's in a layer (complete with resize handles and the layer tab at the upper left). If you click on the borders or the tab of this layer, the Property inspector will show properties for a layer. If you click within the text of the heading, the Property inspector shows text controls. The tag selector shows the heading and class.

7. Repeat the procedure from the previous step to add the .bodycopy custom class to the paragraph containing the document's body copy. As you do this, the paragraph will turn into a layer and also will shift position (as absolute positioning kicks in). Use the Layer tab to move your body copy, heading, or banner layer out of the way as needed. Note that, as you do this, Layers Property inspector shows changing L and T values. But if you check your code, you'll see that no new values are being added to your code. That's because your changes are updating the custom classes in the siteStyles.css file, not the current HTML document.

8. Finally, each navigation image in the document must have the appropriate "button" class applied to it. Because the Image Property inspector doesn't have an option for assigning styles, use the CSS Styles panel for this. Switch the panel to Apply Styles mode, then select each image in turn, and click its matching class (for example, handsbutton applied to the hands picture). Figure 14.30 shows the page layout as it appears with everything turned into layers (but no organizing or formatting yet!).

   Figure 14.30. The acquisitions.html page with all page elements assigned custom classes and being treated as layers.

   

   Note

   

   CSS elements often have ID attributes included with them. As you work, note that Dreamweaver interprets an image's name as its Layer ID (even though the attribute is name, not id). Layers created from text or other elements that have no names will not have Layer IDs unless you use the Layers Property inspector to assign them.

9. Your next step is to add formatting information to your custom classes. You do this by using the Dreamweaver layers interface and the CSS Styles panel. Start by using all the various layer tools introduced earlier in this chapter to position your page elements where you like them. Drag layers to move or resize them; use the Property inspector to change their position or size numerically; use the arrow keys to nudge them or the Modify > Align commands to align them.

   You can also take this opportunity to add text formatting to the title and body-copy classes. For each of these, click the cursor inside the text element and, in the Text Property inspector, click the Style pop-up and choose Edit CSS Style (see Figure 14.31). When the CSS Style Definition dialog box opens, apply whatever formatting you choose to make your text look nice. (Just don't switch the Property inspector to HTML mode and format your text using the choices there, or you'll be adding local formatting and not updating the custom class.)

   Figure 14.31. Adding text formatting to a layer by updating a custom class.

   

   Note

   

   As always when working with external style sheets, the Undo command might not work as you expect it to. If you change an element's formatting and that change is stored as part of the class definition (in the external file), you can't Edit > Undo because that document isn't open.

   When you're done formatting, check your document in Code view. You'll see that no formatting code has been added! Other than the added class assignments, and the added <div> tag around the banner, the document code looks just the same as it did at the beginning of the exercise.

10. The true power of CSS is that classes stored in external style sheets can control many documents simultaneously. To get an idea how that works, you have six HTML files to play with in the chapter_14/enviro_site folder. As soon as you apply the custom classes to any of these documents, it will immediately adopt the formatting of the page you just made.

    Open one of the remaining HTML documents, and do this:

    • In the CSS Styles panel, click the Attach Style Sheet button and link to the sitestyles.css document. Your custom classes will now appear in the panel.

    • Repeat steps 5 8 to apply the classes to your page elements. As you work, the layout and formatting you created in the first file will magically take over your page. (The new formatting might hide some page elements under others, making them inaccessible. If this happens, Edit > Undo the last style assignment you did and apply the styles in a different order, so all elements remain accessible.)

      How industrious do you feel? To see how this technology works, it's important to get at least two pages formatted. If you want more practice, format all six documents!

11. From now on, no matter which of your formatted documents you're working on, any change in position, size, text formatting, or other layer properties will change the style sheet itself and so the layout of all documents. Try it and see how efficiently you can restructure your entire set of pages. How many different possible layouts can you create?

    In particular, try out effects like these:

    • Select the banner layer and set its width to 100%, and L and T to 0. Then set its background color to match the blue of the banner image. For all of your pages, the banner now bleeds off the top and sides of the page, no matter how big the browser window.

    • Though it can't be done from the Layer Property inspector, layers can also be measured based on their distance from the right or bottom edge of the browser window. Edit your various button classes by removing the L and T values and replacing them with R and B values (see Figure 14.32). R (right) measures the distance in pixels between the right edge of the layer and the right edge of the browser window; B (bottom) measures the distance between the layer's bottom and the browser window's bottom. You can set either or both of these, to hug either or both edges.

      Figure 14.32. Setting the Positioning attributes for a CSS custom class, creating a layer that positions itself relative to the lower-right corner of the browser window.

      

    • Try setting the text layer to a percent-based value less than 100%. Note that you can use percent-based settings even if the element doesn't start at L or T set to 0. A text layer with its left edge at 200px and its width set to 75% will stretch and squash while still leaving margins on either side of itself (one fixed and one slightly flexible margin).

Using variations of these settings, you can create flexible layouts in which different page elements hug different edges of the browser window. Just because you're not using tables doesn't mean you can't have liquid layouts! Figure 14.33 shows an alternate layout that uses several of these methods.

Figure 14.33. A flexible alternate layout for the chapter_14/enviro_site pages.

Note

If you want to investigate CSS positioning further, try these free online tutorials (highly recommended!):

MaKo's CSS Positioning Tutorial:

www.mako4css.com/Tutorial.htm

Denis Wilford's Flexible Page Tutorial:

http://deniswilford.com/graphic/tut1/tut1a.html

BrainJar's CSS Positioning Tutorial:

www.brainjar.com/css/positioning/default.asp

Interview: M. Kosloff

Business Name: Orion Hi-Tek

URL: www.orion-hitek.com

How did you get started in web design? What kind of work are you currently doing?

The employee who was supposed to do most the web design/development left the company, and we had already signed a contract for a sensitive site. With no time to waste .

My current work is building web sites mostly for businesses in CSS, CF, and ASP, and intranet development in ColdFusion.

What hardware and software do you use in your work?

Hardware: PC (Pentium II, 450, 196MB RAM, 40GB ATA100 hard drive, 16MB AGP graphics, 17-inch monitor. Laptop: Compaq Pentium III 800, 128MB RAM, 20GB, 15-inch TFT.

Software: HomeSite, TopStyle Pro, PhotoImpact, XaraX, Dreamweaver, Fireworks, ColdFusion Studio

How do you use CSS positioning in your design work? Why do you prefer it?

I use CSS-P exclusively. CSS-P is elegant and future-oriented, and it enables me to create fast sites. It's also backward-compatible, disabled-accessible, user-friendly, and easy to change and to maintain.

I like the logical approach and the clean separation of structural markup and presentation.

What are the most important things for a designer starting out learning CSS-P to know?

It helps to know about HTML tags and structure. But even more important is to get a fresh look at web sites; to get rid of the old, complicated way of thinking in "tables." Layout with CSS-P is different. Instead of trodding the worn-out ways of table layout, one should go back to the basics: Where do I want what to be, and how should it look?

What trends on the web and in the web designer's work do you see as important?

For the web, I see the following:

• Standards compliance in browsers

• More weight on usability and accessibility

• Different thinking (web is not print; give the control to the visitor)

• Diversity

For web developer, I see that database-driven, professional web sites are the future.

What advice would you give to someone just starting out in web design?

• Web is not print.

• Control is an issue, not a way to create web sites.

• Learn everything you can, and as fast as you can. The web is a very fast-paced environment. Even if you are on top of the game, the moment you stand still the web and all those emerging technologies will leave you in the dust.

• Design is a vehicle to transport a message. Creating web sites for clients is not a means to express your artistic capabilities. Your client's customer is the person who counts.

• Be a business person, or go looking for a partner who is.

Summary

CSS-P is the future of page layout. And the Dreamweaver interface for creating and working with "layers" provides an intuitive and visual environment for creating and working with this kind of page design. Whether you use Dreamweaver-generated layers right "out of the box," or create your own custom classes with positioning attributes, you can use Design view to arrange them and the Property inspector to set their attributes. The next two chapters cover another use for layers probably their most popular use so far in the web community: controlling them with JavaScript to create DHTML interactivity and animation.

CONTENTS