Dreamweaver MX 2004 Bible phần 5 ppt

Using Behaviors B ehaviors are truly the power tools of Dreamweaver. With Dreamweaver behaviors, any Web designer can make layers appear and disappear, execute any number of rollovers, or control a Shockwave movie — 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; you tackle it in Chapter 34. Implementing these gems, however, is a piece of cake. This chapter examines the con- cepts 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 on managing your ever-increasing library of behaviors. Here’s a guarantee for you: After you get the hang of using Dreamweaver behaviors, your Web pages will never be the same. Understanding Behaviors, Events, and Actions A behavior, in Macromedia parlance, is the combination of an event and an action. In the electronic age, one pushes 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 four 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. 12 12 CHAPTER ✦✦✦✦ In This Chapter Behavior basics Adding a behavior’s event and action Looking at the standard behaviors ✦✦✦✦ 543504 ch12.qxd 12/10/03 10:32 PM Page 449 450 Part III ✦ Advanced Design Tools and Techniques 2. Choose your target browser. Different browsers — and the various browser versions— support different events. Dreamweaver enables you to choose either a specific browser, such as Internet Explorer 6, or a browser range, such as version 4 and higher browsers. 3. Select an action. Dreamweaver enables only those actions available to the specific ele- ments on your page. You can’t, for instance, choose the Show-Hide Layer action until you insert one or more layers. Behaviors guide you to the workable options. 4. 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 MX 2004 comes with 24 cross-browser–compatible actions, and both Macromedia and third-party developers have made many additional actions available, with even more in the works. 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. Dreamweaver supports two main types of behaviors: client-side and server-side. Client-side behaviors, consisting of JavaScript and HTML, are the focus of this chapter. Server-side behaviors are covered in Chapter 35. Attaching a Behavior 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 layer in another area of the page when the user clicks the mouse button on the image ✦ Makes a sound when the user releases the mouse button on the image ✦ Starts a Flash movie when the user’s pointer moves away from 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: Cross- Reference 543504 ch12.qxd 12/10/03 10:32 PM Page 450 451 Chapter 12 ✦ Using Behaviors ✦ Begin playing an audio file (with the Play Sound action) ✦ Move a layer across the screen (with the Play Timeline 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 modification are handled through the Behaviors panel. Using the Behaviors panel The Behaviors panel provides two columns (see Figure 12-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 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. Figure 12-1: You can handle everything about a behavior through the Behaviors panel. Add (+) Down Remove (-) Up Events column Actions column Parameter dialog box for Swap Image behavior 543504 ch12.qxd 12/10/03 10:32 PM Page 451 452 Part III ✦ Advanced Design Tools and Techniques 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+F3 (an on/off toggle). The Behaviors panel can be closed by toggling it off with Shift+F3 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, including Play Sound, 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. 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 parenthe- ses in the drop-down list of events. To add a behavior to an element in your Web page, follow these steps: 1. Select an object (element) in the Document window. If you want 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+F3. 3. Click the Add (+) button to reveal the available options, as shown in Figure 12-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. In our On/Off rollover image example, Dreamweaver adds two lines to the Behaviors panel, Swap Image and Swap Image Restore, because the Restore Images onMouseOut option was selected in the Swap Image parameter dialog box. Note Tip Note Tip 543504 ch12.qxd 12/10/03 10:32 PM Page 452 453 Chapter 12 ✦ Using Behaviors Figure 12-2: The Add (+) drop-down list changes according to what’s on the current page and which tag is selected. 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, a Swap Image Restore when the mouse moves away, and, when clicked, show another Web page in an additional, smaller window with the Open Browser Window behavior. 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 then select Get More Behaviors in Dreamweaver. You are whisked away to the Dreamweaver Exchange, a service from Macromedia with a huge selection of extensions of all flavors, including behaviors. Managing events Every time Dreamweaver attaches a behavior to a tag, it also inserts an event for you. The default event that is chosen is based on two criteria: the browser type and the selected tag. The different browsers in use have widely different capabilities, notably when it comes to understanding the various event handlers and associated tags. For every browser and browser combination in the Show Events For submenu of the Add (+) drop-down list, Dreamweaver has a corresponding file in the Configuration\Behaviors\Events folder. Each tag listed in each file, such as IE 4.0.htm, has at least one event associated with it. 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 previous 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 543504 ch12.qxd 12/10/03 10:32 PM Page 453 454 Part III ✦ Advanced Design Tools and Techniques 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 relevant browser file found in the Dreamweaver MX 2004\ Configuration\Behaviors\Events 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. Choose a different event by selecting the down arrow next to the displayed event in the Behaviors panel and then clicking the event you want in the drop-down list (see Figure 12-3). Figure 12-3: You can change the event by selecting the Events arrow button. The browser model selected determines which events are available. By default, 4.0 and Later Browsers is chosen. To change browser models, select Show Events For from the Events list and then select one of the following: ✦ 3.0 and Later Browsers ✦ IE 5.5 ✦ 4.0 and Later Browsers ✦ IE 6.0 ✦ IE 3.0 ✦ Netscape 3.0 ✦ IE 4.0 ✦ Netscape 4.0 ✦ IE 5.0 ✦ Netscape 6.0 Tip 543504 ch12.qxd 12/10/03 10:32 PM Page 454 455 Chapter 12 ✦ Using Behaviors The Dreamweaver MX 2004\Configuration\Behaviors\Events folder contains HTML files corresponding to these 10 browser models offered in the Show Events For submenu. You can open these files in Dreamweaver, but Macromedia asks that you not edit them — with one exception. Each file contains the list of tags that have supported event handlers (the JavaScript term for events) in that browser. The older the browser, the fewer event handlers are included—unfortunately, this also means that if you want to reach the broadest Internet audience, your event options are limited. In the broadest category, 3.0 and Later Browsers, only 13 different tags can receive any sort of event handler. This is one of the reasons why, for example, Internet Explorer 3 can’t handle rollovers: The browser doesn’t understand what an onMouseOut event is, and so the image can’t revert to its original state. Listing 12-1 shows the event-handler definitions for the 3.0 and Later Browsers category: Listing 12-1: The Event File for 3.0 and Later Browsers <A onMouseOver=”*”> <AREA onClick=”” onMouseOut=”” onMouseOver=”*”> <BODY onLoad=”*” onUnload=””> <FORM onReset=”” onSubmit=”*”> <FRAMESET onLoad=”*” onUnload=””> <INPUT TYPE=”Button” onClick=”*”> <INPUT TYPE=”Checkbox” onClick=”*”> <INPUT TYPE=”Radio” onClick=”*”> <INPUT TYPE=”Reset” onClick=”*”> <INPUT TYPE=”Submit” onClick=”*”> <INPUT TYPE=”Text” onBlur=”*” onChange=”” onFocus=”” onSelect=””> <SELECT onBlur=”” onChange=”*” onFocus=””> <TEXTAREA onBlur=”” onChange=”*” onFocus=”” onSelect=””> By contrast, the Event file for Internet Explorer 6.0 shows support for every tag under the HTML sun — 94 in all — with almost every tag able to handle any type of event. 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>. To find the default event for a tag, simply select the tag in a document, use Add Actions to attach any valid actions to it, and see what event appears alongside the action in the Behaviors panel. To find the default event for a tag as used by a particular browser, specify the browser in the Show Events For submenu of the Add (+) drop-down list, and then proceed as described previously. Standard actions As of this writing, 24 standard actions ship with Dreamweaver MX 2004. 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. Tip 543504 ch12.qxd 12/10/03 10:32 PM Page 455 456 Part III ✦ Advanced Design Tools and Techniques The following sections describe each of the standard actions: what the action does, what requirements must be met for it to be activated, what options are available, and most important of all, how to use the action. Each action is written to work with all browser versions 4 and above; however, some actions do not work as designed in the older browsers. The charts, included with every action, show the action’s compatibility with older browsers. (The information in these charts is adapted from the Dreamweaver Help pages and is used with permission.) 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 in 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 Triggering Custom Functions Although the standard behaviors can accomplish a great deal — and extensions available from the Macromedia 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 it 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 Property inspector, enter javascript:;. 2. In the Behaviors panel, click the Event column and choose an event from the drop-down list. In this case, you 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 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. 543504 ch12.qxd 12/10/03 10:32 PM Page 456 457 Chapter 12 ✦ Using Behaviors an empty string (two single quotes with nothing in between), as shown in the preceding code snippet. 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 12-4. Figure 12-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 then 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. The following charts detail action behaviors for both newer and older browsers. The phrase “Fails without error” means that the action won’t work in the older browser, but neither does it generate an error message for the user to see. When the table indicates “error,” it means that the action won’t work and does generate a visible error message. Here’s the browser compatibility chart for the Call JavaScript behavior: Call JavaScript Netscape 3.0 Internet Explorer 3.0x Internet Explorer 3.01 Macintosh Okay Fails without error Windows Okay Okay Change Property The Change Property action enables you to dynamically alter a property of one of the following tags: ✦ <div> ✦ <form> Note Note 543504 ch12.qxd 12/10/03 10:32 PM Page 457 [...]... CD-ROM that comes with this book contains several useful MXP behavior extension files In addition, you can find a large selection of MXP extension files on the Dreamweaver Exchange site, which you can reach by choosing Help ➪ Dreamweaver Exchange Chapter 12 ✦ Using Behaviors 2 To install the extension in Dreamweaver, either double-click the MXP extension file, or choose Help ➪ Manage Extensions to... 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: 1 Locate the behavior, which must be packaged as an MXP extension file; for example: alignLayer.mxp, cleanupPage.mxp, and so on On the CD-ROM... 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 MX 2004 folder Figure 12-26: You use the Extension Manager to install and remove MXP extension files from Dreamweaver Altering the parameters of a behavior You can alter any of the attributes for your inserted behaviors at any time To modify a behavior... Named 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 You cannot mix text and numbers, however, as in a telephone number such as (212) 55 5-1212 • Email Address: Looks for an e-mail address with the @ sign (Note that this... 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 Here’s the browser compatibility chart for the Go to URL behavior: Go to URL Netscape 3.x Internet Explorer 3.0 Macintosh Okay Fails without error Windows Okay Internet Explorer 3.01 Okay Show Pop-Up Menu and Hide Pop-Up Menu New to the built-in Dreamweaver MX 2004 behavior set... every style sheet option on the fly The Change Property dialog box (see Figure 12 -5) offers a list of the selected tags in the current page Figure 12 -5: The Change Property dialog box enables you to alter attributes of certain tags dynamically Caution 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... sound files have been inserted in the current Web page, Play Sound looks for the sound file to be inserted through the action’s dialog box (see Figure 12- 15) Figure 12- 15: Give your Web page background music and control it with the Play Sound action Note Dreamweaver can detect if a visitor’s browser has the Windows Media Player installed and, if so, it issues the appropriate commands Chapter 12 ✦ Using... stay on the current page and send everyone else to an alternative URL The URLs can be either relative, such as dreamweaver/ index.htm, or absolute, such as http://www.idest.com /dreamweaver/ index.htm Figure 12-6: The Check Browser action is a great tool for segregating old and new browsers 459 460 Part III ✦ Advanced Design Tools and Techniques To use the Check Browser action, follow these steps: 1 Select... to its default size 469 470 Part III ✦ Advanced Design Tools and Techniques 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... Figure 12-18: Modify an existing Navigation Bar object through the Set Nav Bar Image action 5 From the drop-down list in the Advanced category, choose the state for which you want to trigger changes: • Over Image or Over While Down Image • Down Image 6 Select the image you wish to change from the Also Set Image list Dreamweaver lists all the named images on the current page, not just those in the navigation . Later Browsers ✦ IE 5. 5 ✦ 4.0 and Later Browsers ✦ IE 6.0 ✦ IE 3.0 ✦ Netscape 3.0 ✦ IE 4.0 ✦ Netscape 4.0 ✦ IE 5. 0 ✦ Netscape 6.0 Tip 54 350 4 ch12.qxd 12/10/03 10:32 PM Page 454 455 Chapter 12 ✦ Using. column Parameter dialog box for Swap Image behavior 54 350 4 ch12.qxd 12/10/03 10:32 PM Page 451 452 Part III ✦ Advanced Design Tools and Techniques As usual in Dreamweaver, you have your choice of methods. with a different parameter dialog box to enable easy attribute entry. Tip 54 350 4 ch12.qxd 12/10/03 10:32 PM Page 455 456 Part III ✦ Advanced Design Tools and Techniques The following sections