adobe dreamweaver cs5 on demand part 57 pdf

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 Ano

15

15 What You’ll Do

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

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 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

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

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 DreamDream-weaver

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

6

5 3

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

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 supsup-ports different JavaScript features

Some bugs are platform-specific, while others are browser-specific

To ensure that your site will function correctly, Dreamweaver gives 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

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

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

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

1

6

5