Comments on: Fireworks CS4 CSS Export

By: Jim Babbage

Jim Babbage — Tue, 09 Jun 2009 01:17:45 +0000

Thanks Randy! It’s hard for me to even hazard a guess without seeing the PNG file.

By: Randy

Randy — Mon, 08 Jun 2009 14:35:47 +0000

Jim,

Great tutorials! I really appreciate them. One problem I am having is exporting text. Every time I export a page with editable text, the page lays out crazy in both DW and in the browser. But when I slice everything, it positions correctly but I lose the HTML text. What am I doing wrong?

By: Jim Babbage

Jim Babbage — Thu, 28 May 2009 17:08:18 +0000

@Maurits: Symbol properties panel is only populated if you use one of the Component Symbols found in the Common Library.

@Andy: Are you exporting as CSS and Images? HTML and Images export won’t respect the alignment option.

@Garrett: If you want a specific div alignment, using the rectangle will/should keep all the text within a specific div.

Hope this helps. Sorry for the delay in replying, everyone; these posts just came in!

By: Jim Babbage

Jim Babbage — Thu, 28 May 2009 17:03:43 +0000

@ Jason: Thanks Jason! Sounds like you’re exporting as HTML and Images, rather than CSS and Images.

@jafpro: Thanks Jafpro! At this point, you can only export out a single page at a time in the CSS and Images Export. It’s possible that in James’ video (he’s great, btw), he only had a single page in the design.

Let me know if this helps, guys!

By: Jason

Jason — Wed, 27 May 2009 15:07:27 +0000

Great tutorial Jim! I am new to Adobe, but these are great tools. The problem I am having in Fireworks CS4 is when I export my slices and I open the html file in dream weaver it is importing my slices to tables instead of divs. I looked for an option to change this, but I am having no luck. Any ideas?

By: jafpro

jafpro — Sun, 03 May 2009 03:00:22 +0000

thanks for the tutorial!! I have a question tho, about the CSS export. I found this thread after I got the grayed out box for current page only. I thought I had done something wrong. I saw the video by James Williamson, http://tv.adobe.com/#vi+f1594v1010. He talks about exporting all pages and his selection was not grayed out. Here you are saying it can only be done page by page. Is there no way to export all pages? It seems a shame to create the whole site in Fireworks to only have to recreate in in Dreamweaver once approved. Sorry, just confused!?…

By: Garrett Gitchell

Garrett Gitchell — Tue, 28 Apr 2009 18:52:46 +0000

Good stuff.
Since the export recognizes text when does it make sense to put a box around text areas?
Not using rectangles seems to be the easiest way to reduce the overlap error.

By: Andy

Andy — Wed, 25 Mar 2009 05:35:01 +0000

Hello Jim,

I tried setting the center alignment on the Options button during the export and the web page still in the left side.

Any suggestions?

Thanks.

Andy

By: Maurits

Maurits — Fri, 20 Feb 2009 00:46:36 +0000

Hello Jim,

Thanks for making a video about this.

There’s just one thing, you have already made symbols of the text, when I try to make a symbol of them, I can only choose Animation, Button and Graphic. Not text.

I can’t get my symbol properties panel like you have, mine is just empty and I can’t add a thing to it.

Oh, and another question: Will it export EVERY rectangle as a div?

Thansks!

I hope

By: Jim Babbage

Jim Babbage — Mon, 16 Feb 2009 15:28:23 +0000

No need to apologize, James. I’m glad one of those options worked for you.

Make sure you check out Matt Stow’s article and update for the CSS export at Adobe’s site. It helps quite a bit.

http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html

And that is a great tip about resetting the Grid to match your layout.

By: james

james — Mon, 16 Feb 2009 15:20:44 +0000

Sorry if I sounded ungrateful Jim, I can assure you the short video helped me a lot and was very well done. I tried both methods and actually you can get it to work using only two slices either end of the site. The background method works well as well so thanks for that.

Thought I would add a simple tip I find useful when working in fireworks. If you find found it annoying having rectangles snap to grid squares that finish off the canvas, then try the following…

Adjust the grid sizes in Edit>Preferences, so that it fits perfectly into the site. It depends on the size of course. My site is 1024×768, for which I use respective grid sizes of 32 and 24. Just divide your sizes by 2 until you get a decent grid size.

By: Jim Babbage

Jim Babbage — Mon, 16 Feb 2009 14:40:46 +0000

@ Jose: Thank you very much!

@ James: There’s only so much one can demonstrate in a short introductory video, James. As to your question, if you mean you have a full page background image for your page design, you can export that separately and then in the Export options, select it as the background image for the page. That way you can still export your page design without worrying about the slice. Ideally, put the background image on a separate page, so you aren’t having to turn the slice on and off in your main design.

If it is a repeating background image, you could try the three slice technique.

HTH