We're going to start setting up the html of the page.

I write pure html without using an editor to do stuff for me, so that's how I'm going to do it here, I promise it isn't hard for those of you who have never done this. I use an editor that is basically like Notepad, so you can use that. Or if you'd like to try the one I use (which has a nifty button to be able to preview your work) you can get it here NoteTab Light for free.

So open up Notepad or NoteTab or whatever you want to use.

Start a new file and save it as index.html or whatever name you want.

You can copy and paste the following code.
For Triple Background:

<html><head><title>Afternoon Tea</title></head>
<body bgcolor="#7895C1" background="background.jpg" text="#F0E8D3" link="#DFAA9C" vlink="#F0E8D3" alink="#DFAA9C">
<center><br>
<table width=90% border=0 background="border.jpg" cellpadding=8><tr><td><center>
<table width=100% border=0 background="tablebg.gif"><tr><td><br><center>
Text etc here
</td></tr></table>
</td></tr></table><br><br>
</body></html>

If you want the border wider or smaller change the cellpadding on the border layer. If you want the border and tablebg to cover more or less of the very back background, change the width in the border layer.

For 5 layer Background: (what I'll be using)

<html><head><title>Afternoon Tea</title></head>
<body bgcolor="#7895C1" background="background.jpg" text="#F0E8D3" link="#DFAA9C" vlink="#F0E8D3" alink="#DFAA9C">
<center><br>
<table width=90% border=0 background="border.jpg" cellpadding=8><tr><td><center>
<table width=100% border=0 background="tablebg.gif" cellpadding=15><tr><td><center>
<table width=100% border=0 background="border.jpg" cellpadding=3><tr><td><center>
<table width=100% border=0 background="tablebg.gif"><tr><td><br><center>
Text etc here
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table><br><br>
</body></html>

If you want the borders wider or smaller change the cellpadding in either of the border layers. If you want the borders and tablebgs to cover more or less of the very back background, change the width in the first border layer.

Ok now that that's done, we're doing to take care of what goes in the Text etc area lol

First your main picture. If you want to leave it as is and just put a frame on it, or whatever go ahead and do that. I'm going to cut mine out.

Maximize your image if it isn't already and go to selections, select none, or hit ctrl D.
Select your lasso tool , with these settings:

Select the part of the picture you want, trying not to get too close to the edges.

Go to Selections, Modify, Contract, Number of Pixels 5.
Go to Selections, Modify, Feather, Number of Pixels 15.
Ctrl C to copy, Ctrl V to paste as new image.
Add a new raster layer, go to your layer palette and move it to the bottom.

Click on your background color and change to textures.
Click on it to change the settings, click on the arrow then scroll up until you see the tablebg.gif, click on that. Settings should be Scale 100%, Angle 0.
Flood fill the bottom layer.

Now we're going to put a lil copyright on the image.
Change the background color to white (#FFFFFF), and the foreground color to null.
Click on your text tool and click on the image.
Name: Comic Sans MS, Size 6, Kerning 0, Anti-alias checked, floating ticked.
To type in a copyright sign hold down your alt key and type 0169 on the number pad, let go of the alt key. Then type Susan Rios. Click ok and move the text around to the edge of the image (the part that was cut out, not the background part). To get the best image go to Export, JPEG Optimizer, Set Compression value to 1. Click ok, name afternoontea.jpg click save.

Now we're going to do all the buttons, etc. I'm just going to show you how I do it, but not do each one. I do a welcome title, bar, Photo Album, About Me, Webrings, Gifts, Links, Awards, Home, Next Back, Email, View Guestbook, Sign Guestbook and credit graphics for myself and the artisit.

I do the html and the graphics at the same time so that I know I didn't miss any. So copy and paste the following in your page, replacing the Text etc here.

<img src="welcome.gif" width=411 height=100 alt="welcome"><p>
<img src="afternoontea.jpg" width=358 height=276 alt="Afternoon Tea"><p>

<img src="bar.gif" width=386 height=46 alt="bar" border=0><p>

<img src="photoalbum.gif" width=269 height=62 alt="Photo Album" border=0><p>
<img src="aboutme.gif" width=222 height=62 alt="About Me" border=0>&nbsp;&nbsp;&nbsp;
<img src="webrings.gif" width=207 height=65 alt="Webrings" border=0><p>
<img src="gifts.gif" width=139 height=63 alt="Gifts" border=0>&nbsp;&nbsp;&nbsp;
<img src="links.gif" width=137 height=63 alt="Links" border=0>&nbsp;&nbsp;&nbsp;
<img src="awards.gif" width=188 height=66 alt="Awards" border=0><p>
<img src="home.gif" width=162 height=64 alt="Home" border=0>&nbsp;&nbsp;&nbsp;
<img src="next.gif" width=148 height=63 alt="Next" border=0>&nbsp;&nbsp;&nbsp;
<img src="back.gif" width=148 height=63 alt="Back" border=0><p>
<img src="email.gif" width=148 height=63 alt="Email" border=0><p>
<img src="view.gif" width=120 height=191 alt="View Guestbook" border=0><img
src="sign.gif" width=129 height=191 alt="Sign Guestbook" border=0><p>
<img src="bar.gif" width=386 height=46 alt="bar" border=0><p>
<a href="http://yourwebsite.com" target="new window"><img src="yourname.gif" width=243 height=146 alt="Your Name" border=0></a><a href="http://www.artcentergallery.com/gallery/susan-rios/index.htm" target="new window"><img src="susanrios.gif" width=243 height=146 alt="Susan Rios" border=0></a><br><br>

Now you have two options. You can delete all the width & height things, or change them as you make each graphic.. I change them. It's better to have them in your code. We've already made afternoontea.jpg so change the image size to what it is. You can find it in psp by opening the image, and looking in the right hand bottom corner of PSP it will say Image: then tell you she size, width first, height second.

Page 3