Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

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

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

In this series, we review how you can use Dreamweaver 8 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 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.

The completed structure

Figure 1. The completed structure


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

Dreamweaver 8

Fireworks 8

Sample files:

Prerequisite knowledge: