Grad Colored Borders
|
Here is a neat effect that can be used to enhance your web pages for the Msn Tv viewer. The PC viewer will only see the background color that you have selected for the border and not the Grad Color effect.
The arrows that you see on the left point to Grad Color border that you will be making.
As pointed out in The Basic Table Structure a <td> cell will first expand horizontally to the width specified and then vertically to accomodate the data entered.
For this reason, height is not specified in the <td> cells that contain the Grad Color Codes or in the <td> cell that contains the body of your web page.
You will notice that the alt code , which will produce a space equal to one tap of the key board, has been used in the Grad Table <td> cells. This is neccessary so that these cells will not collapse as each cell MUST contain some data.
|
Page Construction
|
As you may have surmised, the page will be written entirely in Tables. Don't let this scare you as the construction of the page is really quite simple and the effect is worth the effort.
The first step is to add the vspace=0 and hspace=0 attributes to the body tag. This will remove the borders Msn Tv inserts and will not affect the page as viewed by a PC.
Then what we are going to do is to construct a table that has 4 <td> cells. The first 2 cells will contain the Grad Color Codes. These cells will have the same width and their sum will determine the width of the border. The 3rd cell will act as a spacer to move the body of your page to the right of the border by the number of pixels specfied by the width of this cell. The 4th cell is where you will write and display all of your page coding. Pretty simple huh!!
|
Colors
|
|
The color for the border can be any of your choosing but the grad color and the body color should the same color to produce the proper border effect. This Netscape Color Chart is good place to pick your colors from. The Professor's Color List is another place you might want to visit.
|
The Code
|
<body bgcolor="#191927" text="#666666" hspace=0 vspace=0 link="#ee82ee" vlink="#ee82ee">
<div align="center">
<table width="560" cellpadding="0" cellspacing="0" border="0">
<tr><td width="40" bgcolor="#ee82ee" gradcolor="#191927" gradangle=-90> </td>
<td width="40" bgcolor="#ee82ee" gradcolor="#191927" gradangle=90> </td>
<td width="20"> </td>
<td width="460" valign="top">
Page Coding goes here
</td></tr></table>
</div>
</body>
It is imperative that the sum of the <td> widths add up to <table> width.
Now let's have a look at Part Two of Grad Colored Borders and this time we will use a Textured Background.
|
|
