Chapter 11
Using Behaviors
In This Chapter
- Behavior basics
- Dreamweaver Technique: Incorporating Behaviors
- Adding a behavior’s event and action
- Dreamweaver Technique: Modifying Behaviors
- Looking at the standard behaviors
Behaviors are truly one of the power tools in Dreamweaver. With Dreamweaver behaviors, any web designer can make AP elements appear and disappear, execute any number of rollovers, and even apply an advanced JavaScript effect—all without knowing even a snippet of JavaScript. In the hands of an accomplished JavaScript programmer, Dreamweaver behaviors can be customized or created from scratch to automate the most difficult web effect.
Creating behaviors is one of the more challenging Dreamweaver features to master. Implementing these gems, however, is a piece of cake. This chapter examines the concepts behind behaviors and the reality of using them. It details the use of all the behaviors included with Dreamweaver, as well as some from notable third-party sources. This chapter also contains tips for managing your ever-increasing library of behaviors.
Understanding Behaviors, Events, and Actions
A behavior, in Adobe parlance, is the combination of an event and an action. In the electronic age, you push a button (the event) and something (the action) occurs—such as changing the channel on the TV with your remote.
In Dreamweaver, events can be something as interactive as a user’s click of a link or as automatic as the loading of a web page. Behaviors are said to be attached to a specific element on your page, whether it’s a text link, an image, or even the <body> tag.
Dreamweaver has simplified the process of working with behaviors by including default events in every object on the web page. Instead of having to think about both how you want to do something and what you want to do, you only have to focus on the what—the action.
To understand the concept of behaviors and how they are structured, examine the three essential steps for adding a behavior to your web page:
1. Pick a tag. All behaviors are connected to a specific HTML element (tag). You can attach a behavior to everything from the <body>, to an <a> tag, to the <textarea> of a form, and so on. If a certain behavior is unavailable, it’s because the necessary element isn’t present on the page.
2. Select an action. Dreamweaver enables only those actions available to the specific elements on your page. You can’t, for instance, choose the Show-Hide Elements action until you insert one or more AP elements. Behaviors guide you to the workable options.
3. Enter the parameters. Behaviors get their power from their flexibility. Each action comes with its own dialog box that contains parameters you can use to customize the JavaScript code output. Depending on the action, you can choose source files, set attributes, and enable/disable features. The parameter dialog box can even dynamically update to reflect your current web page.
Dreamweaver CS6 comes with 25 cross-browser compatible actions, and both Adobe and third-party developers have made many additional actions available. Behaviors greatly extend the range of possibilities for the modern web designer—with no requirement to learn JavaScript programming. All you need to know about attaching behaviors is presented in the following section.
Cross-reference: Another approach to behaviors is to incorporate functionality from JavaScript frameworks such as jQuery or YUI. You can learn more about adding these types of enhancements in Chapter 17.
When you see the code generated by Dreamweaver, you understand why setting up a behavior is also referred to as attaching a behavior. As previously noted, Dreamweaver needs a specific HTML tag to assign the behavior (Step 1). The anchor tag <a> is often used because, in JavaScript, links can respond to several different events, including onClick. Here’s an example:
<a href="#" onClick="MM_popupMsg('Thanks for coming!')">Exit Here</a>
You’re not restricted to one event per tag or even one action per event. Multiple events can be associated with a tag to handle various user actions. For example, you may have an image that does all the following things:
- Highlights when the user’s pointer moves over the image
- Reveals a hidden AP element in another area of the page when the user clicks the mouse button on the image
- Shakes when the user releases the mouse button on the image
Likewise, a single event can trigger several actions. Updating multiple frames through a single link used to be difficult—but no more. Dreamweaver makes it easy by enabling you to attach several Go To URL actions to the same event, onClick. In addition, you are not restricted to attaching multiple instances of the same action to a single event. For example, in a site that uses a lot of multimedia, you can tie all the following actions to a single onClick event:
- Fade in an element across the screen (with the Fade action)
- Display a second graphic in place of the first (with the Swap Image action)
- Show the copyright information for the audio piece in the status bar (with the Set Text of Status Bar action)
You can even determine the order of execution for the actions connected to a single event.
With Dreamweaver behaviors, hours of complex JavaScript coding are reduced to a handful of mouse clicks and a minimum of data entry. All behavior assigning and modifications are handled through the Behaviors panel.
Using the Behaviors panel
The Behaviors panel provides two columns (see Figure 11-1) that neatly sum up the behaviors concept in general: events and actions. After you attach a behavior, the triggering event (onClick, onMouseOver, and so on) is shown on the left, and its associated action—what exactly is triggered—is on the right. A down arrow between the event and the action, when clicked, displays other available events for the current browser model. Double-click the action to open its parameter dialog box, where you can modify the action’s attributes.
As usual in Dreamweaver, you have your choice of methods for opening the Behaviors panel:
- Choose Window Behaviors.
- Select the Behaviors tab from the Tag Inspector panel, if visible.
- Use the keyboard shortcut Shift+F4 (an on/off toggle).
Figure 11-1: You can handle everything about a behavior through the Behaviors panel.
Tip: The Behaviors panel can be closed by toggling it off with Shift+F4 or hidden along with all the other panels by pressing F4.
After you have attached a behavior to a tag and closed the associated action’s parameter dialog box, Dreamweaver writes the necessary HTML and JavaScript code into your document. Because it contains functions that must be callable from anywhere in the document, the bulk of the JavaScript code is placed in the <head> section of the page; the code that links selected tags to these functions is written in the <body> section. A few actions place HTML code at the bottom of the <body>. However, most of the code—there can be a lot of code to handle all the cross-browser contingencies—is placed between <script> ... </script> tags in the <head>.
Adding a behavior
The procedure for adding (or attaching) a behavior is simple. As noted earlier, you can assign only certain events to particular tags, and these options are further limited by the type of browser used.
Note: Even in the latest browsers, key events such as onMouseDown, onMouseOver, and onMouseOut work only with anchor tags. To circumvent this limitation, Dreamweaver can enclose an element, such as <img>, with an anchor tag that links to nowhere: src="javascript:;". Events that use the anchor tag in this fashion appear in parentheses in the drop-down list of events—for example, <A> onMouseOver.
To add a behavior to an element in your web page, follow these steps:
1. Select an object (element) in the Document window.
Tip: To assign a behavior to the entire page, select the <body> tag from the Tag Selector (below the Document window).
2. Open the Behaviors panel by choosing Window Behaviors or by pressing Shift+F4.
3. Click the Add (+) button to reveal the available options, as shown in Figure 11-2. Select one from the drop-down list.
4. Enter the desired values in the action’s parameter dialog box.
5. Click OK to close the dialog box when you’re finished.
Dreamweaver adds a line to the Behaviors panel displaying the attached event and its associated action.
A trigger—whether it’s an image or a text link—may have multiple behaviors attached to it. One graphical navigation element can, for instance, perform a Swap Image when the user’s mouse moves over it and a Swap Image Restore when the mouse moves away, and, when clicked, can show another web page in an additional, smaller window with the Open Browser Window behavior.
Figure 11-2: The enabled options on the Add (+) drop-down list change according to what’s on the current page and which tag is selected.
Tip: Dreamweaver includes a Get More Behaviors menu option at the bottom of the Add (+) drop-down list. To use this feature, connect to the Internet and select Get More Behaviors in Dreamweaver. You are whisked away to the Adobe Marketplace & Exchange, a service from Adobe with a huge selection of extensions of all flavors, including behaviors.
Managing events
Every time Dreamweaver attaches a behavior to a tag, it inserts an event for you. The default event that is chosen is based on the selected tag. A single file, HTML 401.htm found in the ConfigurationBehaviorsEvents folder, lists all tags and their events. The entries look like this:
<INPUT TYPE="Text" onBlur="*" onChange="" onFocus="" onSelect="">
The default event for each tag is marked with an asterisk; in the preceding example, onBlur is the default event. After you’ve selected an action and completed its parameter dialog box, the default event appears in the Events column of the Behaviors panel alongside the action in the Actions column.
Tip: If you find yourself changing a particular tag’s default event over and over again to some other event, you might want to modify the appropriate Event file to pick your alternative as the default. To do this, open the HTML 4.01.htm file found in the Dreamweaver CS6ConfigurationBehaviorsEvents folder, switch to Code view, and move the asterisk to a different event for that particular tag. Resave the file and restart Dreamweaver to try out your new default behavior.
If you don’t want to select the default event in a certain instance, you can easily choose another. To do so, click the down arrow next to the displayed event in the Behaviors panel and select the event you want in the drop-down list (see Figure 11-3).
Figure 11-3: You can change the event by selecting a different one from the drop-down list.
Incorporating Behaviors
In this Technique, you add a series of Dreamweaver standard behaviors that display a different image whenever a link is moused over.
1. In the Files panel, switch to the Dreamweaver Bible working site previously created.
2. Go to Techniques11_Behaviors and open the file behaviors_start.htm.
3. Select the text “Living Room” beneath the picture.
4. In the Link field of the Properties panel, enter javascript:; to create a link.
5. Choose Window Behaviors to open the Behaviors panel.
6. In the Behaviors panel, click Add (+) and select Swap Image.
7. When the Swap Image dialog box opens, set the following parameters:
- Select Browse and choose apt_view1.jpg from the Techniques/images folder.
- Clear the Restore Images onMouseOut option.
8. Click OK when you’re done. Note that the behavior has been added to the Behaviors panel with the default event, onMouseOver.
9. Select the text Kitchen North and repeat Steps 4–8, selecting apt_view2.jpg as the file to show in the Swap Image behavior dialog box.
10. Select the text Kitchen South and repeat Steps 4–8, selecting apt_view3.jpg as the file to show in the Swap Image behavior dialog box.
11. Save your page.
When you’re done, each of the three links underneath the picture will have its own behavior; test the page in a browser to verify that the images change when your mouse rolls over the different links.
Note: Although any HTML tag could potentially be used to attach a behavior, the most commonly used by far are the <body> tag (for entire-page events such as onLoad), the <img> tag (used as a button), and the link tag, <a>.
Triggering Custom Functions
Although the standard behaviors can accomplish a great deal—and extensions available from the Adobe Marketplace & Exchange can do even more—sometimes a developer needs to trigger a custom function. Dreamweaver provides a way to link an event to a function quickly, right in the Behaviors panel. The action column of the Behaviors panel not only displays behaviors applied in the usual manner but is also editable. In other words, you can enter your own function call directly into the Behaviors panel, and Dreamweaver writes the code into the tag.
Here’s how it works. Suppose you want to trigger a custom JavaScript function called showTotal() whenever the user clicks a special graphic:
1. Select the image, and in the Link field of the Properties panel, enter javascript:;.
2. In the Behaviors panel, click the Event column and choose an event from the drop-down list. In this case, select onClick.
3. Enter the custom function call and any arguments in the Action column. The function might be entered like this: showTotal('checkout','USD'), where the two arguments are presented in a comma-separated list, using single quotes.
4. Press Tab to confirm the code entry.
If you check the <a> surrounding the image, you find that Dreamweaver has now added the following to the tag: onClick="showTotal('checkout','USD')".
The function call or arguments can include dynamic components; a lightning bolt symbol that opens the Dynamic Data dialog box is available from the Action column. Moreover, you can combine your custom function call with other standard behaviors. To remove the code, select the custom entry and click Remove (–), just as you would for a regular behavior.
Standard actions
As of this writing, 25 standard actions ship with Dreamweaver CS6. Each action operates independently of and is different from the others, although many share common functions. Each action is associated with a different parameter dialog box to enable easy attribute entry.
The following sections describe the standard actions: what the actions do, what requirements must be met for them to be activated, what options are available, and, most important of all, how to use the actions. Dreamweaver CS6 behaviors are designed to work exclusively in modern browsers.
Call JavaScript
With Call JavaScript, you can execute any JavaScript function—standard or custom—with a single mouse click or other event. As your JavaScript savvy grows, you’ll find yourself using this behavior again and again.
Call JavaScript is straightforward to use; simply type the JavaScript code or the name of the function you want to trigger into the dialog box. If, for example, you want to get some input from a visitor, you can use JavaScript’s built-in prompt() method like this:
result = prompt('Whom shall I say is calling?','')
When this code is triggered, a small dialog box appears with your query (here, 'Whom shall I say is calling?') and a blank space for an input string. The second argument in the prompt() method enables you to include a default answer—to leave it blank, just use an empty string (two single quotes with nothing in between), as shown in the preceding code snippet.
Note: You can use either single or double quotes in your Call JavaScript behavior; Dreamweaver automatically adjusts for whichever you choose. I find it easier to use single quotes because Dreamweaver translates double quotes into character entities; that is, " becomes ".
Naturally, you can use Call JavaScript to handle more complex chores as well. To call a specific custom function that is already in the <head> section of your page, just enter its name—along with any necessary arguments—in the Call JavaScript dialog box, shown in Figure 11-4.
Figure 11-4: Trigger any JavaScript function by attaching a Call JavaScript behavior to an image or text.
To use the Call JavaScript behavior, follow these steps:
1. Select the object to trigger the action.
2. From the Behaviors panel, click the Add (+) button and select Call JavaScript.
3. In the Call JavaScript dialog box, enter your code in the JavaScript text box.
4. Click OK when you’re finished.
Change Property
The Change Property action enables you to dynamically alter properties of each of the following tags:
- <div>
- <span>
- <p>
- <tr>
- <td>
- <img>
- <form>
- <textarea>
- <select>
You can also alter the following <input> types:
- checkbox
- radio
- text
- password
The tags, as well as the browser being targeted, determine exactly which properties can be altered. The Change Property dialog box (see Figure 11-5) offers a list of the selected tags in the current page.
Figure 11-5: The Change Property dialog box enables you to dynamically alter attributes of certain tags.
Note: It’s important that you name the objects you want to alter so that Dreamweaver can properly identify them. Remember to use unique names that begin with a letter and contain no spaces or special characters (such as @, ?, and &).
This behavior is especially useful for changing the properties of forms and form elements. Be sure to name the form if you want to use Change Property in this manner. To use the Change Property action, follow these steps:
1. Select the object to trigger the action.
2. From the Behaviors panel, click the Add (+) button and select Change Property.
3. In the Change Property dialog box, choose the type of object whose property you want to change—FORM, DIV, INPUT/TEXT, and so on—from the Type Of Element drop-down list.
4. In the Element ID drop-down list, select the name of the object whose property you want to change.
5. Click the Select radio button and choose the property to change. If you don’t find the property in the drop-down list box, you can type it yourself in the Enter text box.
Note: Many properties in the various browsers are read-only and cannot be dynamically altered. Those properties listed in the option list are always dynamic.
6. In the New Value text box, type the property’s new value to be inserted when the event is fired.
7. Click OK when you’re finished.
Check Plugin
If certain pages on your website require the use of one or more plugins, you can use the Check Plugin action to see if a visitor has the necessary plugin installed. After Check Plugin has examined this, it can route users with the appropriate plugin to one URL and users without it to another URL. You can look for only one plugin at a time, but you can use multiple instances of the Check Plugin action, if needed.
Warning: Test heavily before committing to using this technique as it is not fully supported in modern browsers.
By default, the parameter dialog box for Check Plugin (see Figure 11-6) offers five plugins: Flash, Shockwave, LiveAudio, QuickTime, and Windows Media Player. You can check for any other plugin by entering its name in the Enter text box. Use the name exactly as it appears in bold (without the version number) in Netscape’s About Plug-ins area—for example, Nullsoft Winamp Plug-in for Gecko.
Figure 11-6: Running a media-intensive site? Use the Check Plugin action to divert visitors without plugins to alternative pages.
To use the Check Plugin action, follow these steps:
1. Select the object to trigger the action.
2. From the Behaviors panel, click the Add (+) button and select Check Plugin.
3. Select a plugin from the drop-down list or type another plugin name in the Enter text box.
Note: The names presented in the drop-down list are abbreviated—more recognizable names—and not the formal names inserted into the code. For example, when you select Shockwave, Shockwave for Director is actually input into the code. On the other hand, any plugin name you enter manually into the Enter field is inserted verbatim.
4. If you want to send users who are confirmed to have the plugin to a different page, enter that URL (absolute or relative) in the If Found, Go To URL text box or use the Browse button to locate the file. If you want these users to stay on the current page, leave the text box empty.
5. In the Otherwise, Go To URL text box, enter the URL for users who do not have the required plugin.
6. Should the plugin detection fail—which, as explained earlier, happens regularly in Internet Explorer, whether or not the plugin is actually present—you can keep the user on the initial page. To do so, enable the Always Go To First URL If Detection Is Not Possible option. Otherwise, if the detection fails for any reason, users are sent to the URL listed in the Otherwise field.
7. Click OK when you’re finished.
Drag AP Element
The Drag AP Element action provides some spectacular—and interactive—effects with little effort on the part of the designer. Drag AP Element enables your web page visitors to move AP elements—and all that they contain—around the screen with the drag-and-drop technique. With the Drag AP Element action, you can easily set up the following capabilities for the user:
- Enabling AP elements to be dragged anywhere on the screen
- Restricting the dragging to a particular direction or combination of directions—a horizontal sliding AP element can be restricted to left and right movement, for instance
- Limiting the drag handle to a portion of the AP element such as the upper bar or enabling the whole AP element to be used
- Providing an alternative clipping method by enabling only a portion of the AP element to be dragged
- Enabling changing of the AP elements’ stacking order while dragging or on mouse release
- Setting a snap-to target area on your web page for AP elements that the user releases within a defined radius
- Programming a JavaScript command to be executed when the snap-to target is hit or every time the AP element is released
Cross-reference: AP elements are some of the more powerful features in Dreamweaver. To get the most out of the AP element–oriented behaviors, familiarize yourself with AP elements by examining Chapter 10.
One or more AP elements must reside in your web page before the Drag AP Element action becomes available for selection from the Add (+) drop-down list. You must attach the action to the <body>—you can, however, attach separate Drag AP Element behaviors to different AP elements to get different AP element–dragging effects.
Drag AP Element’s parameter dialog box (see Figure 11-7) includes a Get Current Position button that puts the left and top coordinates of the selected AP element into the Drop Target Left/Top boxes. If you plan on using targeting, make sure to place your AP element at the target location before attaching the behavior.
Figure 11-7: With the Drag AP Element action, you can set up your AP elements to be repositioned by the user.
To use the Drag AP Element action, follow these steps:
1. Make sure that you have one or more AP elements on your page; then select the <body> tag.
2. From the Behaviors panel, click the Add (+) button and select Drag AP Element.
3. If the Basic tab of the parameter dialog box is not selected, select it now.
4. In the AP Element drop-down list, select the AP element you want to make draggable.
5. To limit the movement of the AP element, change the Movement option from Unconstrained to Constrained. Text boxes for Up, Down, Left, and Right appear. Enter pixel values in the text boxes to control the range of motion:
- To constrain movement vertically, enter positive numbers in the Up and Down text boxes and zeros in the Left and Right text boxes.
- To constrain movement horizontally, enter positive numbers in the Left and Right text boxes and zeros in the Up and Down text boxes.
- To enable movement in a rectangular region, enter positive values in all four text boxes.
6. To establish a location for a target for the dragged AP element, enter coordinates in the Drop Target: Left and Top text boxes. Click the Get Current Position button to fill these text boxes with the AP element’s current location.
7. To set a snap-to area around the target coordinates where the AP element falls if released in the target location, enter a pixel value in the Snap If Within text box.
8. For additional options, select the Advanced tab of the parameter dialog box.
9. If you want the whole AP element to act as a drag handle, select Entire AP Element from the Drag Handle drop-down list. If, instead, you want to limit the area to be used as a drag handle, select Area Within AP Element from the Drag Handle drop-down list. L(eft), T(op), W(idth), and H(eight) text boxes appear. In the appropriate boxes, enter the left and top coordinates of the drag handle in pixels, as well as the dimensions for the width and height.
10. To control the positioning of the dragged AP element, set the following While Dragging options:
- To keep the AP element in its current depth (that is, to avoid bringing it to the front when it is dragged), clear the checkbox for While Dragging: Bring AP Element To The Front.
- To change the stacking order of the AP element when it is released, select the checkbox and pick either Leave On Top or Restore Z-index from the drop-down list.
11. To execute a JavaScript command while the AP element is being dragged, enter the command or function in the Call JavaScript text box.
12. To execute a JavaScript command when the AP element is dropped on the target, enter the code in the When Dropped: Call JavaScript text box. If you want the JavaScript to execute only when the AP element is snapped to its target, select the Only If Snapped option. This option requires that a value be entered in the Snap If Within text box in the Basic tab.
13. Click OK when you’re finished.
Note: If you—or others on your team—have the requisite JavaScript programming skills, you can gather information output from the Drag AP Element behavior to enhance your pages. Dreamweaver declares three variables for each draggable AP element: MM_UPDOWN (the y coordinate), MM_LEFTRIGHT (the x coordinate), and MM_SNAPPED (true, if the AP element has reached the specified target). Before you can get any of these properties, you must get an object reference for the proper AP element. Another function, MM_findObj(AP elementname), handles that chore.
Go to URL
Dreamweaver brings the same power of links—with a lot more flexibility—to any event with the Go to URL action. Although frames have largely fallen out of use, one of the trickier tasks in using them on legacy sites is updating two or more frames simultaneously with a single button click. The Go to URL action handily streamlines this process for the web designer. Go to URL can also be used as a preload router that sends the user to another web page after the onLoad event has finished. The Go To URL dialog box (see Figure 11-8) displays any existing frames in the current page or frameset. To load multiple URLs at the same time, select the first frame from the Open In list and enter the desired page or location in the URL text box. Next, select the second frame from the list and enter its URL, and so on. If you select a frame to which a URL is already assigned, that address appears in the URL text box.
Figure 11-8: You can update two or more frames at the same time with the Go to URL action.
To use the Go to URL action, follow these steps:
1. Select the object to trigger the action.
2. From the Behaviors panel, click the Add (+) button and select Go to URL.
3. From the Go To URL dialog box, select the target for your link from the list in the Open In window.
4. Enter the path of the file to open in the URL text box or click the Browse button to locate a file. An asterisk appears next to the frame name to indicate that a URL has been chosen.
5. To select another target to load a different URL, repeat Steps 3 and 4.
6. Click OK when you’re finished.
Jump Menu and Jump Menu Go
Although most behaviors insert original code to activate an element of the web page, several behaviors are included to edit code inserted by a Dreamweaver object. The Jump Menu and Jump Menu Go behaviors both require a previously inserted Jump Menu object before they become active. The Jump Menu behavior is used to edit an existing Jump Menu object, and the Jump Menu Go behavior adds a graphic image as a Go button.
Cross-reference: To find out more about the Jump Menu object, see Chapter 13.
To use the Jump Menu behavior to edit an existing Jump Menu object, follow these steps:
1. Select the Jump Menu object previously inserted into the page.
2. In the Behaviors panel, double-click the listed Jump Menu behavior.
3. Make your modifications in the Jump Menu dialog box, as shown in Figure 11-9. You can alter the existing menu item names or their associated URLs, add new menu items, or reorder the list through the Jump Menu dialog box.
4. Click OK when you’re finished.
Figure 11-9: Use the Jump Menu behavior to modify a previously inserted Jump Menu object.
To add a button to activate the Jump Menu object, follow these steps:
1. Select the image or form button you’d like to make into a Go button. A Jump Menu object must be on the current page for the Jump Menu Go behavior to be available.
2. From the Behaviors panel, select Jump Menu Go from the Add (+) drop-down list. The Jump Menu Go dialog box, shown in Figure 11-10, is displayed.
3. Select the name of the Jump Menu object you want to activate from the option list.
4. Click OK when you’re finished.
Figure 11-10: Add a graphic or standard button as a Go button with the Jump Menu Go behavior.
Open Browser Window
With the Open Browser Window action, you can open a new browser window and specify its exact size and attributes. You can even set it up to receive JavaScript events.
You can also open a new browser window with a regular link by specifying target="_blank", but you can’t control any of the window’s attributes with this method. You do get this control with the parameter dialog box of the Open Browser Window action (see Figure 11-11). This dialog box enables you to set the window width and height and select whether to display the Navigation Toolbar, Location Toolbar, Status Bar, Menu Bar, Scrollbars As Needed, and/or Resize Handles. You can also name your new window, a necessary step for advanced JavaScript control.
Figure 11-11: Use the Open Browser Window action to program a pop-up advertisement or remote control.
You have to explicitly select any of the attributes that you want to appear in your new window. Your new browser window contains only the attributes you’ve checked, plus basic window elements such as a title bar and a Close button.
Caution: Most modern browsers have pop-up blockers that will stop the Open Browser Window action from functioning. Although there is nothing you, as a page designer, can do to override the pop-up blocker, you might consider adding a note to your page indicating that pop-up windows are in use on your page.
To use the Open Browser Window action, follow these steps:
1. Select the object to trigger the action.
2. From the Behaviors panel, click the Add (+) button, and select Open Browser Window.
3. In the URL To Display text box, enter the address of the web page you want to display in the new window. You can also click the Browse button to locate the file.
4. To specify the window’s size, enter the width and height values in the appropriate text boxes. You must enter both a width and height measurement, or the new browser window opens to its default size.
5. Check the appropriate Attributes checkboxes to show the desired window features.
6. If you plan on using JavaScript to address or control the window, type a unique name in the Window Name text box. This name cannot contain spaces or special characters. Dreamweaver alerts you if the name you’ve entered is unacceptable.
7. Click OK when you’re finished.
Popup Message
You can send a quick message to your users with the Popup Message behavior. When triggered, this action opens a JavaScript alert box that displays your specified message. You enter your message in the Message text box on the action’s parameter dialog box (see Figure 11-12).
Figure 11-12: Send a message to your users with the Popup Message action.
To use the Popup Message action, follow these steps:
1. Select the object to trigger the action.
2. From the Behaviors panel, click the Add (+) button and select Popup Message.
3. Enter your text in the Message text box.
4. Click OK when you’re finished.
Tip: You can include JavaScript functions or references in your text messages by surrounding the JavaScript with curly braces. For example, you can incorporate today’s date in a message like this:
Welcome to our site on {new Date()}!
You could also pull data from a form into your alert-box message, as in this example:
Thanks for filling out our survey,i {document.surveyForm.firstname.value}.
If you need to display a curly brace in a message, you must precede it with a backslash character, as in { or }.
Preload Images
Designs commonly require a particular image or several images to be displayed immediately when called by an action or a timeline. Because of the nature of HTML, all graphics are separate files that are normally downloaded when needed. To get the snappy response required for certain designs, graphics need to be preloaded or cached so that they are available. The Preload Images action performs this important service. You designate the images you want to cache for later use through the Preload Images parameter dialog box (see Figure 11-13).
Figure 11-13: Media-rich websites respond much faster when images have been cached with the Preload Images action.
Note: You don’t need to use the Preload Images action if you’re creating rollovers. Both the Rollover object and the Swap Image action enable you to preload images from their dialog boxes.
To use the Preload Images action, follow these steps:
1. Select the object to trigger the action.
2. From the Behaviors panel, click the Add (+) button and select Preload Images.
3. In the Preload Images parameter dialog box, enter the path to the image file in the Image Source File text box, or click the Browse button to locate the file.
4. To add another file, click the Add (+) button and repeat Step 3.
Caution: After you’ve specified your first file to be preloaded, be sure to click the Add (+) button for each successive file you want to add to the list. Otherwise, the highlighted file is replaced by the next entry.
5. To remove a file from the Preload Images list, select it and click the Remove (–) button.
6. Click OK when you’re finished.
Set Text of Container
Dreamweaver has grouped together four similar behaviors under the Set Text heading. The first, Set Text of Container, enables you to do much more than change a word or two—you can dynamically rewrite the entire code for any containing element. You can even incorporate JavaScript functions or interactive information into the new content. The Set Text of Container behavior replaces the entire HTML contents of the target—and the target can be any tag with an ID.
Tip: Unlike another behavior in this group, Set Text of Frame, the Set Text of Container dialog box provides no button for getting the current HTML. Here’s a workaround. Before invoking the behavior, switch to Code view and copy all the elements inside the desired element. Then you can paste your clipboard into the New HTML text area using the keyboard shortcut Ctrl+V (Cmd+V). Be careful not to select the surrounding element tag, such as the <div>; if you do, you are pasting one surrounding element in another.
To set the text of an AP element dynamically, follow these steps:
1. Make sure that the AP element you want to change has been created and named properly.
2. Select the object to trigger the action.
3. From the Behaviors panel, click the Add (+) button and choose Set Text Set Text of Container from the option list. The Set Text of Container dialog box opens, as shown in Figure 11-14.
4. Select the element to modify from the Container drop-down list.
Figure 11-14: Use the Set Text of Container behavior to replace all of the HTML in any element with an ID.
5. Enter the replacement code in the New HTML text area.
6. Click OK when you’re finished.
Set Text of Frame
The Set Text of Frame action replaces all the contents of the <body> tag of a frame. Dreamweaver supplies a handy Get Current HTML button that enables you to easily keep everything you want to retain and change only a heading or other element. Naturally, you must be within a frameset to use this behavior, and the frames must be named correctly—that is, uniquely without special characters or spaces.
To change the content of a frame dynamically, follow these steps:
1. Select the triggering object.
2. From the Behaviors panel, click the Add (+) button and choose Set Text Set Text of Frame. The Set Text of Frame dialog box opens, as shown in Figure 11-15.
Figure 11-15: The Set Text of Frame behavior enables you to interactively update the contents of any frame in the current frameset.
3. Choose the frame you want to alter from the Frame drop-down list.
4. Enter the code for the changing frame in the New HTML text area. Keep in mind that you’re changing not just a word or phrase but all the HTML contained in the <body> section of the frame.
Tip: With all four Set Text behaviors, you can include JavaScript code by enclosing it in curly braces: { . . . }.
5. If you want to keep the majority of the code, click the Get Current HTML button and change only those portions necessary.
6. To maintain the frame’s <body> attributes, such as the background and text colors, select the Preserve Background Color option. If this option is not selected, the frame’s background and text colors are replaced by the default values (a white background and black text).
7. Click OK when you’re finished.
Set Text of Status Bar
Use the Set Text of Status Bar action to display a text message in the browser’s status bar based on a user’s action, such as moving the pointer over an image. The message stays displayed in the status bar until another message replaces it. System messages, such as URLs, tend to be temporary and visible only when the user’s mouse is over a link.
Note: Some browsers, including Internet Explorer 6 and 7, will not display the change of status bar text without changing user preferences. Moreover, many modern browsers do not show a status bar by default.
The only limit to the length of the message is the size of the browser’s status bar; you should test your message in various browsers to make sure that it is completely visible.
Tip: To display a message only when a user’s pointer is over an image or link, use one Set Text of Status Bar action, attached to an onMouseOver event, with your desired status bar message. Use another Set Text of Status Bar action, attached to an onMouseOut event, that has a null string (" ") as the text.
You enter all text in the Message field of the Set Text of Status Bar parameter dialog box (see Figure 11-16).
Figure 11-16: Use the Set Text of Status Bar action to guide your users with instructions in the browser window’s status bar.
To use the Set Text of Status Bar action, follow these steps:
1. Select the object to trigger the action.
2. From the Behaviors panel, click the Add (+) button and select Set Text of Status Bar.
3. Enter your text in the Message text box.
4. Click OK when you’re finished.
Set Text of Text Field
Set Text of Text Field, the final Set Text behavior, enables you to dynamically update any text or text area field. A text field must be present on the page for the behavior to be available. To change the displayed text of a text or text area field, follow these steps:
1. From the Behaviors panel, click the Add (+) button and choose Set Text Set Text of Text Field from the Add Action list. The Set Text of Text Field dialog box is displayed, as shown in Figure 11-17.
2. Select the desired text field from the drop-down list.
3. Enter the new text and/or JavaScript in the New Text area.
4. Click OK when you’re finished.
Figure 11-17: Dynamically update text/text area form elements with the Set Text of Text Field behavior.
Show-Hide Elements
One of the key features of Dynamic HTML AP elements is their capability to appear and disappear on command. The Show-Hide Elements action gives you easy control over the visibility attribute for all elements with an ID in the current web page. In addition to explicitly showing or hiding elements, this action can also restore elements to the default visibility setting.
The Show-Hide Elements action is often used to reveal or conceal a single element; however, you are not restricted to hiding or showing just one element at a time. The action’s parameter dialog box (see Figure 11-18) shows you a list of all the elements with an ID in the current web page from which you can choose as many as you want to show or hide.
To use the Show-Hide Elements action, follow these steps:
1. Select the object to trigger the action.
2. From the Behaviors panel, click the Add (+) button and select Show-Hide Elements. The Show-Hide Elements parameter dialog box displays a list of the available elements in the current web page.
Figure 11-18: The Show-Hide Elements action can make any number of hidden elements visible, hide any number of visible elements, or both.
3. To show a hidden element, select the element from the Elements list and click the Show button.
4. To hide a shown element, select its name from the list and click the Hide button.
5. To restore an element’s default visibility value, select the element and click the Default button.
6. Click OK when you’re finished.
Swap Image and Swap Image Restore
Button rollovers are one of the most frequently used techniques in web design today. In a typical button rollover, a user’s pointer moves over one image, and the graphic appears to change in some way, seeming to glow or change color. Actually, the onMouseOver event triggers the almost instantaneous swapping of one image for another. Dreamweaver automates this difficult coding task with the Swap Image action and its companion, the Swap Image Restore action.
In recognition of how rollovers commonly work in the real world, Dreamweaver makes it possible to combine Swap Image and Swap Image Restore in one easy operation—as well as to preload all the images. Moreover, you can use a link in one frame to trigger a rollover in another frame without having to tweak the code as you did in earlier Dreamweaver versions.
When the dialog box for the Swap Image action opens (see Figure 11-19), it automatically loads a list of all the image names it finds in the current web page. The names are taken from IDs applied to the image; the phrase “unnamed <img>” appears in the dialog box for each image that does not have an ID assigned. You select the image you want to change—which could be the same image to which you are attaching the behavior—and specify the image file you want to replace with the rolled-over image. You can swap more than one image with each Swap Image action. For example, if you want an entire submenu to change when a user rolls over a particular option, you can use a single Swap Image action to switch all the submenu button images.
Note: If the Restore Images onMouseOut option was selected in the Swap Image parameter dialog box, Dreamweaver adds two lines to the Behaviors panel: Swap Image and Swap Image Restore.
Figure 11-19: The Swap Image action is used primarily for handling button image rollovers.
If you choose not to enable the Restore Images onMouseOut option, which changes the image back to the original, you attach the Swap Image Restore action to another event. The Swap Image Restore action can be used only after a Swap Image action. No parameter dialog box exists for the Swap Image Restore action—just a dialog box confirming your selection.
Caution: If the swapped-in image has different dimensions than the image it replaces, the swapped-in image is resized to the height and width of the first image.
To use the Swap Image action, follow these steps:
1. Select the object to trigger the action.
2. From the Behaviors panel, click the Add (+) button and select Swap Image.
3. In the Swap Image parameter dialog box, choose an available image from the Images list.
4. In the Set Source To text box, enter the path to the image that you want to swap. You can also click the Browse button to locate the file. An asterisk appears at the end of the selected image name to indicate an alternative image has been selected.
5. To swap additional images using the same event, repeat Steps 3 and 4.
6. To preload all images involved in the Swap Image action when the page loads, make sure the Preload Images option is checked.
7. To cause the selected images to revert to their original source when the user mouses away from the selected object, make sure that the Restore Images onMouseOut option is selected.
8. Click OK when you’re finished.
Validate Form
When you set up a form for user input, you establish each field with a purpose. The name field, the e-mail address field, and the ZIP code field all have their own requirements for input. Unless you are using a CGI program specifically designed to check the user’s input, form fields usually accept input of any type. Even if the CGI program can handle it, this server-side method ties up server time and is relatively slow. The Dreamweaver Validate Form action checks any text field’s input and returns the form to the user if any of the entries are unacceptable. You can also use this action to designate any text field as a required field.
Validate Form can be used to check either single or multiple text fields in a form. If you attach a Validate Form action to a single text box, you alert the user to any errors as he or she is filling out this field. To check multiple form fields, the Validate Form action must be attached to the form’s <form> tag.
The Validate Form dialog box (see Figure 11-20) enables you to designate any text field as required, and you can evaluate its contents. You can require the input of a text field to be a number, an e-mail address (for instance, [email protected]), or a number within a range. The number range you specify can include positive whole numbers, negative numbers, or decimals.
Figure 11-20: The Validate Form action checks your form’s entries client-side, without CGI programming.
To use the Validate Form action, follow these steps:
1. Select the form object to trigger the action: a single text field, the <form> tag (use the Tag Selector), or the Submit button for multiple text fields.
2. From the Behaviors panel, click the Add (+) button and select Validate Form.
3. If you are validating an entire form, select a text field from the Fields list. If you are validating a single field, the selected form object is chosen for you and appears in the Fields list.
4. To make the field required, select the Value: Required checkbox.
5. To set the kind of input expected, select one of the following Accept options:
- Anything: Accepts any input.
- Number: Enables any sort of numeric input in the range of zeros through nines. You cannot mix text such as parentheses or hyphens and numbers, however, as in a telephone number such as (212) 555-1212.
- Email Address: Looks for an e-mail address with the @ sign. (This is not a foolproof e-mail address check because it validates illegal addresses such as human@somewhere, @somewhere.com, [email protected], and so on.)
- Number From: Enables you to enter two numbers, one in each text box, to define the number range.
6. Click OK when you’re finished.
Spry effects in Dreamweaver
As part of the Spry framework, Adobe has included a series of seven effects in Dreamweaver’s standard behaviors. These behaviors add a whole new level of interactivity to the web designer’s palette without requiring any additional hand-coding. Now designers can easily fade text in or out, make an image for a photo album appear to grow out of the page, smoothly slide a submenu in, and much, much more.
Each of the effects depends on an external JavaScript file, SpryEffects.js. The needed reference for this file is automatically added to the page and the file is placed in the SpryAssets folder in your site root the first time an effect is added. You’ll need to publish the JavaScript file to your site along with your page for the effects to work properly. The seven effects, detailed in the following sections, are:
- Appear/Fade
- Blind
- Grow/Shrink
- Highlight
- Shake
- Slide
- Squish
Appear/Fade
As you might expect, the Appear/Fade effect causes a targeted page element to appear or fade over a set period of time. You could, for example, fade in an AP element with additional information when a user clicks a Help icon. Likewise, because the behavior allows the effect to be toggled, the AP element could fade out with another click of the same icon.
Appear/Fade requires a tag with an assigned ID as the target element; any HTML tag except applet, body, iframe, object, tr, tbody, or th can be used. You’ll be able to control the duration of the fade, as well as its percentage; you could, for example, fade an image from 100 percent to 40 percent over 3,000 milliseconds (3 seconds).
To use the Appear/Fade effect, follow these steps:
1. Make sure that the element you want to affect is contained within a tag with an ID on your page.
2. Select the object to trigger the effect.
3. From the Behaviors panel, click the Add (+) button and select Effect Appear/Fade.
4. In the Appear/Fade dialog box (see Figure 11-21), select the tag with an ID you want to appear or fade.
Figure 11-21: Fade page elements in and out at the click of a link or when the page loads with the Appear/Fade effect.
5. Enter the length of the effect (in milliseconds) in the Effect Duration field (1,000 milliseconds equals 1 second).
6. Choose whether you’d like the targeted element to Appear or Fade from the Effect list.
7. If you chose Appear:
a. Set the starting opacity percentage in the Appear From field.
b. Set the ending opacity percentage in the Appear To field.
8. If you chose Fade:
a. Set the starting opacity percentage in the Fade From field.
b. Set the ending opacity percentage in the Fade To field.
9. If you’d like the reverse effect to occur the next time the trigger is selected, click the Toggle Effect checkbox.
10. Click OK when you’re done.
Blind
The Blind effect emulates window blinds raising and lowering. However, these particular types of blinds are attached to the bottom of the windowsill, not the top, so the content is hidden when the blinds go up and revealed when the blinds go down.
To use the Blind effect, follow these steps:
1. Make sure that the element you want to affect is contained within an acceptable tag with an ID on your page.
Only the following tags can be used for the Blind effect: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu, or pre.
2. Select the object to trigger the effect.
3. From the Behaviors panel, click the Add (+) button and select Effect Blind.
4. In the Blind dialog box (see Figure 11-22), select the tag with an ID you want to hide or reveal.
Figure 11-22: Imagine window blinds going up to hide the targeted content and down to reveal it with the Blind effect.
5. Enter the length of the effect (in milliseconds) in the Effect Duration field (1,000 milliseconds equals 1 second).
6. If you’d like the targeted element to be hidden, choose Blind Up from the Effect list; to reveal a previously hidden element, choose Blind Down.
7. If you chose Blind Up:
a. Set the starting percentage in the Blind Up From field.
b. Set the ending percentage in the Blind Up To field.
8. If you chose Blind Down:
a. Set the starting percentage in the Blind Down From field.
b. Set the ending percentage in the Blind Down To field.
9. If you’d like the reverse effect to occur the next time the trigger is selected, click the Toggle Effect checkbox.
10. Click OK when you’re done.
Grow/Shrink
The Grow/Shrink effect reduces or enlarges the targeted content. This effect can be used to temporarily make an image bigger when the page visitor mouses over a thumbnail and smaller when the visitor moves the mouse off the thumbnail. In addition to controlling the duration of the effect, you also have the option of growing or shrinking from the center of the target or from the upper-left corner.
Tip: To achieve the aforementioned effect of the thumbnail growing and shrinking according to the mouse position, apply the Grow/Shrink effect twice: First, grow the image slightly with an onMouseOver event, and then second, shrink it back to its original dimensions with an onMouseOut event.
To use the Grow/Shrink effect, follow these steps:
1. Make sure that the element you want to affect is contained within an acceptable tag with an ID on your page.
Only one of the following tags can be used with the Grow/Shrink effect: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu, img, or pre.
2. Select the object to trigger the effect.
3. From the Behaviors panel, click the Add (+) button and select Effect Grow/Shrink.
4. In the Grow/Shrink dialog box (see Figure 11-23), select the tag with an ID you want to grow or shrink.
5. Enter the length of the effect (in milliseconds) in the Effect Duration field (1,000 milliseconds equals 1 second).
6. From the Effect list, choose whether you’d like the targeted element to Grow or Shrink.
Figure 11-23: Enlarge or reduce the size of an image interactively with the Grow/Shrink effect.
7. If you chose Grow:
a. Set the starting opacity percentage in the Grow From field.
b. Set the ending opacity percentage in the Grow To field.
c. Choose the desired direction (Center or Top Left Corner) from the Grow From list.
8. If you chose Shrink:
a. Set the starting opacity percentage in the Shrink From field.
b. Set the ending opacity percentage in the Shrink To field.
c. Choose the desired direction (Center or Top Left Corner) from the Shrink To list.
9. If you’d like the reverse effect to occur the next time the trigger is selected, click the Toggle Effect checkbox.
10. Click OK when you’re done.
Highlight
The fading highlight, one of the earliest Web 2.0 techniques, was first implemented by web application developers 37Signals (www.37signals.com). In this technique, a certain event (such as a page loading or a user tabbing into a form element) triggers a sudden burst of color behind a section of text, which quickly fades away. The effect works well to momentarily bring the page visitor’s attention to a particular page element without disrupting the final layout. You can accomplish this same result—with many variations—by applying the Highlight effect.
To use the Highlight effect, follow these steps:
1. Make sure that the element you want to affect is contained within an appropriate tag with an ID on your page.
Any HTML tag can be used with a Highlight effect, except for the following: applet, body, frame, frameset, or noframes.
2. Select the object to trigger the effect.
3. From the Behaviors panel, click the Add (+) button and select Effect Highlight.
4. In the Highlight dialog box (see Figure 11-24), select the tag with an ID you want to highlight.
Figure 11-24: Assign the Highlight effect to the body tag’s onLoad effect to add to a page area an initial burst of color that quickly disappears.
5. Enter the length of the effect (in milliseconds) in the Effect Duration field (1,000 milliseconds equals 1 second).
6. Choose the initial background color from the Start Color swatch.
7. Choose the background color the initial color fades to from the End Color swatch.
8. Choose the background color displayed after the fade is completed from the Color After Effect swatch.
9. If you’d like the reverse effect to occur the next time the trigger is selected, click the Toggle Effect checkbox.
10. Click OK when you’re done.
Shake
If you’ve ever mistyped your password on the login screen on Mac OS X, you’ve experienced the Shake effect. Shake moves the targeted element back and forth several times in a side-to-side manner. This effect is a sure attention grabber when used sparingly. The Dreamweaver implementation does not offer any user-selectable parameters such as duration or distance; you can select only the targeted tag.
To use the Shake effect, follow these steps:
1. Make sure that the element you want to affect is contained within an appropriate tag with an ID on your page.
Apply the Shake effect to any of the following tags: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre, or table.
2. Select the object to trigger the effect.
3. From the Behaviors panel, click the Add (+) button and select Effect Shake.
4. In the Shake dialog box (see Figure 11-25), select the tag with an ID you want to shake.
5. Click OK when you’re done.
Figure 11-25: The Shake effect moves the targeted element 20 pixels to the left and right for a few seconds.
Slide
The Slide effect is similar to the Blind effect in that the content in both is either hidden or revealed. However, with Slide, the content itself appears to move in or out of view. Slide is different from all the other effects in another way: Slide requires an outer <div> tag with an ID that surrounds another tag with an ID. For example, the relevant code might look like this:
<div id="wrapper">
<div id="content">
<p>Content to slide</p>
</div>
</div>
The Slide effect targets the surrounding <div> tag; in this example, the targeted tag would be <div id="wrapper">.
To use the Slide effect, follow these steps:
1. Make sure that the element you want to affect is contained within an appropriate tag with an ID on your page.
Use the Slide effect with any of the following tags: blockquote, dd, div, form, center, table, span, input, textarea, select, or image.
2. Select the object to trigger the effect.
3. From the Behaviors panel, click the Add (+) button and select Effect Slide.
4. In the Slide dialog box (see Figure 11-26), select the tag with an ID you want to hide or reveal.
Figure 11-26: Make sure you target the content’s surrounding div when applying the Slide effect.
5. Enter the length of the effect (in milliseconds) in the Effect Duration field.
6. If you’d like the targeted element to be hidden, choose Slide Up from the Effect list; to reveal a previously hidden element, choose Slide Down.
7. If you chose Slide Up:
a. Set the starting percentage in the Slide Up From field.
b. Set the ending percentage in the Slide Up To field.
8. If you chose Slide Down:
a. Set the starting percentage in the Slide Down From field.
b. Set the ending percentage in the Slide Down To field.
9. If you’d like the reverse effect to occur the next time the trigger is selected, click the Toggle Effect checkbox.
10. Click OK when you’re done.
Squish
The Squish effect is similar to a specialized use of the Grow/Shrink effect. When a Squish effect is triggered, the targeted page element shrinks from 100 percent to 0 percent in the element’s upper-left corner; trigger the effect again and the element grows to 100 percent in the opposite direction. Like Shake, the only user-defined parameter is the choice of the target element.
To use the Squish effect, follow these steps:
1. Make sure that the element you want to affect is contained within an appropriate tag with an ID on your page.
Only the following tags can be used with the Squish effect: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, or pre.
2. Select the object to trigger the effect.
3. From the Behaviors panel, click the Add (+) button and select Effect Squish.
4. In the Squish dialog box (see Figure 11-27), select the tag with an ID you want to squish.
5. Click OK when you’re done.
Figure 11-27: The Squish effect automatically toggles, shrinking and growing the targeted page element.
Installing, Managing, and Modifying Behaviors
The standard behaviors that come with Dreamweaver are indeed impressive, but they’re really just the beginning. Because existing behaviors can be modified and new ones created from scratch, you can continue to add behaviors as you need them.
To install a new Dreamweaver behavior, follow these steps:
1. Locate the behavior, which must be packaged as an MXP extension file; for example: alignLayer.mxp, cleanupPage.mxp, and so on.
Caution: The website for this book (www.wiley.com/go/dreamweavercs6bible) contains several useful MXP behavior extension files. In addition, you can find a large selection of MXP extension files on the Adobe Marketplace & Exchange site, which you can reach by choosing Help Dreamweaver Exchange.
2. To install the extension in Dreamweaver (or in Fireworks or Flash, for that matter), either double-click the MXP extension file or choose Help Manage Extensions to open the Extension Manager (shown in Figure 11-28) and choose File Install Extension to select the file. Some extensions remain inaccessible until you’ve quit and restarted Dreamweaver; in most cases, you will be prompted to do so.
Note: Depending on your browser, you might be given the choice of installing a Dreamweaver Exchange extension file directly from the Exchange site or to save it first to disk and install it from there. If you choose to install the extension file directly from the Exchange site, the Extension Manager handles the installation automatically. If you choose to save the extension file to disk, a good place to save it is the Downloaded Extensions folder within your Dreamweaver CS6 folder.
Figure 11-28: Use the Extension Manager to install, remove, and temporarily enable/disable MXP extension files from Dreamweaver, Fireworks, or Flash.
Altering the parameters of a behavior
You can alter any of the attributes for your inserted behaviors at any time. To modify a behavior you have already attached, follow these steps:
1. Open the Behaviors panel.
2. Select the object in the Document window or the tag in the Tag Selector to which your behavior is attached.
3. Double-click the action that you want to alter. The appropriate dialog box opens, with the previously selected parameters.
4. Make any modifications to the existing settings for the action.
5. Click OK when you are finished.
Sequencing behaviors
When you have more than one action attached to a particular event, the order of the actions is often important. For example, you might want to apply the Change Text action to a section of the page before you attract attention to it with the Highlight effect. To specify the sequence in which Dreamweaver triggers the actions, reposition them as necessary in the Actions column. To do this, simply select an action and use the up and down arrow buttons (refer to Figure 11-1) to reposition it in the list.
Deleting behaviors
To remove a behavior from a list of behaviors attached to a particular event, simply highlight the behavior and click the Remove (–) button.
Modifying Behaviors
To further reveal the power of Dreamweaver’s standard behaviors, add another series of behaviors to your practice page. In the process, you’ll get a chance to adjust attributes of an applied behavior.
1. From the Files panel, re-open the behaviors_start.htm file you previously worked on.
2. Place your cursor anywhere in the Living Room link.
3. From the Behaviors panel, click Add (+) and select Open Browser Window.
4. In the Open Browser Window dialog box, set the following parameters:
- Click the Browse button and choose living_room.htm from the dialog box.
- In the Window Width field, enter 200.
- In the Window Height field, enter 100.
- Select the Resize Handles option.
5. Click OK when you’re done.
A second behavior is added to the link in the Behaviors panel, with the default event of onClick.
6. Save your file and press F12 (Option+F12) to preview the page in your primary browser.
7. Click the Living Room link to test the behavior.
8. You’ll notice that the window height is too small for the text; you can easily make the adjustment. In Dreamweaver’s Behaviors panel, double-click the Open Browser Window event to re-open the dialog box.
9. Change the Window Height value to 150; click OK when you’re done.
10. To verify that the change is sufficient, test the page in the browser as before.
11. In Dreamweaver, repeat Steps 2–5 for the Kitchen North link and set the Browser Window behavior to open kitchen.htm with a width of 200 pixels and height of 150 pixels.
12. Repeat Steps 2–5 for the Kitchen South link and again set the Browser Window behavior to open kitchen.htm with a width of 200 pixels and height of 150 pixels.
13. Save your page.
Test your page in the browser to verify that all the windows open as expected.
Dreamweaver behaviors can greatly extend the web designer’s palette of possibilities—even if the web designer is an accomplished JavaScript programmer. Behaviors simplify and automate the process of incorporating common and not-so-common JavaScript functions. The versatility of the behavior format enables anyone proficient in JavaScript to create custom actions that can be attached to any event. When considering behaviors, keep the following points in mind:
- Behaviors are combinations of events and actions.
- Behaviors are written in HTML and JavaScript and are completely customizable from within Dreamweaver.
- Dreamweaver includes 25 standard actions. Some actions are not available unless a particular object is included, and selected, on the current page.
In the next chapter, you learn how to work with tables and structured data.