free web graphics
JJW Web Design - Small Business Solutions
Home Page
Small Edge Families
free graphics White Backgrounds
free web graphics Black Backgrounds
Table of Contents - Border Families
graphics families White Backgrounds
graphics design Black Backgrounds
misc graphics
graphics patterns Patterns & Textures
HTML Help
web design Edge Families
free graphics TOC Families
Table of Contents - Contact Me
free web graphics Graphics Requests
web graphics Professional Design
 		JJW Web Design free web graphics

toc graphics

html tutorials
ball How do I write my HTML to be used with a TOC (table of contents) graphics family?

Now you're probably wondering how the HTML is written for the more complex TOC family of graphics. This small tutorial will explain the HTML that is used.

Table Method, using a <TABLE>:

The preferred method for writing the HTML is to use <TABLE> tags. If you are not familiar with the <TABLE> tags, please go to my other Web site, HTML Tutorials for the Complete Idiot, and read the Table and Edge Tutorials.

Using the <TABLE> tag we define two columns. The first column (<TD WIDTH=170>) is used to write the TOC (table of contents) graphics. The second column (<TD WIDTH=580>) is used to display the main content of your page. The HTML looks something like the following.

<HTML>
<HEAD>
<TITLE>My Homepage</TITLE>
</HEAD>

<BODY BGCOLOR=#FFFFFF BACKGROUND="edge.gif">

<TABLE WIDTH="750">
<TR>

<!--First Column - Table of Contents Graphics-->
<TD ALIGN="LEFT" VALIGN="TOP" WIDTH="170">
<IMG SRC="spacer.gif" WIDTH="170" HEIGHT="0">
<IMG SRC="home.gif" ALT="home.gif" WIDTH=92 HEIGHT=37 ALIGN=middle>
<IMG SRC="email.gif" ALT="email.gif" WIDTH=92 HEIGHT=37 ALIGN=middle>
<IMG SRC="links.gif" ALT="links.gif" WIDTH=92 HEIGHT=37 ALIGN=middle>
</TD>

<!--Second Column - Main Body Section-->
<TD ALIGN="LEFT" VALIGN="TOP" WIDTH="580">

"This is where the contents of your page go."

</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Notice how the first column is only 170 pixels in width. This is just a little more than enough width for the TOC graphics (home.gif, email.gif and links.gif). For a different edge graphic you might have to adjust the first column's width to compensate.

The edge graphic tiles from top to bottom covering the entire page. Each edge graphic is 1024 pixels in width. This ensures that in most browser windows it will tile from top to bottom. The edge graphics are different in height depending upon on the height of the repeating pattern used. The actual colored-in part of the graphic edge is only about 150 pixels in width. We set the first column width to 170 pixels in order to shift the main HTML contents 20 pixels past the colored-in part of the graphics edge.

The second column above has a width of 580 pixels, which is where the contents of your page go. Together the two columns should add up to the total TABLE WIDTH of 750. These amount can be adjusted to whatever you wish.

The only other thing to mention is the use of the spacer.gif. The spacer.gif GIF file is exactly what it sounds like; it's a spacer. The spacer.gif GIF file is a completely transparent GIF file that can be resized to fit your needs. Notice that it has a HEIGHT=0. This is because we really don't want to see it anyway. We do set the WIDTH equal to 170 pixels to make sure the first column's width stays at 170 pixels. With the space.gif GIF file inserted, there is no possible way that the TABLE column will be resized any smaller.

toc graphics


This page has been visited times since March, 2000.
All Graphics Copyright Jeffrey J. Walters, 2000
Web Design by Web Design by JJW