header  






Web Set Tutorial 1
Lady Ann
July 18,2008


Written for PSP Version 9
Any Version will work.


Supplies Needed:
Your own header
4 backgrounds that match your header.
divider or create one.




Supplies and codes are HERE.

Supplies include:

greyscaled backgrounds
greyscaled blank header(Need to add tube to it or graphic)

You will need to colorize them if you want to use them.

You may use your own materials.

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

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

Bravenet

Bravenet does not have enough free space for all of your lessons.

You will need to purchase some space or delete old lessons.

You can use your own host but you will only get help in setting up a website if you use Bravenet.

You will get help creating websets regardless of what host you have just not setting it up.

Choose a header or create one from a tut.

This header was made from a from the Xiah Frame tutorial.

Just click on the divider if you want to see the tutorial.



divider


Backgrounds should be jpg files unless they are animated.
If they are animated then they will be a gif file, like bg2.


Let's get started!


You are going to create the following files.

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


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

header
header

(All backgrounds will be sized 150 by 150 pixels except the gradient such as bg2.)

bg2 is animated.

To customize your bg2, see here:HERE

You will need to animate the customized bg2.

Do a seamless tile on each bg using default settings.

You do not need to do this to bg2.

You will not add a white border around your backgrounds as I have.


bg1
bg1


bg2
bg2

bg3


bg4
bg4

All buttons will be sized 200 x 200 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
bg2

email
bg2

home
bg2

next
bg2

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

enter
enter

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

guestbook
guestbook





Dividers can be made to match your webpage.
Make sure you use bg4 for the background with your divider of choice.

divider
bg2

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

footer
bg2

Choose bg4 color for your scroll bars or any color of that matches.

Choose a font color to match and will show up.

You will be replacing all my #XXXXXX to your color code.

Your teacher will send you the basic html code for this page.

The code includes the noclick.js file please uploaded with the rest of the files to the server.

There are two codes. One is for the home page.( index.html)

The index page will be the home page and you will used the same graphics.



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">

Make sure you save your txt files to html files.

You are done with this tutorial.
Upload all your files to your server.
Remember to make one folder for page 1.

Also you will have to upload all the files for the index and do not place them in a folder.

If you do not want to upload the files twice, then on the index code you will need to add the subdirectory on all images.

That means editing the index code.

Don't forget to change the font colors, scrollbar colors and bgcolor to match your web page.

Change all the Your Site to the name of your site in the title, and footer area.

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.


How to edit your code video: Look at the highlighted areas that need to be changed to match your colors, links and information.

Click herehttp://www.youtube.com/watch?v=XgOk-Sy-Z38 to see a video of what you need to edit in the txt file.

You can see another version here.

Thank you!
Lady Ann.jpg



back next
home email










Song:"03 Nil Se Na La"
Singer: Aoife Ni Fhearraigh
Ann Stalls 2008
All Rights Reserved
Designed and Maintained by Ann Stalls