Creating your first layout style

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.

 

Figure 1. Selecting the first layout page type

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.

Figure 2. Selecting your second layout page type

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

Figure 3. Selecting your third layout page type

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.

Figure 4. Linking to a new page to an existing style sheet

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.

.oneColLiqCtrHdr #header {
background: #DDDDDD; 
padding: 0 10px 0 20px;
}

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.

#header {
background: #DDDDDD; 
padding: 0 10px 0 20px; 
}

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

Page 3 of 3

Previous Page