Accessibility

Dreamweaver Article

Designing with CSS in Macromedia Dreamweaver MX 2004

Page 2 of 8Previous PageNext Page

Table of Contents

  1. Introduction
  2. Requirements
  3. The Design
  4. Setting Up the Page
  5. Creating the Page Structure
  6. Inserting Placeholder Content
  7. Laying Out the Main Components
  8. Fine Tuning the Layout
  9. Styling the Content

The Design

The design we will build in this article is intended to be a fairly common design with key elements. It has a top banner graphic, main navigation area, main content area, and a side bar that contains sub-navigation and additional features (see Figure 1). These are the kind of page elements that we deal with every day. You should be able to port techniques you learn in this tutorial to your own projects easily.

Figure 1. A Fireworks MX 2004 mock-up of the page we aim to build.
Figure 1. A Fireworks MX 2004 mock-up of the page we aim to build.

You're not going to be using HTML tables to lay out this page—you'll design this page with positioning properties in CSS. Historically in Dreamweaver, objects known as layers handled CSS positioning. I imagine that most people have used layers for one thing or another without realizing they were actually just using CSS. A layer is simply an HTML DIV tag with some CSS positioning applied. When working with CSS in Dreamweaver, positioned elements are displayed in just the same way as layers. So even if you haven't attempted anything of this nature before, the results should be familiar.

Page 2 of 8Previous PageNext Page