by Ruth Stryker
Cascading style sheets (CSS) is the modern, standard way to format not only the text in your website but also the layout of content throughout your site. Perhaps the most significant benefit of using CSS for layout, as opposed to using a table-based layout, is that CSS allows you to separate presentation (style, formatting) from content (information).
By separating content from presentation, you can control and make site-wide changes to your website more easily. Your visitors will benefit as well, because CSS results in simpler and cleaner HTML code, which improves browser load times and simplifies navigation for people with disabilities.
You can use Adobe Dreamweaver to create CSS-based layouts a couple of different ways. One approach is to use the free CSS layouts that come with Dreamweaver and then modify the provided CSS code to suit your purposes. The other approach, which we'll walk through in this tutorial, is to create CSS-based layouts from scratch. Let's get started.
Crush Creek Winery (a fictitious business) has hired us to create a simple CSS-based site. At the client meeting, we sketched out the plan shown in Figure 1.
Figure 1. The initial website sketch for Crush Creek Winery.
The client provided us with a photo as well as the text for each page. To follow along, download the sample file (ZIP, 73K) files, unzip them, and define a site in Dreamweaver that specifies the unzipped folder as the root folder for your new site. In Dreamweaver:
Figure 2. Defining a site.
To create the first page of the Crush Creek Winery site from scratch (the home page):
To create the .css file that holds the page layout specifications for all of the pages in your site:
Now, you need to link the index.htm file to the .css file:
Figure 3. Select your style sheet (css) file.
Now that we have linked index.htm to ccwinery.css, any style rules we create in ccwinery.css will be available to index.htm.
To create the page layout design we sketched out, we need five div tags (div is short for division): one for the header section (which will include the company name and banner photo), one for the left column, one for the right column, one for the footer section, and one for the wrapper (to set the overall width and center the page). Not only do we need to carefully insert the five div tags on the index.htm page, but we also need to set up a style for each one in the ccwinery.css file. Then we'll edit the styles to add the settings (such as the background color, width, padding, and so forth) we want for each section.
Perhaps the easiest way to simultaneously create a div tag in the index.htm file and a style for it in the ccwinery.css file is to use a command in the Dreamweaver Insert menu:
Figure 4. Inserting a div tag.
Figure 5. Set up a style for the header.
Figure 6. Inserting the header div tag onto the index.htm page.
To create the left column section, which comes after the header, we use the same steps, but we need to make sure that the leftcol div tag is inserted after the header div tag:
<div id="header">from the field to its right (see Figure 7).
Figure 7. Choose After tag from the drop-down menu.
Repeat these steps to add a rightcol div tag after the leftcol div tag, and a footer div tag after the rightcol div tag (see Figure 8).
Figure 8. Adding all four div tags.
To create the final div tag, we need a wrapper around all of the content so we can set the page width and overall placement:
Figure 9. In Code view, you should see the wrapper div tag encompassing the other div tags.
In Design view, through each div tag's style, we can control the layout of our page. Let's start with the wrapper style. We'll use it to set the width of the page to 760 pixels and to center the page:
#wrapperstyle to edit it.
Figure 10. Editing wrapper style.
Next, to ensure the left column is on the left and the right column is on the right:
#leftcolstyle to edit it.
#rightcolstyle to edit it.
To set the footer section below both columns:
#footerstyle to edit it.
The page should now look like Figure 11.
Figure 11. Floating the right column.
Lastly, to make the background color of the wrapper dark gray and the background color of the surrounding area light gray, you need to create a new style for the
Figure 12 shows your work thus far.
Figure 12. The edited page layout styles.
To continue building out the home page for Crush Creek Vineyards, it's time to add some content. To add a banner image to the header section:
For the footer section:
For the left column:
For the right column:
Figure 13 shows the home page with all the content in place.
Figure 13. The Crush Creek Winery home page with the content added to the div tags.
Next, you need to improve the look of the content in the various sections.
To make the background color of the right column white (see Figure 14):
Figure 14. Editing and creating styles for the right column.
To format the footer section (see Figure 15):
Figure 15. Editing and creating styles for the footer section.
To improve the look of the left column section:
To create a special look for the links in the left column (see Figure 16):
Figure 16. Editing and creating styles for the left column.
Then to give the links enough space for a good rollover experience:
Lastly, to create the rollover color:
a:hoveras the Selector Name. Confirm ccwinery.css is where the style will be defined, and click OK.
Once you have completed these steps, you can turn on Live View and roll over the links to see the color.
Figure 17 shows all the formatting improvements described in this section in Live View.
Figure 17. Check all formatting changes in Live View to ensure they look the way you expect.
Now that we've done all the hard work, it's relatively easy to create the rest of the pages:
If you have too much space above the header on each page, turn off Live View, put the insertion point in the header, and in the Properties panel set the Format property to None. The extra space is caused by the
p tag. Another solution is to set up and use a style with a small line-height value.
A huge benefit of having set up your site using styles is that you can edit a style and have it instantly update all the content that uses that style throughout your site. Try it. Double-click the
a:hover style, change the color, and click OK. You can then preview your changes in a browser so that you can roll over the links.
Now you can create your own CSS-based layouts in Dreamweaver. It may take some work to set up the initial styles, but once they're in place, you can easily create additional pages and make formatting updates automatically across your entire site.
For more information, check out the Learn to work with CSS resources in the Dreamweaver Developer Center.
Ruth Stryker is an Adobe Certified Instructor who has been teaching web design and development for the past 14 years. She also designs and develops eLearning courses.