spacer

welcome

To The Professor's

Bordered Background

Tutorial

These are the images that we will be using.

The Bordered Background

sprite

The 2nd <td> Cell Background

linen

 And This
Image

grad

As a foreword to this tutorial a Knowledge of

The Basic Table Structure

is essential.

There are two ways to accomplish this depending on where you want to use it. One is in your E-mail Signature Box and the other is on a Web Page. We will first demonstrate the E-Mail Method and will just use the The Bordered Background with The Image in a table.

The E-Mail Method

You can not use the Bordered Background as the background for your e-mail as the side bar will cover the bordered part. The solution is to put the Bordered Background in a table and use the <ul> tags to indent your codes.

Why the <ul> tags you say?

The reason is quite simple really. The three available screen widths, due to the Side Bar Menu

Side Bar

Menu

The Write Screen

Side Bar

Menu

The Message Screen

Side Bar

Menu

The Post Screen

have different sizes as demonstrated above. As the table expands to fill the available screen width, the Border will change sizes so that it keeps the same proportionate width relative to the whole background. The<ul> tags will provide a proportionate indentation as the table width varies from screen to screen.

The drawback to this method is that you will lose some of the available space, on the solid portion of the background, when you write your codes and text. This can be overcome by centering the data before it is entered. This is a small price to pay in exchange for a nice background that will view as intended on either of the 3 screens.

Enough rambling

Let's Write The Code



<html>
<body bgcolor="#000000" text="#FAF0E6">
<table background="sprite.gif" width=100% height=400 border=0>
<tr><td align=center><ul><ul><ul><center>
<table bgcolor=white border=5 width=250 height=250>
<tr><td align=center>
<table bgcolor=black border=0>
<tr><td align=center>
<img src="grad.gif" width=152 height=199>
</td></tr></table></td></tr></table>
</center></ul></ul></ul></td></tr></table>
</body></html>

One Quick Note

The number of <UL> tags used will depend on the bordered portion of the Border Background. Usually 3 are sufficent.

Lets go and look at

The E-Mail

Bordered Background Message

spacer



The Web Page Method

On a Web Page we only have one screen width to deal with so we can take a different approach. Instead of using the <UL> tags to indent our text and images, we will use a vertical spacer. This is a clear image and will not show. The Professor will put a border around it so that you can see it.

<img src="https://members.tripod.com/~LeProfesseur/vspacer.gif" width=40 height=40 border=3>

spacer

Now lets make the spacer the same width as the border you see on the left, but this time we will make the height only 1 pixel

spacer

Using this information we will make a table have 2 <TD> Table Data Cells. The spacer will go in the first cell. All of our text, codes, and Images will go in the second cell. You do not need to know the width of the 2nd cell as long as you make it 100%, which represents the remaining available Table Width.

This is

The Web Page Code

<body background="sprite.gif" text="#FAF0E6" bgcolor="#0000FF" link="#0000FF" vlink="#0000FF">
<table cellpadding=0 cellspacing=0 border=0 width="95%"><tr><td align=left valign=top><img src="vspacer.gif" height=1 width=92 border=0 alt="spacer">
</td><td align=left valign=top width="100%">
Your Text, Images and Coding
</td></tr></table>

You may change any of the colors to suit the background and your own preference.

The Second

<TD>

Table Data Cell

One of the neat things we can do with this technique is to vary the background or color of the solid portion of The Bordered Background. The way to do this is to assign a background or color attribute to the 2nd Table Data Cell. Here the background that we will use

linen

spacer

This is

The 2nd Cell

Background Code

<table cellpadding=0 cellspacing=0 border=0 width="95%">
<tr><td align=left valign=top>
<img src="vspacer.gif" height=1 width=92 border=0 alt="spacer">
</td><td background="linen.jpg" align=left valign=top width="100%">

There is myriad of backgrounds and colors to choose from for this cell. You are only limited by your imagination. The Professor has only tried to demonstrate some of the possibilities.

spacer



The Professor has arranged a special presentation of

masterpiece theater

to demonstrate what is possible using Bordered Backgrounds. So make yourself comfortable, get a cup of coffee, relax and enjoy the show.

After the show, be sure and vist The Professor's Tutorial on

creating bordered backgrounds

counter



DESIGN BY

THE PROFESSOR

® Tee Hee ®