Style 3 Instructions

This style illustrates a simple layout using using images within the table cell for the sidebar.

It could be argued that this style is just a subset of Style 2, using images instead of text links for the contents of the sidebar... that's ok. I'll document it in any case.

This style is often used on sites that are heavier users of images for text and for the look. The side bar may be a list or nested table that has a set of images, each linked to the desired destination or it could be one larger image that uses a map to define the link regions.

The first is more complex to use, but is more flexible for letting the designer vary the sidebar slightly (perhaps to indicate the current page) without making the user load a whole new sidebar image.

Instructions

1. Start off again by defining a table with 2 cells and one row. This will give you two columns, a sidebar column and your content column.

2. The sidebar cell will be a fixed width this time, defined by the image contents and by the width attribute, which should match.

3. A spacer column is optional, depending upon your design. Insert one if necessary using a dotclear image as we did in style 1.

4. Build your sidebar either with an inner (nested) table of images or with a single large image. Put all this in the sidebar cell.

5. Don't forget your ALT tags on the button images!

6. Now fill in your logo, content and so forth and you're good to go. (after testing of course)

Yes, my graphic buttons for this example are extremely rough. Sorry, but it was a quickie... ;-) Of course you'd use something much more attractive, and would probaby use mouse-overs to give it some activity...