Comparison Tutorial


These are directions for creating a Web page Comparison of 2 images with the UVA MESL resource.


Choosing Two Images

These steps will help you find two images and save information about each image that you will need later.

1. Search the UVA MESL database for 2 images that you would like to use.

2. Open the full records of each image in 2 different windows of Netscape.

3. Highlight the full record of one image.

4. Open Simple Text.

5. Create a new file.

6. Paste the full record into the new Simple Text file.

7. Save as image1_info.

8. Go the full record of the second image.

9. Highlight the full record.

10. Go back to Simple Text and create a new file.

11. Paste second full record into the new file.

12. Save as image2_info.

You should now have selected 2 images and created 2 Simple Text files called image1_info and image2_info.


Starting Your Page

In this next step, you will modify a blank template and insert information about your 2 images.

1. Open the Comparison Blank Template in Netscape.

2. Select "Source" from the View pull-down menu in Netscape.

3. An HTML document called comparison_template.html should be open in Simple Text.

4. Save this file as comparison.html.

5. Give your Web page a title by highlighting "Page Title" where it says "Title of your page goes here".

6. Erase the part about header graphics between the two dotted lines.

7. If you do not want results submitted via e-mail or the Web, erase those paragraphs.

8. Enter the name of the first creator where it says "First Creator".

9. Enter the name of the second creator where it says "Second Creator".

10. Save your file.


Adding links to the MESL Database

In this section, you will make links to thumbnail GIF images,large JPEG images, and the full record of the image in the MESL database. You will also copy some information from the full record and paste it into your document.

1.If your file called image1_info is not open in Simple Text, open it now.

2.Copy the URL of the full size JPEG image (starts with http:// at the bottom of the record) and paste into the comparison.html file you are working in below where it says make 1st thumbnail GIF image a link to full size JPEG. It should look like this:
<a href="filename.jpg">.

3. Do the same for the URL of the GIF.

4. In the image1_info file, highlight the title and paste it into the comparison.html file after </b> and before <br>.

5. Do the same for the Dates and Collection only paste it before the <br> since there is no bold tag.

6. In the image1_info file, highlight the URL of the full record and paste it in between the quotes before where it says Full Record.

7. Close the image1_info file and open image2_info.

8. Repeat steps 2-6 for the second image.

9. Add the URL for your home page or class page where it says "This makes a link back to the referring page or class home page" in comparison.html.

10. Enter today's date after "Date last modified".

11. Save your file.

12. Close all open files, but do not quit Netscape.

You have now created a Web page comparison of 2 images!


Uploading Your File Into Your public_html Directory

In this section you will transfer your file from the desktop to your public_html dirtory in your UNIX account. This Internet protocal is called FTP (File Transfer Protocol).Once you do this, anyone can access your Web page if they know the URL.

1. Open Fetch.

2. Enter the host name of the machine where you have an account (for example: poe.acc.virginia.edu).

3. Enter your login ID and your password and select "connect".

4. Once you are remotely connected to your home machine, double click on your public_html directory.

5. Select "Put file".

6. When prompted, choose your comparison.html file and press "return".

7. Back in Netscape, enter the URL of this file after "Location" below the directory buttons. The URL will follow this form:
http://your machine name/~your login id/comparison.html.

8. You should now see your Web page!

You have just completed this tutorial. Congratulations!

Template Tutorials Menu
UVA MESL Examples


If You Want to Know How to Resize Images

Instead of linking to the small thumbnail image in the MESL database, you can create an image of a different size by downloading the full size MESL JPEG image to your desktop, resizing it in Photoshop or some other Image processing software, and uploading it into your public_html directory.

1. From the UVA MESL Web pages in Netscape, open the first full size JPEG image of the image you want to resize.

2. Using the mouse, click on the image holding down the button until you see a pop up menu, then select "save this image as", rename it, and save it.

3. Open Photoshop and open the image you just saved.

4. In Photoshop, resize your image to the size you want, by selecting "Image Size" from the Image pull-down menu.

5. Index your image to an 8 bit adaptive palette by selecting "Indexed Color" from the Mode menu.

6. Save your image as a Compuserve GIF with the ".gif" extension.

7. Change the URL in your comparison.html to match you new file name

The new URL would look like this:
<img src="new_image_name.gif">

8. Repeat steps 1-7 for the second image.

9. Upload your 2 new images, and revised comparison.html file into your public_html directory but following steps 1-8 in the above section Uploading "Your File Into Your public_html Directory". (Hint: to upload multiple files, select "Put folders and files" from the Remote pulldown menu.)

You now have a comparison with different image sizes!


Template Tutorials Menu
UVA MESL Examples


Last Modified: Monday, 20-Oct-2008 16:36:47 EDT