Note: This article has been updated for Dreamweaver 8. The CSS features in Dreamweaver have been vastly improved in Dreamweaver 8. You can learn about those changes in Julie Hallstrom's article, An Overview of CSS in Dreamweaver 8.

Welcome to Part 5 of this article series on CSS design concepts. If you missed the earlier tutorials in this series you can access them from the links below:

Designing with CSS – Part 1: Understanding CSS Design Concepts

Designing with CSS – Part 2: Defining Style Properties and Working with Floats

Designing with CSS – Part 3: Creating Your First Design Without Tables

Designing with CSS – Part 4: Creating a Two-Column Layout

This series reviews how you can use Dreamweaver 8 to move toward using CSS as a positioning technique when developing web pages. Parts 1 and 2 showed you how to use some of the techniques common to most designs that use the CSS positioning technique. Part 3 described creating your first CSS design and Part 4 introduced you to using the float technique to create a two-column layout.

In Part 5, you will use the design you created in Part 4. However, you will make some navigation changes. You will remove the horizontal list and replace it with a vertical navigation so that the new navigation system resides in the left column you added to the design in Part 4.

Make backups of your current layout if you intend to use it in any future work. By the end of Part 5 you will have two very different layout structures that you can customize to suit your own needs.

We have covered the various options that Dreamweaver affords when laying out a design with CSS. You saw how to use panels to create ID, class, and tag selectors, and you also saw how to use code hints to write the same selectors directly into your style sheet without using Dreamweaver panels at all. These are two very different techniques. The latter should be your goal. Using Dreamweaver panels is fine but there is no substitute for becoming familiar with the syntax of CSS.

If you wish, download the files from the link below or simply open your existing files in Dreamweaver and pick up from where you left off, at the end of Part 4.

Note: You may find a series of CSS layouts, known as JumpStarts, that I wrote for Community MX, of interest. It's called the North Pole JumpStart.

On with the show!

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver 8

• Try
• Buy

Fireworks 8

• Try
• Buy

Sample files:

• css5_samples.zip (ZIP, 238K)

Prerequisite knowledge:

• Lorem Ipsum Generator extension by Captain Cursor Creations (optional)
• Internet Explorer browser
• Firefox browser
• Read Part 1 of this series
• Read Part 2 of this series
• Read Part 3 of this series
• Read Part 4 of this series

Page 1 of 5

Next Page

About the author