Designing Table-less Websites Using Layers

One of the biggest trends in web development is that of designing websites that don't use antiquated tables to control the structure of the site, but instead rely on layers and CSS positioning to control the layout and flow of web pages. In the next few sections, you'll learn how Dreamweaverin conjunction with the <div> tag and a little CSScan create standards-compliant web designs.

NOTE

The term given to the process used for creating CSS-based page designs in known as CSS-P.

Designing Layers Using a Style Sheet

In the previous sections of this chapter, you learned how easy it was to insert layers using either the Insert, Layout Objects, Layer command or the Draw Layer option available from the Layout category in the Insert bar. Although these are viable options for designing a site using layers, they aren't the best choice. The reason for this is simple: When you use either of these methods to insert layers on the page, Dreamweaver automatically assigns document-wide CSS positioning properties for each layer. As a result, the page becomes inflexible and nearly impossible to modify globally when numerous pages exist within the site.

A better alternative to inserting or drawing layers onto the page is to create an external style sheet (which we already have for our project) and define numerous ID selectors that define the various divisions of the page. For instance, we know our site will contain the following major divisions based on the design we've been working with up to this point:

• Header: We know we'll have a header that resides near the top of the page. The header will have a width of 100% and a height of 177 pixels. We also know that the header will have a background image that spans the entire width of the browser. Finally, the header will contain the header.gif image that defines the logo and company name.

• Navigation: Just under the header but to the left of the page, we'll have a simple navigation menu. In this scenario, we can add a layer that will serve as a container for the five navigation links. Although the height doesn't matter in this case, we'll want to set the width at 200 pixels.

• Content: The third major division in the page is a section that defines the content. This section will reside under the header but just to the right of the navigation area. Because our navigation area has a set width of 200 pixels and we want to keep the entire width of the page to an accessible 640 pixels, we'll set the content area's width to 440 pixels. Again, because a user will naturally scroll up and down the web page, the height for this section is irrelevant.

Now that we've outlined the major sections for our page, let's begin outlining the CSS rules. Because we know we'll have at least three major sections in the page (Header, Nav, and Content), we can surmise that we'll need at least three CSS rules represented by three unique IDs titled header, nav, and content respectively. To begin creating these selectors, follow these steps:

1.	Create a new HTML page by choosing the New option from the File menu. When the New Document dialog appears, select the HTML option from the Basic Page category and click Create. Immediately save the page as index.htm.
2.	Attach the existing styles.css style sheet by opening the CSS Style panel, selecting the Attach Style Sheet icon, browsing for the styles.css file, and clicking OK.
3.	Create a new CSS style by clicking the New CSS Style icon in the CSS Styles panel. The New CSS Style dialog appears.
4.	Choose the Advanced Selector Type option and enter the name #Header in the Selector text box. Remember that the pound symbol represents ID (thus, the ID selector name is Header). When you finish making your modifications, the dialog should resemble Figure 11.11. Figure 11.11. Create a new selector ID called Header.
5.	Click OK. You're now ready to start defining the properties that will make up the Header rule and ultimately define the Header layer at the top of the page.
6.	Switch over to the Positioning category. Set the property for Type to absolute, the width to 100%, the height to 177 pixels, the Visibility to Visible, and Top and Left Placement properties to 0. When you finish, the Positioning screen resembles Figure 11.12. Figure 11.12. Modify the Positioning attributes for the Header rule.
7.	Set the background image that will appear within the Header layer. You can do this by switching to the Background category. Browse to the header_bg.gif file from the Background Image field. Finally, choose the Repeat-x option from the Repeat menu to guarantee that the background image will tile only horizontally and not vertically.
8.	When you feel comfortable with the attributes you've set, click OK. The new ID appears in the CSS Styles panel.

That's it! You're now ready to define the style rules for the remaining layers. To define the Nav rule, follow these steps:

1.	Create a new CSS style by clicking the New CSS Style icon in the CSS Styles panel. The New CSS Style dialog appears.
2.	Choose the Advanced Selector Type and enter the name #Nav in the Selector text box.
3.	Click OK. You're now ready to start defining the properties that will make up the Nav rule and ultimately define the navigation layer.
4.	Switch over to the Positioning category. Set the property for Type to absolute, the Width to 190 pixels, the Visibility to visible, the Top Placement property to 178, and the Left Placement property to 0.
5.	So that our navigation items don't run up against the left edge of the browser window, let's add some padding to this style rule. To do this, switch to the Box category. Disable the Same For All check box in the Padding category and enter a value of 10 pixels for the Left property. When you finish, the Box screen resembles Figure 11.13. Figure 11.13. Modify the Box attributes for the Nav rule.
6.	When you feel comfortable with the attributes you've set, click OK. The new ID appears in the CSS Styles panel.

