Transcript “Hey Dawg”, I`m on the Internet!

“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 about
Geocities

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:
–
–

Tthe "Background Properties" box will open.
–

–
–
–

Your background will now upload –
again, be patient because it might take some time.
Finally, back in the "Background Properties" box,
–

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."
–

Click on "upload" and the "Upload Files" box will open.
Click on "Browse" and the "Choose Files" box will open.
–

Go back to your PageBuilder.
Go up to the top of the page and click on "Format" and then "Background“
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 predesigned 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.
2.
3.


On button to use as a link to your second page,
One button to use as a link on your second page back to your "home"
page, and
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.
–
–

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,
–
–

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.
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 solidcolored 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.