“Hey, Dude”, I’m on the Internet!

A Step-by-Step Guide to Building your Web Site

on Yahoo! Geocities

Mrs. Dannie G. McKee

601.810.4923

November, 2007

Getting a Grade for Your Site!

Download the Grading Rubric (a Word file) found in the “News” section of our class site.

Save the Grading Rubric on your hard drive. Print a copy to remind you of what has to be

included on the pages. Later you will send your scored Grading

Rubric to your class Dropbox “First Web Site Grading Rubric”.

Building your Web Pages

The most important part of web page development is PLANNING!

Three documents help you with the planning phase of your web site. (Download, complete, and save these from the “NEWS” site of your class web page. Then upload the files to the appropriate dropbox after you do the work!)

– 1. Grading Rubric– 2. Flowchart– 3. Template

“If you fail to plan, you plan to fail!”

Sign in to Geocities Yahoo!

Go to Geocities Yahoo!– Sign in with your email address and password– You will be taken to a new page

Look over the page and become familiar with the different sections.

Remember this is a free site; you will have ads on your web page that you may not like or support!

Read aboutGeocities

Take time to Read items 1-4 on The Yahoo!Geocities Page.

Your very first Page!(the index)

Click on PageBuilder. – You’ll be taken to another new page –

click on "Launch PageBuilder." – The PageBuilder program will now load -- it will

take a few minutes, so be patient. (Java 6 SE is needed; download it if you are requested to do so!)

Your very first Page! (the index, continued)

Now save your website: – PageBuilder will open, and you’ll have the first page of your

website -- blank. – First of all, save it by clicking the "save" disk at the top of the page. – A window will open, and type in the word "index" and click on “OK”.

Remember, you can only have ONE INDEX page ( This is always the first page to load when someone visits your site. If you save another file as INDEX, it then becomes your first page and you loose the previous file!)

You now have a website on the Internet!

Make the index page “YOU!”

Background: – The first thing you’ll need for your website is a background. – Open a new browser and go to www.grsites.com. – Click on "Absolute Background Textures Archive," search

through the different backgrounds available by color and texture, and choose a background you want to use.

– OR go to one of the graphics links you researched and choose a background.

The next slide will explain how to save your work.

Make the index page “YOU!” (continued)

Now save your background: – You’ll need to go into "My Pictures" on your computer and

create a new folder for your website named webpics. – After you’ve done that, right click on the background you

chose, and then click on "Save as Picture." – The "Save as Picture" box will open -- find the folder you

created earlier, open it, then – Name the background (limit of 8 characters) in the "file

name" box, and save it.

Make the index page “YOU!” (continued)

Now upload your background: – Go back to your PageBuilder. – Go up to the top of the page and click on "Format" and then "Background“

Tthe "Background Properties" box will open. – Click on "upload" and the "Upload Files" box will open.

Click on "Browse" and the "Choose Files" box will open. – Find your folder and then the background you downloaded and double click on it to open it.

Now back in the "Upload Files" box, click on "upload." – Your background will now upload – – again, be patient because it might take some time.

Finally, back in the "Background Properties" box, – click on "user files," – find your background as you named it, – click on it, and when it appears in the "preview box," click okay.

Finally -- you have a background. If you don’t like it, go back to the web and repeat the process until you find one you like.

Start Building your Second Page.

On PageBuilder, click on the "New" button at the top of the page

– a new page will open. – Click on the "Save" button and type in a name for page 2 in

the window. – (Don’t use the name “page2” because you may change the

order of your web site later.) Now bring in a background for the second page as

you did for your first. When you’ve done this, click "Save" again to save

the page.

Start Building your Third Page

On PageBuilder, click on the "New" button at the top of the page

– a new page will open. – Click on the "Save" button and type in a name for page 3 in

the window. – (Don’t use the name “page3” because you may change the

order of your web site later.) Now bring in a background for the third page as you

did for your first. When you’ve done this, click "Save" again to save

the page.

Here is another way to make pages!

Yahoo has some pre-designed web pages you can personalize and make your own.

