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.