HCI 201: Multimedia and the World wide Web
Assignment 5

Due 10/29

100 or 170 points

Goal: In this assignment you learn how to use CSS to format a copy of your Homepage and you will create an image map with links to all of your navigation table links. You also have the option to start your form.

To download paint shop pro http://www.jasc.com/download_4.asp?

To download map edit http://www.boutell.com/mapedit/

Grading Criteria HW 5

Example of HW 5

image map example

Part 1, 60 points

• Create a copy of your one of your webpages and save it as a different version with a different name like somepagev2.html-where somepage is the original name and v2 implies this one is different.
• Remove all of the HTML font tags (i.e. font color, size, type).
• Remove all the other html color tags. (bgcolor, table bg, etc)
• Remove your tables.
• You can remove your images if you so desire.
• Make 4 seperate paragraphs
• Now use Embedded CSS to format your:
  • 3 seperate Font sizes -5 pts ea
  • 3 seperate Font Color 5 pts ea
    • use italics and bold with the colors
  • 3 seperate Font faces 5 pts ea
  • 1 Page background color 5 pts
  • Change the link color 5 pts ea
  • Change the visited link color (vlink) 5 pts ea
  • Don't skip any of these format choices even if your original page does not have the same things formatted.

Part 2, 50 points

On your original Homepage create an image map that connects to all of your navigation table links.

To do this

1. Locate an image (large enough to house 5 separate links) from a free graphics
   1. Search for free web graphics using google.
      
      
2. Open the image in a graphics program like fireworks, photoshop, paint shop pro, etc... or use a image map program like mapedit
   
   
3. Determine the X and Y coordinates for at least 5 links.
   
   
4. Turn the image into an image map with at least 5 separate and distinct links.
   1. Make sure each link is far enough away from every other link that selecting one does not select another.
      
      
5. Place the image map on your original Homepage.
   
   
6. Test it live to be sure it works.

Part 3(optional), 70 points.

Design and Create the form page of your site. Use HTML. If you have errors, you will be able to correct and revise your form for the next assignment.

Your form must have at least:

• 4 text input areas
  • At least 2 of those must have specified allotment of characters
  • one must have a multi-line text area.
• a hidden field
• a radio button selection area
• A check box selection area
• A drop down selection area with at least 3 choices
• a submit button with
  • value attributes
  • a form checking function that lets the user know if they have skipped a form
• a working reset button
• and the onSubmit and onReset event attributes.
• You do not need a way to sort and house the data, YET

Be sure to check your pages "live".

Email me a link to your CSS page and your original Homepage with the working image map. If you choose to do part 3, send me that link too.

Refer to Chapter 9 for specifics.