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.