Check out the Yahoo! PageWizards and also the templates for multipage sites

(Use this if you are not comfortable designing your own for now.)

Add Navigation Buttons with Links

Go to www.grsites.com and click on "GRSites Button Maker." (You can use any another site if you want!)– Follow the online instructions and make at least 3 buttons –

1. On button to use as a link to your second page, 2. One button to use as a link on your second page back to your "home"

page, and 3. One button to use as an external link to another website.

Now save your buttons with unique names to "My Pictures“in the “webpics” folder.

Then upload your buttons to your website using the "Pictures" dialogue box as you did in the previous steps.

Adding Links to your web site

Now that you have the buttons you created on your website, you’re ready to link them.

– To create a link, select or left-click on the button and then click on the "link" at the top of the PageBuilder page.

– For your link to the second page of your website, click on the down arrow and bring up “My Page” in the box, and then type in your file name for the second page.

For a link to another website, click on the down arrow and bring up "Web URL" in the box.

– then type the web address such as www.secondspin.com. For a link to the "home" button on your second page,

– click on the down arrow and bring up "My Page" and – then type in "index.“

Continue linking pages until it’s easy to navigate your entire web site.

Adding a Layered Textbox

In PageBuilder, click on "Format" and "Page Properties," – and then check the "Layered HTML" box. – Now click on "Text" at the top of the page. – Using the arrows on the text box, make the box larger -- at least 2"

wide by 3" long. – Now click again on the text box, go up to the "Fill" button at the top

of the page (bucket with paint spilling out), find a color you like for the background of your text box, and click on it.

– Your text box will now fill with that color. – Now type in one of 2 letters in the box, and go up to the "Text fill"

button at the top of the page (a large T with paint spilling over) and click on the same color you use to fill the text box.

You’ll now have a solid-colored box.

Adding a Layered Textbox (continued)

Click on "Text" again at the top of the page – type something in a contrasting color to the solid box.

(Refer back to your layout storyboard for the text to use.)– Now move your text box of writing on top of the solid-

colored box. You have a layered text box. Key in text from your planning documents to make

your pages great ones that have a “Purpose!! Remember to put your name and date created at the

bottom of each page.

Adding Photos

Find at least 1 photo on the Internet for at least one of the 3 pages of your website. (You may use more if you want!)

Download them to “My Pictures”, – give each a unique file name (no more than 8 letters). – upload the pictures to your website using the "Pictures"

button as you did before. – If you are feeling creative, try framing the pictures and

creating a text box caption!

Adding Clip Art

Find one or two clip art graphics to put on your website.

You can any of the free clipart sites you or your classmates found in an earlier discussion assignment.

Download clip art the same way you downloaded photos.

Page Transitions

This means how the page website opens -- blend, circle in, etc.

– Click on "Insert," "Page Effects," and "IE Page Transitions." – Click on OK and follow the instructions in the box that

opens. – Then click OK again and a little icon will appear on your

PageBuilder. – You’ll have to go to your actual website to view the

transition. If you’re not happy with the one you chose, go

through the process again and redo it until you find one you like.

Other “Bells and Whistles”

A counter can be useful in finding out how many people look at your site.

News links may be good to have on your site also. You may also want to add appropriate sound bytes

to your pages. On Page Builder, click “insert” to try these extras. Remember to save your changes each time.

Getting a Grade for your Work!

Download the Web Site Grading Rubric (Word file) from the “News” section of our class page.

Save the file on your hard drive. Use Microsoft Word to complete the form. (name,

email address, etc.) Key a grade for each section of the rubric. Save the file again. Upload the file to the dropbox “

First Web Site Grading Rubric”  

Summary

Your first web site with 3 pages (including the index page) is now complete.

For the most part, we used a step-by-step guide to complete the pages.

Now experiment on your own by using .html, Dreamweaver, or any other web software to add pages.

– Plan each page layout before you start.

Always remember, a web site is never really finished. You just reach a stopping point and publish the pages! You can always go back and make changes.