1. LESSON 4
Module 4: Working with Images
Navigation Tools

2. In this lesson, we will:
Investigate different methods of Web page navigation .
Discuss what you know, what you want to know, and finally what you learned about navigation .
Create navigation tools (continuing the “your interests” theme).

3. Guiding Questions How does a user get around a Web site?
What do they click on to get to other areas of a Web site?
What prevents a user from getting to a desired location?
Use the guiding questions as a class starter, allowing the students time to answer the questions in their journal. Discuss student answers to the questions.

4. Web sites Button Examples: http://www.crystalbutton.com/examples.php
Image Map example:
KWL Chart:
index.shtml#graphicOrganizers
Use Web site to give background information and show examples.
Student Worksheet KWL - Available at Education World. Choose Graphic Organizers. Choose KWL Chart.

5. Navigation Tools

6. Navigation Tools What do you know about navigating on the Web?
What do you want to know?
Ask students to answer questions on their KWL sheet and then share with class.

7. Navigation Tool Design
Create a navigation tool that is consistent with the logo and banner you have already created in this module.
Make 3 sketches (buttons, rollovers, image maps).
Choose a style and draw a final copy, using color, on the handout.
Handout: KWL Chart

8. Lesson Review
During this lesson, we discussed different types of navigational tools and their uses, and we created a navigational tool.
Buttons
Rollovers
Image Maps
Image Slicing
Buttons: Buttons are key components in Web design to navigate or link to other sources (page, site, video, document, etc.).
Rollovers: Rollover refers to the button a Web designer creates to interact with the user. It is the visual process of hovering over (rollover) a graphic button, text, or image causing a reaction.
Image Maps: Image map is an image used, like buttons, to navigate through a Web site by clicking on different parts of the image.
Image Slicing: Image slicing is the process of splitting an image into smaller rectangles called slices. Each slice is placed in a HTML table and then optimized to create the smallest file size.

9. Finish the “L” of your KWL sheet
What did you learn about navigation tools?
Can you answer all of your questions from the “W” ?
The teacher will ask students to finish the KWL sheet and share as whole group.

10. Assessment
What three components can Web users click on to navigate through a Web page?
Which component is used most often?
Which component would a user get most frustrated with and why?
Ask students to answer questions in their journal, with a partner, or as a whole class.