Common Issues with Adobe Fireworks CSS Export
I recently gave a presentation at the Adobe MAX 2010 conference and in Los Angeles on using Adobe Fireworks to export the initial CSS and HTML code which can then be easily modified in Dreamweaver. At the start of the session I spent about 10 minutes showing some of the most common issues people run into when setting up a Fireworks file for CSS export and how to fix them. I think I received more feedback about those 10 minutes than I did for the remainder of the session!
Due to popular demand I am making available the simple demonstration file for these common layout issues:
- Overlap – when the bounding boxes of objects overlap in Fireworks, Fireworks switches to Absolution Positioning Mode in order to preserve the layout, but this is not ideal for the exported CSS and HTML. Avoiding the overlapping objects can make it easier to get the layout you intend.
- Vectors – Since Fireworks is both a bitmap and a vector tool, we often use vectors to draw objects that will become icons or other bitmap images in the actual web page; slices are used to indicate what to export as bitmap images with the CSS and HTML, but if a slice does not completely cover the vector art or if the vector art is not sliced at all, then Fireworks will either export the vector art as generic DIVs in the code or will tell you that there are overlapping objects and switch into Absolute Positioning Mode.
- Floats – Fireworks uses floats and margin and padding values to position all of the objects on the web page, and it has some built-in algorithms to identify whitespace to help it identify rows and columns in the layouts; sometimes the algorithms do not accurately identify the layout we intend in the design, and even though the export occurs without error, the layout of the web page does not match the desired layout in the design. We can use background rectangles to define DIVs and force Fireworks to create the layout we intend in the exported code.
- Font Face – If we non-standard web fonts (e.g., Arial, Times New Roman, Verdana, etc.) for live HTML text, Fireworks will warn us during the CSS export that we have used a non-standard font. Fortunately, Fireworks will still assign that font name in the CSS, so if we are using embedded web fonts in a project, the web pages will look correct. However, if we use a non-standard font and do NOT use embedded web fonts, then people without that font installed on their computers will not see the correct font and the design as we intended.
- Font Decoration – Fireworks will export blocks of text with paragraph tags in the HTML, and the style of the text in each block is defined by the style of the FIRST character in that text block. If we use inline styles in the design in Fireworks, they will NOT be exported in the CSS and HTML. Inline styles need to be added to the exported code using a code editor like Dreamweaver. The same issue occurs for inline links: Fireworks cannot export inline links, so they will need to be added to the exported code.
- Gradients – Fireworks does not currently support CSS3 features, including gradients, in the CSS export feature. If we have gradients, repeating textures, or repeating patterns in the background of a DIV, we need to place a slice over the gradient or pattern and identify it as a background image that repeats. (There are few Fireworks extension developers working on adding CSS3 export support to Fireworks, so look for these features to become available in the future.)
A recording of the Adobe MAX 2010 session is available online:
If you are interested in getting a copy of the Portfolio template file shown in the session recording, it is available in a previous post.
Thanks Dave (not Doug) this was hands down the best session at Max this year. I would LOVE to see this one expanded upon further next year and maybe even offered as a “hands on” or a BYOL session. It would be tremendously helpful to let people see how easy it is to set these files up as you’re working on them to get the most benefit down the line when it comes time to export and turn it into a site.
Thanks again for this. I can’t wait to share this with everyone. I’ve talked about this session nonstop since I got back from L.A.!
Pingback: IDUX » Common Issues with Adobe Fireworks CSS Export » Web Coding Unravelled
As a Newbie, I am always searching online for articles that can help me get further ahead. thank u…
Dave, Wow, an excellent presentation on “Common Issues with Fireworks CSS Export..”, thanks. I’m wondering if you would have any other tutorial presentations, or could point me to tutorials, on a design workflow for customizing or creating WordPress pages or themes?
Your walk through on using Fireworks for the graphic design and CSS export was great but I need help on the second step; how to move the HTML/CSS pages, like your Portfolio project, into the PHP loop that WordPress uses. I’m coming at this as a designer not a coder so the more simple the better. Thanks, Lon K
Lon,
Unfortunately, I am not very skilled at customizing pages and themes for WordPress from a code perspective. Like you, I can design what I want and can produce mock-ups and prototypes of the desired end-product, but converting it to code is an altogether different task. What I do know is that you don’t create pages for WordPress the way you create a regular HTML page, because WordPress dynamically generates the pages from code templates, code snippets, and graphic assets. You will need to provide the graphics, the CSS styles, and the HTML code snippets, but not in the form of “complete pages.”
A quick web search should uncover many WordPress tutorials, and the WordPress site itself even provides very detailed information, but it does require some level of comfort with code. (I’ll confess that my approach to customizing WordPress has been to identify an existing theme I like, then replace the graphics with my own and modify the CSS files for other styling attributes – I leverage the layout and PHP of the theme and just “re-skin” it.)
You might also try the blog of Michel Bozgounov – he is an expert in both Adobe Fireworks and WordPress: http://www.optimiced.com/en/
Hope this helps!
Great video!
Is there any reason why text will not export using css layers / slices in Fireworks 8?
I have all images in slices & text areas not in slices. No over-laps.
When I export, the resulting html file contains the image layout only – no text. Everything else is perfect…there is just no text (and also no divs where the text should be).
Any help greatly appreciated!
Thanks
I’ve even tried converting the textbox areas to HTML slices (clicking “edit” & pasting the text) which results in a darker green slice box; however when I export the result is the same as above.
sorry…I’m getting annoying now!
Also just realised Fireworks 8 will not export css to an external sytlesheet; even if the box is ticked. Styles are all inline.
Have tried closing program & even shutting down computer! No luck!
last update; no idea what the problem was but I got CS4 & it works perfectly!!!
shpr,
Glad you were able to get FW CS4 and get the CSS export workinG. The CSS and Images export feature was added as an extension to CS3 then improved and integrated in CS4 and further enhanced in FW CS5. The CSS and Images export demonstrated in this video was not available until FW CS4 – it was not available in Fireworks 8.
Have fun with your new FW CS4!