Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 1: Exporting the design

This is Part 1 of a two-part tutorial series that demonstrates how to take a finished web page design, prepare it for export in Adobe Fireworks CS5, and then modify the HTML and CSS code in Adobe Dreamweaver CS5.

In this workflow, you use Adobe Fireworks CS5 to optimize images, create the <div> structure for the page, and define many of the CSS styles directly from the visual design which saves you time and effort because you don't need to create the entire web page from scratch. You then edit the exported code within Adobe Dreamweaver CS5, taking advantage of powerful features such as code hinting, comprehensive CSS support, page templates, and library items, as well as the ability to quickly and easily preview your changes with Live View.

Part 1 of this tutorial takes you step-by-step through preparing the design file for CSS export from Adobe Fireworks CS5. It covers the following topics:

• Controlling page layout with rectangles that indicate where to use <div> elements in the exported code
• Using tags (that is, object names) and component symbols to define CSS styles
• Using placeholders for dynamic content and code that will be added later
• Preparing, slicing, and optimizing bitmaps that will be exported as foreground and background images for the final web pages

Part 2 of this tutorial covers modifying the CSS and HTML files with Dreamweaver to complete the design of the web page, optimizing and consolidating the exported CSS, creating reusable page templates, and adding a Spry Menu Bar for site navigation.

The sample files for this tutorial include the original design files and several intermediate files that reflect the project at different stages of completion. You can start with the original design file and proceed through the entire tutorial. Use the intermediate files if you want to move more quickly or refer to an example to review.

The sample files include:

• Cheltenham_design_originals.fw.png: The original designs for three pages in the website (These pages are not properly prepared for CSS export and image optimization, but you can start with this file and proceed through the tutorial to complete all of the steps.)
• Cheltenham_prepared.fw.png: Three pages and a master page ready to be sliced and tagged for CSS export
• Cheltenham_for_export.fw.png:  Three pages and a master page fully prepared with slices and tags ready for CSS export
• Cheltenham_templates.fw.png: Three pages and a master page modified to define reusable page templates, CSS styles, and library assets in Dreamweaver ready for CSS export
• Cheltenham_styleguide.fw.png: Basic design standards and style guide for the website.
• Cheltenham_HTML_CSS.zip: A ZIP archive of the three pages exported as CSS, HTML, and images ready to be modified in Dreamweaver

Fireworks can accelerate the process of turning a website design into code by optimizing images and exporting CSS and HTML. This section covers several techniques that are important to remember if you want to make the most of your time and effort and get the best results from Fireworks.

Anticipate making multiple export passes from Fireworks

Unless the design is very simple, it is likely that there will be background images, icons, and other design elements (for example, custom list bullets) that will need to be exported separately and then assembled by editing the HTML and CSS. If the site has many pages, it is often more efficient to export page frameworks (that is, the layout focused on the <div> structure without most of the page content and images) from Fireworks, turn them into page templates in Dreamweaver, and then export unique pages and page components from Fireworks to be combined in Dreamweaver.

Although simple pages can be completely exported in a single pass, most designs will look better and the final code will be more efficient if you make multiple export passes and assemble the final code and assets in Dreamweaver.

Fireworks layers are your friend

A well-organized Fireworks file is critical to creating a polished design and getting the correct results from the CSS export. Use layers to keep your file structured and efficient by placing related or similar content in layers, and use sublayers for even more organization. Files can be organized with layers for different page regions (for example, header, body, right column, footer), content types (for example, background images, icons, body copy), or layout elements (for example, rectangles that will define <div> elements in the exported CSS). The organizational approach you take depends on your personal preferences, but good organization is vital to the export process because it is much easier to track down and fix errors when you can easily find everything.

Tag and label everything in Fireworks

Complex designs and pages will have many layers and many more objects, and it can become difficult to keep track of everything when you start turning visibility on and off, locking layers and objects, and creating groups. Tags and labels make it much easier to find things both while working in Fireworks and in the exported CSS and HTML because Fireworks uses object tags when defining classes and IDs in the CSS, and it uses tags assigned to slices and bitmaps for the exported image names.

You assign a name to a layer by double-clicking the layer name in the Layers panel; objects and slices can be tagged in either the Property inspector or by double-clicking the object name in the Layers panel. Remember to use meaningful names (for example, "PDF_icon" not "sm_img_3"); this makes it much easier to read and understand the exported CSS, HTML, and images.

What does Fireworks export from the design to the CSS and HTML?

Fireworks exports four types of objects from the design: text, rectangles, bitmaps, and HTML component symbols.

Text is exported as content with a <p> tag unless it is otherwise tagged in the Property inspector. You can tell Fireworks to export text objects as different types of HTML by tagging them with <a> , <blockquote> , <h1> , <h2> , <h3> , <h4> , <h5> , <h6> , <label> , and <span>.

Note: There are also HTML component symbols in Fireworks for several of these text types; see below for more information.

