The following instructions will walk you through steps that can be used to create your web pages. There are 6 steps that will each show examples of how to add more and more cool things to your pages. But you don't necessarily have to do them all to have a cool web site. Hopefully, by taking this a little step at a time, this project will not be too hard. We will be using Netscape Communicator to build and view the web pages. Communicator has two parts - Composer to build web pages and Navigator to look at them. These instructions are specific to the iMAC, but usage on PCs will be very similar. Where the differences are minor, no distinction will be made since they should be obvious as you go through the instructions.

Before you actually start working on the project, read each overview and look at the "linked" examples (the underlined words) by clicking on them. When you are ready to start, go to step 1 and follow the instruction details.

1. Downloading

Overview
You will save two template pages onto your computer. These are provided to you to jump-start your project.

Details

These templates are written in a computer language called HyperText Markup Language (HTML) that your Netscape Communicator browser understands. When viewed in your browser, the HTML is translated into words, images, and sounds. Click on the "links" below, which are also called "hyperlinks", to look at each empty template page that you will start with. Note that the links at the bottom of each template page do not work yet since they are not actual links yet. You will take care of that in step 2.

Click here for page 1        Click here for page 2

Details

Follow these instructions to download these templates onto your computer:
a. In Navigator, while you are looking at each template page in the browser, go under the 'File' pulldown, select 'Save As ...', set the 'Format' to "Source", and save each with a new name. Use a unique name such as "JoeKing_Page1.html" so that your page will not be confused with someone elses pages, and so that you can tell which is your first page and your second page.
b. It is a good idea to save another copy of your work at each step. For example, save a copy with the name JoeKing_page1_copy.html. That way if you accidentally delete your file, you will have your "copy" file as a backup and thus not have to start all over.

2. Adding Links

Overview
You will create a "link" what allows someone to email you about how awesome your web site looks ... or just say "Hi". This link will bring up an email window with your Edison email address already in it!
You will also create a link on each page that allows you to get to the other page.
Moving from one page to another is called "navigating", which is also what sailors do when they sail from one place to another. This concept is what gave Netscape Navigator it's name.

Click here for page 1 example        Click here for page 2 example

Details

a. Start a new Navigator window and open up each file you just saved in step 1. To do this, go to 'File', 'Open', choose "Page in Composer...", and select the first page file.
b. Near the bottom of the page, use your mouse to highlight the text that says "Click here to send me mail". In the "toolbar" at the top of the browser window, there is a picture of a single chain link. This picture is also called an "icon". If you place your mouse over it, the word "Insert Link" will appear below it. Click on this and a window will pop up (called a "pop-up" window). Enter the following line in the 'Link to' box: mailto:joeking@academy20.edisonproject.com
Replace 'joeking' with your email name. Click on the "OK" button. The page text should now be underlined to indicate that it is a link, although it will not function in Composer ... only in Navigator.
c. At the bottom of the page, use your mouse to highlight the text at the bottom of the page that says "Click here to read about some of my favorite things." Since this is the first page, we want to create a link to the second page. Again, click on the link icon , then the "Choose File..." button select your second file name, click the "Open" button, and then "OK". Save your work using the 'File' pulldown and then 'Save'. Now open the second page in Composer and do the same thing, but this time you will be creating a link to the first page. Then save your second page.
d. Now you should test to make certain that the links work properly. First let's go to the first page in Navigator. Click on the "Send me email" link, verify that the email window pops up, type something in and send it to yourself. Then click on the link at the bottom and make sure that you go to the second page. From the second page, click on the link at the bottom and you should go back to the first page. If either one of these do not work, try to figure out what is wrong and then ask for help if you need it.
e. You have just used Composer to modify the template HTML files. To see what the HTML looks like, you can pull down the 'View' at the top of the browser and select 'Page Source'. Pretty cool, huh? In fact, you can look at the HTML source at any of the steps if you want to.

3. Adding Words

Overview
Now it is time to fill in the answers to the questions in the step 1 templates. This will personalize your pages because you will be writing you own words. Examples have been created for you and you should look at them so you understand what each item means and where to fill them in.

Click here for the page 1 example        Click here for the page 2 example

Details

Adding your own words is easy with Composer. All you have to do is open each page, use the mouse to position where you want to enter some words, and start typing. When you are done, save your work. You may also want to modify the font type and size of the words you entered or some of the words that were already in the templates. You can even make words blink! Just use the lower toolbar or the 'Format' pulldown and the Font, Size, and Style choices. Then open the second page and add your words and customize them as you wish to. Also, as you should do in every step, save your pages under your "copy" file names also and verify in Navigator that your pages display properly.

4. Adding Color

Overview
Now that your pages have the words filled in, it's time to add some color to "liven up" the pages. You will be changing the background color and the color of words in one or both of your pages.

Click here for the page 2 example

Details

