blankgif









Web Set Tutorial 3
Author: Ann Stalls
August 16, 2008


Written for PSP Version 9
Any Version will work.


Supplies Needed:
Your own header
1 background.
buttons
guestbook
footer
blank gif file 2200 x 290(included in Supplies)
divider and a small icon or create both.


Supplies and Codes HERE.

I included the noclick.jps file that needs to be uploaded.

Preparation:
Choose a header or create one from a tut.

This header was created by using a tutorial from Winni's Lessons.


Tutorial for bg1 for those who don't know how to make the side border.

Click HERE for tutorial.

divider


Backgrounds should be jpg files unless they are animated.
If they are animated then they will be a gif file.
Don't forget to change the file extenstions in the code if you use a gif file.
If you use a pattern bg, make your guestbook a png if it does not have borders.



Let's get started!


You are going to create the following files.

blankgif
header
bg1
back
email
home
next
divider
guestbook
footer
bullet


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

blankgif
blankgif
This blank gif is an empty file.
Size it at 2200 X 290.
Save it as a gif file.
This is included in supplies.
header
header

(bg1 will be sized 2200 width by 290 height in pixels.)
If you have a very wide monitor then change the width to your preferrence.
Make your blank gif the same size as your bg1.
You will not add a black border around your backgrounds or images as I have.


bg1
bg1




All buttons will be sized 200 x 200 pixels or smaller.
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

guestbook
guestbook



Dividers can be made to match your webpage.
Make sure you use a bg1 color for the background with your divider of choice.
If you have a pattern background, change your divider file extention to a gif or png.
Change it in the code, also.
divider
divider

Footers can be your header resized to 150 x 150 or smaller.

footer
footer

bullet
bullet

Choose a darker color from the html color code for your scrollbars and your body background color.
Choose a font color to match or will show up on your background.

Please note in the the x's in the code are to be replaced with your colors.


Please replace information in the code to your information.


To add music, add this code after the header.

You will need to change it to your file name and file extenstion.

<embed src="41.mp3" autostart="true" hidden="true">

iconYou are done with this tutorial.icon

Upload your files to your server.
Make sure you save your txt file as a html file.

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

Please check on another version of this web set tutorial by clicking on the star icon below.
star
If you have any questions, please email me at:
pinkrose4ann@yahoo.com


I would love to see your results.

Please join my group to show off your web pages.

Just click on Pink Rose Creations blinkie to join my group.

Pink Rose Creations.


Thank you!

Lady Ann


Please sign my guest book.

guestbook"

divider








footer
© Ann Stalls 2008
All Rights Reserved
Designed and Maintained by Ann Stalls