• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 5. Adding User Interactivity

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.


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


This lesson should take about two hours to complete.


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/Nav_bar/…(all files)

Lesson_05_Behaviors/Text/…(all files)

Completed Project:

Lesson_05_Behaviors/Completed/…(all files)



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint