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 created by S. Alexandre, OA Class of 2018:

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

 

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. This will allow you to specify the exact dimensions of the images.
    • Go to Google.com< Image
    • Set the following search parameters:
      • Find images of...: Fill in your search terms.
      • Search Tools>Any Size>Exactly>600 by 600
      • Type of image>photo
      • File type>.jpg
      • You may also search this way:
        • File type>.png
  • 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.jpg
      • 02_rollerskate_600x600.jpg
      • 03_rollerskate_600x600.png
  • Save your images to your new image_project_1 folder.
  • Resize each of the images. Make each image 300 pixels by 300 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.
    • Examples:
      • 01_rollerskate_300x300.jpg
      • 02_rollerskate_300x300.jpg
    • DO NOT DELETE THE 600x600 VERSIONS OF THESE IMAGES! You will need them if it is later discovered that there is a problem with your 300x300 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<at insertion point
    • 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 Box
    • In the Box dialog box, enter the following:
      • Width: 840
      • Height: 685
      • Margin (remove checkmark on Same for All)
        • Left<set dropdown menu to Auto
        • Right<set dropdown menu to Auto
      • 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: 600 pixels
    • Border thickness: 0
    • Cell padding: 0
    • Cell Spacing: 0
  • Merge the top row, and enter a title such as this:
    • First Image Project: 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.

 

 

 

 

 

 

 

 

 

 

Grading Scale:

A
 
B
 
C
 
D
 
F
 
0