a. Changing the color of the background:
From the 'Format' pulldown menu, choose 'Page Properties'. From the popup window, choose the 'Colors and Background' tab, click on the 'Use custom colors' radio button, then the rectangular 'Background' button. That will pop up a small window from which you can choose the color that you want the background to be. If later you decide that you want a different color instead, you can come back to this step and change the color.
b. Changing the color of links:
Now that you have changed the color of the background, it may be difficult to see the link text. If so, either change the background color or change the color of the link. To change the link coolor, highlight the link text, choose the 'Format' pulldown from the top toolbar, select 'Page Properties', click on 'Use custom colors', and then the 'Link Text' button. Select a color for the link text that will show up well against the background color. Click on 'Apply' to see how it will look. If you like it, click 'OK'. Do the same for the 'Active Link Text' and 'Followed Link Text' buttons.
c. Changing the colors of words:
With your mouse, highlight the words that you want to change. Go to the color square icon (on iMAC) or pulldown menu (on PC) in the lower toolbar and choose the color that you want.

5. Adding Images

Overview
Now for some really fun stuff, let's add some images to your pages. There are lots of images available for you to use, but try not to use too many. If you do, the pages will look too "busy" and may take too long to load into your browser. Look at the examples below for some ideas.

Click here for the page 1 example        Click here for the page 2 example

Parents/Teachers: If you have internet access, you probably know that there are many web sites that have images available. Unfortunately, it is quite easy to accidentally find images that are unsuitable for children. Therefore, please exercise discretion if you allow your child to surf these sites for images. The site www.lycos.com has lots of images and even has a child-safe mode called SearchGuard that you can sign up for. If you don't have access to the internet, then you can choose from the images that are already in Edison intranet pages and from those in the examples provided in this step. Alternatively, perhaps you can find the ones that your child would like to have on their page.

Details

a. Downloading an image:
To download an image from a web page, in Navigator place the mouse over the image and hold down the mouse button. Note: If on a PC instead of an iMAC, you will use the right mouse button. Then select 'Save this image as ...' from the popup window and save it.
b. Downloading a background image:
Note: This applies to PC's only since there is no way known to this author to download a background using Netscape on an iMAC. To download an image that is a background on a web page, place the mouse over the background image and press the right mouse button. Select 'Save background as ...' from the popup window and save it.
c. Placing an image in your web page:
Just place the mouse cursor where you want to put an image or highlight what you want to replace (such as I did when replacing the horizontal rule at the top of the page example with the Legos). Then move your mouse to the 'Image' icon in the toolbar. You can identify it by placing the mouse over it and seeing that the words "Insert image" are displayed. Click on the icon and a popup window will appear. Then click on the 'Choose File' button to get the image.
d. Making an image the background:
If you want an image to be the background, such as the clouds in the example, then do the same thing that you did in the previous step but make certain that when you click where you want the image, it is in a area that contains no other image. Doing so will allow a small "Page background" (iMAC) or 'Use as background' box to appear whrn the popup window appears. Then click on that box ... that's it! If you now find that you cannot see your link text because the background image is hiding it somewhat, you may need to change the image or the text color.

6.Adding Sound

Overview
The pages are starting to look quite nice by now, but it is time to make them "multi-media" by adding sound! There are a couple of ways to do this. One is to have a sound play when someone clicks on something (example 1). And the other is to have a sound that plays when someone enters your web page (example 2).

Click here for the page 1 example         Click here for the page 2 example

Details

a. Downloading sounds:
If you have internet access, you can find some cool sounds at lots of sites. The ones in the example came from www.soundcentral.com.
If you like the sounds in the example on page 1, you can download them to your directory. To do this, place your mouse over the "Click here to hear bugs laugh" link and depress the button. Then select 'Save link as ...' to save the WAVE file to your directory. A WAVE file has an extension of ".wav" and is an acronym for "WAVEform audio file format". Other audio formats that should work are AU (AUdio) and AIFF (Audio Interchange File Format).
b. Adding the sound to words:
In the page 1 example, clicking on words played the sound. You may have noticed that it behaved sort of like a hyperlink since it is also underlined and required you to click on it. If you thought about that, then you are very perceptive because you are correct! These are added the same way as hyperlinks. All you have to do is type in the words that will provide the link (such as "Click here to hear Bugs laugh"), click on the 'Link' icon in the tool bar, and choose the audio file (such as "ahoo.wav") from the popup window.
c. Adding the sound to a page:
In example 2, the sound played when you entered the page. Adding this is a little tougher because you will have to add some actual HTML source code for the first time. However, Composer provides a fairly easy way of doing so. Place your mouse at the top of your page and click. Then move the mouse to the 'Insert' pulldown and choose "HTML tag". Then add the following line in the popup window:
<EMBED SRC= "whatsupdoc.wav" HIDDEN="true" AUTOSTART="true"></EMBED>
However, replace "whatsupdoc.wav" with the name of your sound file. Then click OK and go to Navigator to verify that it works. If you weren't intimidated by editing the source, then you will probably be able to handle most of the Special Effects later without a problem.

If you have gotten this far with the detailed instructions, then you are finished with the 6 main steps of this project. Congratulations !!!!