Working Smart with Layers

[ LiB ]

Those are the basics of Dreamweaver layers. What's beyond the basics? Exploring the relationship between layers and CSS-P, and really taking advantage of what Cascading Style Sheets can do for your page layout.

Layers As Styled Objects

Although the Layer object is definitely the most obvious way to go about making layers in Dreamweaver, the story doesn't end there! Any page element whose style includes an absolute or relative positioning property gets treated as a layer in Design view. This is great news because you might not like the way the Layer object codes things, but you still want to take advantage of the niceties of the layer interface in Design view.

Creating Layers Through CSS

To create a CSS-positioned element that will function as a layer without using the Layer object, you need to define a style that includes absolute or relative positioning information. If the style is a custom class or ID, you also need to apply it to a page element. Do it this way:

Define a new style, using the CSS Styles panel or other method.
When the New Style dialog box opens, create a custom class by choosing Class and entering a name in the Selector field. Or, create an ID selector by choosing Advanced and entering a pound sign followed by a name in the Selector field (see Figure 12.15). You can choose to create the style internally or externally. Click OK when you're ready to proceed.

Figure 12.15. Defining a style based on an ID selector.

Class or ID? If you're sure that the element will only ever appear one time on a page, define it as an ID. Classes are more for items that might be reused within a document.
When the CSS Style Definition dialog box opens, go to the Positioning category. From the Type drop-down menu, choose Absolute or Relative. Then enter values in the Left, Top, Right, or Bottom fields (see Figure 12.16). Be careful not to assign self-contradictory values! Don't assign a Left value and a Right value, or a Top value and a Bottom value.

Figure 12.16. Creating a CSS style that includes absolute positioning.
Before leaving the CSS Style Definition dialog box, you can assign whatever other style characteristics you like, or if you're interested only in positioning, consider the style defined with only these elements in place. When you're done, click OK to close the dialog box.

Applying the Positioning Style to an Existing Page Element

You can now apply this class or ID. Select a page element that you want to position ( h1, img , or another). If your style is a class, use any of the methods outlined in the preceding chapter to apply it. If your style is an ID, you can apply it in the Attributes tab of the Tag Selector (ID is in the CSS/Accessibility category of attributes) by typing in its name (without the pound sign.

You can also right-click the tag in the Tag Selector and choose from the Set Class or Set ID submenu. But this will not assign the style to the tag itself; rather, it will insert a span tag with the appropriate class or ID.

As soon as you do this, the positioning moves your element, and your element appears in Design view surrounded by a layer box (see Figure 12.17). As long as this layer box is selected, the Property Inspector shows your element as a layer. If you click inside the layer box, the original element's Property Inspector appears.

Figure 12.17. Assigning a style containing positioning information to an image.

If you defined your style as a class, you should also assign an ID to your new "layer" page element. You can do this with the ID field in the Layer Property Inspector.

Creating a div Element to Hold the Style

Or, you may want to apply your new style to a div tag, which can contain multiple elements. Dreamweaver provides the Div object for just such occasions. Just do this (as demonstrated in Figure 12.18):

Figure 12.18. Inserting a div object with positioning determined by a custom class.

If you already have page content that you want to wrap the div tag around, select it. Otherwise, put the insertion point where you want the div tag and its contents inserted.
Choose the Div object from the Layout Insert bar, or choose Insert > Layout Objects > Div from the main menu. The Insert Div Tag dialog box appears.
If you defined your style as a class, choose it from the Class drop-down menu in the dialog box. Enter a unique one-word ID in the ID field.
If you defined your style as an ID, choose it from the ID drop-down menu in the dialog box. (Note that only unused IDs appear in this menu. Unlike classes, an ID can be used only once in a document.)
The Insert option enables you to specify exactly where the div should appear. If you have content selected, it will default to wrap around this content. If nothing is selected, it defaults to the position of the insertion point. But you can also choose to insert the tag immediately before or after certain other tags, such as the body .

When you've chosen your settings, click OK to close the dialog box and insert the div tag. You now have a layer created from a div tagbut unlike a Dreamweaver-created layer, this one derives its positioning, dimensions, and other layer properties from your custom class or ID.

Working with CSS-Styled Layers

Working with layers created this way is basically the same as working with Layer object layers, with one important distinction. Every time you change the properties of your new layer by using the Property or Tag Inspectors, by using the Layers panel, or by adjusting the layer in the Document window, the style is updated. This happens even if the style is housed in an external style sheet.

What are the advantages to creating your layers this way rather than using Dreamweaver's Layer object to create them? First, it takes advantage of CSS's separation of form and content. Because the style information is in its own class or ID, your page code isn't cluttered with positioning information in the content area. If the style is defined in an external style sheet, it can be applied to multiple pages across your site for site-wide formatting that includes positioning. The positioning information can also be unapplied by simply removing the style assignment, so pages can be quickly updated.

In addition, the CSS Styles panel enables you to create positioning effects that are not possible with Layer object layers, such as assigning a position based on right or bottom instead of left and top. This means that you can create page elements that hug the right or bottom edge of the browser window instead of the left top. Here's a warning, however: The Property Inspector displays only left and top positions , so if you define your layer with CSS using right/bottom positioning, you won't be able to see or change its properties from there. If you move the layer in Design view, Dreamweaver will add left/top positioning rather than adjusting the original right/bottom coordinates. This creates a mathematical anomaly that will cause problems in the browser.

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

This exercise lets you see how powerful CSS-P can be. You'll create a set of IDs 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 website.

If you haven't done so already, download the files from the chapter_12 folder on the book's website to your hard drive. Define a site called Chapter 12, with this folder as the local root folder. The files for this exercise are all in the chapter_12/enviro_site folder. To make working with the exercise's external style sheet easier, choose Edit > Preferences, go to the CSS Styles category, and deselect the Open CSS files when modified option.

Begin by opening any one of the six HTML documents that comprise the Enviro "minisite." 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 12.19) because there is no layoutthis is just content without formatting. A look at the CSS Styles panel will show you that an external style sheet is attached, but it contains only a body tag redefinition. All the pages in this folder are built exactly the same way, with comparable content.

