Lesson 5. Adding User Interactivity

In this lesson, you will use behaviors to create rollovers, new browser windows, and working navigation bars. A behavior combines a user event (such as moving the pointer over a graphic button) with an action or series of actions that take place as result of that event. Behaviors are prewritten JavaScript codes that you can easily incorporate into your page. You can use behaviors to add interactivity to your pages, enabling your users to change or control the information they see.

You can specify more than one event to trigger a behavior and more than one action for each event. Dreamweaver includes several predefined behavior actions. If you are proficient with JavaScript, you can add your own behaviors. You can also download new behaviors from the Dreamweaver Exchange Web site by choosing Help > Dreamweaver Exchange. If you have an Internet connection, your primary browser will open, and you will be taken directly to the Web site.

In this project, you will create rollovers with images that are already on the page and learn how to make more than one image on the page change at the same time.

To see examples of the finished pages, open Lesson_05_Behaviors/Completed/ rollem.htm for the basic rollover; Lesson_05_Behaviors/Completed/disjointed.htm for the multiple rollovers, pop-up message, and status-bar message; Lesson_05_Behaviors/ Completed/Check_browser/check_static.htm for the browser redirect; Lesson_05_ Behaviors/Completed/lake_tahoe.htm for the new browser window; and Lesson_05_ Behaviors/Nav_bar/nav.html for the nav bar.

WHAT YOU WILL LEARN

In this lesson, you will:

• Create rollovers

• Add user interactivity to your pages by using behaviors

• Add multiple behaviors to one user action

• Create a status-bar message

• Redirect users, based on the browser version

• Open new browser windows and control their placement

• Create a navigation bar

APPROXIMATE TIME

This lesson should take about two hours to complete.

LESSON FILES

Media Files:

Lesson_05_Behaviors/Check_browser/Images/…(all files)

Lesson_05_Behaviors/Disjointed/…(all files)

Lesson_05_Behaviors/Images/…(all files)

Lesson_05_Behaviors/Nav_bar/Images/…(all files)

Lesson_05_Behaviors/Rollovers/…(all files)

Starting Files:

Lesson_05_Behaviors/Check_browser/…(all files)

Lesson_05_Behaviors/disjointed.htm

Lesson_05_Behaviors/lake_tahoe.htm

Lesson_05_Behaviors/lingo.htm

Lesson_05_Behaviors/Nav_bar/…(all files)

Lesson_05_Behaviors/Text/…(all files)

Completed Project:

Lesson_05_Behaviors/Completed/…(all files)