Adding Dreamweaver Behaviors To Your Web Pages
Andrew Whiteman
JavaScript is a well-established scripting language which creates code that can execute both an HTML page loads and after it has loaded. It is very efficient since it can run independently on the computers of the visitors to your web site. Thus freeing up your server to do other things. It is so widely used on web sites that, though it is possible for a user to disable JavaScript within their browser settings, most people will need to leave it active if they are to interact with the sites they visit. Adobe Dreamweaver allows web developers to add JavaScript to their pages by using what it refers to as "behaviors".
Behaviors are editable Dreamweaver resources which generate one or more JavaScript functions. Each behavior needs to be associated with an element on your web page. After highlighting the element, you click on the Window menu and choose Behaviors. In the top left of the Behaviors window, you then click on the Add Behavior button an icon which looks like a plus sign (+). Choose on of the available behaviors to associate it with the highlighted element.
Whenever you attach a behavior to a web page element, Dreamweaver attempts to guess what the event which should trigger the JavaScript (mouse click, rollover, etc.). If Dreamweaver fails to assign the event that you actually want, simply choose a different event from the drop-down menu next to the event name.
Dreamweaver contains several types of JavaScript behaviors. Some relate to images, others display windows and messages, others can be used on forms and form fields and still others can be used to manipulate CSS attributes. To get a flavour of how behaviors work, let us examine a behavior in each of the above categories.
The classic example of an image manipulation behavior would be the "swapImage" behavior. This venerable JavaScript function causes the source of a given image to change when the mouse passes over the image and back to the original when the mouse leaves the image. This behavior can either be explicitly applied to an image or can be generated automatically by inserting a rollover image.
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.
In the form manipulation behaviors category, we have "Set Text of Text Field" and "Validate Form". The "Validate Form" behavior only applies to text fields and enables you to ensure, first of all, that a field has not been left blank; secondly, that a field contains a valid email address; thirdly, that a field contains a numeric value; and, fourthly, that a field contains a number within a given range.
Dreamweaver has a number of behaviors which can be applied manipulate the CSS attributes associated with a given page element. One such behavior is Show/Hide Elements. This enables you to make the content of an HTML element visible or hidden based on an action performed by the user. You can apply this behavior to the content of an H1, DIV, P(aragraph) basically, any element that can contain stuff.
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".
Author is a developer and trainer with http://www.macresource.co.uk) Macresource Computer Solutions, an independent computer training company offering http://www.macresource.co.uk/courses/dreamwvr.htm) Adobe Dreamweaver training courses at their central London training centre.
|