Figure 12.19. One of the documents in the Enviro site (chapter_12/enviro_site) showing unstructured content ready for styling.
Your first task is to create all the CSS building blocks (such as the IDs) 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. Choose the Advanced option, and enter #banner in the Selector field. Save the style in the attached siteStyles.css document (see Figure 12.20). Click OK to close the dialog box.

Figure 12.20. Creating the first ID for the Enviro site.
The CSS Style Definition dialog box opens. For now, you need to set only one property. Go to the Positioning category and set the Position drop-down menu to Absolute (see Figure 12.20). Set the left and top values to 50 pixels. When you've done that, click OK to close this last dialog box.
In addition to the #banner ID you just created, you need an ID for each positionable page element. In the CSS Styles panel, right-click the #banner ID and choose Duplicate. Name the duplicate #maintitle and click OK to close the dialog box.

Repeat this duplication procedure to create the following additional styles:
```
 #bodycopy #handsbutton #dropsbutton #scalebutton #stampbutton #peoplebutton #phonebutton 
```
For more on working with external style sheets, see the section "External Style Sheets" in Chapter 11, "Using Cascading Style Sheets."

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

Figure 12.21. All the ID styles needed for the Enviro site documents.
Here's where the fun starts! By applying the IDs with their absolute positioning to your various page elements, you'll be creating Dreamweaver layers. Start with the banner (the banner graphic at the top of the page). Your strategy for this element is to apply the banner ID to the image itself. Select the image. Open the Tag Inspector and bring the Attributes tab to the front. If you're viewing your attributes by category, expand the CSS/Accessibility category and find ID. Otherwise, scroll through the list to of attributes and find ID. Type banner into the input field next to this attribute (no pound sign!). Figure 12.22 shows this happening.

Figure 12.22. Applying the banner ID to the banner image.
Next, you'll apply the #maintitle ID to the page's main heading by applying it directly to the h1 tag. Repeat the process in Step 5, using the Tag Inspector to assign an ID of maintitle to the h1 tag.

Look at the interesting happenings! In Code view, the h1 tag now has an ID. 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 the borders or the tab of this layer, the Property Inspector shows 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 ID.
Now you need to assign the #bodycopy ID to the document's main text. Although you could apply the ID directly to the p tag, what if you eventually want more than one paragraph of text in your pages? You can't have more than one bodycopy ID in the document, so it's best to wrap the paragraph in a div tag.

Start by selecting the paragraph. It's important to select the entire paragraph, including its surrounding tags. To make sure you're doing this properly, place the insertion point somewhere inside the paragraph and then find and click the p tag in the Tag Selector. This selects the text and opening and closing tags.

