Griffin | Web Design
 
Resume Table of Contents  

Web Design
HTML

Chapter 5
Creating an Image Map

 
State Standards
 
  • WD 2.3 Content Standard:
    Students utilize graphics and multimedia in a HTML/XHTML document. (A1.9.1)(A1.9.6)WD 2.3.4 Explain the concept of an image map
  • WD 2.3.5 Create an image map for a given graphic
  • WD 2.4.5 Link one web page to another page by clicking a graphic image utilizing a combination of the <a href=”file:…>,</a> with <img src=…>
  • WD 3.1.6 Edit, crop, and resize existing photographs from a scanner and/or digital camera (A1.3.1)
  • WD 3.1.7 Optimize and export graphics to improve web page loading time
Chapter Objectives
 


Student will:

  • Define terms related to image mapping
  • List the differences between server-side and client-side image maps
  • Name the two components of an image map and describe the steps to implement an image map
  • Distinguish between appropriate and inappropriate images for mapping
  • Describe how the x- and y-coordinates relate to vertical and horizontal alignment
  • Open an image in Paint and use Paint to map the coordinates of an image
  • Create a table, insert an image into a table, and use the usemap attribute to define a map
  • Use the <map> </map> tags to start and end a map
  • Use the <area> tags to indicate the shape, coordinates, and URL for a mapped area
  • Use Fireworks to highlight hot spots for an image map. (Make it look clickable!)
Why learn image maps?
 
  • "Image Maps allow you to make images 'clickable' ...provides a creative way to make navigational elements... " (P234)
1. HTML Assignment
Duration: 1 Period
 

Read/Skim Chapter 5/CH5 PowerPoint

Print, staple, and complete the Chapter 5 Questions.

Grading:
1. Questions

 ___ 15 points

Total  
 ___ 15 points
p. 234 - 254
2.

Lecture CH5

  • Introduction to Image Maps (237)
  • Creating an Image Map (243)
  • Using Paint to Locate X- and Y- Coordinates (249)
3.

HTML Project 5 Assignment
Duration: 1 Period

Begin the web page starting on page 255. Create a new folder in HTML named CH5 and save as brightidea.html in the CH5 folder. (Note: There are no spaces in the file name.)

  • Creating the Home Page (255)
  • Adding Text to a Table Cell (216)
  • Coding the Image Map Using HTML Tags & Attrbts (265)

Make sure to type your name, Period, date, and class at the end of the Web page.

home tour

Grading:
1. image  
2. text paragraphs  
3. e-mail link  
4. functional image map  
5. text links with --> ~  
6. name, period, date, class  
Total  
 ___ 10 points
p. 255 - 273
4.

HTML Apply Your Knowledge Assignment
Duration: 1/2 Period

p. 275 - 276
 

1. Editing the Apply Your Knowledge Web Page

Open sample.htm in the Chapter 5/Apply folder. Complete the Web page outlined on pages 275 - 276. Save as apply5-1solution.htm. You may use Dreamweaver to complete this assignment.

Note 1: Apply the style5.css to apply5-1solution.html

Note 2: Google 2012 Quarter Results and link each of the results. (1st, 2nd, 3rd, 4th)

Make sure to type your name, Period, date, and class at the end of the Web page.

apply5-1

Grading:
1. 4 clickable areas  
2. 1st stack: 1st Quarter  
3. 2nd stack:2nd Quarter  
4. 3rd stack:3rd Quarter  
5. 4th stack:4th Quarter  
6. all san serif font  
7. Heading / Title / Text  
8. text links with --> |  
9.



2nd Paragraph indented / Name not indented /
Links centered
 
10. name, period, date, class  
Total  
 ___ 10 points

Sales by Quarter

Insert information here that describes a sales effort. You can use a school fund drive as an example, a relative's company, or find a company in the news. Determine where sales were for each quarter, then create a Web page to which you will link when a visitor clicks one of the bars on the chart or a text link. In the secondary Web pages, be sure to have product information and present reasons why sales went up or down. For instance, sales of swimming pools may go down in the Midwest during the fourth quarter, whereas downhill ski equipment may not be selling in Arizona in the summer.

