| You are here : : Home > Free Resources > Fireworks Tutorials & Resources > CSS Export |
Fireworks CS4 Tutorials
- Batch Processing New!
- Cool New Features
- Create a Collage
- Creating Pages
- Create a Slideshow
- CSS Export
- Layout Design
- Layout Design With Curves
- Linking Pages & Creating a PDF
- Trace & Draw an Image
- Fireworks Tips
- Fireworks Web Design
- Swap Images
- Drop Down Menus
- Animated Gifs
- Rollover Images
- Paste Inside
- Borders & Frames
- Patterns
- Screenshots
Image Effects
- Blur & Overlay Effect New!
- Change Image Color
- Horizontal Line Effect
- Cool Photo Frames
- Crayon Effect
- Twist & Fade Effect
- 3 D Zoom Effect
- Photo-Negative Effect
- Grayscale Effect
- Night Vision Effect
- Old Photographic Style
- Feather Effect
- Fading Effects
- Pencil Drawing Effect
Text Effects
- Chocolate Text
- Motion Trail Effect
- Patterned Text
- Textured Text
- Transparent Text
- Typography Art New!
Free Fireworks Resources
Other Fireworks Resources
Featured Fireworks & Dreamweaver Template
|
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.
Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!
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.
