Export Your Website Layout as CSS and Images in Fireworks CS4

Written by Rachna

This is part of the tutorial on designing the below layout and converting it to a functional PDF and CSS Website using Fireworks CS4.

Requirements : Adobe Fireworks CS4

Step 1 - Design the Base Layout

Step 2 : Creating Website Pages in Fireworks CS4

Step 3 : Creating Slices, Linking Pages and Exporting the Layout as a PDF File with Links using Fireworks CS4

Step 4 : Exporting the layout as CSS and Images

You can export each page separately as a CSS page with its own slices or copy the first page to create the other pages in Dreamweaver(if the pages are the same as seen in this layout). This export feature is really cool as the text is editable text when you open the file (not like the old export of html and images where everything was converted to images).

To export as css and images, you need to add slices to all the images and leave the editable text part without any slices. Fireworks will create the divs according to the slices and rectangles and text. Below you can see how I have sliced this layout. I have added slices for the site name, the graphic on the left, a background image (set as background image in the Properties inspector) and navigation links. The text is left without a slice.

Remember photographs should be optimized to JPEG - Better Quality in the Optimize Panel.

Name all the slices and export by choosing the page and click on File/Export. Choose CSS and Images (.htm) in the Export drop down menu. Check Put Images in subfolder. Click on options and enter images/background.jpg. (I have named the background image background).

Open the File in Dreamweaver and you will see that Fireworks has created a css style sheet, an html page and the images folder with the images. Text is editable in Dreamweaver. You can now optimize this file if needed and copy it to create the other pages and link them together in Dreamweaver.

Click here to see the css site.