adobe dreamweaver cs5 on demand part 57 pdf

ptg
15
15
What You’ll Do
349
Working with Behaviors
Introduction
Everybody loves the versatility that JavaScript can bring to a
Web page, yet not that many people love programming in
JavaScript, to make it happen. Dreamweaver makes your life
easier by allowing you to insert Behaviors, most of which
directly translate into JavaScript. Using behaviors, you can
do things like insert pop-up windows, create disjointed
rollovers, check to see if users have a certain plug-in or what
browser they're running.
The best thing about behaviors and commands is that
they are extendable. Many third party companies and individ-
uals write commands and behaviors for Dreamweaver. You
can download these extensions from the Web, most often for
free!
A
behavior
is a combination of an event with an action
triggered by that event. In the Behaviors panel, you add a
behavior to a page by specifying an action and then specify-
ing the event that triggers that action. Adobe Dreamweaver
behaviors insert JavaScript code in documents to allow users
to interact with a Web page, change the page, or to produce
certain tasks. Behaviors are attached to a specific element on
your page, whether it's a text link, an image, and even certain
HTML specific tags.

An action consists of pre-written JavaScript code that per-
forms a specific task, such as opening a browser window,
showing or hiding an AP element, playing a sound, or stop-
ping a Flash movie. The actions provided with Dreamweaver
are written by engineers to provide maximum cross-browser
compatibility.
In this chapter you'll learn how to apply behaviors to Web
elements, how to edit and modify behaviors; even how to
create and maintain a library of all your important behaviors.
What You’ll Do
Introduce Behaviors
Apply Behaviors to Page Elements
Apply Behaviors to Entire Page
Edit Behaviors
Work with Behaviors
Add Behavior Effects
Go to Another Web Page
Open Another Browser Window
Display Text Messages
Preload and Swap Images
Change Element Properties
Drag an AP Element
Show and Hide Elements
Execute a JavaScript
From the Library of Wow! eBook
ptg
350 Chapter 15
Dreamweaver helps non-programmer types
(you know who you are) use built-in
JavaScript functions that are useful to any

Web project. The code generated is well opti-
mized so you do not have to worry about per-
formance. A Dreamweaver behavior consists
of two parts: An
action
that instructs the
browser what to do, and an
event
that trig-
gers the specific actions.
Dreamweaver comes supplied with dozens
of behavior actions, the most useful being:
◆
Check Plug-in.
The Check Plug-in action
sends visitors to different pages
depending on whether they have the
specified plug-in installed.
◆
Go To URL.
The Go To URL action
opens a new page in the current
window or in the specified frame.
◆
Open Browser Window.
The Open
Browser Window action opens a URL
in a new window.
◆
Popup Message.

The Popup Message
action displays a JavaScript alert with
the message you specify.
◆
Preload Images.
The Preload Images
action loads images that do not appear
on the page right away (i.e., rollover
images) into the browser cache.
◆
Show Pop-Up Menu.
The Show Pop-
Up Menu behavior creates a pop-up
menu within a page.
◆
Show/Hide Elements.
The Show/Hide
Elements action causes specified
layers to be shown or hidden.
◆
Swap Image.
The Swap Image action
creates button rollovers and other
image effects (including swapping
more than one image at a time).
◆
Swap Image Restore.
The Swap Image
Restore action restores the last set of
swapped images to their previous

source files (automatically added
whenever you attach the Swap Image
action).
◆
Validate Form.
The Validate Form
action checks the contents of selected
text fields to ensure that the user has
entered the correct type of data.
NOTE
Behavior code is client-side JavaScript
code; that is, it runs in browsers, not on servers.
Behaviors are attached to a specific ele-
ment on your page, whether it's a text link, an
image, and even certain HTML specific tags.
After you attach a behavior to a page element,
whenever the event you've specified occurs
for that element, the browser calls the action
(the JavaScript code) that you've associated
with that event. (The events that you can use
to trigger a given action vary from browser to
browser.) For example, if you attach the
Popup Message action to a link and specify
that it will be triggered by the onMouseOver
event, then whenever someone points to that
link with the mouse pointer in the browser,
your message pops up in a dialog box. A sin-
gle event can trigger several different actions,
and you can specify the order in which those
actions occur.

