Dreamweaver MX 2004 phần 5 ppsx

4306c12.qxd 3/22/04 11:40 PM Page 259 dreamweaver behaviors ■ 259 You can download additional Dreamweaver behaviors from the Dreamweaver exchange at www.macromedia.com/cfusion/exchange/index.cfm. You can also access the Dreamweaver exchange by clicking on Dreamweaver Exchange on the Start page, or selecting Get More Behaviors… from the Actions menu. If you are an experienced JavaScript user, you can write your own JavaScript code to create a custom action and add it to the Behaviors panel. For more details, choose Help ➔ Extending Dreamweaver and also see Chapter 32, “Customizing and Extending Dreamweaver.” Behaviors in Fireworks are similar to Behaviors in Dreamweaver. They are used to attach behaviors to interactive image elements, such as rollovers and image maps. Fireworks also has a Behaviors panel that can be used to attach a behavior to a slice or hotspot in a Fire- works file. If a Fireworks rollover file is exported to Dreamweaver, the file can be edited in Dreamweaver’s Behaviors panel. Events and Browsers Events are the key to creating interactivity with behaviors. If you know which events are accessible to scripting, you can make more choices about adding interactivity to your pages. The menu of events available for a particular action is determined by the choice of target browser. Newer browsers include more events. The target browser(s) is specified by choosing the Show Events For option in the Actions menu. The target browser determines which events display in the Events menu for the chosen action. The Show Events For sub- menu includes the following target browser choices: 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 Table 12.1 shows all the events available in the Events menu. The actual choices dis- played in the Events menu vary, depending on the selected action and the target browser. In addition to the events shown in the following table (Table 12.1), many more events are available. Internet Explorer 6 supports more events than any other browser at the present time. A list of events that can be used with Internet Explorer 6 can be viewed at http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/ reference/events.asp#om40_event. 4306c12.qxd 3/22/04 11:40 PM Page 260 260 ■ chapter 12: Incorporating JavaScript Behaviors EVENT BROWSERS DESCRIPTION Table 12.1 SUPPORTED Events and Browser Support onAbort onActivate onAfterPrint onAfterUpdate onBeforeActivate onBeforeDeactivate onBeforePrint onBeforeUpdate onBlur onBounce onChange onClick onContextMenu onDblClick onDeactivate onDrag onDragEnd onDragEnter onDragLeave onDragOver onDrop onError onFinish onFocus onFocusIn onFocusOut onHelp onKeyDown onKeyPress onKeyUp onLoad onLoseCapture onMouseDown onMouseMove IE4+, NS4+ IE5.5+ IE5+ IE4+ IE6+ IE5.5+ IE5+ IE4+ IE4+, NS3+ IE4+ IE3+, NS3+ IE3+, NS3+ IE5+ IE4+, NS4+ IE5.5+ IE5+ IE5+ IE5+ IE5+ IE5+ IE5+ IE4+, NS3+ IE4+ IE3+, NS3+ IE6 IE6 IE4+ IE4+, NS4+ IE4+, NS4+ IE4+, NS4+ IE3+, NS3+ IE5+ IE4+, NS4+ IE3+, NS6 The user stops the browser from completely loading an image. An object is selected as the active element. An associated document is previewed or printed. A bound data element finishes updating the data source. The focus is moved from the active element to another element. The focus is moved from the active element to another element. An associated document is previewed or printed. A bound data element has been changed and the element has lost focus. A specified element loses focus. 1 The contents of a marquee element reach the boundary of the marquee. The user changes a value on the page. The user clicks a page element. The user right-clicks and opens a context menu. The user double-clicks a page element. The focus is moved from the active element to another element. An object is dragged. User releases the mouse at the end of dragging. User drags an object to a drop target. User drags an object out of a drop target. User drags an object over a drop target. User releases mouse button during a drag. A browser error occurs when a page or page element is loading. The contents of a marquee element complete a loop. A specified element gains focus. 2 Occurs just prior to an element gaining focus. Focus is moved to another element. The user clicks the browser’s Help button or Help menu. The user presses any key. The user presses and releases any key. 3 The user releases any key. A page or an image completes loading. The user clicks the mouse on an object while a previous object (for example, a menu) is still open. In this case, the menu has lost capture. The user presses the mouse button. The user moves the mouse while over a specific element. 4306c12.qxd 3/22/04 11:40 PM Page 261 dreamweaver behaviors ■ 261 EVENT BROWSERS DESCRIPTION SUPPORTED onMouseOut IE4+, NS3+ onMouseOver IE3+, NS3+ onMouseUp IE4+, NS4+ onMouseWheel IE6 onMove NS4+ onPropertyChange IE5+ onReadyStateChange IE4+ onReset IE3+, NS3+ onResize IE4+, NS4+ onRowEnter IE4+ onRowExit IE4+ onScroll IE4+ onSelect IE3+, NS3+ onStart IE4+ onStop IE5+ onSubmit IE3+, NS3+ onUnload IE3+, NS3+ The user moves the mouse pointer off a specific element. The user moves the mouse pointer onto a specific element. The user releases a pressed mouse button. User rotates the mouse wheel button. A window or frame is moved. An object property changes. The state of the specified element changes. 4 A form is reset to default values. The user resizes a window or frame. The data source changes the current row. The data source is about to change the current row. The user scrolls up or down. The user selects text in a text field. The contents of a marquee element begin a loop. User clicks the Stop button or leaves the page. The user clicks the Submit button in a form. The user leaves the page. 1 For example, a user clicks in a text field in a form, and then clicks outside the text field. 2 For example, a user clicks in a text field in a form. 3 This event combines onKeyDown and onKeyUp. 4 This event is for objects that can have states, such as Loading, Initializing, or Complete. The Built-In Behaviors Behaviors are named for the 22 actions that are included in Dreamweaver. These built-in behaviors are detailed in the following pages. Once you have added a behavior, a default event displays in the Events column of the Behav- iors panel. If you want to associate a different event with the action, click on the arrow to dis- play the event options for that action. Figure 12.2 Calling a JavaScript Call JavaScript function using the Call JavaScript dia- The Call JavaScript behavior lets you attach custom JavaScript code to an event. This log box JavaScript can be original code or code from a JavaScript library. In the Call JavaScript dialog box, enter the name of a JavaScript method or function, as shown in Figure 12.2, or enter one line of JavaScript code. 4306c12.qxd 3/22/04 11:40 PM Page 262 262 ■ chapter 12: Incorporating JavaScript Behaviors If you enter the name of a function, you need to include the function code in a script block ( <script> </script>) in the head or body section of the page. Use your favorite search engine to find the many free online sources for JavaScript code. Two of our favorites are Dynamic Drive (www.dynamicdrive.com) and The JavaScript Source (http://javascript.internet.com/toc.html). Change Property The Change Property behavior dynamically changes the value of a property of 11 HTML elements including div, form, img, layer, span, select, textarea, and additional form ele- ments such as check boxes, password fields, radio buttons, or text fields. Only certain properties of these 11 elements can be changed, depending on the specific element and the target browser. Once you have selected a page element and added a Change Property action, the Change Property dialog box appears. From this dialog box, follow these steps to add a dynamic change to the value of a property. 1. Choose an object from the Type Of Object menu. 2. Choose the name of the object from the Named Object menu. 3. Choose the property you want to change from Property ➔ Select, or click the Enter radio button and type the property’s name. If you choose Select, you also need to choose a target browser and browser version. If you want to target more than one browser, you need to apply more than one Change Property action. The choice of tar- get browser is important. Different browsers support different properties for some HTML elements. Figure 12.3 shows the Change Property action for a form object. The action property is selected, and IE 4 is chosen as the target browser. The New Value for this property is myscript.pl. Figure 12.3 Change Property dialog box 4306c12.qxd 3/22/04 11:40 PM Page 263 dreamweaver behaviors ■ 263 Knowledge of HTML and JavaScript is required to use the Call JavaScript and Change Prop- erty behaviors. You can obtain more information about HTML and JavaScript through Dreamweaver’s Reference panel (Window ➔ Reference, or Shift-F1). Check Browser The Check Browser behavior directs the user to a specific page depending on the user’s browser and version. This behavior can be attached to a body element or can be used with a null link. When the Check Browser action is added to an object, the Check Browser dialog box is displayed. In this dialog box, follow these steps. 1. Enter the version number of Netscape Navigator to check for. The default is 4.0. 2. Choose an action from the menu. This action tells the browser what to do if it is Netscape Navigator version 4.0 or later. The choices in this menu are the following: • Go To URL • Go To Alt URL • Stay On This Page Figure 12.4 3. Choose an action from the second menu (otherwise). This tells the browser what to Check Browser do if it is not Netscape Navigator 4.0 or later. dialog box 4. Repeat steps 2 and 3 for Internet Explorer. 5. Choose an action from the menu labeled Other Browsers. 6. Enter values for URL and Alt URL, or click the Browse button to navigate to a file. For a URL on a different site, you must enter an absolute path, such as http://www .macromedia.com/support/dreamweaver/. Figure 12.4 shows the Check Browser dialog box. Dreamweaver MX 2004 includes a Check Browser Support icon on the Document tool- bar. You can choose a list of Target Browsers, and Dreamweaver will automatically check for browser compatibility problems every time you save the document. You can add a Check Browser behavior to the page if there are browser compatibility problems with any of the features you’ve added, and send the user to the appropriate page. For more information on Check Browser Support, see Chapter 3, “Setting Up Your Workspace and Your Site.” 4306c12.qxd 3/22/04 11:40 PM Page 264 264 ■ chapter 12: Incorporating JavaScript Behaviors Check Plugin The Check Plugin behavior directs the user to a specific page depending on whether they have a specific plug-in installed. When the Check Plugin action is added to an object, the Check Plugin dialog box is displayed. In this dialog box, follow these steps. 1. Choose a plug-in from Plugin ➔ Select. The five choices follow: • Flash • Shockwave • Live Audio • Quick Time • Windows Media Player Plug-ins can’t be detected by using JavaScript in Internet Explorer. If you select a Flash or Shockwave plug-in in the Check Plugin dialog box, VBScript code will be added to your page in order to detect those plug-ins in Internet Explorer in Windows. No plug-ins can be detected in Internet Explorer on a Mac. 2. Alternatively, enter the exact name of a plug-in in Plugin ➔ Enter. On a PC, the exact plug-in names can be found in Netscape Navigator in the Help menu (Help ➔ About Plugins). On a Mac, choose About Plugins from the Apple menu. 3. Enter a URL in the If Found, Go To URL text box. If you want users to stay on the page if they have the plug-in, leave this text box blank. 4. Enter a URL in the Otherwise, Go To URL text box. If detection is not possible, the user is sent to the URL specified in Otherwise, Go To URL. Because the user might have the plug-in even though it is not detected, you might want the user to be directed to the address specified in If Found, Go To URL. In this case, check the box labeled “Always go to first URL if detection is not possible.” Figure 12.5 shows the Check Plugin dialog box. Figure 12.5 Check Plugin dialog box 4306c12.qxd 3/22/04 11:40 PM Page 265 dreamweaver behaviors ■ 265 Control Shockwave Or Flash The Control Shockwave Or Flash behavior directs a Shockwave or Flash animation to play, stop, rewind, or go to a specific frame in the animation. To attach a behavior to a Shockwave or Flash movie, follow these steps. 1. Insert a Shockwave or Flash movie on the page (Insert ➔ Media ➔ Shockwave, or Insert ➔ Media ➔ Flash). To use this behavior, the media file extension must be .dcr or .dir for Shockwave files, or .swf or .spl for Flash files. 2. Open the Property inspector (Window ➔ Properties). 3. Enter a name for the movie in the blank text field in the upper-left corner of the Property inspector. The movie must have a name in order to use the Control Shock- wave Or Flash behavior. 4. Open the Behaviors panel and add Control Shockwave Or Flash. The Control Shock- wave Or Flash dialog box is displayed. 5. Choose a movie from the Movie menu. 6. Choose one of the four available actions: • Play • Stop • Rewind • Go to Frame Figure 12.6 shows the Control Shockwave Or Flash dialog box. If you choose the Go To Frame action, you must enter a frame number in the box next to that choice. Drag Layer The Drag Layer behavior allows the user to drag a layer. This behavior can be used to create movable ele- ments on a page. To attach a Drag Layer action to a layer, follow these steps: 1. Insert a layer (Insert ➔ Layout Objects ➔ Layer). Figure 12.6 Control Shockwave Or Flash dialog box 4306c12.qxd 3/22/04 11:40 PM Page 266 266 ■ chapter 12: Incorporating JavaScript Behaviors 2. Open the Property inspector (Window ➔ Properties) and note the name for the layer in the text field in the upper-left corner. A default name is assigned by Dreamweaver, such as Layer1, but this name should be changed in the Property inspector. 3. Select the body element. The event that triggers the Drag Layer action must occur before the user can drag a layer, so it’s generally easiest to attach this action to the body element (using an onLoad event). 4. Open the Behaviors panel and choose Drag Layer. The Drag Layer dialog box is dis- played. By default, the Basic tab is shown in front. 5. Choose a layer from the Layer menu. 6. Choose Constrained or Unconstrained from the Movement menu. 7. For constrained movement, enter pixel values in the Up, Down, Left, and Right fields. The pixel values are relative to the starting position of the layer. For vertical movement only, enter 0 in the Left and Right fields. For horizontal movement only, enter 0 in the Up and Down fields. 8. Enter pixel values in the Drop Target Left and Top fields to specify the exact spot where the layer should be dragged. These values are relative to the top-left corner of the browser window. Specifying a drop target is optional. 9. Click Get Current Position to enter the layer’s current Left and Top values. Use this option only if the current position is the target position for the layer. 10. Enter a pixel value in the Snap If Within field to specify how close the user must get to the target before the object snaps to the target. Figure 12.7 shows the Basic tab in the Drag Layer dialog box. Figure 12.7 Drag Layer dialog box, Basic tab 4306c12.qxd 3/22/04 11:40 PM Page 267 dreamweaver behaviors ■ 267 Take a look at the Advanced tab of the Drag Layer dialog box. Use the options on this tab to create a drag handle or specify the layer’s position relative to other layers. You can also use the Advanced tab to specify code that should be executed under dif- ferent conditions. Enter JavaScript code in the Call JavaScript field to repeatedly execute the code while the layer is being dragged, or add JavaScript code in the When Dropped: Call JavaScript field to execute the code when the layer is dropped. You can also check the Only If Snapped box to specify that the code should be executed only if the layer has been dragged to the drop target. Knowledge of JavaScript is required to use the advanced features of the Drag Layer behavior. Figure 12.8 shows the Advanced tab in the Drag Layer dialog box. Figure 12.8 Drag Layer dialog box, Advanced tab Go To URL The Go To URL behavior opens a new page in the current window or in a specified frame. When a Go To URL action is added, the Go To URL dialog box is displayed. In this dialog box, choose a frame or window from the Open In list, and then enter a URL in the URL field. Figure 12.9 shows the Go To URL dialog box. Click OK to close the dialog box. Jump Menu Jump menus are created from the Insert menu (Insert ➔ Form ➔ Jump Menu). It is not necessary to use the Behaviors panel to attach the Jump Menu behavior to an object. Figure 12.9 Go To URL However, the Behaviors panel can be used to edit an existing Jump menu. dialog box Select the Jump menu, open the Behaviors panel, and double-click Jump Menu in the Actions col- umn. The Insert Jump Menu dialog box is dis- played with the current settings for the menu (Figure 12.10). Edit these settings as desired, and click OK. [...]... only if the user changes the contents of the text field Figure 12.27 shows the Validate Form dialog box dreamweaver behaviors ■ 281 Show Pop-Up Menu The Show Pop-Up Menu behavior allows you to add or edit a Dreamweaver MX pop-up menu or edit a Fireworks MX pop-up menu inserted in a Dreamweaver MX document To edit the images in a Fireworks pop-up menu, use the Edit button in the Property inspec­ tor... the Swap Image Restore behavior, click the Restore Images onMouseOut check box in the Swap Image dialog box This behavior restores the original image when the user moves the mouse off the image Dreamweaver MX 2004 does not include timelines or timeline behaviors (Go to Timeline Frame, Play Timeline, and Stop Timeline) Figure 12.26 Swap Image dialog box ■ 279 280 ■ chapter 12: Incorporating JavaScript... CD: the JavaScript (switch.js) is provided as an external file, and you can use Dreamweaver s built-in CSS samples to create a variety of external CSS files Selecting Style Sheets Begin by selecting the style sheets you want to use You can use your own style sheets, or use the samples provided in Dreamweaver 1 To view the Dreamweaver CSS Samples, choose File ➔ New ➔ CSS Style Sheets 2 In the dialog box... bars directly in Dreamweaver If you use Fireworks or Flash to create your graphics, you can export them directly to Dreamweaver, including any HTML that’s been created along with the graphics If you have already created your entire interactive image in Fireworks (whether it be a simple rollover, a navigation bar, or something more complex), you can insert it into your docu­ ment in Dreamweaver with... that should be displayed by default) 5 Then browse to the rollover image (the one that should be displayed when the action takes place—hovering, clicking, and so on) 6 Type alternate text for nongraphical browsers 7 Browse to the destination for the rollover, assuming that you’re using the interactive image as a link 8 Click OK Dreamweaver inserts the rollover Dreamweaver won’t display the rollover... naming the images; however, Dreamweaver automatically assigns default names to images (for example, Image 1, Image 2, and so on) if no image names have been assigned before the Swap Image action is added It is much easier to identify an image if it has a name that means something to you 3 Repeat steps 1 and 2 to add additional images 4 Select an image and open the Behaviors panel 5 Click the plus (+) button... ables, or expressions in the text To use JavaScript code in the text, enclose it in curly braces {} For example: Today is {new Date()} Figure 12. 15 Popup Message dialog box When a Popup Message action is added, the Popup Message dialog box is displayed (Figure 12. 15) In the Mes­ sage text area, enter a text message (and/or JavaScript code if you are experienced with JavaScript) Users have to click OK (Figure... it can be called from this statement Here’s the code: function myYear(){ var myYear = new Date(); myYear = myYear.getFullYear(); } Figure 12.19 Set Nav Bar Image dialog box, Advanced tab dreamweaver behaviors ■ 2 75 To add a Set Text Of Frame action, follow these steps: 1 Create a frameset (Insert ➔ HTML ➔ Frames ➔ Frameset or click the frm icon in the HTML Insert bar) For more information about framesets... assigned by Dreamweaver, such as Layer1, but this name can be changed in the Property inspector if you choose 3 Deselect the layer by clicking the Document window, and open the Behaviors panel 4 Click the plus (+) button and select Show-Hide Layers from the Actions menu The Show-Hide Layers dialog box displays If this choice is unavailable in the Actions menu, make sure you don’t have a layer selected 5 Select... the accompanying CD That’s All, Folks! We’ve covered the essentials of behaviors, but as you have seen, behaviors work closely with many other Dreamweaver features To further advance your skills and knowledge in creating interactive and dynamic web pages using Dreamweaver, see the next chapter, where you’ll learn how to create navigation objects such as buttons, navigation bars, rollovers, and jump menus . onMouseMove IE4+, NS4+ IE5 .5+ IE5+ IE4+ IE6+ IE5 .5+ IE5+ IE4+ IE4+, NS3+ IE4+ IE3+, NS3+ IE3+, NS3+ IE5+ IE4+, NS4+ IE5 .5+ IE5+ IE5+ IE5+ IE5+ IE5+ IE5+ IE4+, NS3+ IE4+ IE3+,. 259 dreamweaver behaviors ■ 259 You can download additional Dreamweaver behaviors from the Dreamweaver exchange at www.macromedia.com/cfusion/exchange/index.cfm. You can also access the Dreamweaver. not possible.” Figure 12 .5 shows the Check Plugin dialog box. Figure 12 .5 Check Plugin dialog box 4306c12.qxd 3/22/04 11:40 PM Page 2 65 dreamweaver behaviors ■ 2 65 Control Shockwave Or Flash