Using the Export feature: Scenarios

This section provides specific examples of working with the new export feature to create different types of page elements.

Generating HTML forms

The Common Library panel includes a subgroup called HTML. The symbols within this subgroup work with the "CSS and Images" export feature.

The HTML subgroup includes a number of form elements, such as button, drop-down list, and text field that can be dragged onto your design. The form element symbols have HTML properties that can be changed via the Symbol properties window.

You can drag and drop these form element symbols wherever desired on your design. When you drag any of the form elements to the page, a <form> tag is automatically added at export time.

There are also some additional symbols for placing links and header tags.

Gradient backgrounds

For advanced users, there are a number of tricks that have been implemented to create effects, such as gradient backgrounds and expandable stylized boxes. You can find more information about how to create these by reading the "magical features" section of my Fireworks CS3 article, Export CSS painlessly from website comps in Fireworks. Since this article was written, Fireworks CS4 now includes an additional technique to set background image patterns and hyperlinks. Links can also be created using the Link symbol in the Common Library. You can create background patterns and gradients by setting a slice as a "background slice."

Background slices

You can set a specific slice to be a background slice. By doing so, you are indicating that the area covered by the slice is to become the background pattern for the nearest surrounding rectangle. In essence, you are defining the background for a div element. The pattern can repeat in certain ways and the options can be set on the slice using the Property inspector.

Remember that there must always be a surrounding rectangle whenever you define a slice as the background pattern.

Using the Export feature: Tips

This section includes helpful tips to prepare your documents for exporting.

Naming objects

Name the objects in the layers panel to influence the class names of generated HTML/CSS elements and also the image filenames of exported slices.

Export options

If you need specific output settings, check out the various export options in the Export window. For example, you can specify that you want the CSS saved into a separate file. You can also center the page, set a background image, and more.

Troubleshooting layout issues

If you have followed all the tips and rules in this article and your design is not being generated correctly, then try isolating part of the design with a rectangle. The rectangle can be invisible, with no fill or outline if you prefer. Adding the rectangle makes it easier for the Exporter to see the rows and columns. Rectangle objects enforce the page's structure, so you can ensure that rows or columns or blocks are exported as expected.

Where to go from here

Fireworks is an excellent application for designing and preparing web pages. Find out more about Fireworks CS4 and CSS by reading these articles by Matt Stow:

• Creating standards-compliant web designs with Fireworks CS4
• Getting started with CSS using prebuilt templates in Fireworks CS4

To find out more generally how you can design and deploy your clients' (or your own) websites in a fraction of the time, read the following CSS-related articles:

• CSS page layout basics
• Taking a Fireworks comp to a CSS-based layout in Dreamweaver

Don't forget to explore the CSS topic center to find even more articles and tutorials related to CSS.

Page 3 of 3

Previous Page