When there are multiple paragraphs within a text object, Fireworks will export each paragraph with its own <p> tag. If you press the Return key at the end of every line to control line breaks and formatting, Fireworks will export a <br /> tag at each line break.

If there are multiple text styles or font faces mixed in the text object (for example, bold, underline, italic, or different colors), all of the text for that object in the exported CSS and HTML will have the style of the first character in that text object. Inline styles need to be applied by editing the HTML and CSS in Dreamweaver after exporting. Separate text objects may have different styles.

If you use font faces that are not web standard, Fireworks will warn you that font faces used in your design may not properly appear on the web page, but it will still export the page. There are an increasing number of techniques and services for embedding fonts in web pages, and a full discussion of that topic is beyond the scope of this tutorial. If you choose to use embedded fonts for your website, make certain that you have the proper font licenses and file formats.

Fireworks will export rectangles as <div> elements in the CSS and HTML, and it will apply the stroke and fill of the rectangle as properties of the <div> element in the CSS. Rectangles are an easy way to create columns, rows, or modules and to control the layout of the exported page. Rectangles with no stroke and no fill (which are effectively invisible in the design) can be used to create <div> tags that wrap rows, columns, or modules of content without affecting the appearance of the page. This is a common technique when preparing a Fireworks file for CSS export.

Fireworks will also try to export nonrectangular and complex vector objects as rectangular <div> elements, so if the design has vector graphics that you intend to become bitmaps, you should duplicate those vector objects, flatten the duplicate, place a slice over the flattened object, and turn off the visibility of the original. You can then give the slice the correct bitmap optimization settings, and Fireworks will export it as an image. If you ever need to modify or change that image, you still have a copy of the original vector object, so you can change the vector, duplicate and flatten the new object, and simply export the updated image.

A bitmap will not be exported unless there is a slice over it. Fireworks ignores bitmaps without slices when exporting. If there are multiple bitmaps under a slice, Fireworks will flatten separate bitmaps into a single bitmap image when exported. Each slice can have independent optimization settings, so it is possible to place slices over photos, icons, gradients, and so on, and assign each slice the appropriate file format and optimization settings (for example, GIF or PNG8 for icons, JPEG for photos, PNG24 for smooth gradients, PNG8 or PNG32 for alpha transparency).

If there are text objects under a slice, Fireworks will export them and everything else under the slice as a single image. If the image is set as a background image in the Property inspector, Fireworks will then place HTML text over that background image in the exported code, and you will see double, because the text will have been flattened into the image as well as placed as live HTML text over the image. This can be helpful if you edit the CSS to hide or displace the live HTML text for search engine optimization (SEO) purposes, but you can also simply delete the live text from the HTML.

If there are vector objects under the slice, Fireworks will display an error message when you export the CSS notifying you that there are overlapping objects and that the exported CSS will switch to absolute positioning mode. Since slices are intended to designate areas to export as images, avoid having visible vector objects under them. Use the duplicate, flatten, and hide technique for complex vectors described above to get the desired image and maintain the original vector for editing in the future.

Finally, Fireworks includes some HTML component symbols in the Common Library (for example, list items, links, and form fields) that will be exported as their corresponding HTML elements. The styles for HTML component symbols are defined in the Symbol Properties panel, and these styles will be exported in the CSS. For example, text link styles can be graphically defined in the design with the HTML component symbol for a text link, and the link , visited , active , and hover states defined in the Symbol Properties panel will be exported as CSS styles.

You may notice that some types of text objects can be defined by either tagging in the Property inspector or by using HTML component symbols. For example, header text can be defined by either tagging the text object with <h1> in the Property inspector or by using the Header 1 HTML component symbol. While the component symbol allows you to define a few more CSS properties (for example, line-height ), using a tag in the Property inspector can be faster. The choice is yours.

Form fields

Although Fireworks includes HTML component symbols for form fields, it is often better to create more complex forms in the exported HTML using Dreamweaver rather than rely on the Fireworks export feature because: Fireworks wraps all fields in a single <form> tag (that is, it cannot support multiple forms on a page), support for the <label> tag is only partial (labels are not fully associated with the corresponding form field), selections in combo boxes must be added to the HTML, there is no form validation included, and the layout is often difficult to control precisely.

Simple forms (for example, email collection for a newsletter subscription) can be exported from Fireworks and easily modified in Dreamweaver. For complex forms it is better to use the more advanced form features in Dreamweaver, and use the form field component symbols in Fireworks mostly to illustrate the desired form layout and structure in design comps.

CSS IDs and classes

In nearly all web designs there are styles that will be used repeatedly on pages and throughout the site, and these styles are typically defined as either HTML tag styles or classes. However, Fireworks does not know how you intend to use styles so if you have multiple objects with the same style in your design, it will export each instance as a separate CSS ID assigned to a <div> . The end result is that you may have multiple text objects in the HTML all with the same style, but each will have its own CSS ID. There also may be multiple CSS classes with similar styles. Although your page will look good and the code may validate, it is neither efficient nor optimized. Fireworks also uses separate classes and IDs in the CSS, because positioning is controlled by assigning margin values to each individual object. If you consolidate duplicate styles in the CSS, you will also need to change how objects are positioned on the web page.

