Fireworks

File Formats

PNG vs GIF never mind... use GIFs.

Exporting and Optimizing

Control of download time and flow

Example: this pages masthead

Simple example completed

Fireworks output of the same example

All done in a table with solid color images

All done in a table with transparent spacer gifs and bgcolor

You can't see it, but it's there.

Example

Used to force table rows and columns to be a specific size, and work around a bug in IE Windows.

If a table with all images has rowspans that overlap and no contiguous runs of cells in a single column like this:

The spacing will break. BTW, you can't build a table like this with Dreamweaver's Merge Cells tool.

Example

Remember, the largest chunk in a column will set the width of that column.

This also works with the height of a chunk

Here's this table on its own

Also in IE Windows. If you have any returns or spaces between the <td>, <img etc.> and </td> tags, IE Windows will render them as spaces to the browser. Mozilla/Netscape does not.

Example

Completed example

The Jerusalem Project

Lecture page

Khazar.com home page

Build an images-only table that looks like this one

Right or option click on these little squares for the source images:

rect_blue.gif

rect_yellow.gif

rect_green.gif

Build an images, background-images, and bgcolor table that looks like this one

This is a headline area
	This is some text
	This is some more text

Here's the center image

Hint: This table has an invisible column of spacer.gifs on the left side and a row of spacer.gifs at the bottom.

Build a table from Mondrian's "Patch" painting using solid rectangles of color, similar to this example.

Right or option click to save the image locally