|[ LiB ]|
The basic mechanics of using Dreamweaver behaviors are simplealthough, as usual, the more you know about what's happening behind the scenes when you apply that Swap Image or other behavior, the better off you'll be.
Because it is a scripting language, you do not need a special program with which to write the script. Scripting languages can and are written as text files. The browser reads the script and executes the functions it finds there.
That event (clicking) triggers an action such as a new window opening, a sound playing, or a picture changing.
The browser is on the alert, constantly watching for events. When the browser detects an event, it looks to see if there's an event handler that contains a series of instructions for handling that event. Those instructions are the action (a window popping open , a sound playing, and so forth.)
An action is made up of one or more scripting statements that are do statements, imperatives that commanddo this, do that, then do the other thing! When an action might get performed more than once on a page, it's more efficient to combine all of those imperative statements into a single unit called a function. A function is a recipe for action. When there are functions involved, the event handler doesn't have to say, "Do this; do that; do the other thing." The event handler can simply say, "Go find this function and perform the actions it specifies."
The central headquarters for working with behaviors is the Behaviors panel (Window > Behaviors). In previous versions of Dreamweaver, it was its own panel, but new to Dreamweaver MX 2004, it's an integrated part of the Tag Inspector (see Figure 13.1)because, of course, the panel displays only behaviors that are attached to the current selection.
To attach a behavior to any page element, you must first select an element that can have behaviors attached to it. This includes links (text or image), images, form elements, and the body of the page itself.
Images and linksthe img and a tags, to be specificrespond to being clicked on or rolled over, so attach a behavior to this kind of object when you want the user to be able to trigger it with a mouse-click or by a movement of the mouse. Image rollovers and status bar changes are popular behaviors for these objects.
Form elements, such as input , select , and submit tags, can respond to being clicked on or to having data entered into them. Attach a behavior to this kind of object when you want it to be triggered by the user entering text in a text field, choosing from a drop-down menu, pressing a Submit button, and so on. The Form Validation behavior can be attached to a Submit button so that it executes when the form is submitted.
The page itself, represented by the body tag, can respond to being loaded or unloaded, to the window being resized, and to other page-related or window- related events. Attach a behavior to the body when you want it to execute automatically as the page loads or unloads. Preloading images, checking for plug-ins, and checking browser versions are generally actions that occur when the page loads.
To select the body tag, either click in an empty area of the Document window to deselect everything else, or go to the Tag Selector and click the body tag indicator there.
When you have the desired element selected, go to the Behaviors panel. Double-check the panel's title bar, which should be displaying the tag that you want your behavior attached to ( body , a , img , and so on). Click the + button to access the Actions list. This list displays all behavior actions installed on your computer. Those that are inappropriate for your current selection and document are grayed-out. You can't choose the Validate Form behavior, for instance, if there's no form in the current document.
Choose an action from the list, and that behavior's dialog box opens. All behaviors display dialog boxes. Fill in any required options and click OK to close the dialog box; the behavior is applied.
After the behavior has been applied, it shows up in the list of behaviors whenever this page element is selected.
When you apply a behavior, Dreamweaver assigns a default event to trigger the actionusually onMouseOver for images, onLoad for pages, and so forth. You can change this triggering event by clicking it in the Behaviors panel to access a list of possible events.
Be aware, though, that not all browsers support all events. Older browsers, for instance, respond only to onMouseOver events for images and text. To tell Dreamweaver what events to display, you need to tell it what browser you're targeting. Do this by clicking the + button to access the Actions list and choosing Show Events For (see Figure 13.2). Pick a browser setting from the submenu here.
In general, the number of events available goes up as the browser version goes up. The safest choice that still gives you a variety of events is 4.0 and Later Browsers.
To make sure you're using events that are supported by the browsers your audience will be using, be sure to pay attention to any warnings Dreamweaver's Browser Check errors list, accessible from the Document toolbar. For more on browser checking, see the section "Checking Against Target Browsers" in Chapter 3, "Creating and Working with Documents."
Whenever you select an item in the Document window, any behaviors that have been applied to it appear in the Behaviors panel. One item can have multiple behaviors applied to it, even triggered by the same event handler. Event handlers appear in the panel in alphabetical order, although they won't execute that way. (Even though onMouseOut is alphabetically before onMouseOver , the mouseout event can't logically happen before the mouseover event.)
If more than one behavior is triggered by the same event, the actions portion of the panel indicates the order in which the actions will occur. Use the up and down arrows at the top of the panel to rearrange them.
To delete a behavior, select it and press the button at the top of the panel.
To change any of the behavior's settings, double-click the name of the behavior or the little gear icon next to it. This opens the dialog box associated with that behavior, ready for inspection or editing.
|[ LiB ]|