Accessibility
Sheri German

Sheri German

Community MX

Table of Contents

  1. Introduction
  2. Defining the site in Dreamweaver
  3. Setting up the page structure
  4. Building the structure
  5. Adding the logo and making it accessible
  6. Adding the navigation list
  7. Adding the footer column content
  8. Adding the clearing element
Created:
26 May 2008
User Level:
Beginner
Products:
Dreamweaver
Fireworks

Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 2: Markup preparation

Note: This tutorial was written for Dreamweaver CS3. Although Dreamweaver CS4 adds new CSS functionality (revised Property inspector, Code inspector, related files), the CSS panel in Dreamweaver CS4 has not changed, and you should still be able to follow this tutorial using Dreamweaver CS4.

In Part 1 of this tutorial, Gordon Mackay and I presented best practices for organizing the layers of your Fireworks comp in a logical way to promote ease of use and to mirror the structural counterparts of your target website. You created a comp for a design that you could present to a client and use to generate the required images for a CSS-based layout.

In Part 2, you will work in Dreamweaver to prepare the markup that serves as the foundation for the cascading style sheet (CSS) document. Part 3 shows you how to complete the layout and create the style sheet. The first steps in Part 2 are defining the site and creating a starting page in Dreamweaver.

Requirements

To complete all the sample projects, you will need the following software and files:

Fireworks CS3

Dreamweaver CS3

Sample files:

Prerequisite knowledge

Part 1 of this tutorial series.

Page 1 of 8
Next Page

About the author

Sheri German teaches web standards development at the Government Printing Office Federal Institute for Printing and Electronic Publishing. She also teaches web technology and technology education at Montgomery College in Rockville, MD, and provides hands-on tutorials for the Washington Apple Pi MUG. In her own web design work, she concentrates on websites for people in the arts and has created many sites for dancers, musicians, and writers. Sheri is an Adobe Education Leader and Certified Dreamweaver MX 2004 Developer. Along with Kim Cavanaugh, she is the author of The Dreamweaver 8 Visual Encyclopedia (ISBN: 0471751766). Her other writing activities include contributing author to the Washington Apple Pi Journal, training materials for classes, and articles for Community MX, where she is the partner in charge of the JumpStarts (Dreamweaver standards templates) program. Sheri has an MA in Music, and when she is not developing websites or teaching, she listens to classical music or takes ballet classes. She lives in Maryland with her husband, two children, three cats, and a dog.