Printed from TeacherJohn.com • http://www.teacherjohn.com/cabrillo/dm160b/exercises/ex06.php

You are here: Home > Cabrillo > Dm160b > Exercises > Ex06

Web Publishing 2 (DM160B), Cabrillo College, Spring 2008

Exercise 6
Imagemaps and GIF Animation

Resources for this exercise:

See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
See the Imagemaps section of the Resources page.
See the Animated GIFs section of the Resources page.
See the How to Create Imagemaps With MapEdit tutorial.

To do this exercise you will need to use software to create an imagemap, such as MapEdit or Fireworks. You will also need to use software to create an animated GIF, such as Photoshop, GIF Builder, or GIF Construction Set.

Step 1 - Create a page for exercise 6

1.1) Create a new Web page for exercise 6.

1.2) This page must contain the XHTML 1.0 Strict DocType, as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.3) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

1.4) This page must display your name.and say "Exercise 6."

1.5) This page's <title> must indicate that this is your exercise 6 page, so it should say something like "John Sky's DM160B Exercise 6".

1.6) This page must contain a relative link to your home page.

Step 2 - Create an imagemap

2.1) On this page you will place an imagemap containing at least five "hotspots" that link to different pages. This means that you will need to start with an image that you will use for the imagemap. This image can be a GIF or JPEG, art or photograpgh, and can be an original image or an image that you did not create.

2.2) Make sure that, of your five hotspots, you create at least one hotspot using the rectangle tool, at least one using the circle tool, and at least one using the polygon tool.

2.3) Follow the directions of the tutorial How to Create Imagemaps With MapEdit to cretae your imagemap code. MapEdit is an easy-to-use imagemapping program that is available in the Cabrillo lab on both Macintosh and Windows computers. You can use another program, such as ImageReady, to write your imagemap code if you wish. If you choose another way to write your imagemap code, and you have trouble with it or cannot get its code to work properly or to validate, then use MapEdit to create your imagemap, as it is very simple.

2.4) Modify the code created by the imagemap software to be XHTML 1.0 Strict. (This step may take you more time than you think it should... ) Specifically, you may need to add an id attribute to the <map> tag, and alt attributes to the <area> tags: See the Required attributes (that are sometimes forgotten) section of How to Use the W3C HTML and CSS Validators.

Step 3 - Create an animated GIF

3.1) Create, from scratch, an original animated GIF. You can use Photoshop (available in the Cabrillo lab on the Macs and PCs), to create your animated GIF. Or you can use any other program that is available to you that creates animated GIFs.

For information on how to create animated GIFs, see the Animated GIFs section of the Resources page.

3.2) Your animated GIF must consist of at least five frames.

3.3) When finished, you can test your animation locally by looking at it with a Web browser.

3.4) Place your animated GIF on your exercise page.

3.5) On this page, explain how you created your animated GIF, by answering each of these questions:

What software did you use to create the art used in the animation?
What software did you use to create the animation itself?
How many frames are used?
How many times does it loop?
How long is the interframe delay? (If the interframe delay is not the same for all frames, indicate the times used for each frame.)

Step 4 - Save, upload, and test

4.1) Save this file as "exercise6.html".

4.2) Upload this Web page into your public_html folder on the server. Upload your imagemap image and animated GIF image into your images folder that is within your public_html folder.

4.3) View this page (the page on the server, not the page on your disk) in a browser to make sure the imagemap and your animated GIF work properly!

Go to:
http://www.webhawks.org/~yourusername/exercise6.html
to view your exercise 6 page.

4.4) If there are any errors, fix them, re-upload the page, and validate it again.

4.5) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

4.6) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

4.7) If there are any errors, fix them, re-upload the page, and validate it again.

4.8) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates.