Produced by KelbyOne

Fireworks CS4 CSS Export

SHARE
, / 2933 36

Exporting CSS and images out of Fireworks CS4.

36 Comments

  • Bobby Lee says:

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

  • Jim Babbage says:

    Thanks very much, Bobby!

  • Mark says:

    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.

  • Jim Babbage says:

    Thanks for your feedback, Mark!

  • Sachin Sachania says:

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

  • Jim Babbage says:

    Thank you Sachin! I am glad you enjoyed it. 🙂

  • Nancy T says:

    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!

  • Jim Babbage says:

    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!

  • Tim Plaster says:

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

  • Wayne says:

    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

  • raey says:

    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

  • Jim Babbage says:

    @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.

  • Jim Babbage says:

    @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!

  • Jim says:

    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?

  • Jim says:

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

    Great Tut!

  • Jim Babbage says:

    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

  • gian says:

    I don’t know how to change Symbol Properties, please help D:

  • Jim Babbage says:

    Hi Gian:

    Are you referring to component symbols, or regular symbols you have created? If component symbols (form elements and things like that) use the Symbol properties panel. If it’s your own or basic symbols, just double click on the instance on the canvas, or on the object within the Document or Common Library panel

  • Jose Carlos says:

    Very usuful the tutorial…

    Thanks

    http://garimpoweb.wordpress.com/

  • james says:

    there is an important part missing…

    What happens when you want to use a style for say the main page body, and you put a text box over it. Of course you need to slice the background with the style, but the text becomes uneditable. Export to dreamweaver an the text is stuck as an image or in a div behind it.

    Any one any ideas?

  • Jim Babbage says:

    @ 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

  • james says:

    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.

  • Jim Babbage says:

    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. 🙂

  • Maurits says:

    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

  • Andy says:

    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

  • Garrett Gitchell says:

    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.

  • jafpro says:

    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!?…

  • Jason says:

    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?

  • Jim Babbage says:

    @ 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!

  • Jim Babbage says:

    @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!

  • Randy says:

    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?

  • Jim Babbage says:

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

  • Marc says:

    I found the tutorial very useful, thanks a bunch! I did get confused at the beginning though because you use a green background and I thought they were slices! LOL
    What do you do though if you have a background jpg and text???

    http://www.super-tees.de

  • Jim Babbage says:

    @Marc:

    Thanks very much. Can you be a little more specific in your question? It’s unclear whether you want to include text in the background image or if you want html text on top of a background image.

  • This is very interesting!!

  • xpression says:

    cool tutorial
    i have done this website http://www.studyarabic.eu on fireworks
    !