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…


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

What’s this?

You are currently reading Firework CS4 CSS & Image Export at Web Builders.


%d bloggers like this: