For each photo that you scanned:

1. Open the photo file in Photoshop
2. crop to remove excess undesirable background
3. duplicate (Image —> Duplicate)
4. Save For Web original un-enhanced image as thumbnail 300 pixels wide (remember the format to use?). Save in www\graphics folder - use a filename such as scan_org_300 to indicate that it's the orginal scan and 300 pixels wide
5. do some photoshop enhancements as suggested by the How To page
6. Make a note of exactly what procedures you used
7. Save For Web as thumbnail (300 pix wide), into a filename like scan_enhance_300
8. Save For Web as original size, into a filename such as scan_enhance_full

• We want to put both images side by side in a page to see the difference.
• Make the enhanced one be a link to the full sized enhanced image.
• We want captions that stick underneath the graphic boxes and a contrasting background to bring out the photos.

These instructions are from Practical CSS Layout on the A List Apart site:

Suppose you want to have a bunch of thumbnail images that link to larger versions of the images - a fairly common type of web page. Suppose further that each image contains a short caption that you would like to keep centered underneath its image. And, in the interest of conserving browser window real estate, you want to line these image/caption pairs up in rows across the screen, but in such a way that they will wrap as necessary depending on the width of the browser window (liquid design). With the last requirement we have stepped out of the realm of TABLEs, and into the realm of CSS.

Let's look at this step-by-step. The first requirement is that the thumbnails have their caption centered beneath them. This is relatively straightforward: in your HTML place your image, followed by a break, and then put your caption in a paragraph that is aligned to the center (via CSS).

Next we want to line up these image/caption pairs across the browser window. Using TABLEs for layout, each of these image/caption pairs would go into a separate TD. Using CSS we need to put them into a separate DIV. To get them to line up horizontally across the window we use CSS to FLOAT each of these DIVs to the left.

Here is what the CSS might look like at this point:

.float{
	float: left;
	width: 320px;
	padding: 10px;
 }

.float p {
	font-size: 9px;
	text-align:center;
}

• Open Design : CSS styles pane
• Click the New CSS Style button
• Type : • Make custom style class
  Define in : • This document only
  Name : .float
• Category : box - input float, width and padding options (above)
• OK
• Now repeat to make a new CSS Style
• Type :• Use CSS Selector
  Define in : • This document only
  Name : .float p
• Category : Type - choose size and other possible settings
• Category : Block - Text Align : Center

Note that we set the width of the box to be slightly larger than the image and allow a 10px padding. Also we set the font size of the caption to be smaller.

Now drag the 300 pixel wide original scan into the page which creates the <img> tag.

<div class="float">
  <img src="rugby/garvey_glou_pa300.jpg"  />
  <p>Marcel Garvey scores for Gloucester again</p>
</div>

Now drag the 300 pix enhanced image underneath this one and add the same html codes and save. Add a description of the Photoshop enhancements you used. Notice how smoothly the images reshuffle when the browser window is made narrower.

Looking at the class page, how did I manage to get those cool boxes?
Here's how from the same article as above:

Now, suppose you had more than one category of thumbnails you wished to display on your page, and you want to group them visually, with a background and/or border. Simply enclose them in a container DIV:

Now create a new custom CSS style (class):

.container {
  border: 2px dashed #333;
  background-color: #000000;
  }

However when we do this we run into a problem. When you float an element with CSS, it no longer takes up any "space" and the background and border show up above the images instead of surrounding them. We need to put some content other than the floated DIVs into the container DIV. Like a spacer DIV:

Add this custom CSS style (class):

.spacer {
  clear: both;
  }

<div class="container">
<div class="spacer">&nbsp;</div>

<div class="float"> 
<img src="rugby/garvey_glou_pa300.jpg" />
<p>Marcel Garvey scores for Gloucester again</p>
</div>

<div class="spacer">&nbsp;</div>
</div>

You should have an original and enhanced graphic for the two photos you scanned (total 4). Insert all these four images into the "container" as shown above. The caption on the enhanced image should describe the steps you used in Photoshop to enhance it (use my class example page as a model).

Finally, the enhanced image should be linked to it's full sized version so that clicking on it will fire up a window with the full sized image.

Remember to save the html page in your web area and post the URL to it into a new blog entry in your personal blog.