Creating the Base Graphics for the Tabs and Assembling the Tab Table - Page 2

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

1. 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.

2. 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.

3. 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.

4. 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.

<!-- The tab "table" --->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td background="images/tableft.gif">
  <img src="images/dot.gif" 
	alt="" 
	width="8" 
	height="24" 
	border="0"></td>
<td id="tabmiddle4" background="images/middle.gif">tab text</td>
<td background="images/tabright.gif">
  <img src="images/dot.gif" 
	alt="" 
	width="7" 
	height="24" 
	border="0"></td>
</tr></table>

---

Note: 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.

---

Planning the Project and Dividing It into Logical Modules

This project is divided into modules. Instead of putting everything into one document, each specific task is put into its own document, and the result is assembled at the end. The CSS is divided into two separate stylesheets: one containing rules that are compatible with CSS-aware (version 4 and higher) browsers and the other containing rules that are recognized only in browsers that recognize more advanced CSS rules (version 5.0 and higher of Netscape 6.x, Mozilla, and Internet Explorer). The JavaScript is also divided into two: one that contains two document object constructor functions that can be used over and over again for many projects and another that contains the functions specific to this project. The markup itself is XHTML, which follows current W3C recommendations.

1. Create a new text file to contain the XHTML markup. Save this in the root directory of your site as an HTML/XHTML file. Here we've named it tabpage.html.

2. Create a new directory under the root and name it inc.

3. In the inc directory, create a new text file that will contain the basic style rules that are recognized by most CSS-aware browsers. Save this file with the name common.css.

4. In the same directory, create a new text file that will contain more advanced CSS style rules that are only recognized by the latest graphical browsers. Save this file with the name advanced.css.

5. In the same directory, create a new text file that will contain the base document object constructor JavaScript. Save it with the filename docobj.js.

   In the same directory, create a new text file that will contain the tab navigation Javascript. Save it with the filename tabs.js.

JavaScript + CSS + DOM Magic
JavaScript + CSS + DOM Magic
Creating the XHTML Base - Page 3