Firework CS4 CSS & Image Export
April 20, 2009 § Leave a comment
I’m going to explain the proper approach to layout prototype for exporting web compliant CSS & images using Firework CS4
By default, there is a web folder. Always create new folder to create div or content. Create a new layer. It becomes a new folder. Use it to create div elements for page layout. You can consider a div for header, a div for footer, a div for content. Create a new rectangle and rename the layer. The rectangle layer name will become the html <div> id. Size of new rectangle will become the size and position of div.
Any image you want to be exported to the CSS must be a slice-holder. You can optimize the image by selecting image type and format.
Don’t allow any overlapping on the text rectangle.
If you create rectangles within main rectangle, Firework will export those smaller rectangles as child of those container div. Think the layout as columns and rows so you can effectively create unique containers.
After you export as CSS & Image, you can open Dreamweaver to review the HTML and CSS codes. It is very cool…