Mr. O'Connell's Technology Home Page
home courses credentials 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 10 images greater than 600 by 600 pixels. Each image must be directly related to your theme.
  • Try Google's Advanced Image Search. This will allow you to specify the 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

  • Make a thumbnail of each image
    • Open each image in Photoshop Elements
    • Crop as needed
    • Provide any enhancements you wish- color correction, contrast correction, etc.
    • Edit each image down to a height of 150 pixels. Make sure that the resolution of the image is set to 72 pixels per inch before you resize the image.
    • 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")
  • Make a large version of each image
    • Open the original image in Photoshop Elements. Do not use the thumbnail version- it will become pixilated and blurry.
    • Crop as needed
    • Provide any enhancements you wish- color correction, contrast correction, etc.
    • Edit each image to a height of 600 pixels. Make sure that the resolution of the image is set to 72 pixels per inch before you resize the image.
    • 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")
  • In Dreamweaver, open your image gallery and add a new table for your project
    • 11 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
  • 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 10 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
    • 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.
      • 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.
    • 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
  • In the thumbnail gallery, place a named anchor in the cell next to each image.
    • Insert>named anchor or Ctrl+alt+a
    • Make the names short and descriptive
      • pluto
      • venus
  • 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.

Additional steps:

  • 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.
  • To fix the spacing problem in Internet Explorer:
    • In Photoshop:
      • Choose file>new>blank file
      • Width: 30 pixels
      • Height: 60 pixels
      • Resolution: 72 pixels/inch
      • Background: Transparent
      • Click okay
      • File>Save As
      • Navigate to your images folder
      • Format: Compuserve Gif
      • File name: 30x60_spacer.gif
      • Save
    • In Dreamweaver, right click the cell containing the word "back"
    • choose table>split cell
    • split into 2 rows
    • drag the transparent 30x60_spacer.gif into the bottom right cell
    • Select the image, and drag the bottom right sizing handle to fit the space
    • Save and test in Internet Explorer
    • You're done