Use Fireworks to save time and effort by generating the CSS from your design styles, but plan to edit the exported code to consolidate redundant styles and optimize the HTML and CSS by converting reusable IDs to classes and by applying styles to tags when possible. A full explanation of optimizing CSS and HTML is beyond the scope of this tutorial, and the end results from the examples presented here will not be fully optimized, but there are several online resources listed at the end of this article to help you learn more about creating efficient and standards-compliant CSS and HTML.

Page layout and <div> structure

The most important rule for controlling the layout of a web page exported from Fireworks is to avoid overlapping objects. Rectangles, vector objects, text objects, and slices that have overlapping bounding boxes (the object outline that appears when you mouse over or select an object) will force Fireworks to export the page in absolute positioning mode. Although the page may look fine in a browser, this is not the best way to use CSS for a page layout. Note that absolute positioning also prevents your page from being centered in the browser window, because all objects are positioned relative to the top left corner of the window.

Fireworks determines the layout of the page using two techniques:

• Rectangles that surround content are exported as <div> elements
• Columns and rows are identified by analyzing gaps between objects on the page

If you look at the exported code, you will find <div> elements for the rectangles you have drawn and tagged that define page regions. You may also see <div> tags named main and colwrap . Fireworks adds a <div id="main"> tag that wraps the entire page when you specify that the page should be centered in the browser window, and it adds colwrap <div> elements (for example, <div id="colwrap2"> ) when it identifies columns in the design that can be used to better control the layout of objects. I will explain how you can use rectangles to control page layout later in this tutorial.

Objects on the page are typically positioned relative to both their containing <div> element and to other objects within that <div> , so if you export a page and the layout appears incorrect, it may be because Fireworks does not properly understand your intended layout. Fireworks may create extra rows or columns based on whitespace in the design. Also, since objects are placed relative to their containing <div> and other objects within that <div> , margin and padding values are assigned to the content elements (rather than to the <div>) or set as CSS properties of the HTML tag. This is another opportunity to optimize the CSS and HTML by editing it in Dreamweaver. For example, rather than positioning the header with a top-margin , that distance could be assigned as padding-top for the containing <div> .

The width of the document canvas in Fireworks determines the width of the web page. Similarly, the background color of the canvas determines the background color for the <body> tag in the CSS. If your design includes extra space around the web page to show how the background of the page will appear in a browser, you will need to export any web page background images separately, then reduce the width of the canvas in Fireworks to include only what will become the web page. If you do not match the canvas width to the desired web page width, then the <div id="main"> tag that Fireworks uses to wrap the entire page in the CSS will be too wide.

Three-slice technique

Although HTML5 and CSS3 provide powerful new methods for creating polished and complex designs, they are not yet supported by all widely used browsers, so some older techniques for CSS and CSS2 are still helpful to have available. The most common of these techniques is used to create content modules that can grow or shrink to contain variable amounts of content yet still retain the correct design (for example, rounded corners and other graphical elements such as highlights and shadows).

The three-slice technique is applied by Fireworks to define the top and bottom (or left and right) graphics and the repeating middle fill. When you place an invisible rectangle (that is, one with no stroke and no fill) behind a bitmap for the background of the module and position slices over the top, bottom, and middle of the image, Fireworks automatically exports a series of nested <div> and <img> elements to create a scalable content module.

Using placeholders for code in the design

Lastly, there are just some elements in designs that Fireworks cannot export in the CSS and HTML. Embedded videos, maps, or other dynamic or interactive content must be added in Dreamweaver. However, you can use placeholders in the design that will appear in the exported code as an area reserved in the page for that code. Place a vividly colored rectangle or an image of the intended content where the code should be added and tag it in the Property inspector (for example, using Insert_map_here) to create a <div> or image in the HTML where you or a developer can insert the code without affecting the layout of the page.

If the code to be added will have a complex appearance on the page (for example, a complex form layout), you can even turn that portion of your design into a bitmap and export it as the background image of the <div> where the code will be placed. You or the developer can then add the code to the <div> and use the background image as a layout guide. Later, when the code is complete, the background image can simply be deleted from the CSS.

The example design used in this tutorial is for the homepage of Cheltenham Academics, a nonprofit, volunteer-operated organization near Philadelphia (see Figure 1).

The design inludes a gradient background across the top of the page, a large header image, content modules with graphical backgrounds in the body, and gradients and bitmaps in the footer. Although this is not a complex design, several content and design elements will have to be coordinated, and it will take a few export passes to get everything you need to assemble the final web page in Dreamweaver.

Make a back-up copy!

Before you make any changes, make a back-up copy of all original design files. You will be making changes to the file to prepare it for export from Fireworks. You should always have a back-up copy of original design files.

Create a destination folder for your exported files