To finish up the design, let's define the Content style rule:

1.	Create a new CSS style by clicking the New CSS Style icon in the CSS Styles panel. The New CSS Style dialog appears.
2.	Choose the Advanced Selector Type and enter the name #Content in the Selector text box.
3.	Click OK. You're now ready to start defining the properties that will make up the Content rule and ultimately define the content layer.
4.	Switch over to the Positioning category. Set the property for Type to absolute, the Width to 440 pixels, the Height to 250 pixels, the Top Placement property to 178, and the Left Placement property to 201.
5.	When you feel comfortable with the attributes you've set, click OK. The new ID appears within the CSS Styles panel.

Now that we've outlined the properties for the three major sections of the site, we're ready to insert the <div> tags that will act as containers for the content. The properties we've outlined will serve as the formatting and positioning attributes for the <div> tags we'll add next.

Inserting DIV Tags

Now that the style rules have been defined for each section of the page, we can start adding the <div> tags that will serve as containers for our content. Because we've already outlined the style rules using ID selectors in an external style sheet, we need only to insert three <div> tags into the page with IDs that match the ID selector names we created. To demonstrate this, let's insert a <div> for the Header portion of our page. You can do this by clicking the Insert Div Tag icon located second from the left in the Layout category in the Insert bar. Clicking this icon launches the Insert Div Tag dialog (see Figure 11.14).

Figure 11.14. Use the Insert Div Tag dialog to create a new <div> tag in the page.

Although the dialog allows you to enter a class name and pick an insertion point for the tag, all we care about is entering the ID name that represents the ID selector we've defined within our style sheet. Because we're creating the header of the page, select the Header option from the ID drop-down menu and click OK. The layer is created, complete with the dimensions, placement properties, and the background image we defined.

By default, Dreamweaver adds the text Content for id "Header" Goes Here within the layer. Select this text and delete it so that we can add the header.gif image into the layer. When you've deleted the text, drag the header.gif image, located in the Images folder, into the layer. The result of the design resembles Figure 11.15.

Figure 11.15. Add the header.gif image into the Header layer.

Now you're ready to create the second <div> tag that will define the navigation layer. To do this, click the Insert Div Tag icon located in the Layout category of the Insert bar. When the Insert Div Tag dialog appears, select the Nav option from the ID drop-down menu and click OK. As you'll see, the Nav layer is added just below the Header layer.

Again, remove the Content for id "Nav" Goes Here text so that we can begin to define the navigational elements that will appear within this layer. When the placeholder text is deleted, let's add the first navigation element, Home, to the layer. Do this by following these steps:

1.	Add the icon_arrow.gif image to the layer.
2.	Select the image, add a V Space value of 2, and choose the Absolute Middle option from the Align menu in the Properties Inspector. Setting these two properties gives you some spacing between arrow images vertically in the layer. Also, by setting the alignment to Absolute Middle, we'll be able to add our Home link just to the right of the image so that it lines up to the absolute center of the arrow image.
3.	Select the arrow image, copy it, place your cursor next to the image, press Shift+Enter to create line break, and paste. Repeat this process a few more times until you have a total of five arrows spanning vertically down the layer.
4.	Insert the text Home just to the right of the first arrow image.
5.	Highlight the text and type the link index.htm in the Link text box in the Properties Inspector. Also choose the Link option from the Style menu in the Properties Inspector to associate the correct style rule for the navigation link.

Now you can add the rest of the navigation elements: HelpDesk (helpdesk.htm), Company Directory (companydirectory.htm), Employee Store (employeestore.htm), and Admin (admin.htm). When you finish adding the navigation items, the result appears similar to Figure 11.16.

Figure 11.16. Add the rest of the navigational elements to the Nav layer.

Finally, let's add the content layer. Again, you can accomplish this task by clicking the Insert Div Tag icon in the Insert bar. When the Insert Div Tag dialog appears, choose the After Tag option from the Insert menu, choose the <div > option from the menu that becomes enabled, and choose the Content option from the ID drop-down menu. Click OK. The new layer is added below the Header layer but just to the right of the Nav layer. With the layer firmly in place, you can add the content that will fill that area. For instance, you might want to add the subheader_about.gif image as the subheader within the layer. You might also decide to add the text contained in the welcome.txt file in the Assets folder. Next, you might want to add the intranetsymbolism.gif image so that it appears as though the text wraps around it. When you've finished, the result should closely resemble Figure 11.17.

