Accessibility
Sheri German

Sheri German

Community MX

Table of Contents

  1. Introduction
  2. Creating the external style sheet
  3. Writing the body rule
  4. Writing the container rule
  5. Creating rules for Module 1, the header div
  6. Creating rules for Module 2, the masthead div
  7. Creating rules for Module 3, the page content
  8. Creating rules for Module 4, the footer
  9. Ordering the style sheet
  10. Using the Spry Accordion styles
  11. Using the Tabbed Panel widget
  12. Checking browser compatibility
Created:
2 June 2008
User Level:
Beginner
Products:
Dreamweaver
Fireworks

Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 3: Layout and CSS

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.

This three-part tutorial shows how to use Fireworks and Dreamweaver to design and build a fictitious blog named Blimey. Part 1 showed you how to prepare images in a Fireworks comp for the structural markup of the layout. In Part 2, you coded the markup that provides the hooks for the cascading style sheet.

This part of the tutorial shows you how to complete the layout and create the style sheet.

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 and Part 2 of this tutorial series.

Page 1 of 12
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.