You are going to create a webpage using an image map to provide a visual tour of Lewis Middle School. See Sample. An image map is a picture or graphic with invisible links placed on various parts of the graphic. When clicked, they take you to another website or page. Make sure to read and follow all directions on this page.

You will start with an aerial photo of Lewis, make image links on buildings taking you to a new page where you will place;

• a title
• photo
• an explaination of the photo
• a "Back" button from the clip art library.

Getting Started:

• Create your folder and name it; "lewistour".
• Create your "images" folder inside of it.
• Your webpage will consist of your "index.htm" page plus six other pages;
  
  • 100* (PE Locker room)*
  • 300 (Library)
  • 400 (Mr. C's computer lab)
  • auditorium (front of auditorium)
  • cafeteria (inside cafeteria)
  • office (front of office)

  *black is the name of the pages. *inside the ( ) are the pictures you have to use.

   

Sizing Photos:

You will find the 7 photos needed in a folder on your computer. Three of them are the correct size. Four of them are too large and you must scale them down to half size. You will do this using "Graphic Converter."

Open the program, "Graphic Converter." Pull down the "File" menu and choose "Open." Find one of the photos you wish to open and double click on it to open it. Pull down the "Picture" menu, go down to "Size" then over to "Scale" and let go. Type in .50 in the two boxes and check the "Proportional" box. It should look just like the diagram to the right. This will make the photo 50% smaller, which is what you want. Click OK.

Saving:

1. Once you have scaled it down, it is time to save it.
2. Go to "File" and down to "Save As"
3. Notice that it will say "JPG" in the format box. This is what you want. This is where you could choose to convert it to another format such as gif, pict, tiff, etc. by changing this field.
4. Make sure to save it in your "images" folder.
5. Do this to each photo.

Create your pages:

With all your photos scaled and in your images folder. Now it's time to create all of your pages, import your photos, write your titles and text, select backgrounds, etc.

Image Mapping:

Now that all of your pages have been created. It is time to create your image map and links.

While on your index page, Double click on your image of Lewis. This brings up the image editor. Click on the "Behavior" tab. Click on the "Image Map" radio button. Click on the "Edit" button.

You will see the screen below. Follow the 5 steps in oder to create an image link.

Close the image map box and check to see if the link works in the preview browser.

Do this for each of the buildings and pictures.

Back Buttons:

On each level two page, place a "Back Button" to take you back to the main page. Use a button from the library for this.

Remember: these images from the library will not save into your image folder. After you put the image on your page, you will have to find the files and move them into your image folder and then "Consolidate." Click on the "Consolidate" button, then find the image file that should now be in your image folder. * If you do not do this, the images will not appear when your project is graded or when uploaded to the internet.

Double check all links and graphics, spell check and make sure everything is correct.