1 November 2010
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:
<div>elements in the exported code
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:
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.
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.
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.
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.
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
<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
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.
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.
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.
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:
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
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
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.
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
<img> elements to create a scalable content module.
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.
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 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.
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.
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.
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.
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.
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:
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.
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.
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.
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:
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.
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.
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.
The footer text should appear over the dark blue canvas background (see Figure 8), but you will fix that in an upcoming step.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
<div>easy to find in the CSS and HTML in Dreamweaver.
Now you're ready to begin placing slices over the bitmaps in the design:
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.
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.
Finally, you need to apply the three-slice technique to the two content modules in the right column.
A slice will appear over the entire module, but you need three smaller slices to define the top, middle, and bottom background images.
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.
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).
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:
<h1>in the Property inspector. This will create an
<h1>style in the exported CSS.
<a>in the Property inspector) or to use a Link Component Symbol from the Common Library for the link text.
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
<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.
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
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.
There are a few advanced settings you need to specify as well.
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.
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.
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.
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:
These articles from Layers Magazine are also helpful:
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.