header


welcome




Web Set Tutorial 20
Author: Ann Stalls
August 9,2010






Supplies Needed:


Supplies and codes are HERE.

pattern background
textured background
gradient

They can be colorized to match your set or make your own.

The materials must be colorized to match your graphic.
Also, note the color html coded numbers for the scrollbars#,font color and bgcolor#.

You need to create the following for this tut:

bg1
bg2
bg3
header
welcome banner
blank button
back button
email button
home button
next button
divider
guestbook button
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

Create a header from a graphic or tube.

This header was made by me from a graphic.

divider

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
welcome banner
bg1
bg2
bg3
banner
blank button
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

welcome
header

My welcome banner is 524 x 154 pixels.

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


bg1
bg1


bg2
bg2

bg3
bg3

Buttons

All buttons will be sized no wider than 200 pixels
You can resize your header if you like.
Add your text.
Please also save your blank button incase you want to add more buttons later.
Also save a file with the font name, size and color.


back
back

email
email

home
home

next
next

blank button
next

Guest button will be sized no wider than 300 pixels.
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 bg3 as the background for your divider.

divider
divider

Footers can be your header resized around 150 width or a bullet like I have here.

footer
footer

Choose a color from the material box html code for your scrollbars.
Choose a font color to match and will show up to read.

Save your code 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.
Replace all X's in the code with your color code.

I would love to see what you came up with

Email me the link to your webset if you like.

My email address is: pinkrose4ann@yahoo.com

Or you can join my Yahoo group to share your websets with us.

Click on the Pink Rose Creations blinkie to join us:

Pink Rose Creations



divider



guestbook


divider



back next
home email

divider


footer
Designed by ©Ann Stalls for  Lady Ann Designs 2010 All Rights Reserved