Figure 11.17. Add text and images to the new Content layer.

With your design complete, test the page in a browser by choosing the Preview in Browser option from the Document bar or by pressing F12. As you'll see, the design renders without problems (refer back to Figure 11.1).

Of course, our design efforts don't have to stop here. We might want to create another layer with associated properties for our company events. Furthermore, we might want to add yet another layer with associated properties for the footer of the page. As you can begin to see, the design and implementation is simple.

Even better than the implementation is what has been added to the HTML. Switch to Code view. And notice that the code is much cleaner and is minimized to roughly 15 lines of code as opposed to the 100 or so lines which was the case when we were working with tables.

Converting Layers to Tables for Backward Compatibility

In the previous sections, we used layers to create a standards-compliant, table-less web page. Although the design was simple to create, it doesn't do us or our users much good if they're using older browser versions such as Netscape 4.x. As you saw back in Figure 11.2, the page doesn't look very good in Netscape 4.

To solve this problem, we have to re-create the site using a backward-compatible model in tables. Before you become frustrated at the thought of having to rebuild the page using tables, know that there's any easy and automated way of accomplishing this task in the Convert Layers to Tables feature. Using this feature in conjunction with the Check Browser behavior, we can guarantee that our users will see the appropriately formatted page regardless of what browser version they are using. To run through this process, choose Modify, Convert, Layers to Table. The Convert Layers to Table dialog appears, similar to Figure 11.18.

Figure 11.18. The Convert Layers to Table dialog facilitates the process of converting our layers-based design to one that uses tables.

The following functionality is exposed in the Convert Layers to Table dialog:

• Table layout: Most accurate: Clicking this radio button creates a cell for every layer, plus an additional cell for any spacing required to fill out the area.

• Table layout: Smallest: Collapse empty cells: Clicking this radio button specifies that the layers' edges should be aligned if they are positioned within the specified number of pixels. We'll choose this option and leave the pixel width at the default of 4.

• Use transparent GIFs: Checking this box ensures that the last row of the table has a 1 pixel by 1 pixel transparent GIF added to its cell. This is especially useful for guaranteeing consistent widths across all browser versions. Leave this option unchecked.

• Center on page: Click this box to center the table on the page. Leave this option unchecked.

The rest of the features in this dialog exist for the reverse process (that is, converting tables to layers). In this scenario, these check boxes merely provide viewable options such as the Layers panel, the Grid, snapping, and so on. When you finish making the necessary adjustments, click OK. Immediately, our layers-based page is converted to a table with a few minor discrepancies. For instance, it seems as though we lost our background image for the header. To add it back in, simply place your cursor in the cell and use the point-to-file icon in the Bg field to browse to the header_bg.gif image.

Finally, save your work as index_netscape.htm. Now try testing the page in an older version of Netscape.

NOTE

If you don't have an older version of Netscape, you can download all archived versions at the following URL: http://wp.netscape.com/download/archive.

As you can see from Figure 11.19, the page looks as it did in newer browser versions using layers.

Figure 11.19. The page using tables looks as good in Netscape 4.7 as it did in newer browser versions using layers.

The last thing you'll want to do is add the Check Browser behavior to the index.htm page. This behavior allows us to create functionality such that when the user visits the index.htm page using a Netscape 4.x browser, the user is automatically redirected to index_netscape.htm. However, if users visit the index.htm page using a newer browser model, the users stay right where they are, on the layers-based index.htm page. To add this behavior, follow these steps:

1.	Open index.htm.
2.	Open the Behaviors panel by choosing the Behaviors option from the Window menu.
3.	Choose the <body> tag from the Tag Selector and choose the Check Browser option from the Add Behavior list in the Behaviors panel. The Check Browser dialog appears.
4.	In the dialog, enter the value 4.7 in the Netscape Navigator Version text box. Also select the Stay on This Page option from the Otherwise menu. Because Internet Explorer 4 can display the layers page just fine, select the Stay on This Page option from both of the Internet Explorer menus. Also select the Stay on This Page option from the Other Browser menu. Finally, type the index_netscape.htm path in the URL text box. When you finish, the Check Browser dialog resembles Figure 11.20. Figure 11.20. Configure the Check Browser behavior so that users visiting your site using Netscape 4.7 browsers are automatically redirected to the correct page.
5.	Click OK.

With the layers-based page still open, try to preview your page in Netscape 4.7. Notice that you are automatically redirected to the index_netscape.htm page.