Accessibility

Dreamweaver Article

Designing with CSS in Macromedia Dreamweaver MX 2004

Page 1 of 8Previous PageNext Page

Drew McLellan

Drew McLellan
Dreamweaver Fever

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

We used to ride bicycles a great deal when I was a child. As the smallest of the three children, I inevitably ended up riding my sisters' hand-me-down bicycles, which, after a lick of paint and the removal of the odd basket, mud-guards and bells, looked quite respectable. As my sisters grew up and lost interest in bikes, the steady stream of hand-me-down bicycles depleted to a trickle, and eventually stopped all together. Before long, I could only cycle in a straight line—any attempt in changing direction bumped my knees against the handlebars, usually causing me to fall off sideways. I could adjust the bike's saddle and handlebars no more, I had extended them to their full extent—I was just too big for my bike.

For a long while up until recently, I encountered similar problems when using CSS layouts in Macromedia Dreamweaver. While Dreamweaver MX handled CSS layouts a great deal better than any previous version, the full support still wasn't there and I constantly found my knees hitting the handlebars. Keep going in a straight line and you'll be fine, but try anything a little trickier and you'd be on your own.

CSS Improvements

Dreamweaver MX 2004 boasts a slew of improvements to its CSS capabilities that reach right across the scope of the application. From the remodeling of the primary Property inspector to a new set of panels for viewing and editing rules, CSS technology is at the program's core.

The biggest area of improvement, however, is in the rendering of pages that use CSS. Rendering is geeky word that refers to taking a set of instructions (like a web page with CSS styling) and forming a visual representation on screen. So that is to say, Dreamweaver MX 2004 displays pages using CSS a lot more accurately. This is a tremendous improvement in itself, because unless Dreamweaver can display your layout correctly, none of the other visual tools are useful. The improved rendering makes Dreamweaver MX 2004 a viable tool for working with CSS layouts, and the improved editing facilities make it viable tool for creating them too.

For a full description of the new CSS features in Dreamweaver MX, refer to Julie Hallstrom's article, An Overview of CSS in Dreamweaver MX 2004.

In this article, I'll step through how to put together a CSS layout using the new tools offered in Dreamweaver MX 2004. After following this tutorial, you should have a good idea of how to start using Dreamweaver to build your own CSS based layouts.

Requirements

Dreamweaver MX 2004


Sample files for this tutorial

Page 1 of 8Previous PageNext Page

About the author

Drew McLellan is the author of Dreamweaver MX Web Development from New Riders and is a member of the Web Standards Project's Dreamweaver Task Force, an extension writer, and an all-around Dreamweaver good guy. He runs DreamweaverFever.com as well as a successful web development and stardards-based weblog at allinthehead.com. In the real world he's a feet-on-the-ground Senior Web Developer for a dot.com business on the outskirts of London.