Create your first CSS-based website with Adobe Dreamweaver

by Ruth Stryker

Articles this issue

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.

Planning the page layout

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:

Choose Site > New Site and select the Advanced tab (see Figure 2).

Figure 2. Defining a site.
Select Local Info from the Category list and type Crush Creek Winery as the Site Name.
Specify the Local Root Folder by clicking the folder icon and navigating to the ccwinery folder that you downloaded and unzipped to your computer.

Creating the home page and the .css file

To create the first page of the Crush Creek Winery site from scratch (the home page):

Choose File > New and select the Blank Page tab.
Select HTML as the Page Type and None as the Layout.
Choose File > Save and save the file in your site folder (ccwinery) as index.htm.

To create the .css file that holds the page layout specifications for all of the pages in your site:

Choose File > New and select the Blank Page tab.
Select CSS as the Page Type.
Save the .css file in the ccwinery folder as ccwinery.css.

Now, you need to link the index.htm file to the .css file:

Open index.htm and choose Window > CSS Styles. Click the link icon in the CSS Styles panel.
Click the Browse button on the Attach External Style Sheet dialog box that appears, select your ccwinery.css file (see Figure 3), and click OK (twice).

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.

Creating the div tags

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:

Choose Insert > Layout Objects > Div Tag and click the New CSS Rule button in the Insert Div Tag dialog box (see Figure 4).

Figure 4. Inserting a div tag.
In the New CSS Rule dialog box, select ID from the Selector Type pull-down menu, type header as the Selector Name (see Figure 5), and select ccwinery.css as the place where the style will live.

Figure 5. Set up a style for the header.
Click OK three times to finish defining the style and insert the header div tag onto the index.htm page (see Figure 6). (We will add settings for the style later.)

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:

Choose Insert > Layout Objects > Div Tag, and select After Tag from the pull-down menu and <div id="header"> from the field to its right (see Figure 7).

Figure 7. Choose After tag from the drop-down menu.
Click the New CSS Rule button, select ID from the Selector Type menu, and type leftcol as the Selector Name to create a style for the leftcol div tag in the ccwinery.css file.
Click OK three times to close the dialog boxes and insert the leftcol div tag onto the index.htm page.

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:

Choose Edit > Select All, and then choose Insert > Layout Objects > Div Tag. Select Wrap Around Selection from the Insert pull-down menu, and click the New CSS Rule button.
Select ID as the Selector Type, type wrapper as the Selector Name, and click OK three times.
Click Code view to check your code (see Figure 9).

Figure 9. In Code view, you should see the wrapper div tag encompassing the other div tags.

Editing the styles for page layout

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:

In the CSS Styles panel, click the plus sign (if necessary) to the left of ccwinery.css to view the styles, and then double-click the #wrapper style to edit it.
Select Box from the Category list and set Width to 760 pixels.
To center the page, set Right and Left to Auto in the Margin area (deselect the Same For All option), as shown in Figure 10. Then click OK.

Figure 10. Editing wrapper style.

Next, to ensure the left column is on the left and the right column is on the right:

Double-click the #leftcol style to edit it.
Select Box from the Category list and set the Float property to Left. Click OK.
Double-click the #rightcol style to edit it.
Select Box from the Category list and set the Float property to Right. Click OK.

To set the footer section below both columns:

Double-click the #footer style to edit it.
Select Box from the Category list and set the Clear property to Both. Click OK.

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 body tag:

Choose Format > CSS Styles > New.
Select Tag for the Selector Type, select body as the Selector Name, and click OK.
Select Background from the Category list of the CSS Rule Definition dialog box, and type #C8C8C8 in the Background-Color field.
Select Box from the Category list. Deselect the Same For All option, and set the Top field of the Padding section to 50px so there will be some nice space at the top of the page. Click OK.

To set the wrapper background color to dark gray:

Double-click #wrapper.
Select Background from the Category list, enter #4A4A4A in the Background-Color field, and click OK.

Figure 12 shows your work thus far.

Figure 12. The edited page layout styles.

Adding content to the div tags

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:

Delete the header placeholder text.
Choose Insert > Image, navigate to the Images folder, and select header.jpg.

For the footer section:

Delete the placeholder text.
Type ©2009 Crush Creek Winery.

For the left column:

Delete the placeholder text.
Open the for_ccwinery_site.htm file from the to_copy_from folder, copy the four links, and paste them into the left column of index.htm.

For the right column:

Delete the placeholder text.
Copy the marked text from the for_ccwinery_site.htm file, and paste it into the right column of index.htm.

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.

Editing and creating styles to format the content

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):

Double-click the #rightcol style.
Select Background from the Category list. Type #FFFFFF in the Background-Color field.
Select Box from the Category list. Set the Width to 520px. Enable the Same For All option in the Padding section and set the Padding to 27px.
Select Type from the Category list. Select Arial, Helvetica, Sans-Serif from the Font-Family pull-down menu. Set the Font-Size to 75% and set the Line-Height to 160%. Type #4A4A4A for the Color and click OK.

Figure 14. Editing and creating styles for the right column.

To format the footer section (see Figure 15):

Double-click the #footer style.
Select Background from the Category list. Type #EFEFEF in the Background-Color field.
Select Box from the Category list. Deselect the Same For All option for the Padding section and set Top to 4px, Right to 25px, Bottom to 4px, and Left to 25px.
Select Block from the Category list. Set Text-Align to Right.
Select Type from the Category list. Select Arial, Helvetica, Sans-Serif from the Font-Family pull-down menu. Set the Font-Weight to Bold. Set the Font-Size to 60% and click OK.

Figure 15. Editing and creating styles for the footer section.

To improve the look of the left column section:

Double-click the #leftcol style.
Select Box from the Category list. Select the Same For All option in the Padding section, and set the Padding to 30px. Click OK.

To create a special look for the links in the left column (see Figure 16):

Create a new style by choosing Format > CSS Styles > New.
Set the Selector Type to Compound. Type #leftcol a as the Selector Name. Confirm ccwinery.css is where the style will be defined. Click OK.
In the dialog box that appears, select Type from the Category list and type #FFFFFF in the Color field. Set the Font-Family to Arial, Helvetica, Sans-Serif, the Font-Size to 75%, the Font-Weight to Bold, the Text-Transform to Uppercase, and the Text-Decoration to None.

Figure 16. Editing and creating styles for the left column.

Then to give the links enough space for a good rollover experience:

Select Block from the Category list and set Display to Block.
Select Box from the Category list. Deselect the Same For All option in the Padding section and set Top to 4px, Right to 20px, Bottom to 4px, and Left to 4px.

Lastly, to create the rollover color:

Create a new style by choosing Format > CSS Styles > New.
Set the Selector Type to Compound. Select a:hover as the Selector Name. Confirm ccwinery.css is where the style will be defined, and click OK.
In the dialog box that appears, select Background from the Category list. Type #660000 in the Background-Color field, 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.

Creating the rest of the pages

Now that we've done all the hard work, it's relatively easy to create the rest of the pages:

Save the index.htm file.
To create the wines.htm file, choose File > Save As. Name the file wines.htm and copy and paste the appropriate text from the for_ccwinery_site.htm file.
Repeat these steps to create the tastingroom.htm and contact.htm pages.
To test the links, choose File > Save All. Then choose File > Preview in Browser > {Browser} and click the various links in your browser.

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.

‹ Back

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.