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"
  • Inside of your image_project_1 folder, create two additional folders:
    • raw_images
    • edited_images
  • 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, this will be reflected in your grade.
  • 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 Adobe Photoshop. 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 edited_images folder inside the image_project_1 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

Create a new DIV for your Image Project One:

  • From your personal website, open gallery.html
  • Select your .css file
  • Select and copy your #main DIV  
  • Click at the end of your #main DIV, and hit Enter  twice
  • Ctrl+V to Paste 
  • Rename the DIV to #image_project_one
  • Change the height to 875px  
    • (Later, you can change the background-color to suit your project.)
  • Ctrl+S to Save

Insert the new DIV into your Gallery page:

  • Select your gallery.html page 
  • Click at the end of your #main DIV, and hit Enter  twice
  • Enter the following:
    • <div id="image_project_one">
      • <p>Something</p>
    • </div>
  • Ctrl+S to Save

Part Three

  • Click "Design" to enter into Dreamweaver's Design View
  • When you preview the Gallery page, you will see your new Div, along with the word "Something". This is place holder text. Leave the text in place for the moment.
  • Click to the right of the word "Something".
  • Insert a new table (Ctrl+Alt+T).
  • In the Table dialog box, enter the following:
    • Rows: 3
    • Columns:2
    • Table Width: 800 pixels
    • Border thickness: 0
    • Cell padding: 0
    • Cell Spacing: 0
    • Click OK
  • Merge the top row,
    • Select the top row
    • Ctrl+Alt+M to Merge
  • Enter a title for your project in the top row.
    • Click inside the top row
    • Enter a title such as this:
      • Image Project One: Guitar Amplifiers
    • Select the new title
    • In the Properties Panel, click the Format drop-down menu, and select Heading 2
  • Center the table
    • Right click anywhere inside your table, and chose Table>Select Table
    • In the Properties Panel:
      • Properties>Align>Center
  • Delete the word "Something". We don't need it anymore!
  • 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.
      • With the image selected, click inside the Alt field in the Properties panel at the bottom of the screen.
      • Type your Alt Text here. Write a short description for your blind or vision impaired visitors.
    • Make sure you only have one image per cell. Make sure each image is in it's own cell. It's easy to make a mistake at this point because dragging your first image into the first cell forces the cells to the right to become very narrow. 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 "Something". We don't need it anymore!
  • There may be small gaps between your images. There are difficult to get rid of! You can hide this problem by adding a Background Color to each row to match the background of your images. Here's an example:
    • <tr bgcolor="#FFFFFF">

Part Four

  • IF you have finished every other requirement of this project, 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