UVA MESL--Exhibit Tutorial

Exhibit Tutorial

These are directions for creating a Web page Virtual Exhibit of 5 images with the UVA MESL resource.

WARNING: If you are doing this tutorial after the Comparison Image Tutorial, you should save all your files to disk or delete them since this tutorial uses the same file names for some files which will overwrite your previous files.

Choosing Five Images

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

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

2. Open the full records of each image in 5 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. 13. Repeat steps 3-12 for the remaining 3 images.

You should now have selected 5 images and created 5 Simple Text files called image1_info, image2_info, image3_info, image4_info, image5_info.

Starting Your Page

In this next step, you will modify a blank template and insert information about your 5 images. It would be helpful if you
searched the Internet for relevant supporting materials and had their URL's handy. (Tip: Create a Simple Text file called links and paste URLs into it as you search the Web, that way you can copy and paste them into your new Web page.)

1. Open the Exhibit Blank Template in Netscape.

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

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

4. Save this file as exhibit.html.

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

6. If you do not have a graphic, erase between the dotted lines.

7. Add your header information, or delete in between the dotted lines.

8. In the table, enter the title of the exhibit.

9. Fill in your introductory information.

10. Add links to other Internet Resources (for example, other Web sites, Gopher sites, FTP sites) by using this format: <a href="url of link">name of link</a>.

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 exhibit.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.

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. Enter your image description where it says "First image you search the Web, that waydescription".

8. Save your file.

9. Close the image1_info file and open the next image (image2_info).

10. Repeat steps 2-9 for the remaining images.

11. Delete the extra image block between the dotted lines since we only have 5 images.

12. Add the names of your references if you have any, if not, delete this section between the dotted lines.

13. 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.

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

15. Save your file.

16. 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 exhibit.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/exhibit.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 Compuserve GIF with the ".gif" extension.

7. Change the URL in your exhibit.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 other images.

9. Upload your new images, and revised exhibit.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 an exhibit with different image sizes!

Template Tutorials Menu
UVA MESL Examples

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