Site Links

Home

Instructor Schedule

Tutorials

Resources (and student recommendations)

Conditions of Use

graphic of lilac and teal shape

 

 

Behaviors

In this section, you will learn

What are behaviors?

In Dreamweaver, you can attach a behavior to just about any html tag, such as <body>, <image> or <textarea>, and your Web page or site will interact with your viewer. Behaviors are a set of JavaScript-based extensions...but you don't have to know JavaScript to use them! Dreamweaver does it all for you, using their unique Windows feature. You can even go online and receive extensions built by other programmers, or share behaviors you yourself create. To visit the Macromedia Exchange for Dreamweaver, you can click on this link.

Because the behaviors are JavaScript-based, they will be supported to varying degrees by all existing browsers. Through Dreamweaver, you are able to select a JavaScript command that works with all browsers, a subset of browsers (such as 3.0 and above), or just one browser in particular. Selecting an action that then happens is simply a matter of selecting the action from a dropdown menu. Nothing could be easier!

Behavior basics

A behavior is the combination of an action and an event. Or, I should say an event and then the action! The viewer of your page does an event, such as clicking on a link or even just opening a page. Then an action will occur, such as a new browser window opens, or a swap image occurs, or a message will appear on the bottom of their screen. Behaviors are attached to a specific element on your page. This can be a <body> tag, an image, a text link - well, any number of different elements can have a behavior attached to it! All you need is to have that element on the page. You can't, for instance, attach a behavior to an input type unless you have that input type on the page. That makes sense, doesn't it?

There are four steps for adding a behavior to your Web page:

  1. Choose a tag. All behaviors are connected to a specific HTML element, such as the <body> tag or the <textarea> of a form.
  2. Select your target browser. As you are now well aware, not everything that you can do with Dreamweaver can be seen in all browsers. With Dreamweaver, however, you can choose a specific browser, such as IE4, or a range of browsers, such as version 3.0 and above.
  3. Choose your action. Whenever you open the behaviors available using the Behaviors Window, Dreamweaver will make active only those actions available to your specific page. What this means is that you can't attach a behavior unless you have the elements on your Web page that correspond to that action.
  4. Enter the parameters. Each action you choose will have specific parameters (which represent the dialog box that the user sees) that customize the JavaScript code. Depending on the action, you can choose source files, set attributes, or enable specific features.

There are 25 cross browser-compatible actions that comes with Dreamweaver 3, or you can add more by visiting the Macromedia site. A link to this site is available at the top of this page.

Return to Top

Adding a behavior's event and action

When you add or attach a behavior, you assign a certain event to a particular tag. Some events can only be assigned to particular tags, and, in addition, the type of browser the viewer is using will also have an impact on what behavior you may choose. Even in the latest browsers, however, some key events such as onMouseDown, onMouseOver, and onMouseOut work only with anchor tags. To get around this, Dreamweaver will attach the # in the link area, even though the # will not go anywhere. We've talked about this before in class - JavaScript needs a link to attach a behavior, even though the link goes nowhere. Events that use the anchor tag are seen in parentheses in the pop-up menu of events. To add a behavior, you select the object (the tag selector will make this action a little easier), open the Behavior Inspector Window, select the browser target, and then select the add action (+) button to reveal the available options. A dialog box will appear in which you can enter any necessary parameters.

Using Dreamweaver 8, you can change which event triggers the behavior, by clicking on the small arrow next to the event:
graphic showing onLoad in Dreamweaver

graphic: arrow pointing right. Besides the Add Action list of behaviors, you can always go to the Adobe Exchange for Dreamweaver to get more behaviors and add them to your collection!

That really is all there is to it. You don't need to know JavaScript to add them. Dreamweaver provides the tools through their Windows for you to add the behavior. And if you do know JavaScript, you can come up with your own behavior to add to other Web developer's set of tools.

Return to Top

The standard behaviors

Everytime you attach a behavior to a tag, Dreamweaver inserts an event for you. What events you can add depends on the tag you selected and the type of browser you wish for your Web site to "play" to. For every browser combination shown in the Browser dropdown list, there is a corresponding file in the Configuration/Behaviors/Events folder. If you open this folder, you would see an entry that looks something like this:

<INPUT TYPE="Text" onBlur="*" onChange="" onFocus="" onSelect="">

The default event for each tag is marked with an asterisk (*). When you select an action, the default event will appear in the Events pane alongside the action in the Actions pane. Should the default event not be the one you prefer, you can easily choose another by selecting the down arrow next to the displayed default event in the Behavior Inspector. You can even go to the Configuration/Behaviors/Events folder and make the change by moving the asterisk to a different event for that particular tag. But don't do this unless your entirely comfortable with programming. And always make a backup copy of the original! Note, too, that although the Configuration/Behaviors/Events folder contains HTML files corresponding to the six browsers offered in the Events pane's dropdown list, Macromedia asks that you do not edit them, except for one exception, the event handler. My recommendation? Don't change anything in the Dreamweaver code files. By default, Dreamweaver attempts to correct any invalid HTML it finds in this file. If you save files with unwanted or invalid corrections, your file will be corrupted and you will lose access to certain events. You will find most anything you can think of in the developer's section of Macromedia's Dreamweaver Behavior page without you trying to make these changes yourself.

