Step-by-step Procedure for "Zoo Sights and Sounds" Project

Make a copy of the template folder and rename it "Zoo":

1. Insert the "Templates" CD-ROM into the CD-ROM drive, label side up.
2. Double-click on "My Computer".
3. Double-click on the icon of the CD-ROM disk. 
4. Double-click the Templates folder on the CD.
5. Drag the "Class Project Template with sound" folder onto the desktop.
6. Close the Templates folder.
7. Rename the template folder "Zoo" (Right-click on the folder, select Rename from the pop-up menu, type "Zoo", and press the enter key

Prepare the copied files for editing:
1. Double-click on the copy of the "Zoo" folder on the desktop.
2. Select Select All from the Edit menu.
3. Right-click on any one of the files and select Properties from the pop-up menu.
4. Make sure the Read-only box is not checked.  If it is, click it so that is not checked. Click OK.
5. Double-click on "title.htm" to see how the empty template looks in your Web browser. 
6. Click on "Index of pages" and go to Page 1.  If you get an error beep and a yellow bar at the top of the page, click on the yellow bar and select "Allow Blocked Content". Minimize the browser.

Adding pictures and sounds:
1. Pictures for the Zoo project might be scanned student drawings, pictures downloaded from the Internet, or digital photos from a digital camera, just as in the ABC book project.  The only difference is that the pictures must be named "p1", "p2",  "p3", etc, for the page number they are to appear on.  The template is designed for pictures in JPG format.  If the picture for a particular page in some other format, simply change the picture link on that page to match the format, i.e. if page 1 has a picture in "gif" format, change "p1.jpg" to "p1.gif" when you edit the text for that page.
2. Sound of the various animals can be downloaded from the Internet (see the folder "downloadable sound and music sites" on the CD-ROM).  The template is designed for sounds in WAV format.  If the sound for a particular page in some other format, simply change the sound link on that page to match the format, i.e. if page 1 has a sound in "au" format, change "s1.wav" to "s1.au".
3. For starters, you can use the pictures and sounds on the CD-ROM, in the folders "Zoo pictures and sounds" and "Alternative zoo pictures".  Simply open the CD-ROM, open one of those folders, and drag or copy the desired pictures and sounds to the "Zoo" folder on the desktop.

Edit the individual pages:

1. Double-click on "page1.htm". This should launch your Web browser, showing a picture of a camel.
2. If you are using Internet Explorer, pull down the HTML Edit menu (the one on the right-hand side of the toolbar, not the usual Edit in the menu bar next to File) and select Edit with Windows Notepad.  If you are using Netscape, select Edit Page under the File menu and skip to 4.
3. This opens Notepad window containing the HTML text of that page. If that does not work, open Notepad first (Start => Programs => Accessories => Notepad) and drag page1.htm in the Zoo folder onto the Notepad window.
4. There are three "placeholders" here that you are to replace:

	a.  PAGE 1 TITLE	This is the main title for that page, shown at the top.
	b.  SUB-TITLE	A sub-title, or it could be the student's name.
	c.  TYPE OR PASTE TEXT HERE 	The bulk of the text (any length)

5.  All you have to do is to replace those placeholders with your own text, either by selecting the placeholders and re-typing, or by Copy and Paste from another document (a student's word processing document, for example). Note: leave the < and > gibberish alone; that's the HTML.
6. To demonstrate how to Copy and Paste text from another document, open  "Ztext.doc" in the "Zoo pictures and sounds" folder on the CD.  This contains some basic information for each of the animals pictured.  Simply Copy from "ZText" and Paste into the coresponding "page.htm" file.
7. If you would like to have two or more pictures on a page, add the new picture to your ABC book folder, then copy the line that says <img src="x.jpg"> (or whatever the letter) and paste it in to the right, separating the two with a <p>. Edit the second tag to match the name of the second picture.  For example:  <img src="x.jpg"> <p> <img src="x2.jpg">
    (Take out the <p> if you'd rather have the pictures side-by-side rather than one above the other).
8. Once you have finished the editing of that page, pull down File => Save to save the file.
9. To see how this page looks in your Web browser, click on the Web Browser in the task bar at the bottom of the screen (to activate its window) and click Refresh.
10. If there is an mistake, bring up the page in Notepad (by clicking on the Notepad icon in the Task bar), correct the text, Save, switch back to the Web Browser, and click Refresh.
11. When you are finished with page 1, click on the right navigation arrow at the top of the page to display page 2.
12. Repeat the above steps for each page: page2.htm, page3.htm, ..., etc., .
13. When you get to the last page, delete the right arrow ("next") by deleting the line that reads 
      <a href="page14.htm"><img src="bf.gif" alt="next"></a>.
14. If any page does not have a sound, you can remove the line that reads <embed src="" width=144 height=45 autostart=true> so the sound controller won't show on that page.  

Edit the index page:

1. Click on the  icon to go to the index page.
2. Edit this page just like you did the other pages (steps 2 and 3, in the previous section)
3. The index page shows a series of links to each of the pages, with placeholders for the titles of those pages: "PAGE 1", "PAGE 2", etc.  Note: leave all the < and > gibberish alone.
4. Replace each of the placeholders with the actual title of that page: "Camels", "Elephants", etc.
5. Select and delete any unused lines from the index.
6. Save the file, switch to the browser, and click on Refresh.

Edit the title page:

1. Click on "Return to the Title Page" to go to the Title page.
2. Edit this page just like you did the other pages, replacing the following placeholders:
4.     MAIN TITLE OF PROJECT           Zoo Sights and Sounds 
5.   SUB-TITLE                                      Virtual Field Trip to the Washington National Zoo
6.     SUB-SUB-TITLE, DATE, ETC    Spring, 2001
7.     TYPE OR PASTE TEXT OF PROJECT DESCRIPTION HERE    Your own introduction
8.  Put your name and the date at the bottom of the page in the places indicated.
9.  Save the file, switch to the browser, and click on Refresh.

(c) Tom O'Haver (toh@umd.edu), Last updated, April, 2006