Managing websites with multiple layouts

Note: This tutorial was written for Dreamweaver CS3. Although Dreamweaver CS4 adds new CSS functionality (revised Property inspector, Code inspector, related files), the CSS panel in Dreamweaver CS4 has not changed, and you should still be able to follow this tutorial using Dreamweaver CS4 or Dreamweaver CS5.

If you have purchased or installed the Dreamweaver CS3 trial, then you can't have helped but be impressed by the new standards-compliant CSS starter pages. To have the ability to create CSS layouts in what amounts to no more than a few clicks is a great time-saving feature: no more bug hunting, no more hours of hair pulling. The CSS layouts are simple and easy to use and provide you with a great base from which you can create your own design style.

As easy as the CSS layouts are to work with, you may have missed one of the great features of these starter pages: the ability quickly and easily to mix and match the different layouts available into a single CSS file. This tutorial will teach you exactly how you can utilize the new CSS features to implement this type of design.

Multiple layouts in a single CSS file are achieved by the clever use of descendant selectors to isolate one CSS rule from another. The parent element of these descendant selectors is set on the body tag in the form of a class; it is this class that controls when a CSS rule is applied and when it isn't. Take a look at one particular rule that appears in the layouts you will utilize in this tutorial.

Listing 1. The #mainContent descendant selector

Listing 1 above, is, as I'm sure you know, a descendant selector. A descendant selector consists of two or more selectors (in this case you have a class and an ID selector), and the values within the CSS rule will only be applied when #mainContent is a child of the .oneColLiqCtrHdr class.

Note: Each of the classes used in the descendant selectors is an abbreviation of the layout type of the page.

The element to which the #mainContent rule refers is the main content container within your design; the class in the descendant selector would be applied to the body element. This means that only when the body element (All such descendant selectors in the CSS layouts have the class set against the body) has a class of .oneColLiqCtrHdr set against it will the values for the #mainContent div be applied.

Listing 2. A different version of the #mainContent descendant selector

The descendant selector in Listing 2 works in exactly the same way as explained earlier. However, the name of the class has changed, and the properties and values for the #mainContent rule have also changed. In this instance the #mainContent values are allowing for a right-hand column to sit next to the mainContent area. The space to the right of the mainContent area where the column will sit is provided by the right margin value of 26%.

By using this technique you can easily change values on any given element to accommodate added or removed elements that may appear around it from page to page. For a deeper explanation of descendant selectors, please read this article I wrote: Defining and using Descendant Selectors. In short, the descendant selector enables you to manipulate your page layout easily by simply changing the class against the body. Sound complicated? Well, it isn't, really; but you will be delighted to hear that Dreamweaver CS3 controls all this for you automatically without you ever having to look at a descendant selector, never mind edit one!

You'll begin by creating your first page for your design; this page will be the "1 column liquid, centered, header and footer" page as shown in Figure 1. Make sure you leave the option selected to add the CSS to the head of your document. You will create a CSS file and move your CSS rules to that file a little later.

There's no need to save your page as yet; you can go right on and create your second layout. Select the options as shown in Figure 2.

Finally, you can now create your third type of page layout (see Figure 3).

You should now have three unsaved pages, one of each of the following:

• One-column liquid centered header and footer
• Two-column liquid, right sidebar, header and footer
• Three-column liquid, header and footer

Before you go any further, you should create a local site definition. Within the root of that local site definition, create a folder called CssFiles. If you're unsure how to create a site definition, please read the following TechNote 14028: How to define a site in Dreamweaver.

With your site definition and your CssFiles folder created, you can now save your pages to the root of your newly created site definition. For the sake of ease, save your one-column page as 1.html, your two-column page as 2.html and your three-column page as 3.html.

With your pages saved, it is now time to build the CSS file.

Watch the movie: Building the CSS file

Alternatively you can complete the following steps. First, export the styles from 1.html:

