dreamweaver cs5 all in one for dummies phần 6 ppt

Book IV Chapter 2 JavaScript Behaviors and Spry Widgets 415 Set Text of Container Behavior To begin using this behavior, you must start with at least one container with an ID on the page. For instance, you may want to apply this behavior to an AP Div layer. (See Book IV, Chapter 1 to learn more about working with layers). To attach the Set Text of Container behavior to a page, follow these steps: 1. Select a container on your page. 2. Click the Add Behavior (+) icon in the Behaviors panel, and then choose Set Text➪Set Text of Container. The Set Text of Container dialog box appears, as shown in Figure 2-14. Figure 2-14: Change the text in a container. 3. In the Container menu, select the target container. The target container is the container where the new content is dis- played. If the container you want to target isn’t listed, your target doesn’t yet have an ID attribute. Close the dialog box, give your con- tainer an ID with the Properties inspector, and start over at Step 1. 4. In the New HTML text box, type or paste the replacement HTML con- tent for the targeted container. Enter any HTML, including valid JavaScript and formatting code. When no formatting is entered with the New HTML text, the original text color and background color of the container is applied to the new text content. 5. Click OK to close the dialog box. 6. Verify that the event handler listed in the Events column of the Behaviors panel is the one you want to use. The default event handler for this behavior is onFocus. 25_610770-bk04ch02.indd 41525_610770-bk04ch02.indd 415 5/6/10 1:14 PM5/6/10 1:14 PM 416 Set Text of Frame Behavior Set Text of Frame Behavior The Set Text of Frame behavior works exclusively with framesets and allows you to replace text or HTML content in a frame with a specified action. The HTML replacement content can include any JavaScript property, global vari- able, function call, or other valid expression embedded in the text as long as it’s embedded in braces ({}). To display a brace, type it with a backslash, like this: \{. By allowing you to change the content on a page inside a frame, this behav- ior is an alternative to opening another page in a frame. For example, you may want to change the text inside a frame containing a graphic that, when moused over, changes to display a special message to the visitor or identi- fies the URL of the page inside the frame. With this behavior, most of the frame’s formatting is lost, but you can retain the background and text colors. If you need to control more than text con- tent, you may want to open a new page in the frame instead. To begin using this behavior, you must start with a frameset (see Book IV, Chapter 3). You can use any of Dreamweaver’s preset framesets when you’re creating a new document: Choose File➪New, and then in the New Document window, select a sample Frameset from the Sample Folder in the Page from Sample category. Or choose Modify➪Frameset➪Split Frame and select any option to create a quick and simple frameset for an existing open document. To add the Set Text of Frame behavior to your page, follow these steps: 1. Select an object or a text link on your page to which you want to attach the behavior. The object can be inside any of the frames in the frameset. 2. Click the Add Behavior (+) icon in the Behaviors panel, and then choose Set Text➪Set Text of Frame. The Set Text of Frame dialog box appears, where you can enter in the new HTML content for the page, as shown in Figure 2-15. Figure 2-15: Enter replacement HTML content for a targeted frame. 25_610770-bk04ch02.indd 41625_610770-bk04ch02.indd 416 5/6/10 1:14 PM5/6/10 1:14 PM Book IV Chapter 2 JavaScript Behaviors and Spry Widgets 417 Set Text of Status Bar Behavior 3. In the Frame menu, select the target frame. The target frame is the frame that displays the replacement content. 4. In the New HTML text box, type or paste the replacement HTML con- tent for the targeted frame. To copy the existing page content of the selected target frame in the text box, click the Get Current HTML button. To use the same background color of the current frame’s page with the new text, select the Preserve Background Color check box. 5. Click OK to close the dialog box. 6. Verify that the event handler listed in the Events column of the Behaviors panel is the one you want to use. If desired, you can change the event handler in the Behaviors panel. Set Text of Status Bar Behavior Use the Set Text of Status Bar behavior to add a text message to the browser window’s status bar (at the bottom-left corner of the window) when the visi- tor interacts with the page in a specified way. For example, you can have the status bar display a message about a particular link or image on the page when the visitor mouses over that link or graphic (such as On Sale through July 31st, 2010!) or list the title of the given page (such as Contact Us Today for a Free Consultation!) rather than its URL, which appears by default. Although adding a message to the browser status bar can be an interest- ing way to enhance a site visitor’s experience of a page, many visitors don’t know to look in this area for messages or may even have the status bar disabled. Also, because the status bar displays useful information from the browser, replacing it with your own text might be seen as rude to some visi- tors. In addition, browser support for this behavior may vary slightly, so be sure to test it in your target browsers before publishing. For these reasons, think about using this behavior for optional information messages rather than important ones. With your important messages, con- sider using the Popup Message, Open Browser Window, or Show-Hide Layers behaviors, all of which are described in this chapter. Also, just like the Popup Message behavior, any JavaScript property, global variable, function call, or other valid expression can be embedded in the status bar text as long as it’s embedded in braces ({}). 25_610770-bk04ch02.indd 41725_610770-bk04ch02.indd 417 5/6/10 1:14 PM5/6/10 1:14 PM 418 Set Text of Text Field Behavior To add the Set Text of Status Bar behavior to your page, follow these steps: 1. Select an object or a text link on your page. This is the object or text link that triggers the action. 2. Click the Add Behavior (+) icon in the Behaviors panel, and then choose Set Text➪Set Text of Status Bar. The Set Text of Status Bar dialog box appears, as shown in Figure 2-16. Figure 2-16: Add a custom message to the browser status bar. 3. Type your text message, including any additional JavaScript expressions. For example, to display the URL for the visited page when mousing over a target object or text link using a JavaScript function, type the following code: The URL for this page is {window.location}. Try to keep your message short because many browsers that support this behavior may truncate longer messages. 4. Click OK to close the dialog box. 5. Verify that the event handler listed in the Events column of the Behaviors panel is the one you want to use. The default event handler for the Set Text of Status Bar behavior is onMouseOver, but you can change it, if needed, in the Behaviors panel. Note: This behavior is not supported by all browsers, and in the brows- ers that do support this behavior, its functionality often depends on user preferences. Set Text of Text Field Behavior The Set Text of Text Field behavior is a handy behavior that replaces the existing content of a text field on a form with specified new content. For example, you may want to enter sample text so a visitor knows the kind of 25_610770-bk04ch02.indd 41825_610770-bk04ch02.indd 418 5/6/10 1:14 PM5/6/10 1:14 PM Book IV Chapter 2 JavaScript Behaviors and Spry Widgets 419 Set Text of Text Field Behavior content they’re expected to type into the field. The new HTML content can have any JavaScript property, global variable, function call, or other valid expression embedded in the text as long as it’s embedded in braces ({}). You can even display a brace by adding a backslash before it, like this: \{. To begin using this behavior, you must start with at least one text field in a form on the page. To add a text field to your page, choose Insert➪Form➪Text Field, or click the Text Field icon in the Forms category of the Insert panel to insert a text field at the insertion point in an open document. If prompted to add the Form Tag, click Yes. When the page has multiple text fields, it’s also helpful to name all the form fields to better iden- tify them before attaching this behavior. Follow these steps to use the Set Text of Text Field behavior: 1. Select a text field in a form in the open document, and give it an ID in the Properties panel. 2. Click the Add Behavior (+) icon in the Behaviors panel, and then choose Set Text➪Set Text of Text Field. The Set Text of Text Field dialog box appears, as shown in Figure 2-17. Figure 2-17: Add example text into a form field. 3. In the Text Field menu, select the target text field. The target text field is where the new content will be displayed. 4. In the New Text text box, type or paste the replacement text. 5. Click OK to close the dialog box. 6. Verify that the event handler listed in the Events column of the Behaviors panel is the one you want to use. The default event handler is onBlur. If you’d like a different event han- dler, you can change it in the Behaviors panel. 25_610770-bk04ch02.indd 41925_610770-bk04ch02.indd 419 5/6/10 1:14 PM5/6/10 1:14 PM 420 Show-Hide Elements Behavior Show-Hide Elements Behavior When one or more AP Div layers are on your page, you can control a layer’s visibility (whether it’s shown or hidden) with the Show-Hide Elements behav- ior. You can use this behavior also to restore an AP Div layer’s visibility to its default setting. The Show-Hide Elements behavior is great for hiding and showing informa- tion as a visitor interacts with objects on your Web page. For example, you may have an online photo gallery page with a series of thumbnail images and an area to display close-up images. With the Show-Hide Elements behavior, when the visitor slides the cursor over one of the thumbnail images, an AP Div layer with a close-up image is shown, and when the visitor’s cursor moves off the thumbnail, the close-up AP Div layer is hidden. Before using this behavior, you must have at least one AP Div layer on the page. To add an AP Div layer to your page, choose Insert➪Layout Objects➪AP Div, or click the AP Div icon in the Layout category of the Insert panel and draw an AP Div layer anywhere in an open document. You may also want to rename all your AP Div layers with the Properties inspector or in the AP Elements panel before attaching this behavior to objects on your page to help identify them more easily. (Book IV, Chapter 1 describes layers in detail.) Follow these steps to use the Show-Hide Elements behavior on your page: 1. Select any object on your page (except a layer), such as a text link, an image, or any object with an id attribute. 2. Click the Add Behavior (+) icon in the Behaviors panel, and then select Show-Hide Elements. The Show-Hide Elements dialog box appears, as shown in Figure 2-18. If the behavior is not available in the list of behaviors, you may need to select a different object on your page, such as the <body> tag or a link (<a>) tag. Figure 2-18: Alter a layer’s visibility in the browser. 25_610770-bk04ch02.indd 42025_610770-bk04ch02.indd 420 5/6/10 1:14 PM5/6/10 1:14 PM Book IV Chapter 2 JavaScript Behaviors and Spry Widgets 421 Show-Hide Elements Behavior 3. In the Elements menu, select the element for which you want to change the visibility. 4. Edit the element’s visibility status by clicking one of the following buttons: • Show: Show the selected element. • Hide: Hide the selected element. • Default: Restore an element’s default visibility. 5. Repeat Steps 3 and 4 for each additional element that you want to modify. A single event handler controls all the elements selected here. 6. Click OK to close the dialog box. 7. Verify that the event handler listed in the Events column of the Behaviors panel is the one you want to use. You can always change the event handler in the Behaviors panel. Be aware that some browsers support layers differently than others, espe- cially older browsers. To stop browsers from altering layers, try setting layer clip parameters or adding images or text to the layer to hold the layer open to the size you want it to be. (See Book IV, Chapter 1 for more information on setting layer clip parameters.) Another cool use for this behavior is to make a preload layer by creating a layer that covers the rest of the page as the page loads. Your visitors are engaged with other content on this preload layer, such as a Flash movie, while the main content loads. Then, when the content finishes loading, the preload layer is hidden. Follow these steps to make a preload layer with the Show-Hide Elements behavior: 1. Create an AP Div layer on your page in the size you need to cover the page’s main content while it loads. To add an AP Div layer to your page, click the AP Div icon in the Layout category of the Insert panel and draw an AP Div layer anywhere in an open document. 2. Name the new AP Div layer “preload” or something similar in the Properties inspector or in the AP Elements panel to help easily iden- tify the layer when attaching the behavior. 25_610770-bk04ch02.indd 42125_610770-bk04ch02.indd 421 5/6/10 1:14 PM5/6/10 1:14 PM 422 Swap Image Behavior 3. In the AP Elements panel, set the preload layer’s z-index to 1. The preload layer needs to be at the top of the z-index (stacking order) for the behavior to work properly. 4. With the preload layer selected, edit the layer’s background color to match the rest of the page. Use the color picker in the Properties inspector to set the layer back- ground color. 5. To add HTML content to the preload layer, click inside the layer and type or paste the content. For example, on the preload layer you may want to play a flash SWF file, display an animated GIF, or show a Please wait . . . page loading type of message. You can give visitors the option of closing the preload layer by embed- ding a link or button in it that closes the layer using another Show-Hide Elements behavior. 6. In the Tag selector at the bottom of the open Document window, select the <body> tag. Then click the Add Behavior (+) icon in the Behaviors panel, and select Show-Hide Elements. The Show-Hide Layers dialog box appears. 7. Select the preload layer in the Named Elements listing, and then click the Show button. 8. Click OK to close the dialog box. 9. Verify that the event handler next to the Show-Hide Layers behavior reads onLoad. If not, change the event handler to onLoad in the Properties inspector. Swap Image Behavior With the Swap Image behavior, you can assign a rollover button script to any graphic on the page. When the user moves the cursor over the graphic, the JavaScript tells the user’s browser to display a new graphic (the over state graphic) in its place. You also have the option to preload images and restore the graphic to its original state with the onMouseOut event. You can even assign rollover graphics to several graphics on the page with one event han- dler, such as changing a button graphic and an image graphic at the same time when the visitor places the mouse cursor over the button graphic. 25_610770-bk04ch02.indd 42225_610770-bk04ch02.indd 422 5/6/10 1:14 PM5/6/10 1:14 PM Book IV Chapter 2 JavaScript Behaviors and Spry Widgets 423 Swap Image Behavior The script for this behavior calls an action that changes the image listed in the src attribute of the <img> tag. The two things you need to do before using this behavior are to name the normal state image in the Name field in the Properties inspector and to ensure that the over state image has the same width and height dimensions as the normal state graphic for a smooth mouseover effect. To add the Swap Image behavior to your page, follow these steps: 1. Select an image on your page. If you need to insert an image, click the Image icon in the Common cat- egory of the Insert panel or choose Insert➪Image. 2. In the Properties inspector, type a name (ID) for the image in the Name field. If you forget to name your images, you can still use the Swap Image behavior, but it may be hard to assign the behavior to the correct image when your page has multiple unnamed images. 3. If assigning the same rollover behavior to multiple graphics on your page, repeat Steps 1 and 2 until all the graphics on your page are in place and named. In other words, if you know you want images 2 and 3 to change when image 1 is moused over, insert and name images 2 and 3. 4. Select the image on the page that you want to attach the behavior to, click the Add Behavior (+) icon in the Behaviors panel, and then select Swap Image. The Swap Image dialog box appears, displaying a list of named (and unnamed) images on the page (see Figure 2-19). Figure 2-19: Add the Swap Image behavior to named images on your page. 25_610770-bk04ch02.indd 42325_610770-bk04ch02.indd 423 5/6/10 1:14 PM5/6/10 1:14 PM 424 Swap Image Restore Behavior 5. In the list, select a named image that you want to assign a rollover graphic to, and then click the Browse button to select the over state graphic for that image. If you know the path and filename, you can type it in the Set Source To text field rather than browsing for it. 6. Repeat Steps 4 and 5 to create multiple rollover behaviors at once. For example, you’d repeat Steps 4 and 5 if you want to change both a photo and a button graphic with one mouseover event. 7. Select the Preload Images and Restore Image onMouseOut options. By default, both options are enabled, which are recommended settings: • Preload Images: Add JavaScript to the head area of the page that tells the visitor’s browser to preload the rollover graphics when the page loads so that the user experiences no delay in viewing the rollover effect. Leave this option selected because images that aren’t preloaded could create problems for displaying the page in a browser. • Restore Image onMouseOut: Add JavaScript to the page that tells the browser to restore the over state image to the normal state image when the site visitor moves the mouse cursor away from the rollover image graphic. Figure 2-20 shows an example of how you can use the Swap Image behav- ior to create multiple over states for a single mouse event. When a visitor mouses over a main navigation button, such as the one for reptiles, the navi- gation button over state graphic appears, along with a graphic of a lizard and a graphic containing text about reptiles. Figure 2-20: Create dynamic rollover graphic effects. Graphic containing text Graphic Over state graphic Swap Image Restore Behavior The Swap Image Restore behavior restores a swapped image to its original state. Because the Swap Image Restore behavior is added automatically when you use the Swap Image behavior and leaves the Restore option 25_610770-bk04ch02.indd 42425_610770-bk04ch02.indd 424 5/6/10 1:14 PM5/6/10 1:14 PM [...]... and horizontally into as many frame rows and columns as you need to achieve your layout For example, in Figure 3-1, the browser window is divided into three frames, with static company information in the top frame, static navigation links in the left frame, and general information in the main frame When a visitor clicks a link in the navigation area, a new page is displayed in the main frame In the code,... surrounding it 26_ 610770-bk04ch03.indd 449 5 /6/ 10 1:14 PM 450 Setting Frame Properties with the Properties Inspector 2 In the Properties inspector, check to see if the expander arrow (in the lower-right corner) is pointing up or down If the arrow points down, click it to reveal all the properties, as shown in Figure 3-13 Figure 3-13: The Properties inspector showing all frameset properties 3 In the... site comprising a three-part frameset, with company information in the top frame, some navigation buttons in the left frame, and information pertinent to the Web site’s products or services, such as contact information, in the main frame With this type of frameset, a visitor can click a link in the navigation frame, and the linked page opens in the main frame of the frameset, thereby limiting the amount... adobe.com/designcenter/video_workshop 25 _61 0770-bk04ch02.indd 432 5 /6/ 10 1:14 PM Chapter 3: Designing Pages with Frames In This Chapter ✓ Understanding frames ✓ Creating frames and framesets ✓ Modifying frame and frameset properties ✓ Targeting frames with links ✓ Adding noframes content ✓ Creating floating frames B ack in the early days of the Internet, the most common use of frames was to ease navigation and reduce page loading wait... them on your computer The Extension Manager is a standalone application that installs, manages, and uninstalls extensions in Dreamweaver and other Adobe programs Dreamweaver installs the Extension Manager as part of the Dreamweaver software installation process Visiting the Adobe Exchange Web site Adobe has its Dreamweaver extensions grouped into several categories: Accessibility, App Servers, Browsers,... requiring small fees or as fully supported software extensions for those willing to pay full price Book IV Chapter 2 5 /6/ 10 1:14 PM 4 26 Using Third-Party Behaviors Productivity, Rich Media, Scripting, Security, Style/Format, Tables, Text, Web Analysis, and Web Widgets In addition to listing the platform availability (Windows, Mac, or both) for each of the extensions listed in the Exchange, you can find... document in Design view: ✦ Open the Frames panel The Frames panel, shown in Figure 3-2, displays all the frames in a frameset document and can assist you with selecting the frame elements during the frameset building process To open the Frames panel, choose Window➪Frames 26_ 610770-bk04ch03.indd 4 36 5 /6/ 10 1:14 PM Creating Frames and Framesets 437 Figure 3-2: Open the Frames panel before working with... select the predefined frameset The white areas 26_ 610770-bk04ch03.indd 439 Designing Pages with Frames 1 Open the file you want to display inside a frame in a frameset 2 Place your insertion point somewhere in the file 3 Choose a predefined frameset in the Frames icon drop-down menu in Book IV Chapter 3 5 /6/ 10 1:14 PM 440 Creating Frames and Framesets represent the frames that open in the frameset,... Open in Frame command (as described in the next section) Because framesets can quickly become complicated — especially when you start targeted linking — you may do better nesting with the first method Fortunately, when you use the frame-splitting tools Dreamweaver provides, you can virtually forget about having to oversee the complexity of nesting details because Dreamweaver handles the coding for you... Frameset 26_ 610770-bk04ch03.indd 4 46 5 /6/ 10 1:14 PM Titling a Frameset 447 Saving an individual file in a frame To save a file opened inside a frame: 1 Click inside the frame that contains the file you want to save 2 To save the selected file, choose File➪Save Frame Titling a Frameset One of the most often overlooked parts of a frameset is the frameset title The title for the frameset page appears in the . manages, and uninstalls extensions in Dreamweaver and other Adobe programs. Dreamweaver installs the Extension Manager as part of the Dreamweaver software installation process. Visiting the Adobe. Learning, Navigation, 25 _61 0770-bk04ch02.indd 42525 _61 0770-bk04ch02.indd 425 5 /6/ 10 1:14 PM5 /6/ 10 1:14 PM 4 26 Using Third-Party Behaviors Productivity, Rich Media, Scripting, Security, Style/Format,. application. 25 _61 0770-bk04ch02.indd 4 262 5 _61 0770-bk04ch02.indd 4 26 5 /6/ 10 1:14 PM5 /6/ 10 1:14 PM Book IV Chapter 2 JavaScript Behaviors and Spry Widgets 427 Using Third-Party Behaviors To install, manage,