Create a folder for all of the exported CSS, HTML, and image files. This folder will become the project folder in Dreamweaver. For example, create a folder named Cheltenham Academics with subfolders named images and source files. The images folder will contain bitmap images exported from Fireworks, and the source files folder will contain the original Fireworks files. When you have completed the exports from Fireworks, you can move this folder to wherever you want the Dreamweaver project to be located.

Examine the page and layer structure of the file

Open the Cheltenham_design_originals.fw.jpg file and explore the pages and layers in the Pages and Layers panels so that you understand the structure of the file, how layers are used, and where objects are located. This source file has three pages: home, volunteer, and calendar. You will be working first with the home page, and then you can extend the techniques to modify the other two pages and prepare the entire file for CSS export.

Note: Most or all of the layers and sublayers will be locked when you open the file for the first time, because I lock layers to prevent accidental selection and moving of objects. If you are attempting to select an object on the canvas and you cannot, make certain the corresponding layer is unlocked.

Export the web page background gradient

In this design there is a linear gradient that fades into a solid color behind the web page. The gradient is 250 px high and it passes behind the header image.

To begin the export process, you'll need to place a 250 x 20 px slice over the gradient at the left side of the page so that none of the header graphics are under the slice.

1. Select the rectangle object that has the linear gradient fill, and then choose Edit > Insert > Rectangular Slice. Alternatively, you can right-click and select Insert Rectangular Slice. Fireworks will draw a slice over the entire rectangle.
2. Select the new slice and change the width to 20 px (see Figure 2) in the Property inspector.

3. In the Property inspector give the slice a name (for example, type header_bkgd), specify it as a foreground image, and set the optimization to PNG24 so that you get a smooth gradient (see Figure 3).
4. Select the slice, right-click, and then select Export Selected Slice. Save the image to the images subfolder in your project folder.

You will use this background image later when you export the CSS for the three pages.

Note: If you do not see some of the PNG image optimization settings in the Property inspector, you can also use the Optimize panel to define the settings for a selected slice. You can save custom optimization settings from the Options menu of the Optimize panel, and your custom settings will then appear in the Property inspector when slices are selected. Since I use PNG8 Adaptive, PNG8 Exact, PNG24, and PNG 32 frequently, I have saved them as custom optimization settings.

Since this comp (1280 px) is wider than the final web page (960 px), you need to make the Fireworks canvas narrower so that the exported page is the correct width.

5. With no objects selected, change the canvas width in the Property inspector to 960 px (see Figure 4).

Make certain that the canvas is resized from the top-center of the page. The design for the resized page should be precisely centered in the new, narrower canvas.

Create the header bitmap image

Many of the graphics in this design are created with vectors, and these need to be flattened for the bitmap images to export properly with the CSS and HTML.

Start with the header:

1. Unlock the Header and Page layers in the Layers panel.
2. Select all of the objects in the Header layer and the background gradient from the Page layer.

Note: To quickly select all of the objects on a layer click once on the layer name in the Layers panel, and then use Shift+click on the canvas or Command-click in the Layers panel to select additional objects from other layers.

3. With all of these objects selected, right-click and select Flatten Selection (or choose Modify > Flatten Selection).

This will create a large bitmap from all of the header objects and place it on the Page layer. When multiple objects from different layers are flattened into a single bitmap, Fireworks places the new bitmap in the layer that contained the lowest object in the stack. Since the header gradient was the lowest object in the stack and was in the Page layer, the new bitmap was placed in this layer. You can either drag the bitmap to the Header layer or select the bitmap and click in the circle to the right of the Header layer label to assign the selected object to that layer.

4. Select the new header bitmap and choose Edit > Crop Selected Bitmap. This will place cropping markers at the edges of the bitmap; you may need to zoom out slightly to see all of the edges.
5. Drag the cropping markers in to frame only the portion of the header bitmap that is visible on the page; the large flattened image is wider and taller than the page, and some of it extends behind the navigation bar. The final cropped image should be 960 x 180 px and positioned precisely in the header space above the navigation bar (see Figure 5).

Create the content module background images

Along the right side of the page there are two content modules. For each of these, you will use the three-slice technique to create a scalable module (that is, the height will change based on the amount of text it contains). First, however, you need to flatten the vector objects used to draw these modules into bitmaps that can be sliced for the three-slice technique.

1. Unlock the Modules layer in the Layers panel, and make certain each of the sublayers for the modules is also unlocked.
2. Expand each of the sublayers and turn off the visibility of the text objects. You should only see the graphical portions of each module now.
3. Select all of the components for the volunteer module, right-click, and select Flatten Selection.
4. Assign the bitmap a name (for example, type vol_bitmap) in the Layers panel or in the Property inspector.
5. Select all of the components for the meeting schedule module, right-click, and select Flatten Selection. Assign the bitmap a name (for example, type sched_bitmap) in the Layers panel or in the Property inspector.
6. Turn on the visibility of the text objects for each module, and make certain that the text appears above the bitmaps in each sublayer in the Layers panel (see Figure 6).

Create and export the footer background image

