This chapter is from the book

Creating the Base Graphics for the Tabs and Assembling the Tab Table

Each navigational tab is made up of three tiny graphics and the label text,
assembled into a small table.

Create the basic outline shape of the tab. Make the
inside of the tab itself transparent and make the outside corners the same color
as the background color of your page.

Figure
12.2 The tab showing the transparent area (the checkered area) in Photoshop.

Slice the image. You only want to obtain the two
side segments. Save each slice as a GIF with transparency.

Note that the corners outside of the tab have a white background. This
background color should match the background color you intend to use on your
page.

Select a 1-pixel wide segment of the middle section.
Save this as a GIF with transparency.

Figure
12.3 The three graphics: the tab sides, and the one-pixel-wide center graphic.
The checkered area is the transparent area.

Pre-assemble the tab elements into an HTML/XHTML table.

The tab consists of a small table with three table cells. Each table
cell has a different background image. The left and right side table cells have
a fixed width, but the middle table "stretches" to accommodate the
text that is placed inside it.

The graphic dot.gif is a 1x1 pixel transparent GIF that is used
to hold the side tds open.

Why not simply use the tab graphics as img src files
instead of as background images for the table cells? This is possible, of
course, but we're going to use a bit of CSS trickery to make the graphics
invisible in older browsers, as you'll see later in this project.

Figure
12.4 The tab "table" shown with the table borders visible (left),
borders off (center), and with a background color set. The background color
"shows through" the transparent areas of the GIFs.

NOTE

Normally, when you create a GIF with transparent areas, you make
the areas surrounding the actual image transparent. However, if you make GIFs
with the main areas set as transparent and the "background" areas in
the same color as the background of your page, the "background" areas
essentially act as masks. Then you can use CSS to "color" the main
area of the element. This is a great way to create graphical elements that you
can reuse again and again.