Use this second paragraph to describe sales in general. This Web page might be a link from the corporate home page. Contact information may be appropriate here, but it should be relative to the sales department.

1st Qtr | 2nd Qtr | 3rd Qtr | 4th Qtr

(Make sure to have styles5.css saved in the Chapter5/ChapterFiles Folder from page 271.)

5. HTML In the Lab Assignment
Duration: 1/2 Period
p. 279 - 280
 

Start a new HTML file with the title, lab5-1solution.html. Complete the Web page outlined on page 279 - 280.

Note 1: Apply the style5.css to apply5-1solution.html

Note 2: Link relevant web sites for BOTH the image and text links.

Also include text links below the image including your name, Period, date, and class at the end of the Web page. Use san-serif fonts.

Lab5-3

Grading:
1. 6 clickable areas  
2. relevant text links  
3. HTML Title  
4. san-serif fonts  
5. name, period, date, class  
Total  
 ___ 10 points
6. Intro to Fireworks / Image Maps
Duration: 2 Periods
 
Project Objective  
 
  • Edit images to highlight hot spots for an image map.
 
 

Cases and Places - Case: Linens N Things

  1. Download the first image.
  2. Follow the lecture to create the second image.
  3. Use the new image in a web page to link to a business.

LnT1(Before)

 
 

 

 
  LnT2(After)  
 
Grading:
1. Edited Image (yellow moved)  
2. 2clickable areas / text links  
3. HTML Title  
4. san-serif fonts  
5. name, period, date, class  
Total  
 ___ 10 points
 
7. HTML Assignment
Duration: 2 Periods
 
 

Cases and Places - Case *: FHS Map

Use the linked image to create an image map of the C-Hallway. Highlight the rooms below to identify them as "linked" and then create an image map linking the room to a corresponding related web site. (i.e. C209 could link to a generic accounting web site.).

     Anderson - C201 (Business Math, Accounting, DAR)
     Lidy - C203 (Computers, Business Management)
     Cox - C208 (Programming, DAR)
     Bankert - C209 (Programming, ACP Business, Personal Finance)
     Griffin - C210 (Web Design, Entrepreneurship)
c-map

Grading:
1. Edited Image
(highlighted rooms, quality)
 
2. 5 clickable areas / text links  
3. HTML Title / Heading  
4. san-serif fonts  
5. name, period, date, class  
Total  
 ___ 10 points
 
8. HTML Assignment
Duration: 2 Periods
 
 

Extra Credit - Rollover Images in Fireworks OR New USA Map

  1. Search for Rollover Image in Fireworks
  2. Create each C-Hallway room as a rollover image
  3. 10 Points

OR

usa small 1 usa small 2

  1. Search Google for a new black and white USA Map (Don't use the small images above. Find nice ones on Google.)
  2. Save the map
  3. Color 5 - 10 states
  4. Create each as a link just like the assignment above.
  5. 5 Points
Grading:
1. Edited Image
(highlighted states w/ quality)
 
2. 5 clickable areas / text links  
3. HTML Title / Heading  
4. san-serif fonts  
5. name, period, date, class  
Total  
 ___ 5 points



 
9. Optional – Complete the Online Practice Test  
10.

CH5 Quiz
Duration: 1/2 Period

Use the linked image to create an image map of the C-Hallway. Highlight the rooms with the solid color identified by the teacher. (i.e. PINK) Also blur the room numbers to match the image. Then create an image map linking an appropriate web site for that teacher.

     Asher - C202 (Consumer and Family Studies - Foods)  
     Asher - C204 (Consumer and Family Studies - Sewing)

quiz

After the text links on the web page answer the questions shown below in #6.

Grading:
1. Edited Image (highlighted rooms, text is readable - light vs dark)  
2. 2 clickable areas / text links  
3. HTML Title / Heading  
4. san-serif fonts  
5. matched blurred text  
6.

include:
  - why use image maps
  - why edit photos in Fireworks      for an image map

 
7. name, period, date, class  
Total  
 ___ 20 points

Quiz Sample

quiz


 

Additional Resources

A.

Online Textbook Resource
http://oc.course.com/sc/html6e/index.cfm?action=learn


top