Accessibility

Fireworks Article

 

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


Sheri German

Sheri German

Community MX

Table of Contents

  1. Introduction
  2. Setting up the page structure
  3. Making the logo image accessible
  4. Adding the navigation list
  5. Adding the clearing element
Created:
18 December 2006
User Level:
Intermediate

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 as well as 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, I show you how to work in Dreamweaver to prepare the markup that serves as the foundation for the Cascading Style Sheet (CSS) document. To start out, you need to define the site and create a starting page in Dreamweaver.

Defining the site in Dreamweaver

This tutorial assumes that you know how to define a site in Dreamweaver. If you do not, please refer to the Dreamweaver Help files. For the Blue Skies site, you only need the Local Info category, which is easy to set up quickly when you select the Advanced tab of the Site Definition panel (see Figure 1):

  1. In the Site name field, type Blue Skies.
  2. Click the browse button next to the Local root folder field and navigate to the Blue Skies folder you created in Part 1 of this tutorial.

Site definition for Blue Skies

Figure 1. Site definition for Blue Skies

Creating a starting file

Create the new HTML file that you will use to code the main layout for the Blue Skies site (see Figure 2):

  1. Choose File > New.
  2. In the New Document dialog box, select Basic Page from the Category list.
  3. Select HTML from the Basic Page menu.
  4. Make sure the Document Type is set to the default: XHTML 1.0 Transitional.
  5. Click Create.
  6. Save the file in your Blue Skies site folder as index.html.

New document settings

Figure 2. New document settings

The rest of Part 2 explains how to set up the page structure, make the logo and welcome images accessible, add the navigation list, and apply various finishing touches.

Requirements

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

Fireworks 8

Dreamweaver 8

Sample files:

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