c. Adding Graphics

Watch this tutorial
Organize your slices
Here are all of the pictures I’m using:

Top Left (tl.jpg)
Top Right (tr.jpg)
Bottom Left (bl.jpg)
Bottom Right (br.jpg)

Left Top (lt.jpg)	Left Bottom (lb.jpg)	Right Top (rt.jpg)	Right Bottom (rb.jpg)

Top Middle (tm.jpg)
Left Middle (lm.jpg)
Right Middle (rm.jpg)
Bottom Middle (bm.jpg)
Line Pixel (linepix.jpg)

No we’re going to put the pictures into the tables. We’ll start with just the background (single pixel) pictures and the left and top cap graphics. Add the background images using the background=”path-to-pic.jpg” and the others using the <img src=”path-to-pic.jpg”> You will want to set the sizes of the table cells to reflect the sizes of the pictures as well. This is what the code will look like thus far:

<table cellpadding="0" cellspacing="0">
<tr height="51">
<td colspan="5" background="tm.jpg"><img src="tl.jpg" /></td>
</tr>
<tr>
<td rowspan="3" background="lm.jpg" width="76" valign="top"><img src="lt.jpg" /></td>
<td colspan="3" >Page Name Here</td>
<td rowspan="3" background="rm.jpg" width="77" valign="top"><img src="rt.jpg" /></td>
</tr>
<tr>
<td colspan="3" align="center" ><img src="linepix.jpg" height="1" width="98%" /></td>
</tr>
<tr>
<td width="100%" valign="top">Page Content goes here</td>
<td><img src="linepix.jpg" height="200" width="1" /></td>
<td>Flash Menu Here</td>
</tr>
<tr height="60" >
<td colspan="5" background="bm.jpg"><img src="bl.jpg" /></td>
</tr>
</table>

And this is what the output will look like:

Now we’re going to put the end-cap graphics into the table. To do this we’re going to use the <div> tag. With this tag, we’re going to be able to add another background graphic to the table cell by adding a style to the <div> tag. we will also add the background color using bgcolor=”#XXXXXX” to the table. This is what the code will look like:

<table cellpadding="0" cellspacing="0" bgcolor="#333333">
<tr height="51">
<td colspan="5" background="tm.jpg"><div style="background: url(tr.jpg) no-repeat top right; width: 100%;"><img src="tl.jpg" /></div></td>
</tr>
<tr>
<td rowspan="3" background="lm.jpg" width="76" height="350" valign="top"><div style="background: url(lb.jpg) no-repeat bottom left; height: 100%;"><img src="lt.jpg" /></div></td>
<td colspan="3" >Page Name Here</td>
<td rowspan="3" background="rm.jpg" width="77" height="350" valign="top"><div style="background: url(rb.jpg) no-repeat bottom right; height: 100%;"><img src="rt.jpg" /></div></td>
</tr>
<tr>
<td colspan="3" align="center" ><img src="linepix.jpg" height="1" width="98%" /></td>
</tr>
<tr>
<td width="100%" valign="top">Page Content goes here</td>
<td><img src="linepix.jpg" height="300" width="1" /></td>
<td>Flash Menu Here</td>
</tr>
<tr height="60" >
<td colspan="5" background="bm.jpg"><div style="background: url(br.jpg) no-repeat bottom right; width: 100%"><img src="bl.jpg" /></div></td>
</tr>
</table>

And here’s how it looks in graphics:

Watch this tutorial

Now let’s make the stylesheet