header





Web Set Tutorial 21
Author: Ann Stalls
May 5,2010


Supplies Needed:


Supplies and codes are HERE.

pattern background
textured background
Textured gradient strip
gradient strip
Gold Strip

The supplies must be colorized to match your tube.
Also, note the color html coded numbers for the scroll bars#,font color borderlight, borderdark and bgcolor#.

header
back button
email button
home button
next button
divider
guestbook
footer

Preparation:
Must have a web site to upload the web set.

If you don't have one, click below for a free site.

Bravenet Link

Choose a header or create one from a tutorial.

This header was made by me for this tutorial.

Choose a lighter color for borderlight like this:

This color is #9f582d.

Choose a darker color for borderdark like this:

This color is #9f582d.

Replace my bordercolors with your colors.
bulletbulletbulletbulletbullet bullet


Backgrounds should be jpg files unless they are animated.
If they are animated then they will be a gif file.
The code is written for jpgs so you will have to change it.

bulletLet's get started!bullet


1. Create the following files.

header
bg1
bg2
bg3
bg4
goldstrip
back
email
home
next
divider
guestbook
footer


2. To make the code work easily,please name the files as I have.
The file names will be above the graphics.
bulletUSE LOWERCASE ONLY!bullet

header
header

(All backgrounds will be sized 150 by 150 pixels except the gradient strips
such as bg2 and bg3.
Do a seamless tile on each bg1 and bg4 using default settings.
My materials do not need a seamless tile.
You will not add a white border around your backgrounds as I have.


bg1
bg1


bg2
bg2

bg3
bg3

bg4
bg4

goldstrip
goldstipr

Buttons

All buttons will be sized around 200 x 200.
You can resize your header if you like.
Add your text.
Please also save your button files in psp format incase you want to add more buttons later.
Also save a file with the font name.


back
back

email
email

home
home

next
next

Enter button can be around 300 x 300.
You can resize your header or make something else to match.

Guestbook button can be around 300 x 300.
You can resize your header or make something else to match.

guestbook
guestbook



Dividers can be made to match your webpage.
Make sure you use the bgcolor html code # must be used for the background with your divider of choice.

divider
divider

Footers should be your header resized around 150 x 150.

footer
footer

This
Choose a color from the material box html code for your scroll bars.
Choose a font color to match and show up.



Save your txt file as a HTML file.
You are done with this tutorial.
Upload your files to your server.

Don't forget to change the font color and scroll colors to match your web page.

divider


back next
home email



footer

© Ann Stalls 2010
All Rights Reserved
Designed and Maintained by Ann Stalls