Fireworks CS4 CSS Export

Great tutorial. I appreciate your foresight in producing them for us neophytes. Great job.

Thanks very much, Bobby!

May i suggest that you change that green background color as it’s misleading and someone might think it’s some kind of slice.

Otherwise, great tutorial, thanks.

Thanks for your feedback, Mark!

This is just superb, a great feature for designers to speed up their work & keep the html clean

Adobe Fireworks CS4 Tutorial : How To Export CSS…

An Adobe video tutorial about how to export CSS and images out of Fireworks CS4….

Thank you Sachin! I am glad you enjoyed it.

I’m very happy to see CSS integrated into Fireworks. But I’m a bit confused about how to practically implement it for site design. What would you suggest - I’m thinking maybe it would be best used to create DW templates that could apply to pages in the site? I can’t see creating a separate CSS file for each page. Is this what happens when a multi-page document is exported from a single PNG file? Or is it all combined into one CSS file?

I’ve also checked out your videos on Lynda.com, and they are great. Just trying to figure out how to make this work for me; I know some CSS, but not tons.

Oh, and am I right that FW creates flexible column lengths to accomodate differing text amounts?

thanks for your help!

Hi Nancy:
You can only export CSS and images on a page by page basis, so yes, if you’re going to use the feature, exporting a single page design and then creating a template might be a good idea.

As you add or remove text from a div within your web page editor, the div should expand or collapse to hold the updated content.

I’m glad to hear you are enjoying the videos both here and at Lynda.com!

This is one of the best tutorials I’ve ever seen! Thanks!

Thanks for the tutorial. Have a question though. It seems that rectangles export quite well to dreamweaver, with or without text. However, if one creates a rectangle with rounded corners and then tries to export (with text contained within), one still gets a rectangle.

Slicing does export the rounded rectangle but if text is contained within, one cannot edit the text. I tried putting the rounded rectangle on one layer and then the text on another. Same results.

Any ideas?
Thanks,
Wayne

Thnx for the tutorial!

2 question though: when exporting I always get an error in Fireworks like “Objects “rectangleprimitive” and “logo” boundaries overlap, switching to absolute position mode”

What is this? Nothing seems to overlap. I tried different things without succes.

Another thing: How to align the project to the center of the page? By manually implementing div align=center?

regards,
raey

@Wayne:

For rounded rectangles, you will have to slice the rectangle into three pieces, top, middle and bottom. The middle piece will be exported as a background image, just make sure none of the slices actually cover any of your text.

@Raey:

Text is a tricky one. First select all on the canvas to make sure nothing is overlapping, even by one pixel. Second, try to make sure all your slice and texst areas have clear lines of sight so FW can export them without switching to absolute positioning.

You can set center alignment by choosing the Options button during the export. HTH!

OK….I’m really missing something here…..

You say that FW will export text that has NOT been sliced as editable text, but you don;t really cover that in depth.

I created a sample page. I added some rectangles. I added text inside and outside the rectangles. I also added 1 image and sliced it.

When I exported, the only thing that showed up was the sliced image.

What did I hose up?

Oops! Nevermind - I’ve been up too long — time for some sleep.

Great Tut!

Thanks Jim! By the way, since the creation of this video, Matt Stow has updated the CSS export process. You can find his article and new assets at:
http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html