Note: This is the Dreamweaver MX 2004 version of this article. It has been updated for Dreamweaver 8 and you can find the updated version of the article here. 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 the fifth part of this article series on CSS design concepts. If you missed the earlier tutorials in this series you can find them below:

Designing with CSS in Dreamweaver MX 2004 – Part 1: Understanding CSS Design Concepts

Designing with CSS in Dreamweaver MX 2004 – Part 2: Defining Style Properties and Working with Floats

Designing with CSS in Dreamweaver MX 2004 – Part 3: Creating Your First Design Without Tables

Designing with CSS in Dreamweaver MX 2004 – Part 4: Creating a Two-Column Layout

This series reviews how you can use Macromedia Dreamweaver MX 2004 to move towards 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 stay with 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’s panels at all. These are two very different techniques. The latter should be your goal. Using Dreamweaver’s 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.

You may find it advantageous to read an earlier tutorial I wrote for the Developer Center on relative, absolute, and static positioning, called Introduction to CSS Positioning in Dreamweaver MX 2004. It should give you a decent grounding in what you can achieve with each positioning value.

On with the show!

Requirements

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

Dreamweaver MX 2004

Fireworks MX 2004

Sample files:

• css5_samples_mx2004.zip (ZIP, 238K)