Step-by-step Procedure for "ABC Book" Web site

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.  

Copy the template from the CD-ROM:
1. Open the "Templates" folder and drag the "Alphabet Book Template with Sound" from the CD-ROM onto the desktop.  (If you're not going to have sound, use the "Alphabet Book Template").
2. Click on the Back button  to return to the CD window and minimize (you will need it later).
3. If you wish, you may rename this folder to a more appropriate name. Right-click on the folder, select Rename from the pop-up menu, type a new name, and press enter.

Prepare the copied files for editing:
1. Double-click on the copy of the "Alphabet Book Template" 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 "index.htm" to see how the empty template looks in your Web browser. 
6. Click on one of the letters.  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 window.

Adding pictures:
1. Decide on a topic and choose the items to represent each letter: for example, A is for Apple.
2. Find a picture (ideally in jpg format) to go with each letter, rename the picture file "a", "b", "c",  and drag or save them into your ABC book folder on the desktop.  For example, you could
a) have the students draw suitable pictures, scan each one, and save in jpg format as "a", "b", "c"...
b) find suitable copyright-free pictures on the Internet and rename them "a", "b", "c"...
c) use digital photos from a field trip, then resize them to fit on the page and rename "a", "b", "c"...
3. For a quick project, you could make an ABC book of the states of Florida or Maryland, using the pictures on the CD-ROM, in the folders "Florida ABC pix" and "Maryland ABC pix". Simply open one of those folders and drag all of the pictures to your ABC book folder on the desktop.

Using the Google Image search to find pictures on the Internet:  
1. Open a Web browser (such as Internet Explorer).
2. Click Images (below the G in Google).
3. Type in a search term (for example, "endangered species") and click the Search Images button. 
4. Click the thumbnail of the image you want, then click "See full-size image" at the top of the page.
5. If you want to save that image, right-click on the image, select "Save picture as...", select your ABC Book folder in the "Look in" menu at the top, type a, b, c ... into the "File name", and then click Save.  When you save the images, notice what format they are in (shown in the Save dialog box).  JPG images will work directly in the Alphabet Book Template.  If the image is in GIF format, you must change <img src="x.jpg"> to <img src="x.gif"> when you edit the text for that page, in the next step.  Note: You should use only copyright-free images for your projects.

Edit the text on the letter pages:
1. Open you alphabet book folder and double-click on "a.htm". 
2.  If you are using Internet Explorer, pull down the Edit menu    and select Edit with Notepad.  If you are using Netscape, pull down the  the File menu and select Edit Page.
3. Edit "A is for ..." to read as you wish.  (This text will appear above the picture)
4. Type a caption in the space between the <H2> and  </H2> tags.  (Text appears below the picture)
5.  Click File => Save. 
6.  To see how the page looks in the Web browser, click on the Web Browser in the task bar at the bottom of the screen (to activate its window) and click Refresh.  If you see a mistake, click on the Notepad window, correct the text, then Save and Refresh again.  If you are satisfied with that letter, close the Notepad window (click on the x in the upper right).
7. Click on the right-arrow icon to move to the next letter and repeat.

Edit the title/index page file:
1. Go to the index page of your ABC book (click on ).
2.  Using the same technique that you used before (in editing the letter pages), edit "Our ABC Book" and "Created by students of ..." as you wish.
3. Put your name and the date at the bottom of the page in the places indicated.
4. Click File => Save.  Click Refresh to view the changes.

Optional: 

A.  Using other pictures.  If you want to use some other picture for letter x (where x = any letter), simply name the new picture "x.jpg" and copy it to your ABC book folder, replacing the old picture. If the picture is in GIF format, change <img src="x.jpg"> to read  <img src="x.gif"> . 

B.  Adding additional pictures. If you would like to have two or more pictures on a page, 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">

C. Adding a recorded comment for each letter: (if you have used the template with sound)
1. Connect and adjust the multimedia headset with microphone (see page B13).
2. Click  Start => Programs => Accessories => Entertainment => Sound Recorder. 
3. Click on the round red button to begin recording and read the comment for that letter.
4. Click on the square button to stop. Click the triangle button to hear what you have recorded. 
5. If you are not satisfied with that sound, select File --> New, click No, and repeat step 3.
6. Select File --> Save, navigate to your ABC folder on the desktop, type the letter "a" into the File Name box, and click Save.
7. Select File --> New to clear the old sound.
8. Repeat steps 4-7 for each letter of the alphabet, saving each a single-letter file name: a, b, c, etc.
9. Close the sound recorder program when you are done.

Note 1: If you want to replace a old sound with a new one for that page, you must move to a different Web page temporarily before deleting or replacing the sound, then move back to the page to test the new sound.  Otherwise you'll get an error message when you try to delete or replace the sound.  

Note 2: If the microphone does not seem to be working, see the handout "Adding sound to your Web pages" for more detailed instructions (page B13). 

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