Mr. O'Connell's Technology Home Page
home courses biography links

Thumbnail Project
additional tips

Part One

  • Choose a theme. Your theme must be high school appropriate as Mr. O'Connell would define it. Use your common sense. Ask Mr. O'Connell or his substitute teacher if you're not sure. Students from past years have chosen such themes as trees, beaches, favorite bands, sports teams, puppies, and instruments.
  • Create a new folder inside of your image folder, and name it "thumbnails"
  • For this project, you must choose images that are SQUARE. Find 4 images that are 600 by 600 pixels. Each image must be directly related to your theme.
  • Use Google's Advanced Image Search. This will allow you to specify the exact dimensions of the images.
  • Rename the images using short, logical names. As always, make sure you name your files appropriately- lowercase letters, numbers, underscores, and periods (or "dots") only.
  • Save your images to your new Thumbnails folder.

Part Two

  • Prepare a large 600x600 version of each image
    • Open the original image in Photoshop Elements.
    • Provide any enhancements you wish- color correction, contrast correction, etc.
    • If needed, change the resolution of each image to 72 pixels per inch.
    • Choose "save as", and add "_l" before the file ending.
      • pluto.jpg becomes pluto_l.jpg
    • Save it in the same folder with the original (the folder labeled "thumbnails")
  • Make a thumbnail of each image
    • Open each original image in Photoshop Elements
    • Edit the size of each image ass follows:
      • height of 150 pixels
      • width of 150 pixels
      • resolution of 72 pixels per inch
    • Provide any enhancements you wish- color correction, contrast correction, etc.
    • Choose "save as", and add "_t" to the file name before the file ending.
      • pluto.jpg becomes pluto_t.jpg
    • Save it in the same folder with the original (the folder labeled "thumbnails")
  • In Dreamweaver, open your image gallery and add a new table for your project
    • 5 rows
    • 2 columns
    • 450 pixels wide
    • border 1
    • cell space 0
    • cell pad 0
  • Merge the top row together into one cell, and type the words "Click on the thumbnail to see a larger image" in the new cell
  • Insert your thumbnails into each of the cells below in the left hand column
  • Create an Alt tag for each image.
    • select the image
    • type the name of the image in the property inspector Alt box
  • On the page, type a name for each image in the right cell
  • Right click on your root folder, and create a new folder named "thumbnail_project"
  • Create 4 new pages
    • right click the thumbnail project folder
    • choose New File
    • base the name of each page on the image names you have created. Don't forget to add .html as your file ending!
      • pluto.html
  • Insert a table into each of your new pages. Have only one page open at a time when you are doing this, as it will not work otherwise due to the limited RAM in our computer systems.
    • 2 rows
    • 2 columns
    • 450 pixels wide
    • border 0
    • cell space 0
    • cell pad 0
    • merge the left column
    • Insert your large image into the left cell.
    • Create an Alt tag for the image
      • select the image
      • type the name of the image in the property inspector alt box
    • Type the name of the image in the top right cell
    • Type the word "back" in the bottom right cell
  • Give each page a logical title
  • In the thumbnail gallery, place a named anchor in the cell next to each image, but inside the same cell. Resize the column if you need to make room for it.
    • Insert>named anchor or Ctrl+alt+a
    • Make the names short and descriptive
      • pluto
      • venus
    • Select the image. In the Property Inspector, click on the drop down menu next to the word Align, and choose top
  • Create links from each thumbnail image in the image gallery to the corresponding large image web page
  • Create links from each text label in the image gallery to the corresponding large image web page
  • Create a link from the word "back" on the large image pages to the named anchors in the image gallery
    • To do this, have only the image gallery page and the large image webpage open.
    • Click the Restore Down button in the upper right hand corner of the large image web page. This button is located between the minimize button and the close button.
    • Arrange the two windows so that you can see the back text on the large image web page, and the corresponding anchor on the image gallery web page.
    • Use point to file to link the back text to the corresponding anchor on the image gallery web page.
    • Save both files.
    • Open the next large image webpage, and repeat the same procedure

  • Choose a color scheme for your tables, and change the background colors of the table cells to match your color scheme.

    • Click inside the cell that you want to change
    • Find the button on the property inspector labeled Bg (for Background)
    • Click and drag the eyedropper tool over the image to select a color, or use the palette of web safe colors to choose a color, or type in a hexadecimal color in the space next to Bg in the Property Inspector.
  • Make a back button in photoshop for your large image webpages.
  • Save and test in Internet Explorer. Correct any errors. Save and test again.
  • You're done