Flash Tutorials
& Resources
Fireworks &
Illustrator Tutorials
Web Design
Tutorials & Resources
You are here : : Home > Free Resources > Fireworks Tutorials & Resources > CSS Export   


Featured Fireworks & Dreamweaver Template

Sports Template 7

Export Your Website Layout as CSS and Images in Fireworks CS4

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.

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.

awesome website templates

EntheosWeb Design Blog

New Fireworks Tutorials

Learn How to Create a Smart 2D Button in Adobe Fireworks with Rollover Effect

Typography Art in Fireworks

Tracing & Drawing in Fireworks

Overlay Effect in Fireworks

Designing a Website Layout with Curves in Fireworks

Create a beautiful Slideshow Gallery in Fireworks CS4

stunning header collage