Accessibility

Fireworks Article

 

Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 1: Initial design


Sheri German

Sheri German

Community MX

Gordon Mackay

Gordon Mackay

gordonmac.com

Table of Contents

  1. Introduction
  2. Developing the design
  3. Building the header
  4. Creating the navigation glow
  5. Setting up the content area
  6. Creating the slices
Created:
18 December 2006
User Level:
Intermediate

If you use Fireworks to comp your web designs, you probably have worked often with the program's export option that generates both images and HTML code for use in an HTML editor like Dreamweaver. Fireworks creates the table-based layout and slices and arranges the images according to the settings you configure in the Export dialog box.

Although this has been a reasonable way to work, sometimes the table structure that Fireworks exports is complex, making editing very difficult for those in charge of updating page content. Moreover, with the advent of web standards, many designers follow a different method—one that uses CSS and best practices to create attractive and efficient pages with enhanced accessibility. This three-part tutorial guides you through the complete process of using Fireworks and Dreamweaver to produce web standards pages.

In Part 1, you will work in Fireworks to create the design, organize the layers, make the slices, and export them to a defined site. In Parts 2 and 3, you will work in Dreamweaver to build a CSS-based layout that entirely eschews the use of tables. To get started, download the sample ZIP file for this tutorial.

Requirements

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

Fireworks 8

Sample files:

Page 1 of 6
Next Page

About the authors

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.

Gordon Mackay is an avid design enthusiast who also dabbles in various web technologies, including CSS, XHTML, PHP, and MySQL databases. He lives in the North-Eastern Highlands of Scotland where he works for a small IT company called Navertech. Gordon also runs a personal website, where he provides web developers with free CSS/XHTML-based website templates and Fireworks PNG source files for them to use in their client projects. To this date, his site has served its visitors with over 1,086,889 free downloads.