Fireworks CS4 Tutorials
Free Fireworks Resources
Other Fireworks Resources
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.
Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!