Note: This article has been updated for Dreamweaver 8. If you are still using Dreamweaver MX 2004, please read the version of this article series for Dreamweaver MX 2004. 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 4 of this article series on CSS design concepts. If you missed Parts 1, 2, or 3, you can get to them 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

This series explains how you can use Dreamweaver 8 to move towards using CSS as a positioning technique when developing web pages. In Parts 1 and 2 you investigated how to use some of the techniques common to most designs that use the CSS positioning technique. In Part 3 you implemented those skills to create your first CSS design. You have seen how to use the Dreamweaver panels to create ID, class, and tag selectors; and you know how to use code hints to write these same selectors directly into the style sheet without using any panels at all. The Dreamweaver panels are fine but there is no substitute for becoming intimately familiar with the syntax of CSS.

In Part 4 you pick up from where you left off in Part 3. It’s time to modify the layout of your design by easily making dramatic structural changes to your basiclayout.html page. 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 3).

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 of the positioning values.

On with the show!

Requirements

To complete this tutorial you will need to install the following software and files:
Dreamweaver 8
Sample files: css4_samples.zip (ZIP, 237K)