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

 

Image Tables

Slices in FW and Photoshop

The Ubiquitous Spacer Gif (include download)

Column Bug

The Gotcha! Rule

The Evil Whitespace Bug

Tables with Images and Text

 

  Table Tricks

Encapsulating Content with Borders

SOURCE

You can create stretchable tables with content that have elaborate borders by combining images and backgrounds.

Rounded Corners

Elaborate Border

 

Fancy Lines

You can create lines with narrow tables, either with a simple spacer gif in a single cell table with a bgcolor, of with 3 column tables with images at the beginning and end of the line and a background in the middle.

Various Lines

 

Using padded tables within tables

Often, you don't want to have any cellpadding or cellspacing in a table, but you can get that padding and spacing by inserting a single cell table inside the table cell you want the padding in.

Rounded Corners

Elaborate Border

 

  Table Strategies

Sketching your Layout

 

Layout in Fireworks or Photoshop

SOURCE FOR ALL

 

  Typical Applications for Tables

Navigation

Horizontal

Tabbed

Headers

Footers

Vertical

Menus

 

Mastheads

Broken up for optimal download time

Used for cluster of navigation buttons

 

Sidebars

Multi-column layout

 

  Page Layouts Constructed

SOURCE FOR ALL

layout01 fireworks output, version 1, version 2, version 3

layout02 version 1, version 2

layout03 version 1, version 2, version 3

layout04 version 1, version 2

  Page Layout Challenge

Earn Extra Credit

Send me URL's for non-Flash websites that you want to see deconstructed

10 points each if used

  Exercises

Build'm

Start with version 1 of each page, then try version 2, etc.

layout01 version 1, version 2, version 3

IMAGE SOURCE FOR LAYOUT01

layout02 version 1, version 2

IMAGE SOURCE FOR LAYOUT02

layout03 version 1, version 2, version 3

IMAGE SOURCE FOR LAYOUT03

layout04 version 1, version 2

IMAGE SOURCE FOR LAYOUT04