Thumbnailing Mini-Project

Description

In this project you will be given the original photos from a digital camera of a client. Your client, Ms. Hurlburt, stayed in Chicago during the summers of 2008 and 2009. She wants a web page to show off the pictures.

Take a good look at the resources that come with this project. In addition to the image files, there is a text file containing captions for them. If you sort the images by file name, the captions will be in the proper order.

Editing the Images

1. In your thumbnailing folder there are two image folders. One is for the originals (which are all present) and one for the thumbnails (which you are about to make).
2. Choose a consistent width OR height for your thumbnail images. It can be between 100 and 300 pixels, and you may want to think about any other styles you are going to use when you pick the size.
3. Open Photoshop or your preferred image editor.
4. For ALL of the images in the original folder, do the following:
1. Open the original image out of the "images_original" folder.
2. Go to File, Save As... and save the image in the "images_thumb" folder.
3. Now you are safe to edit the thumbnail without risking saving over the original.
4. Crop the image to focus the visitor on the most important part of the picture.
5. Resize the image so that it is the standard width you chose in step 2.
6. Optional: Add an additional effect to all of your thumbnails that gives them a consistent look.
7. Save. Be sure you are saving in the JPG file type,
5. When this is done for ALL of the images, close your image editing program.

Develop the HTML

1. Copy your template into this project folder. Be sure its file name is index.html
2. Update the TITLE and H1 tags to use a good title for the page.
3. Apply a footer to the page that includes the copyright notice "©2008-2009 Ms. Hurlburt"
4. Add all the thumbnails to the page. For each thumbnail:
1. Use the <img> tag. The src attribute should have a value of "images_thumb/somefile.jpg" while the alt and title attributes should both have the corresponding caption as their values.
2. Around the image tag, place an anchor link tag (<a> tag), so that visitors can click the thumbnail to see the full size picture. The href attribute of your <a> tag should have a value of "images_original/somefile.jpg"
5. Save and view the changes in a Web browser.
6. Test to make sure all of the images are linked to their originals.
7. Add any additional markup you need to organize the content of the page.

Develop the CSS

1. Create a CSS file in the project folder, and make sure it is applied to the page with a LINK tag in the HTML file.
2. Older browsers may automatically put a blue border around linked images. Use the "a img{}" selector to apply your own border property to your linked images. (If you prefer no border, apply border: none; inside that selector to prevent older browsers from showing the blue one by default.)
3. Apply background styles that are appealing but not distracting away from the images.
4. Apply color, font and text styles that make the page easy to read.
5. If you wish to explore spacing, try the margin and padding properties.
6. Use any additional styles to make the page unique and appealing.

Grading Rubric

Sample Screenshot

A completed project might look like the screenshot below. You should design your own color scheme and other styling details.