Dreamweaver Tutorials

Dreamweaver Behaviors

Dreamweaver behaviors using javaScript behaviors

Dreamweaver Behaviors

Dreamweaver behaviors using javaScript behaviors

Adobe Dreamweaver helps non-programmers (and beginners) use certain in-built javascript functions that are useful to any web project. The code generated is very well optimized so you needn't worry about performance.

Prerequisite Knowledge

This tutorial teaches you how to create pop-up windows, jump menus, swap images, and play sound using Dreamweaver behaviors and thus assumes you are familiar with some design software, even if you are new to Adobe Dreamweaver. However be assured that our detailed instructions can be followed by even a total novice.

You Are Here ::: Home >> Free Tutorials >> Dreamweaver Tutorials >> Dreamweaver Behaviors

What is a Behavior?

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 specifying the event that triggers that action. Dreamweaver behaviors place JavaScript code in documents to allow visitors to interact with a web page to change the page in various ways, or to cause certain tasks to be performed.

Note: Behavior code is client-side JavaScript code; that is, it runs in browsers, not on servers.

Events are, effectively, messages generated by browsers indicating 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 (specified in the page being viewed) that the browser is supposed to call when that event is generated for that link. Different events are defined for different page elements; for example, in most browsers onMouseOver and onClick are events associated with links, whereas onLoad is an event associated with images and with the body section of the document.

An action consists of pre-written JavaScript code that performs a specific task, such as opening a browser window, showing or hiding a layer, playing a sound, or stopping a Macromedia Shockwave movie. The actions provided with Dreamweaver are carefully written by Dreamweaver engineers to provide maximum cross-browser compatibility.

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. Note: A single event can trigger several different actions, and you can specify the order in which those actions occur.

To view all available behaviours for a tag go to Window > Behaviours, the Tag Inspector Panel will show up with the Behaviours Button as pressed. Just click on the plus (+) button shown and you'll see all the behaviours listed. Some of the other inbuild features of Dreamweaver are also behaviours like for example creating a rollover image via Insert > Image Objects > Rollover Image.

The most Useful Behaviors are as follows (click the links on the behaviours to read our detailed Tutorial on them) :

Continue reading about how to use behaviors by checking out the links to the specific behavior's tutorial in the list above.

Software Required

Adobe Dreamwever (Macromedia Dreamweaver prior to version 8). Please check out the compatible versions listed in the box below. Since this tutorial series covers the core functions of Dreamweaver to create pop-up windows, jump menus, swap images and play sound using Dreamweaver behaviors, mostly any version of these software should be fine.

Compatible Versions of Dreamweaver for this Tutorial

Dreamweaver CS6 Dreamweaver 4-8 | Dreamweaver CS3 | Dreamweaver CS4/CS5/CS6
Note: The instructions in this tutorial are same across all Dreamweaver versions listed above; Screenshot images (if any) may differ. Recommended Version: Dreamweaver CS6
Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks!