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?
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!
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.
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?
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.
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!
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
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.
@ 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.
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.
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?
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
(Reply)on Monday September 29, 2008
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.
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!?…
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?
@ 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.
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?
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???
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.
Photoshop CS5
Illustrator CS5
Dreamweaver CS5
Flash CS5
InDesign CS5
After Effects CS5
Premiere Pro CS5
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
I don’t know how to change Symbol Properties, please help D:
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
[...] Fireworks CS4 CSS Export [...]
Very usuful the tutorial…
Thanks
http://garimpoweb.wordpress.com/
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?
@ 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
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.
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.
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
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
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.
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!?…
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?
@ 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!
@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!
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?
Thanks Randy! It’s hard for me to even hazard a guess without seeing the PNG file.
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
@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!!
[...] Fireworks CS4 CSS Export (video) [...]
cool tutorial
i have done this website http://www.studyarabic.eu on fireworks
!