Now select the graphic and, from the Layout Insert bar, choose the Div object. In the dialog box that appears, set the following:
- Leave the Class input field empty.
- From the ID drop-down menu, choose bodycopy .
- Leave the Insert drop-down menu at Wrap Around Selection.
Click OK to close the dialog box and insert your new div tag. Figure 12.23 shows this happening.

Figure 12.23. Using the Div object to wrap a div tag around the body text and assign the bodycopy ID.
Finally, each navigation image in the document must have the appropriate "button" class applied to it. Again, although you could apply the classes directly to the images, this isn't a good idea because each image is actually an img tag wrapped in an a tag. It's best to create a div for each one. For each image, select the image and use the Tag Selector to select the a tag surrounding it; then insert a Div object. It should be fairly clear which style goes with which buttonthe dropbutton style goes with the button called dropbutton, which has a picture of water drops on it, and so forth.

Figure 12.24 shows the page layout as it appears with everything turned into layers (but no organizing or formatting yet).

Figure 12.24. The acquisitions.html page, with all page elements assigned custom classes and being treated as layers.
Your next step is to add formatting information to your IDs. 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 want them. Drag layers to move or resize them, use the Property Inspector to change their position or size numerically , and 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 bodycopy IDs, if you want. For each of these, select the ID in the CSS Styles panel and click the Edit Style button at the bottom of the panel to change the style.

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 ID 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.
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_12/enviro_site folder. As soon as you apply the custom classes to any of these documents, they immediately adopt the formatting of the page you just made.

Open one of the remaining HTML documents and do this:

Repeat steps 58 to apply the IDs to your page elements. As you work, the layout and formatting that you created in the first file magically take over your page. (The new formatting might hide some page elements under others, making them inaccessible. If this happens, choose Edit > Undo for the last style assignment you did and apply the styles in a different order so that 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 more than two. But leave at least one page unformatted because you'll need it for the next exercise.
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 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:

Although 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 12.25). R (right) measures the distance 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 12.25. Setting the Positioning attributes for a CSS style, 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). You can also remove the text layer's width property entirely, which allows text to flow all the way to the right edge of the page.
This last option won't work if you have the banner ID applied directly to the img tag. But if you remove the banner ID from the img tag and instead wrap the image in a div tag and apply the ID to that, you can set the banner layer's width to 100% , and L and T to . Then set its background color to match the blue of the banner image. For all your pages, the banner now bleeds off the top and sides of the page, no matter how big the browser window. You can also center the title graphic inside the layer by opening the .banner style, choosing the Block category, and setting the Text Align drop-down menu to center .

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 12.26 shows an alternate layout that uses several of these methods.

Figure 12.26. A flexible alternate layout for the chapter_12/enviro_site pages.

Browser Support for Your Layers

Unfortunately, CSS-P is still somewhat on the bleeding edge as far as browsers are concerned . No browser earlier than version 4 can interpret CSS-P. Any of the newer browsers that promise standards compliance should render your pages correctly. But there's still a lot of room for interpretation in dealing with the CSS standards, so you should always tread lightly when using layers in your pages.

Gracefully Degrading

In web development, a page that functions acceptably in older or non-standard browsers, even though its fancier features may not be supported, is said to gracefully degrade. Maybe your layer-based formatting won't look its best, but the page is still readable and its links and other features are functional. How do you make sure your layer-based page gracefully degrades? Make sure the content is presented in a logical, readable order even without any positioning cues. This is also how to make a layer-based page accessible.

How can you check to see whether your page will display acceptably without its layer-based formatting? Probably the easiest solution is to disable style sheets in your browser. If your layer formatting is built into an external style sheet, you can also use Dreamweaver's Design Time Style Sheets option to temporarily hide the style sheet. Both of these methods are covered in the section "Making Your Styles Accessible," in Chapter 11. Figure 12.27 shows a gracefully degrading layer-based page with and without its associated style sheet.

Figure 12.27. A layer-based page viewed with and without its CSS formatting.

Exercise 12.3. Making Sure a Layer-Based Site Gracefully Degrades

In this exercise, you'll work more on the Enviro site you created in the previous exercise. You'll check to see how your page linearizes without layer-based formatting, and you'll make any necessary adjustments.

