adobe dreamweaver cs5 on demand part 60 potx

ptg 368 Chapter 15 The Change Property behavior allows you to change properties, such as font styles, borders or visibility, for an element on a Web page. The Change Property behavior is useful for adding interactivity to a Web page. For example, you can have the Change Property behavior display a text description or link address when a user points to a picture on a page. Along with the Change Property behavior, you can also use the Change Property Restore behavior, which restores the most recent property changes made by the Change Property behavior. When you use the Change Property Restore behavior, Dreamweaver displays a message dialog box acknowledging the use of the behavior. You can double-click the behavior to display a list of properties being restored. Changing Element Properties Use the Change Property Behavior Open the Web page you want to apply a behavior. Click the Window menu, and then click Behaviors to display the Behaviors panel. Click the element you want to add the Change Property behavior (in this example, select the cell phone image). Click the Add Behavior button (plus sign), and then click Change Property. A dialog box appears, allowing you to set the details of the action. Click the Type Of Element list arrow, and then select the type you want to change (in this example, select DIV). Click the Element ID list arrow, and then select an ID (in this example, select div “apTextSign”). The AP element to the right of the cell phone image contains text, which you’ll change the font size to a larger size. 6 5 4 3 2 1 3 2 4 1 From the Library of Wow! eBook ptg Chapter 15 Working with Behaviors 369 Click the Select option and select the property you want to change (in this example, select fontSize), or click the Enter option and enter the property you want to change. Enter the new value you want (in this example, enter 24). Click OK. To ch ange the trig ger, click the event, click the Event list arrow, and then select the event you want. 10 9 8 7 5 8 9 7 6 Point here to change property Font size changes to 24 pt. 10 From the Library of Wow! eBook ptg 370 Chapter 15 The Drag AP Element behavior allows you let visitors on a Web page to drag an AP (Absolute Positioned) element. This behavior is useful for creating interactive training, games, and interface controls, such as a slider. The behavior allows you to specify how you want the AP element to move. You can constrain the movement in a specific direction, to a specific location or target, or to snap to another element. In order to use the Drag AP Element behavior, you need to call the behavior before the visitor can drag the element. To achieve this, you need to attach the Drag AP Element behavior to the body object with the onLoad event. Dragging an AP Element Use the Drag AP Element Behavior Open the Web page you want to apply a behavior. Click the Window menu, and then click Behaviors to display the Behaviors panel. Create the AP Element you want to add the Drag AP Element behavior. Click <body> in the tag selector in the Document window. Click the Add Behavior button (plus sign), and then click Drag AP Element. A dialog box appears displaying the Basic tab. Click the Movement list arrow, and then click Constrained or Unconstrained. If you selected the Constrained option, enter values for Up, Down, Left, and Right (in pixels). The values are relative to the starting position of the AP element. To constrain movement, use the following methods: ◆ Rectangle. Enter positive values in all four boxes. ◆ Vertical. Enter positive values for Up and Down and 0 for Left and Right. 7 6 5 4 3 2 1 4 1 5 2 From the Library of Wow! eBook ptg Chapter 15 Working with Behaviors 371 ◆ Horizontal. Enter positive values for Left and Right and 0 for Up and Down. Enter values for the Drop Target in the available Up, Down, Left, and Right boxes (in pixels), or click Get Current Position to automatically insert the current position of the AP element. The drop target is the spot where you want the visitor to drag the AP element. Values are relative to the top left corner of the browser window. Enter a Snap If Within value (in pixels) to specify how close the visitor needs to be to the drop target before the AP element snaps to the target. To de fine the drag handle, track movement, and trigger an action, click the Advanced tab. ◆ Drag Handle. Click the list arrow, and then select Entire Element or Area Within Element. For an area, enter values for the area you want within the element. ◆ While Dragging. Select the Bring Element To Front, then check box, select a position, and then enter the script code or function you want executed during the drag. ◆ When Dropped. Enter the script code or function you want executed when dropped, and then select the Only If Snapped check box to execute the code only if snapped. Click OK. To ch ange the trig ger, click the event, click the Event list arrow, and then select the event you want. 12 11 10 9 8 9 6 8 10 11 Select the advanced options you want 12 From the Library of Wow! eBook ptg 372 Chapter 15 The Show-Hide Elements behavior allows you to show, hide, or restore the visibility of elements on a page. This behavior is useful for displaying information or providing interaction when a visitor points to an element. For example, when a visitor points to a picture or a text box, you can display information about the item to provide added value and some interactivity. When the visitor moves the pointer away, you can restore the element back to its original state. Showing and Hiding Elements Show or Hide Page Elements Open the Web page you want to apply a behavior. Click the Window menu, and then click Behaviors to display the Behaviors panel. Click the element you want to add a behavior. Click the Add Behavior button (plus sign), and then click Show- Hide Elements. A dialog box appears, allowing you to set the details of the action. Click the element you want to show, hide, or restore. Click Show, Hide, or Default, which restores the default visibility of the element. Repeat steps 5 and 6 for each element you want. Click OK. To ch ange the trig ger, click the event, click the Event list arrow, and then select the event you want. 9 8 7 6 5 4 3 2 1 5 6 8 4 9 From the Library of Wow! eBook ptg Chapter 15 Working with Behaviors 373 The Call JavaScript behavior runs a line of script when an event occurs. The behavior only runs one line of script, which means you can execute a single line of code or a procedure that calls a section of code. To use the Call JavaScript behavior, you need JavaScript experi- ence and coding knowledge, which is outside the scope of this book. Executing a JavaScript Use the Call JavaScript Behavior Open the Web page you want to apply a behavior. Click the Window menu, and then click Behaviors to display the Behaviors panel. Click the element you want to add a behavior. Click the Add Behavior button (plus sign), and then click Call JavaScript. A dialog box appears, allowing you to set the details of the action. Type the line of script you want to run. Click OK. To ch ange the trig ger, click the event, click the Event list arrow, and then select the event you want. 7 6 5 4 3 2 1 1 4 2 3 5 6 From the Library of Wow! eBook ptg This page intentionally left blank From the Library of Wow! eBook . interface controls, such as a slider. The behavior allows you to specify how you want the AP element to move. You can constrain the movement in a specific direction, to a specific location or. Unconstrained. If you selected the Constrained option, enter values for Up, Down, Left, and Right (in pixels). The values are relative to the starting position of the AP element. To constrain movement, use. Element To Front, then check box, select a position, and then enter the script code or function you want executed during the drag. ◆ When Dropped. Enter the script code or function you want