1. Switch to your 1.html file in code view.
2. Highlight all CSS rules in the head of your document between your style tags. Take care not to include the comments.
3. Right-click in the embedded style sheet.
4. Select CSS Styles from the context menu.
5. From the pop-up menu, select Move CSS Rules… The Move To External Style Sheet dialog box opens.
6. Select the "A new style sheet" option.
7. Click OK.
8. Navigate to your CssFiles folder.
9. Type MyStyleSheet into the File name: box.
10. Click Save and the dialog box closes.
11. Highlight the style tags in your 1.html page and delete them. Notice your new style sheet is automatically linked.
12. Save your work.

Next, export the styles from 2.html:

1. Switch to 2.html.
2. Highlight all the rules in your embedded style sheet, taking care not to include the comments and style tags.
3. Right-click in the embedded style sheet.
4. Select CSS Styles from the context menu.
5. From the pop-up menu, select Move CSS Rules… The Move To External Style Sheet dialog box opens.
6. Click Browse.
7. Navigate to your CSS file, select it and click OK. The dialog box closes and returns to your Move To External Style Sheet dialog box.
8. Click OK. The Rule with Same Name Exists dialog box opens.
9. Click No to each rule that is shown to prevent exporting duplicate rules. The dialog closes.
10. In 2.html, highlight and delete the style tags and any unexported rules.
11. Save your work.

Finally, export the styles from 3.html. Follow the same steps you did for 2.html.

You have now exported the CSS styles from each of your pages into a single CSS file. Each of your pages will only use the descendant selectors that match their structure, thus enabling you to work easily with multiple page types in a single file.

Whenever you need to create a new page, you can now select the page structure you need from the CSS layouts and link directly to your existing CSS file by opting for Link to External File in the Layout CSS: pop-up menu (see Figure 4) and then clicking the link in the Attach CSS File: box and navigating to your CSS file.

Now that you have used Dreamweaver’s new CSS functions and particularly the “Rule with Same Name Exists “ function we can explore a little further. While your style sheet will work fine as it is it does contain some redundancy, by redundancy I mean duplicated rules that aren’t really necessary to render the page correctly.

As an example, the header div will always be the same in each of our pages no matter whether those pages are of a one, two or three column structure. With this in mind it is clear that we don’t need to have three different rules for the header div, or indeed for the rule you have set against the header h1 element.

To tidy up your style sheet you can remove the class from the front of one of your #header rules and do the same for one of your #header h1 rules, all remaining rules of this type can be safely deleted.

Listing 3. An example of an existing header rule

In listing 3 above you can see that your rule is a descendant selector, this isn’t necessary as the header div will be the same on all pages, you can remove the class from the selector and just refer to this rule as #header.

Listing 4. A modified header rule

In listing 4 you can see the modified rule, once you have modified one instance of your #header and #header h1 rules all remaining rules that reference these elements can be safely deleted. This also applies to the #footer and #footer p rules; you only to need to have one generic rule for each and the rest can be removed.

The area of concern is the #mainContent div, and the #sidebar1 and #sidebar2 rules. These elements will vary in their dimensions depending on the amount of columns in any given page; you will need to ensure that you keep these rules intact to maintain your layouts structure. It is of course here that the descendant selector becomes important, the descendant selector ensures that the correct values are supplied to the browser in order to render your page correctly.

If you’re unsure of which rules you can safely delete it is a good practice to open the page you’re working on in a browser window and refresh the page each time you make an edit in the style sheet.

Conclusion

The completed files for this tutorial are available within the Zip archive referenced at the start. I hope you find this tutorial helpful and that it makes it easier for you to manage multiple layouts within a single website.

Where to go from here

For more resources on the page layouts in Dreamweaver CS3, see the following two articles. Also check out the CSS page on the Dreamweaver Developer Center for more tutorials and articles covering CSS in Dreamweaver CS3.

• Understanding the new Dreamweaver CS3 CSS Layouts
• CSS page layout basics