When you unlock the Footer layer, you will find just one object: a graphic symbol. The footer in the Fireworks file is a symbol, because it is used on multiple pages and symbols make it easy to edit once and update everywhere. However, you need to export parts of the footer in different steps:

1. Unlock the Footer layer.
2. Select the footer symbol and choose Modify > Symbol > Break Apart (or right-click and select Symbol > Break Apart). This will cancel the symbol instance on this page and leave all of the original parts in the footer layer.

The footer is composed of a dark line for the top border, a linear gradient, some text and links, multiple bitmap logos, and a vector object in the lower right corner. The goal is to make the text live HTML in the final code, but everything else can be turned into a bitmap.

3. In the Layers panel, turn off visibility of the text objects in the Footer layer.

Since you are going to place a slice over the footer graphics, you need to convert the vector objects to bitmaps to prevent Fireworks from using absolute positioning.

4. Select the vector objects in the lower right corner, right-click, and select Flatten Selection.

These vectors were positioned slightly off the canvas, so the flattened bitmap edges will appear just beyond the edges of the canvas. When you place a slice over the footer image, anything that falls beyond the slice will be automatically cropped off (see Figure 7).

You now have two approaches to choose from. You can create a horizontally repeating background for the gradient and place the text, logos, and flourish image on top of it. Alternatively, you can create one large background image for the footer that includes the gradient, all of the logos, and the flourish, and then place only the text on top of that.

For this tutorial, it is simpler to export everything as a single large background image for the footer. To use a repeating gradient background, you would need to export the background gradient image and separate foreground images for each logo and the flourish, and then place each of the foreground images as content over the background.

5. Select the footer rectangle that contains the gradient, right-click, and select Insert Rectangular Slice.
6. Zoom in on the slice and make sure that it covers the dark top border and extends to both sides and the bottom of the page. It should be 960 x 220 px.
7. Select the slice, give it a name (for example, type footer_bkgd) in the Property inspector, specify it as a foreground image, and set the optimization to PNG24 so that you get a smooth gradient. (There is no need to assign the slice a link or Alt text, because you are going to manually place this image in the exported CSS and HTML code.)
8. Select the slice, right-click, and select Export Selected Slice. Save the image to the images subfolder in your project folder. You will use this background image when you edit the CSS for the three pages.
9. After you've saved the footer background image, open the Layers panel and turn off the visibility of the footer bitmap, turn on the visibility of the text objects, and delete the slice that had been over the footer bitmap.

The footer text should appear over the dark blue canvas background (see Figure 8), but you will fix that in an upcoming step.

Create a master page

Since the header image and the navigation bar will appear on every page in the site, you do not need to create and optimize the graphics on every page. Instead, you can create a master page in Fireworks and place the header image and the navigation bar on it. It will then automatically appear on (and be exported from) every page in the document.

1. Open the Pages panel and create a new page by clicking on the New/Duplicate Page icon at the bottom (see Figure 9).
2. Select the new page, right-click, and select Set As Master Page. The page will automatically move to the top of the Pages panel.
3. Open the Layers panel, create a second layer, and type Header and Navigation for the names of the two layers.
4. With no objects on the master page selected, set the canvas color to #394040 in the Property inspector.
5. Switch back to the page for the homepage you have been working on and open the Layers panel.
6. Select the header image, copy it, and paste it into the Header layer on the new master page.
7. Return to the homepage, select all of the contents of the Navigation layer, copy it, and paste it into the Navigation layer of the new master page.

Fireworks will automatically paste in place and put the objects in the same coordinate positions from which they were copied as long as the pages have the same dimensions. The header image and the navigation bar should align perfectly at the top of the master page.

8. Return to the homepage and open the Layers panel. Notice that there is now a locked Master Page Layer at the bottom of the layer stack.
9. Delete the original Header and Navigation layers from the homepage. The originals will disappear, but you will still see the header image and the navigation bar, because it is now being shared across all pages from the master page.

Note: Click a layer name and then click the trash icon in the Layers panel to delete all objects on that layer; click the trash icon a second time to delete the layer.

Volunteer and Calendar Pages

Using the same techniques described above for the homepage, you can prepare the volunteer and calendar pages for CSS export (remember to delete the header and navigation layers). Feel free to practice on the pages within this file. In the next section, you can start with a sample file in which all three pages have been modified using these techniques to prepare them for CSS export.

In the first preparation step you exported some of the background images that you will add to the code later, converted the vector graphic components of the design into bitmaps, and created the master page.

Now you're ready to identify the <div> structure of the page and place slices over all bitmaps that will be exported as images. Remember, any bitmap not under a slice will not be exported.

Open the Cheltenham_prepared.fw.jpg file. There are four pages: the master page, index (the homepage), volunteer, and calendar. Take a moment and explore the page and layer structure in the Pages and Layers panels to familiarize yourself with the structure of the file. Page names will become the HTML file names when you export the CSS; the homepage has been named "index" so that it will become index.html after exporting.

Identify the <div> structure

