Mr. O'Connell's Technology Home Page

home web design business and personal finance biography links2

Image Project One: Four Square Images

Here is an example:

Image Project One: Pencil Carvings

Pencil carvings: Fists Pencil carvings: Yoda
Pencil carvings: Heart and Hammer Pencil carvings: screw


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 "image_project_1"
  • For this project, you must choose images that are SQUARE. Find at least 8 images that are 600 by 600 pixels (more than 8 is better- you'll have more to choose from). Each image must be directly related to your theme, and must be the correct size. The images you choose 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. If you choose to use images that don't meet this criteria, your project grade will be no higher than 50.
  • Use Google's Advanced Image Search as per previous assignments. .gif, .jpg, and .png files are all acceptable.
  • Rename the images using short, logical names. Start with a number, as shown below. Include the size of the image in the name. As always, make sure you name your files appropriately- lowercase letters, numbers, underscores, and periods (or "dots") only. You must use the same file ending as the original. In other words, rename .jpg with .jpg at the end, and rename .png with .png at the end. Otherwise, the image won't open correctly.
    • Examples:
      • 01_rollerskate_600x600_72px.jpg
      • 02_rollerskate_600x600_72px.jpg
      • 03_rollerskate_600x600_72px.png
  • Save your images to your new raw_images folder inside the image_project_1 folder.
  • Open Photoshop CC. Resize each of the images. Make each image 400 pixels by 400 pixels square with a resolution of 72 pixels per inch. Click here for a tutorial on how to do this. Use the Save As command, and update the size information as you save the new file to your 400x400_72px folder.
    • Examples:
      • 01_rollerskate_400x400_72px.jpg
      • 02_rollerskate_400x400_72px.jpg
    • DO NOT DELETE THE ORIGINAL VERSIONS OF THESE IMAGES! You will need them if it is later discovered that there is a problem with your 400x400 images.
  • Key Concepts (don't laugh- I've had many students who don't really know the difference between these two words!):
    • Click here to learn more about the meaning of the word square.
    • Click here to learn more about the meaning of the word rectangle.
    • Do not download rectangles- follow the directions, and download images that are 600 by 600 only.

Part Two

  • From your personal website, open gallery.html
  • Click below your navigation bar and title
  • Create a new DivTag for your project:
    • Insert<Div
    • Insert<after tag
      • in the dropdownmenu on the right, choose body
    • ID: image_project_one
    • Click New CSS Rule
    • Under Rule Definition, choose This document only from the dropdown menu at the bottom of the dialog box.
    • Click Okay
    • In the CSS Rule Definition dialog box,
      • Click background, and then choose a background color for your project.
      • Next, click Box, and then enter the following:
        • Width: 840
        • Height: 840
        • Margin (remove checkmark on Same for All)
          • Left<set dropdown menu to Auto
          • Right<set dropdown menu to Auto
        • Click Okay
        • Click Okay

Part Three

  • When you return to the Gallery page, you will see your new Div, along with the words "Content for id "image_project_one" Goes Here". This is place holder text. Leave the text in place for the moment.
  • Click to the right of the word "Here".
  • Insert a new table into this row (Ctrl+Alt+T).
  • Configure the table as follows:
    • Rows: 3
    • Columns:2
    • Table Width: 800 pixels
    • Border thickness: 0
    • Cell padding: 0
    • Cell Spacing: 0
  • Merge the top row, and enter a title such as this:
    • Image Project One: Guitar Amplifiers
  • Center the table
    • Right click anywhere inside your table, and chose Table>Select Table
    • Properties>Align>Center
  • Choose your 4 best pictures. Drag each of these edited images from your image_project_1 folder to each cell of the table.
    • Each time, add alt text that describes the picture.
      • You can use plain language for your description.
      • If you read the dialog box carefully, it should be obvious to you how to add alt text.
    • Make sure you only have one image per cell.
    • Make sure each image is in it's own cell. If there are narrow, empty cells beside your images, you have done something wrong.
    • Make sure there are no spaces above or below your image project 1 table.
  • Select and Delete the placeholder text "Content for id "image_project_one" Goes Here"

Part Four

  • Create an image map for each of the four images.
    • Link four websites from each image for a total of sixteen links.
    • Your links need to be high school appropriate, and directly related to the images.
    • Use all three image map shape tools: Circle, Rectangle, and Polygon.
      • In the example below, the right image has the invisible image map. The left image is a screen shot of what it would look like in Dreamweaver. The image below shows the Properties Panel with the Image Map tools circled. The invisible Hotspots link to four different websites.
      image map example
      ancient archetecture Ancient Architecture: 5 examples Egyptian Architecture Roman Architecture Greek Architecture


    image map tool

    • Make sure the hot spots don't overlap. Leave a small gap between them.
    • When you paste in your links, you must replace the "#" with the web address (or URL). Don't leave the # in.
    • Don't forget to add Alt Tags to each sector of your map.
    • Don't forget to test your links.
  • You're done.





Image Project One: 1967 Fender Deluxe Reverb

1967 Deluxe Reverb guitar amplifier, front view 1967 Deluxe Reverb guitar amplifier, speaker
1967 Deluxe Reverb guitar amplifier, chassis view 1967 Deluxe Reverb guitar amplifier, back view


Image Project One: R&B and Hip Hop Music

brandy the singer image_map_link_2

mindless behavior

empire tv show logo image map link 2

trey songz singer
-Created by S. Alexandre, OA Class of 2018