You are here : : Home > Free Resources > Fireworks Tutorials & Resources > CSS Export |
Fireworks CS4 Tutorials
Image Effects
Text Effects
Free Fireworks Resources
Other Fireworks Resources
Featured Fireworks & Dreamweaver Template
|
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.