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 third part of this article series on CSS design concepts. If you missed Parts 1 or 2, 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

This series reviews how you can use Macromedia Dreamweaver MX 2004 to move towards using CSS as a positioning technique when developing web pages. Now that you have completed Parts 1 and 2, you are ready to move on and create your first CSS-positioned layout. You will design a fixed-width page that allows the contents to flow. You will use an unordered list to create a horizontal navigation system. You will also design a banner image in Fireworks MX 2004 and use it on the page.

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.

After you complete Part 3 you will have created your first CSS layout. Its structure resembles Figure 1.

Figure 1. The completed structure

Requirements

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

Dreamweaver MX 2004

Sample files:

• css3_samples_mx2004.zip (ZIP, 237K)

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
• Experience with “How to Define a Site in Dreamweaver“