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

Second Image Project

Part One

  • Open your personal website.
  • Expand your image folder.
  • Create a new folder, and name it second_image_project
    • Create a subfolder, and name it raw_images.
  • Decide on a theme for your second image project.
  • Your theme must be high school appropriate as Mr. O'Connell would define it. Please use your common sense. Ask Mr. O'Connell or his substitute teacher if you're not sure.
  • Choose something different from your first image project.
  • Choose a theme that will lend itself to square images.
    • Examples of good choices:
      • planets
      • faces
      • flowers
      • anything round or oval
      • swimming pools
      • plates
      • buttons
      • Frisbee
      • Yo Yo
    • Examples of poor choices
      • Cars
      • Full length portraits
      • Trains (from the side)
      • Anything that is rectangular to begin with
  • For this project, you must once again choose images that are SQUARE. Find 32 images greater than 300 by 300 pixels. Each image must be directly related to your theme.
    • Use Google's Advanced Image Search (Click on "+Show Options" at the top of your Google search results page). This will allow you to specify the aspect ratio of the images. You should set the aspect ratio to square.
    • Set the file type to .jpeg
    • If the number next to size are different from each other, you have a rectangle, and not a square.
  • Save your images to your new raw_images folder, located inside of your second_image_project folder.
  • Rename the images using short, logical names that relate to your theme. As always, make sure you name your files appropriately- lowercase letters, numbers, underscores, and periods (or "dots") only.
  • Create another folder inside of your second_image_project folder, and name it w150_h150_72_dpi
  • Resize the images in Adobe Photoshop Elements using the "Process Multiple Files" dialog box.
    • File>Process Multiple Files
    • Set the Source to your raw_images folder.
    • Set the Destination to your w150_h150_72_dpi folder.
    • Check off Resize Images.
    • Put a checkmark on Constrain Proportions
    • Set the Width to 150 pixels
    • Set the Resolution to 72
    • Click Okay
  • Key Concepts:
    • Click here to learn more about the meaning of the word square.
    • Click here to learn more about the meaning of the word rectangle.
    • It is best to use images that are square to begin with, as per the instructions.

Part Two

Your goal is to carefully read and follow the directions below. For this part of the project, I want you to work independently. Do not ask for my help unless there is a technical problem with your computer. I want you to demonstrate your ability to read and follow the directions below in a tutorial fashion.

  • From your personal website, open image_gallery.html
  • Confirm that you have correctly created a master table for this page.
  • Create a new row above your First Image Project.
    • right click> Table> Insert Rows or Columns>insert one row above the selection
  • Insert a new table into this row (ctrl+alt+t).
  • Configure the table as follows:
    • 5 rows
    • 3 columns
    • Table Width: 450 px
    • Border Thickness: 0
    • Cell Padding: 0
    • Cell Spacing: 0
  • Merge the three cells in the top row together.
  • Merge the three cells in the bottom row together.
  • In the top row, type Second Image Project: (Theme), substituting the theme you have chosen for (Theme). For example, Second Image Project: Beaches
  • In the bottom row, type Move your mouse over the images above to see more.
  • Format the background color of the top and bottom rows.
  • Click inside the left cell of your second row.
  • Insert a rollover image.
    • Insert>Image Objects>Rollover Image
  • Follow the instructions in the dialog box.
    • Choose two images from your second_image_project folder.
    • Image Name should refer to the two images you have chosen. For example, "Aruba and St. Marten Beaches"
    • Alternate Text should match your Image Names. For example, "Aruba and St. Marten Beaches"
    • You do not need to put in a URL.
  • Continue this process until you have 9 sets of rollover images.
  • Resize your table as needed so that there are no spaces between the rollovers, and the top row fits the text formatting you have chosen.
  • Format the text in the top row
  • Format the BG Color for the top row
  • Spell check the page
  • Preview your work in both web browsers
  • Adjust and edit as needed
  • Save your work.
  • You're done.

Troubleshooting Guide

  • If the rollover doesn't work, or doesn't work as expected:
    • Select the rollover image
    • Delete it
    • Put it in again
  • In some cases, it's quicker and easier to just rebuild the table and then drag each object into it rather than beating your head against the wall trying to figure out what's wrong with your existing table. Review the instructions above so that you have the correct settings.
  • Select the image, and change the border value to zero in the Property Inspector. Do this for all four images.
  • If the spacing is off on the table:
    • Select the table.
    • Look for the green drop-down menus (above or below the table).
    • Click the drop-down menus directly above the column.
    • Choose "clear column width".
    • Do this for both columns.
    • Click the drop down menu for the overall table
    • Choose "clear all widths".
    • If needed, also choose "clear all heights"