Start by opening one of your formatted pages from the Enviro site. To see how it will look and behave without its style sheet, open the CSS Styles panel and, from the panel Options menu, choose Design Time Style Sheets. In the Hide at Design Time category, press the + button and choose siteStyles.css. Click OK to close the dialog box. Figure 12.28 shows this happening.

Figure 12.28. Using Design Time Style Sheets to hide the siteStyles.css external style sheet.
What does your page look like now? Probably something like the one shown in Figure 12.29. It's not badit's definitely readable. For accessibility, make sure the page elements are in a logical order: banner, title, body copy, buttons . If they're not in this order, switch to Code view and rearrange the tags so they are.

Figure 12.29. An Enviro site page with no CSS formatting.
The navigation buttons also display oddly, with one button per line. Why is this happening? Because you put each button in its own div tag, and the div tag is a block-level element. Block-level elements are like paragraphsthey must exist on their own, not inline with other elements. The simplest way around this is to replace each of these div tags with a span tag. Earlier in the chapter, you saw that either div or span can be used for CSS-P. But the span element is an inline element and won't force each image to be on its own line. Unfortunately, Dreamweaver doesn't offer a handy Span object. How can you fix this problem? A fairly simple solution is to use Find and Replace to selectively replace div tags with span tags. Do it this way (see Figure 12.30):

Figure 12.30. Finding div tags containing images and replacing them with span tags.
- Choose Edit > Find and Replace.
- In the dialog box, choose Current Document as your scope and Specific Tag as the search type. Search for all div tags containing img tags.
- For the Action, choose Change Tag to span .
- Click the Replace All button.
After Dreamweaver has finished its search, select one of your navigation buttons. It's now contained in a span tag. The unformatted layout of your page looks much more compact now.
Finally, when you're done testing, go to the CSS Styles panel and, from the Options menu, choose Design Time Style Sheets. In the Hide at Design Time area, select the siteStyles.css document and press the - button so that your style sheet is no longer hidden. Click OK to close the dialog box. Your styles are restored, and your page is back to its formatted self!

The Netscape 4 Problem

Netscape 3 and earlier don't support layers. Netscape 6 and later are more standards-compliant and render them properly. But Netscape 4 remains a constant challenge for web designers in its quirky treatment of CSS standards. Netscape had a proprietary tag of its own, layer , for implementing layer effects, and it didn't support the official CSS specification very well. If Netscape 4 users are part of your target audience, what can you do?

The Netscape 4 Resize Problem and Fix

One infamous quirk in Netscape 4 happens when a visitor to your page resizes the browser window while viewing your CSS-P layout. The browser resizes and moves layers, pretty much destroying what you've built. The solution is to add a JavaScript to the page that triggers when the window is resized, forcing the page to refresh and eliminating the problem. Dreamweaver automatically adds this JavaScript for you if you tell it to.

To set up Dreamweaver so it automatically inserts this JavaScript, go to Layer Preferences (see Figure 12.3) and choose the Netscape 4 Compatibility option. A JavaScript function is added to your document's head, and a function call is added to the body tag with the onResize event handler.

To add or remove this JavaScript after you've created a document, open the document and choose Commands > Add/Remove Netscape Resize Fix.

Creating a Netscape-Only Version

If Netscape 4 compatibility is very important to you (if a high percentage of your audience uses this browser) and you don't think the gracefully degrading solution discussed earlier will do what you need, you might consider creating an alternate version of the page that uses the Netscape layer tag instead of div, span , or any other CSS-formatted element. Do it this way:

For more on the Check Browser behavior, see the section "Targeting Multiple Audiences: The Check Browser Behavior," in Chapter 13, "Interactivity with Behaviors."

Save a version of your page (with a handy title such as index_netscape.htm ).
In this page, remove all CSS-formatted tags and replace them with content wrapped in layer tags. The syntax for the layer tag looks like this:
```
 <layer left="300" top="300" width="200" height="200"  bgcolor="orange" z-index="3">    [content goes here] </layer> 
```
Because Dreamweaver has no object for this, you'll have to code it by hand. Code hints will help you with the syntax as you type.
In the original CSS-formatted page, add a Check Browser behavior to be triggered by onLoad . If the browser is Netscape 4, redirect the user to your alternate page. For other browsers, stay on the current page. Be sure not to send any users of other browsersincluding Netscape 6+ usersto this page because none of these browsers recognizes the layer tag.

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

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

[ LiB ]

Working Smart with Layers