This is a simple project, but can get confusing without the proper planning. First read through these steps to find out how to prepare. Don't worry if there is a step you don't understand-- links to relevant tutorials can be found at the end of this article.

Plan ahead

• Make sure to get permission from your subjects to post their pictures on your site. Some people can be pretty touchy and you don't want any lawsuits to float your way.

• Select the images you wish to use and save them in the same directory. It is helpful to label this file "images." If you follow our steps to make a frames site, you will also need smaller versions of each image. It is best to use the same file name as the larger images with the words "thumb" or "small" at the beginning.

• Each image will have arrows that link to the previous image and the next image. You might want to list the order in which you wish to show your pictures so you don't get confused.

You are now ready to create your pages in HTML.

HTML Code

You will first create an HTML template. Once your first page is made, it only takes a few moments to create the rest of your pages. You will simply change the filenames and rename the template. Here is some sample code for putting your images in a table:

<TABLE>

<TR>

<TD ALIGN=CENTER VALIGN=MIDDLE>
<A HREF="image9.html"><IMG SRC="left_arrow_name.gif"></A>
</TD>

<TD ALIGN=CENTER VALIGN=MIDDLE>
<IMG SRC="image1.jpg">
</TD>

<TD ALIGN=CENTER VALIGN=MIDDLE>
<A HREF="image2.html"><IMG SRC="right_arrow_name.gif"></A></TD>

</TR>

</TABLE>

Change the file names in red to match the names of your arrows and your first image. If you name your images "image1, image2" and so on, changing each page will be much easier. Then change the blue file names to match the name of the previous and following HTML pages. Again, it is easiest to name these pages "image1.html, image2.html" and so on.

Once your first page is created and named, you can change the file names again to reflect the next image. For example, if you are creating the page for the second image, your left arrow would point to image1.html and the right arrow would point to image3.html. And, of course, your image tag would refer to image2.jpg. Be sure to choose Save As when you are finished and save this file as image2.html. This will create a whole new page for you and will save your first page in its original form.

Continue this process until you have created a page for each image. You are now ready to get a bit fancy.

Frames Option

When your viewers first access your site, their only option to see your photos is to follow your arrows in a circle. Using frames, you can provide a preview of the images. This gives viewers an option. They may either follow your tour, or click on only the images they wish to see.

Before you create your frames, you need to create a navigation page. This is a simple HTML page that will place the small versions of your images in a row. These images will stay put on the bottom of your page while the top frame changes images according to your viewer's choice.

Here is the code you need for the thumbnail images:

<A HREF="image1.html" TARGET="MAIN"><IMG SRC="thumb_image1.jpg" BORDER=0></A>

Change the blue text to reference the page you already created for image 1. The green text is a frames attribute that tells the browser which frame to use to display the picture. Below is the code to create the frames. You will see where we name the top frame "MAIN." The red text is the name of your smaller image.

Once your navigation page is completed, you are ready to create the frames page. You may copy this code and rename the files.

<FRAMESET ROWS="*,75">

<FRAME SRC="main.html" NAME="MAIN">
<FRAME SRC="navigation.html">

</FRAMESET>

Change the blue text to match the names of your files. The main frame could begin with your first image, or with an intro page that links to the first image in your slide show. We suggest you include a sentence or two that describes the navigation. This way your viewer knows that they may either take a pre-planned tour, or choose the images one by one.

Tutorials You Might Need

The Web Workshop has grown to include over twenty-five articles to help you on your Web way. For this photo album exercise, you will find the following tutorials helpful:

HTML I: Getting Started

HTML III: Add Images

HTML IV: Links

HTML V: Frames

Crunch Graphics for the Web