• Lesson Index:
• Overview
• Layout
• Getting Started
• Setting Colors
• Draw Layout
• Enhance Photo
• Import Image
• Gradients & Masks
• Components
• Making the Header
• Smudge Tool
• Write Title
• Navigation Bar
• Footer
• Finishing
• Slicing
• Export
• Export Options

Exporting

After we have sliced our comp in the last lesson, we now want to export those slices.

Fireworks does have a facility to export this comp into a HTML page. However, this technique is very rudimentary and is intended for only for the most basic of web pages. In fact, I generally don't recommend this method at all. Because the code that is generated is sub-optimal. And in the Intro HTML/Dreamweaver course, I show you how to hand code much more optimal code. Nevertheless, you should at least know that such as feature exists. And so we do it now.

In Fireworks, with the creativework.png file opened, do menu File -> HTML Setup and keep the default settings as shown...

Now do File -> Export. If you get this dialog, click OK.

In the Export dialog, provide the filename of creativeworks.htm in a new folder called web under the creativeworkscomp folder. Set the other settings of the dialog as shown.

Click Save.

Using Window Explorer, you will find that Fireworks has generated the creativeworks.htm.

And the images for that web page has been generated inside the image folder ...

Note that our two sliced images have been given filenames matching their slice names of sideimage and titleimage. We'll talk about the filler images and the spacer.gif shortly.

But first, run our createiveworks.htm web page by double-clicking on it and loading it into our browser.

Well, it looks like a web page. However, it is a very poorly constructed web page. Fireworks does not know HTML very well. It only knows about creating HTML tables and putting images in to the cells of the table.

Here is the table structure that Fireworks has created.

So even through we wanted to implement the navigation bar, the content text, and the footer using HTML code, Fireworks does not know how to code them in HTML. So it outputted those elements as images instead. Those images are the filler images such as creativeworks_r1_c1.gif, creativeworks_r2_c1.gif, creativeworks_r2_c4.gif, creativeworks_r3_c3.gif, creativeworks_r4_c2.gif. For example, the filler image creativeworks_r4_c2.gif looks like ...

This is definitely not how web sites are built. Those filler images are virtually useless to us.

In the Export dialog above, we mind as well uncheck the "Include Areas without Slices" and get the following instead...

Even with this, Fireworks produces table structures that are far from optimal. In fact, it is considered poor. In the Intro HTML/Dreamweaver lessons, I'll teach you how to create a proper table structure for this webpage.

You can get my file for this lesson here: creativeworks.png (right-click to download). When ready, continue to the next lesson where we will learn about more exporting options.