Adding Dreamweaver Behaviors To Your Web Pages by Andrew Whiteman

Adding Dreamweaver Behaviors To Your Web Pages by Andrew WhitemanJavaScript is an easy-to-use programming language which runs client-side (on each web surfer's computer) and adds useful or decorative interactivity to web pages. No extra plug-ins need to be installed into the browser for JavaScript to run and, although it can be disabled by users to stop script running, it is safe to assume that any JavaScript code added to your pages will run on the vast majority of the computers of visitors to your site. Dreamweaver allows you to add JavaScript to your code automatically and easily by using "behaviors".

A Dreamweaver behavior is an automatically generated JavaScript function which is activated by a given user or browser action. To use behaviors, choose Window > Behaviors. Before attaching a behavior, you must highlight one of the elements on your page such as a hyperlink or image. Then you need to choose a behavior by clicking on the plus sign in the top left of the Behaviors window.

Dreamweaver attempts to guess the event that you would like to trigger the behavior such as an onMouseOver, onClick or OnDoubleClick. If it guesses the wrong event, simply choose the correct event from the drop-down menu next to the name of the event.

Dreamweaver has a wide selection of behaviors. However, they fall into four main categories: images, windows and alerts, forms and form fields and CSS. To see how behaviors work, let us look at some examples of some behaviors in each of those categories.

There was a time when almost every website featured the rollover effect on its navigation buttons. With the development of CSS, this is no longer the case. However, the facility of having an image change appearance when the mouse passes over it is still useful. Dreamweaver achieves this effect with the "Swap Image" behavior which can either be added to an image or can be created automatically by inserting a rollover image (Insert > Image Objects > Rollover Image) rather than a static one.

Dreamweaver's "Open Browser Window" behavior allows you to create the controversial JavaScript pop-ups. Due to its extensive misuse, many people have developed an extreme intolerance of this feature. However, there are situations where it is useful. For example, if a user is in the middle of filling out a form and clicks a help icon next to a certain item, a pop-up window is an ideal method of displaying the help topic.

The most important and useful form-handling behavior is "Validate Form". This can be triggered either on submission of the form ("onSubmit") or when a given text field loses focus ("onBlur"). When you assign the behavior, you choose the type of validation you wish to perform: ensuring that the field has not been left blank, contains a valid email address, contains a number or contains a number between two specific values.

Dreamweaver contains a couple of very useful behaviors which manipulate the content of HTML elements. To use these, you need to give the element and ID (for example,

). The DIV element offers the greatest flexibility when using this behavior since it can contain just about anything you want. You highlight the element which will trigger the behavior and then choose Show/Hide Elements from the Behaviors panel menu. Click on any listed element then click either the Show or Hide button.

If you have used several JavaScript behaviors on a page, you may find that the amount of code generated by Dreamweaver becomes quite significant. It is therefore usually a good idea to place all of this code in an external JavaScript file and then link this file to your page. To do this, click on the "Code" button in the top left of the page and locate the SCRIPT tags which contain the JavaScript. Select all of the code between the SCRIPT tags and cut it to the clipboard. Next, create a blank file with the file extension .js and paste all of the code inside it. Finally, to link your page to the .js file, position your cursor inside the opening SCRIPT tag and type src = "myfile.js" substituting the name of your JavaScript file for "myfile.js".