1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
H O M E
  Review

 

Fireworks

File Formats

PNG vs GIF never mind... use GIFs.

Exporting and Optimizing

 

 

Creating Tables with Images

Source

Why?

Control of download time and flow

Example: this pages masthead

By Hand

Simple example completed

In Fireworks

Fireworks output of the same example

Mondrian's Blue Plane

All done in a table with solid color images

All done in a table with transparent spacer gifs and bgcolor

The Ubiquitous Spacer Gif

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.

The IE Windows column bug

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

Don't forget the gotcha! rule

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

The Evil Whitespace Bug

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

 

  Tables With Images and Text

Use Backgrounds & Spacer GIFs

Completed example

  Deconstruct Some Tables

 

The Jerusalem Project

Lecture page

Khazar.com home page

  Exercises

Exercise
1

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

 

Exercise
2

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.

 

Exercise
3

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