Although any HTML tag can potentially be used to attach a behavior, the most common are the <body> tag (for an entire-page event such as onLoad), the <img> tag when you use that image as a button, and the link tag <a>. The standard 25 actions that come with Dreamweaver 3 each operate independently from the others, although some share common functions. A different dialog box or parameter form will appear for each action you choose.

Action What it Means
Call JavaScript Will execute any JavaScript function you wish upon a designated event, like a mouse click
Change Property Dynamically alters the property of the tags <layer>, <div>, <form>, <textarea>, <span>, <img>, <select> and the <input> types, radio, checkbox, text and password. Remember to name the objects so that Dreamweaver can identify them!
Check Browser This action acts as a type of browser "router" to send the viewer to an appropriate URL where they can view your Web page or site.
Check Plugin

To check if the viewer has the necessary plugin installed, if your Web site requires one.
Control Shockwave or Flash This action is made available if your page has either one installed on it. You can set the action to control the movie in one of four ways: Play, Stop, Rewind, or Go To Frame.
Drag Layer Exactly what you did in Chapter 16. Your viewer can drag-and-drop any layer you designate on your screen.
Go to URL Like a link but with more flexibility. This is especially useful if you are working with frames and wish to load two or more frames simultaneously, with one click.
Jump Menu and Jump Menu Go These become active if you have previously inserted a Jump Menu object. It is used to edit an existing Jump Menu object and/or add the "Go" button.
Open Browser Window Opens a new browser window that has been specified (by you) to an exact size and attributes.
Play Sound Use this to add external controls to an audio file that would normally use the Netscape LiveAudio or Windows Media Player plug-ins.
Popup Message Like the Alert box that can appear when you have an error, you can use this to send a quick message to your viewer
Preload Images Use this if you want an image to appear instantly upon it being called, instead of "as needed"
Set Nav Bar Image If you have a Nav Bar object, this enables you to modify it, including adding, reordering, deleting images as buttons, and setting up advanced rollovers
Set Text of Frame Replaces all the contents of the <body> tag of a frame. Must be within a frameset to use.
Set Text of Layer Replaces the entire HTML contents of a target, if you are using layers
Set Text of Status Bar Like the exercise you will do in Chapter 17, your message will be displayed in the status bar of the screen. The limit to the length of your message will depend on the size of the browser's status bar.
Set Text of Text Field Dynamically update any text or textarea field, provided a text field is present on the current page.
Show-Hide Layer With DHTML, you can have layers appear and disappear on command.
Swap Image and Swap Image Restore You've already used this one when we reviewed rollovers. Use when you have more than two images that you wish to "swap".
Timelines: Play Timeline, Stop Timeline, and Go to Timeline Frame Provides the actions in DHTML animations that will set your Web page in motion.
Validate Form Will check the viewer's input on your form to make sure that they are entering valid information. Won't validate if it is true information, but it will at least make sure that certain errors are eliminated.

Return to Top

Managing behaviors

Besides the standard behaviors that came with your copy of Dreamweaver, existing behaviors can be modified and new ones can be created from scratch. You add a behavior by copying the HTML file to the Configuration/Behaviors/Actions folder and restarting Dreamweaver. If you find that you have added quite a few new behaviors, and your Add Action popup list is becoming a little wordy, you can create a folder within the Actions folder, that will appear as a section. You can even create sub-subfolders!

Altering the parameters of a behavior

  1. Open the Behavior Inspector (Windows > Behaviors)
  2. Select the object or tag to which your behavior is attached
  3. Double-click the action you want to alter (a dialog box will appear)
  4. Make the modifications to the existing setting for the action
  5. Click OK

Sequencing your behaviors

If you have more than one action attached to a particular event, it may be important in what order they appear. You can easily reposition them by highlighting one and using the up and down arrows in the list.

Deleting behaviors

To remove a behavior from your list of actions attached to a particular event, simply highlight and hit delete. If there is only one action, the event is also removed from the list.

Return to Top

Summary

Behaviors can simplify and automate the use of JavaScript within your Web site. Just keep the following points in mind:

  • Behaviors are a combination of events and actions.
  • Behaviors are written in HTML and are completely customizable
  • Different browsers will support different events. Remember who your target audience is!
  • Dreamweaver includes 25 standard actions. A particular object must be included on the current page for some actions to be made available.
link: go to the top
http://www.casabasa.com | email me sharon{at}casabasa.com | © copyright 2002  :::last revised: January 6, 2008 :::