Designing page compositions in Fireworks is relatively easy. Combine the flexibility of Fireworks’ vector drawing tools with the bitmap editing capabilities, and it’s a simple task to build entire page designs in Fireworks. It’s the next step that’s always been the challenge. Here are the basic steps of the project:
1. | Create a Fireworks composition that is easier to transfer to a lean HTML + CSS design by using multiple named layers. |
2. | Set the major properties for the page design by creating an external style sheet and modifying the <body> tag. |
3. | Create a simple page structure that uses a minimum number of tables and spacer images while remaining as true as possible to the original Fireworks concept. |
4. | Apply CSS styles to individual table cells using the new Tag inspector. |
5. | Control spacing and positioning of content in the page by assigning CSS selectors to individual areas of the design. |
6. | Modify the appearance of selected objects by creating and applying custom CSS classes. |
7. | Design navigation objects in CSS without the use of images by defining multiple link styles. |
8. | Insert and style an absolutely positioned <div> to complete the design. |