Dreamweaver: BehaviorsBehaviors In addition to page layout, Dreamweaver has the capacity to add interactivity to a page with the use of 'Behaviors'. This can be anything from controlling a Shockwave movie, to opening a browser window, to displaying a status bar message. What are behaviors? They are Javascript events that are applied to a specific HTML tag. While you don't need to know Javascript in order to use them in Dreamweaver, it is a good idea to understand a little of how it works. Javascript is called by certain events that happen during the browser session. The way to determine these events is with the use of Event Handlers, such as onClick or onMouseover. Dreamweaver uses these event handlers within the Behaviors Palette, and they are used to determine when the behavior will go into effect. In this section you will learn how to use Dreamweaver Behaviors, how to apply them to specific HTML tags, and how to use some of the behaviors that are built in to Dreamweaver. The Behaviors Palette The Behaviors Palette is accessed from the Window Menu by selecting 'Behaviors', or by pressing F8 on the keyboard. There are several components of the palette:
Creating a Behavior To create a behavior, you must first decide which HTML tag it will be applied to. This decision will depend on the type of behavior you would like to add. Once you have decided on the tag, you must select it. This can be done by placing the cursor within the element on your page, or by selecting from the Tag list at the bottom: Once you have selected the tag, click on the + button on the Behaviors Palette. This will bring up a list of the Behaviors available to Dreamweaver. Click on the one you wish to use, and a dialog box will come up. The dialog box varies depending on the Behavior you wish to use. Once the Behavior has been created, it will appear in the Behaviors Palette. You can now modify the Action of the Behavior by double clicking on the text within the Action field. For the above example, that text would be 'Go To URL'. This will bring up the same dialog box with the information already filled in. You can also change the Event that will trigger the Behavior. We will now talk about the different events that can be used and when to use them. Behavior Events There are several events that can trigger your Behaviors. There is a complete listing in the Dreamweaver Help section. Here are a few of the more common events:
To change the Event, highlight the existing event by clicking once, then bring down the menu that will give you a list of other available events. Status Bar Messages A status bar message is a custom message that appears on the lower left corner of the browser. This usually happens during an onMouseover event. These are probably the easiest Behaviors to create in Dreamweaver. Follow these steps to create a status bar message:
Well, almost done. You don't want that message to display the entire time someone is at your page, do you? If not, you need to create an onMouseOut message. To do this, simply follow the above steps, but instead of a message hit the space bar once. Then select the new Behavior in the Palette, and change the event from onMouseOver to onMouseOut. Popup Windows You can also create a Popup Window with Behaviors in Dreamweaver. Follow these steps to create a popup window:
This can also be used with other events, such as onMouseOver or onLoad. If you would like to have a browser window open when a page is loaded, simply select the <body> (lower left corner) before setting your behavior and follow the same steps as above. Swap Image This effect has been called many times, such as Mouseovers, Rollovers, and more. Dreamweaver can accomplish this with the Swap Image behavior. This can be done quite easily:
There are also two checkboxes that ask if you want to Preload images and Restore onMouseout. It is recommend that you check both of these. You can also preload several images at one time by using the Preload Behavior while the <body> tag is selected. If you are using multiple or complex mouseover effects, you can select Restore on Mouseout manually by using the original image as the source and using the onMouseout event.
|