Three demos of exporting CSS and images from Fireworks

The following 10-minute video presentations will help you understand how to create and organize a web page design and prepare it in Fireworks CS4 for exporting to CSS and images format. Learn how to turn a static design into a working web page with these methods and techniques. I start with a wireframe and define the layout structure for text and graphics. Then I use symbols and slices to specify some of the HTML. Finally I show some techniques for including dynamic content by making simple edits to the exported code.

Before you export a design to CSS and images, the elements of the design need to be arranged and labeled to help Fireworks produce a more accurate layout. Fireworks creates divs in the exported CSS and HTML using rectangles, text objects, and slices, and by identifying groups of objects based on the empty space around them. In the "Structuring the web page" video, you'll understand what will become a div is essential to reproducing your design in CSS and HTML.

After identifying and defining the different content areas of the web page, you're ready to add headers, links, lists, and form elements using HTML component symbols from the Common Library. The video "Using slices and HTML component symbols" covers that topic next. Text objects will automatically become HTML text, but other page elements need to be specifically defined. The component symbols include all of the important attributes necessary for you to define the styles in the CSS, such as hover states for text links and font, color, and line height for headers.

Finally, since many web pages today include dynamic content such as media players and slideshows, your design in Fireworks can include placeholders for where these elements should appear. In the "Including dynamic content" video, you'll see how simple edits to the exported CSS and HTML to add the <embed> code or SWF objects using Adobe Dreamweaver CS4 can turn a simple text page into a more engaging and interesting experience.

Download the sample files and work along with the videos. Everything you need to reproduce the design and the exported CSS and images is included.

Enjoy the videos!

Structuring the web page

This video shows you how to identify what will become a div element in the exported code and how to arrange design elements to facilitate the correct layout in the live web page. Learn how to use rectangles to define content areas; how to place text objects, graphics, and photos without overlap; and how to use object labels to make the exported code easier to read and understand.

Using slices and HTML component symbols

In this video I show you how to use HTML component symbols from the Common Library to create headers, links, and lists and specify all of the styling information that will be included in the exported CSS, such as hover and visited states for links. Then I demonstrate how to use the three-slice technique to create a content area with a graphic top and base that expands as the content within it gets longer.

Including dynamic content

Here you use simple placeholders in the design to specify where dynamic content such as interactive maps, embedded video, slideshows, or SWF objects should be placed in the live web page. Finally, I show you how easy it is to quickly edit the exported CSS and HTML in Dreamweaver CS4 to add that content and make the web page complete.

Where to go from here

Now that you've seen how you can create and prepare a web page design in Fireworks for CSS export, find out more about optimizing a website mock-up in Fireworks for CSS export. Read Michel Bozgounov's article, Setting up a Fireworks web design mock-up for CSS and images export.