Adding Behaviors and Rich Media - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 386

Understanding Behaviors
In Dreamweaver, a behavior is code added to a Web page that enables users to interact
with various elements in the Web page, to alter the Web page in different ways, or to
cause tasks to be performed. For example, you could stack two AP divs in a Web page,
and then create a behavior that switches their stacking order when the user clicks a but-
ton. The word “behavior” is an Adobe convention for describing interactive functions in
multimedia programs that are managed by the program and accessed through an author-
ing interface, in this case the Behaviors panel.
A behavior is like a mathematical equation: object + event = action . An object is
the element in the Web page to which the behavior is attached, such as a graphic or
a div. An event has two components: the user event and the event handler. The user
event is what the user does to trigger the action. Common user events are moving the
pointer over an object (mouseover) and clicking an object. The event handler is the
code that refers to the event. For example, the code to refer to the mouseover event is
onMouseOver. The action is what happens when the event is performed on the object.
Figure 7-1 describes the three ways to insert behavior functionality into Web pages.

Figure 7-1 Methods of inserting behaviors in Dreamweaver

Tool Description You... Dreamweaver...

Preset
behavior tools

Buttons located throughout
Dreamweaver to perform
common tasks

Enter requested information,
for example, which graphic
to use, in the dialog box, if
necessary

Writes the behavior
and inserts it into
the page

Behaviors panel A prewritten list from

which you choose an event
handler and action for a
behavior

Select the elements of the
behavior from lists

Writes the code and
inserts it into the
page

Custom scripting Code you write usually with

JavaScript in Code view or
in the Script dialog box

Write and insert code in
the page

Displays your code as
a custom script in the
Behaviors panel

A preset behavior tool is the easiest way to insert behaviors into Web pages. You have
already used preset behavior tools, including the Rollover button. When you use the
Rollover button, Dreamweaver inserts a swap image behavior and a preload behavior
as you insert the rollover images. The swap image behavior consists of the action (the
images being swapped) triggered by a user event (the user moving the mouse to place
the pointer over the image). The image is the object. The preload behavior consists of the
action (the image being downloaded) triggered by a user event (the user loading the Web
page into a browser window). The Web page is the object. The behaviors Dreamweaver
inserted appear in the Behaviors panel when you select the object.
The Behaviors panel is like a sophisticated menu for ordering behaviors. After you
select an object, you choose from lists of prewritten actions and event handlers in the
Behaviors panel. Based on your selections, Dreamweaver creates the behavior and
inserts the code. The Behaviors panel simplifi es the process because you can choose
only actions that work with the selected object, and then you can choose only event
handlers that go with the selected action. For example, if the object is selected text, you
cannot choose swap image as the action. If you haven't selected an object, the listed
actions affect the page. Also, you can limit the lists in the Behaviors panel by HTML ver-
sion, browser version, or browser brand and version. In general, more complex behav-
iors require newer browsers.