Think about each page as a series of boxes containing content, with the boxes stacked up in rows and columns to fill the web page. Looking at the homepage you can see that there could be boxes for the header, navigation bar, three vertical columns for content in the body, and then footer across the bottom of the page. Additionally, there are two content modules in the right column that you have already started to prepare for the three-slice technique, and each of those modules could also be thought of as a box of content (see Figure 10).

Where do you need to tell Fireworks to put <div> elements in the exported CSS and HTML? Where should you draw rectangles to ensure you get the desired page layout and code?

Start on the master page, because it has only two content areas (the header image and the navigation bar) that appear on every page in the site:

1. Create a new layer in the Layers panel, name it div, and place it at the bottom of the layer stack.
2. Lock all of the other layers on the master page to prevent accidental selection.

Note: You do not need to draw a rectangle under the header image, because it is the only content in that area, and the image completely fills it. Fireworks will not create a <div> for the image, but the image will become part of the normal flow of content in the HTML. (If you were to draw a rectangle in the div layer behind the header image, Fireworks would ignore it, because a <div> completely filled by an image is unnecessary.)

The navigation bar will be handled a little differently. Instead of using Fireworks to create the navigation bar, you will add a Spry Menu Bar to the exported code in Dreamweaver.

3. Draw a rectangle behind the navigation bar (960 x 30 px), give it a vivid fill color (for example, #9EF6FF) and no stroke, name it nav_placeholder, and then turn off the visibility of the Navigation layer in the Layers panel.

You should now see a solid fill rectangle where the navigation bar used to be. This rectangle will create a <div > in the exported code, and a Spry Menu Bar can be placed in this <div> and styled to match the original design. I always give each placeholder <div> a vivid color unrelated to the color palette of the design to make sure that I do not miss anything and that I remember to add the appropriate code for the placeholders in Dreamweaver.

4. Open the Pages panel, and go to the index page (the homepage design).
5. Open the Layers panel, create a new layer named div, and place it at the bottom of the layer stack.

The header and navigation bar are shared from the master page, so you only need to create <div> elements for the content area and the footer on the remaining pages.

For the content area of the homepage you need to add a total of four <div> elements: one for the body container and one for each of the three columns.

6. Create a large rectangle (960 x 470 px) with a white fill and no stroke behind all of the content (spanning all three columns); name this rectangle body_container so that you know what it is.
7. Create individual rectangles (320 x 470 px) with no fill and no stroke behind each of the columns of content (left, middle, and center); name these rectangles left_column, middle_column, and right_column.

The large, white body_container rectangle will provide the white background for the body of the page. If the content varies in height across the three columns, then the background of the body will always be white, because the body_container <div> will expand to hold the tallest content column. If you only placed rectangles behind the columns with no container <div> and one column was longer than the others, then the dark background color of the page would show through below the shorter columns.

8. Next, draw rectangles with no fill and no stroke behind the two content modules in the right column. Make sure the rectangles are wide enough to include the parts of the gold banners that extend beyond the edges of the rounded corner rectangles, and that they are precisely positioned to include the entire module background image. The rectangle behind the volunteer module should be 290 x 172 px, and the rectangle behind the meeting schedule module should be 290 x 202 px.
9. Give each rectangle a meaningful name, such as vol_module and sched_module.

Finally, you need to draw a rectangle to create a <div> for the footer. Earlier, you flattened, optimized, and exported the background image for the footer, but now you need to define a <div> for the footer so that you can add the background image when you modify the code in Dreamweaver.

Since you turned off the visibility of the background image in the footer, you can see only the text on a dark background from the canvas color.

10. Draw a 960 x 220 px rectangle with a vivid fill color (for example, #9EF6FF) in the div layer and position it behind the footer text in the area where the footer background image will be.
11. Name the rectangle footer to make the <div> easy to find in the CSS and HTML in Dreamweaver.

Place slices over bitmaps to export as images

Now you're ready to begin placing slices over the bitmaps in the design:

1. Return to the master page.
2. Select the header bitmap, right-click, and select Insert Rectangular Slice.
3. Select the slice; use the Property inspector to set its type as Foreground Image and select PNG 24 as the optimization setting.
4. 4. For the name, type Cheltenham_Academics_Logo.
5. For the Link, type index.html.
6. For the Alt text, type Cheltenham Academics – Home (see Figure 11).

This defines the header as a foreground image that links to the website homepage (index.html). The object name will become the filename when exported. The filename and Alt text are in a human-readable, friendly language for improved accessibility and SEO. You will see this image in the exported HTML as an <img> tag wrapped in an <a href> tag.

Note: You do not need to place any slices over the navigation bar because the visibility of the navigation design has been turned off, and you are using a placeholder rectangle to create a <div> where you will insert a Spry Menu Bar in Dreamweaver.

7. Switch to the index page (the homepage design) in the Pages panel.

You'll notice that there is already a slice over the header image and there is a placeholder rectangle for the navigation bar. Remember that anything on the master page will be shared with all pages in the file, including slices.

8. Unlock the body layer in the Layers panel.
9. Right-click the photo in the left column, and select Insert Rectangular Slice.
10. Select the slice; use the Property inspector to set its type as Foreground Image and select JPEG as the optimization setting.
11. For the name, type volunteers.
12. For the Alt text, type Volunteer tutors and coordinators.
13. Leave the Link empty.

Finally, you need to apply the three-slice technique to the two content modules in the right column.

14. Open the Layers panel and select the rectangle behind the top module in the <div> layer.
15. Right-click and select Insert Rectangular Slice.

A slice will appear over the entire module, but you need three smaller slices to define the top, middle, and bottom background images.

16. Select the slice, and change the height to 52 px in the Property inspector.
17. Set its type as Background Image and select PNG8 as the optimization setting.
18. For the name, type module_1_top.
19. Select the following options:

• Repeat: no-repeat
• Attachment: scroll
• Horizontal Position: center
• Vertical Position: top

20. With the slice still selected, choose Edit > Duplicate to duplicate it.
21. Change the height to 5 px, and position it just below the first slice and above (or below) the text in the module so that the slice does not overlap it or another slice.
22. Set its type as Background Image and select PNG8 as the optimization setting.
23. For the name, type module_1_middle.
24. Select the following options:

• Repeat: repeat-y
• Attachment: scroll
• Horizontal Position: center
• Vertical Position: center

25. Duplicate the middle slice, and position it at the bottom of the module so that it just covers the rounded corners and aligns with the base of the module (see Figure 12).
26. Set its type as Background Image and select PNG8 as the optimization setting.
27. For the name, type module_1_bottom.
28. Select the following options:

• Repeat: no-repeat
• Attachment: scroll
• Horizontal Position: center
• Vertical Position: bottom

To double check the positioning of the slices, you can select the rectangle behind the module from the div layer and temporarily give it a vivid fill color. The slices should have the exact same width and be aligned with the edges of the rectangle. The top slice should be aligned with the top of the rectangle and the top of the bitmap image. The bottom slice should be aligned with the bottom of the rectangle and the bottom of the bitmap image. Remember to reset the rectangle in the div layer to no stroke and no fill after you have verified the positioning of the slices.

29. Repeat the techniques above to add three slices to the meeting schedule module in the right column. Name the modules module_2_top, module_2_middle, and module_2_bottom.

You have created all of the rectangles to define <div> elements and placeholders for the homepage, and you have added and positioned slices over all of the elements that will be exported as bitmaps. If you turn the visibility of slices turned on, you can see how they are positioned (see Figure 13).

Tagging text objects and using HTML Component Symbols

You've already named all of the slices and rectangles that you added. The final step in preparing a Fireworks file for CSS export is to make sure that all of the text objects are tagged and that any HTML component symbols have all of their properties defined. Objects may be tagged either in the Property inspector when the object is selected or by double-clicking on the object in the Layers panel and naming it there.

On the homepage (index) there are a few different text styles defined:

• "Community-based Tutoring" is the page header and tagged with <h1> in the Property inspector. This will create an <h1> style in the exported CSS.
• The pullquote and author text objects under the photo in the left column are tagged "pullquote" and "byline", respectively, in the Property inspector. The exported CSS will include style classes defined by each of these text objects.
• The main content in the center column has been tagged "content" in the Property inspector, and this can be used to define the default text style in the exported CSS.
• The text objects in each of the content modules in the right column have also been tagged as "vol_module_text" and "sched_module_text", respectively. You will, however, have to add the links and apply link styles to the link in each module when you edit the code in Dreamweaver. This is because text objects that contain multiple text styles will only be exported with the style of the first character, and Fireworks does not assume that underlined text should be a link. An alternate approach would be to use two separate text objects (and tag the link text with <a> in the Property inspector) or to use a Link Component Symbol from the Common Library for the link text.
• The module labels in the banners at the top of the modules have been tagged as "vol_module_label" and "sched_module_label", respectively. When you export the CSS you will see both the live HTML text and the text that has been flattened into the bitmap of the module header, so you can use the tags to locate the styles in the CSS and turn off the visibility of the text, delete the text, or use a negative margin offset to hide it.
• Each of the three text objects in the footer has also been tagged in the Property inspector to make them easy to identify in the exported code. Fireworks will automatically detect that the copyright text should be right-aligned and will include the correct alignment settings in the CSS.

As noted earlier, each text object (that is not an HTML Component Symbol) will be exported with its own style ID or class in the CSS. The styles will not be applied to the <h1> or <p> tags directly; they are often applied to the <div> that wraps the content, so that if you add more text it will all be properly styled without having to add a CSS class to each <p> tag. There is significant overlap among the text styles, therefore text styles present a prime opportunity to optimize the CSS code by combining redundant classes and applying some styles directly to HTML tags rather than using IDs and classes.

Volunteer and calendar pages

Using the same techniques described above for the homepage, you can prepare the volunteer and calendar pages for CSS export by adding rectangles to define <div> elements, placing slices over bitmaps, and using the three-slice technique for the content modules.

The volunteer page has a different layout; it has only two columns. The calendar page has a narrow left column and two stacked rows for the content modules and the embedded calendar. You can examine these pages in the Cheltenham_for_export.fw.jpg file to see where I placed rectangles for <div> elements and where I placed slices for images to be exported.

Component symbols were not used extensively in this design, but on the volunteer page you can see link symbols used in the content modules for the step-by-step application process. Each PDF icon has been sliced for export as a foreground image, and adjacent to each icon is an HTML link symbol. The link symbols include all of the style information for the link , visited , active , and hover states, and this will be included in the exported CSS. You can use this style information to define a standard text link style when you edit the code in Dreamweaver.

Finally, the calendar page has a bitmap image of an embedded calendar covered with a slice for foreground image export. This is just a placeholder for the actual embedded calendar code, but you will use the placeholder image to indicate where the calendar will go in the code when you edit it in Dreamweaver.

Now that the Fireworks file has been prepared, you can export the CSS, images, and HTML and begin to assemble and optimize the web pages in Dreamweaver.

Open the Cheltenham_for_export.fw.jpg file. There are four pages: the master page, index (the homepage), volunteer, and calendar. Each page is ready to be exported, but for now you will export just the index page (the homepage) to see how the process works and what files are created. Remember, page names will be used as the HTML file names when you export the CSS, so the homepage (named "index") will become index.html when exported.

1. Select the index page (the homepage) in the Pages panel, and choose File > Export.

2. In the Export dialog box, select CSS And Images as the Export setting.
3. Select Current Page as the page to export.
4. Select Put Image In Subfolder, and specify the images folder in the project folder (see Figure 14).

There are a few advanced settings you need to specify as well.

5. Click Options and select the General tab.
6. Select Dreamweaver XHTML as the HTML style.
7. Select .html as the extension.

Note: You can use .htm as the extension if you prefer, but make sure that any links you assign in the Property inspector in Fireworks have the correct extension.

8. Select Write CSS To An External File.
9. For the Background Image, browse to the background gradient (header_bkgd.jpg) that you previously saved in the images subfolder in your project folder.
10. Select the following document properties (see Figure 15):

• Repeat: repeat-x
• Attachment: scroll
• Page alignment: center

The color of the canvas in the Fireworks file will be exported as the background color for the <body> tag in the CSS, and as you just specified, the gradient background image will tile across the top of the browser window as the background image for the <body> tag. The combination of the background color and the horizontally tiling background image will produce the same page background effect used in the original design comp.

11. Click OK.
12. Verify that the file name for the export is index.html and that it is being saved into the project folder, then click Save.

Fireworks will export the CSS, images, and an HTML file for the index page (the homepage), saving the files in the project folder and the images in the images folder.

13. After the export is complete, minimize Fireworks, navigate to the project folder, and open it. You should find two files (index.html and index.css) and several images in the images folder.
14. Open the index.html file in a browser to preview the page.

The design rendered in the browser should look very similar to the design in the Fireworks file, except there will be a placeholder for the navigation bar, the background image for the footer is missing, the links in the page and in the footer are just plain text, and you will see the double text effect on the banners in the content modules.

If you return to the Cheltenham_for_export.fw.jpg file in Fireworks and choose File > Export again, you can choose to export all pages rather than just the current page. Use the same settings as before, and when the export is complete you will see multiple HTML files and a corresponding CSS file for each. Fireworks does not export a consolidated CSS file; it exports a CSS file for each HTML page, including the master page (both the HTML and CSS files for the Master Page can be safely deleted). Although this can make it easy to find the CSS style for something on a specific page, it is not efficient, and it is not a best practice to have so many CSS files. There is much redundancy and many styles duplicated across the pages, so consolidating the files into a single CSS file is important for efficiency and optimization.

When you explore the CSS files, you will notice that Fireworks includes a series of styles at the start of the file that define the standard appearance for common HTML tags. These initial styles form a basic CSS reset. Different browsers have different default styles for HTML tags, and this will reduce page rendering inconsistencies. CSS resets are common in many CSS frameworks, and there are many available resources online that offer sample CSS reset files and explain how they work.

Now that you've exported the design from Fireworks, you can move on to Part 2 of this tutorial series, Modifying the HTML and CSS, to complete the design in Dreamweaver.

To learn more about designing websites using Fireworks, see these online resources:

• Fireworks Developer Center
• Setting up a Fireworks web design mock-up for CSS and images export
• Creating CSS-based layout with Fireworks
• Creating standards-compliant designs with Fireworks
• Prebuilt CSS templates for Fireworks
• Working with layers
• Optimizing files for multiple exports
• Design Learning Guides for Fireworks
• Three demos of CSS export from Fireworks (Adobe TV)

These articles from Layers Magazine are also helpful:

• Photoshop image to web with Fireworks
• Fireworks CS4 CSS Export
• Fireworks CS4 and Photoshop Integration