In order to make a behavior work, an
action is linked to an event. Events are, effec-
tively, messages generated by browsers indi-
cating that a visitor to your page has done
something. For example, when a visitor
moves the pointer over a link, the browser
generates an onMouseOver event for that
link; the browser then checks to see whether
there's some JavaScript code that the
Introducing Behaviors
From the Library of Wow! eBook
ptg
Chapter 15 Working with Behaviors 351
browser is to call when the event is gener-
ated. Different events are defined for different
page elements; for example, in most
browsers onMouseOver and onClick are
events associated with links, where onLoad is
an event associated with images and with the
body section of the document. Notice the spe-
cific way that JavaScript code is written. It's
not only important to get the spelling of a
code piece correct; in addition, case is impor-
tant. For example onBlur is correct… onblur is
not. The good news is that Dreamweaver
inserts the correct code into the document
through the use of the Behaviors panel.
The possible Events associated with an
Action are:
◆

onBlur.
Activates when a blur event
occurs. A field gains focus when the
user clicks inside the text box, and the
focus is lost (onblur) when the user
clicks outside the box, anywhere on
the page.
◆
onClick.
Activates when the user clicks
the left mouse button on the object.
◆
onDblClick.
Activates when the user
double-clicks the object.
◆
onError.
Activates when an error
occurs during object loading.
◆
onFocus.
Activates when the object
receives focus. A field gains focus
when the user clicks inside the object.
◆
onKeyDown.
Activates when the user
presses a key.
◆
onKeyPress.

Activates when the user
presses an alphanumeric key.
◆
onKeyUp.
Activates when the user
releases an alphanumeric key.
◆
onLoad.
Activates after the browser
loads the object.
◆
onMouseDown.
Activates when the
user clicks the object with either the
mouse or a form button.
◆
onMouseMove.
Activates when the
user moves the mouse over the object.
◆
onMouseOut.
Activates when the user
moves the mouse pointer outside the
boundaries of the object.
◆
onMouseOver.
Activates when the
user moves the mouse pointer into the
object.
◆

onMouseUp.
Activates when the user
releases a mouse button while the
mouse is over the object.
◆
OnUnload.
Activates immediately
before the object is unloaded.
The target browser you select determines
which events are supported for a given ele-
ment.
The power of Behaviors lies in the fact
that they use JavaScript code to create
dynamic and interactive Web pages. Although
JavaScript is not new to Web page design, it's
quickly becoming more and more popular as
the days roll by, and the World Wide Web
Consortium (
www.w3c.org
) is working over-
time to make all the code pieces work the
same on all browsers. However, no matter
how good the code is, there will always be
times when the code warrior (you) decides
that the code needs to be edited or com-
pletely eliminated. Thankfully, with
Dreamweaver, this is no problem whatsoever.
From the Library of Wow! eBook
ptg
352 Chapter 15

Dreamweaver allows you to attach behaviors to links, images, form ele-
ments, or any of several other HTML elements. The Behaviors panel
allows you to attach, modify, and manage behaviors embedded in a
page. In the Behaviors panel, you can use options to show all events
for a specific category, or only the ones currently attached to the page.
The target browser you select determines which events are supported
for a given element. Dreamweaver works well with current browsers.
However older ones may be more limited. Internet Explorer 4.0, for
example, has a much wider array of events for each element than
Netscape Navigator 4.0 or any 3.0 browsers. If you need additional
functionality, you can attach more than one event to a specific action;
for example, when you user clicks on a specific image, the image
changes, and a prerecorded sound plays. When you use multiple
actions, they occur in the order in which they're listed in the Actions
column of the Behaviors panel.
Applying Behaviors
to Page Elements
Apply One or More Behaviors
to a Page Element
Open the Web page you want to
apply a behavior to an element.
Click the Window menu, and then
click Behaviors to display the
Behaviors panel.
Select an element (image or link)
on the page in Design view.
Click the Add Behavior button
(plus sign), and then select a
behavior action from the Actions
menu.

NOTE
Actions dimmed in the
menu can't be chosen for that
particular Web element.
IMPORTANT
The Deprecated
submenu provides features for
those who used them in Dream-
weaver 8 or earlier. Dreamweaver
CS3 or later provides new ways to
perform the same tasks.
Enter the parameters and options
you want for the selected action;
the parameters and options vary
depending on the selected action.
5
4
3
2
1
1
2
4
6
5
3
From the Library of Wow! eBook
ptg
Chapter 15 Working with Behaviors 353
Click OK.

The action is embedded into the
HTML code and appears in the
Behaviors panel. The default event
is onClick.
Click the default Event (onClick),
and then click the Event list arrow
to select the event you want to
associate with this action (in this
example, onMouseOver).
If you want to apply more than one
behavior, repeat steps 4-7.
Click the File menu, point to
Preview In Browser, and then
select a browser to test your Web
page.
In your browser, perform the event
to trigger the action.
10
9
8
7
6
9
7
See Also
See “Checking for CSS Browser
Compatibility” on page 234 for informa-
tion on using browser compatibility.
Did You Know?
You can show events for a specific

browser.
Open the Behaviors panel,
click the Add Behavior button, point to
Show Events For, and then select the
browser that you want to show events.
You can show all events or only the
ones currently attached to the page.
Open the Behaviors panel, click the
Show All Events button to show all
available events, or click the Show Set
Events button to show only the events
currently attached behaviors.
Testing Browser Compatibility
Unlike CGI scripts, the client interprets Behavior JavaScript code. The
good news is that there are currently many early browsers that sup-
port JavaScript. Each browser supports different JavaScript features.
Some bugs are platform-specific, while others are browser-specific.
To en su re th at y our s ite will functi on c or rec tly, D rea mwe ave r gi ves
you the ability to check the site, and list any problems that might occur
with earlier browsers. The two most important ways are to check the
code live in various browsers, or let Dreamweaver check the page for
browser incompatibility issues. To check the code live, click the File
menu, point to Preview In Browser, and then select a browser.
Dreamweaver opens the active page in the selected browser, and you
can check the page for errors live. To check browser compatibility,
click the File menu, point to Check Page, and then select Browser
Compatibility. Dreamweaver checks the current page, and gives you a
list of any possible errors by browser type and version.
For Your Information
From the Library of Wow! eBook

ptg
354 Chapter 15
In addition to attaching behaviors to links, images, form elements, or
any of several other HTML elements, you can also attach behaviors to
an entire document (using the <body> tag). The process to apply a
behavior to an entire page is similar to the one you use to attach a
behavior to an individual page element. The difference is what you
select. For a page element, you select the element; for an entire page,
you select the <body> tag, which applies the behavior to the document.
For example, you can use the Check Plug-in behavior to check for the
existence of media players, such as Adobe Flash, Apple QuickTime, and
Microsoft Windows Media Player, and then redirect a visitor.
Applying Behaviors
to Entire Page
Apply a Behavior to a Web Page
Open the Web page you want to
apply a behavior to an entire page.
Click the Window menu, and then
click Behaviors to display the
Behaviors panel.
Click the <body> tag in the tag
selector at the bottom left of the
Document window.
Click the Add Behavior button
(plus sign), and then select a
behavior action from the Actions
menu.
Enter the parameters and options
you want for the selected action;
the parameters and options vary

depending on the selected action.
Click OK.
6
5
4
3
2
1
3
1
2
4
Did You Know?
You can download and install third-
party behaviors.
If you don’t find the
behavior functionality you need, you
can download and install behaviors
created by third-party developers.
Open the Behaviors panel, click the
Plus (+) button, and then click Get
More Behaviors from the Actions
menu. In your browser, search for the
behavior you want on the Exchange
site, and then download and install it
according to the site instructions.
From the Library of Wow! eBook
ptg
Chapter 15 Working with Behaviors 355
Apply the Check Plugin

Behavior to a Web Page
Open the Web page you want to
apply a behavior to an entire page.
Click the Window menu, and then
click Behaviors to display the
Behaviors panel.
Click the <body> tag in the tag
selector at the bottom left of the
Document window.
Click the Add Behavior button
(plus sign), and then click Check
Plugin.
Select the following options from
the Check Plugin dialog box.
◆ Select. Click the Select option,
and then select a plugin from
the menu (in this example,
Flash).
◆ Enter. Click the Enter option,
and then enter or browse for
the name of the required plugin
(use if your plugin is not
displayed in the Select menu).
◆ If Found Go To URL. Enter or
browse for the name of the URL
to go to, if the required plugin is
found on the visitor's computer.
◆ Otherwise Go To URL. Enter or
browse for the name of the URL
to go to, if the plugin is not

found on the visitor's computer.
◆ Always Go To First URL If
Detection Is Not Possible.
Select if the visitor's computer
does not allow for plugin
checking, and the browser
loads the first URL.
Click OK.
6
5
4
3
2
1
3
2
4
1
6
5
From the Library of Wow! eBook