Using the Behaviors Panel

The Behaviors panel, available by selecting the Behaviors option from the Window menu, is the catalyst for attaching behaviors to objects on your page. Although we'll certainly cover the myriad of available behaviors throughout the chapter, for now let's walk through the process of attaching a simple behavior, similar to the one we wrote by hand, using the Behaviors panel. To do this, follow these steps:

1.	Create a new HTML page by choosing the New option from the File menu. When the New Document dialog appears, select the HTML option from the Basic Page category and click Create.
2.	With your cursor in the new blank page, insert a new Button form object by cliciking the Button icon from the Forms category of the Insert bar.
3.	When the Add Form Tag dialog appears, click No.
4.	With the Button form object selected, change the Action to None so the button doesn't try to submit or reset the non-existent form when it's clicked. You can also change the button's Value to read anything you'd like. I'll change mine to say Click Me.
5.	If you haven't done so already, open the Behaviors panel by choosing the Behaviors option from the Window menu (or by pressing Shift+F4). With the panel open, click the Add (+) icon to expand the Behaviors list and choose the Popup Message Behavior similar to Figure 10.2. Figure 10.2. Select the Popup Message Behavior from the Behaviors panel list.
6.	When the Popup Message dialog appears, enter some text. I'll enter the text Hello. Click OK.
7.	Save your work and test the results in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). Click the button in the browser to see the popup message appear.

As you can see, attaching behaviors to objects is relatively simple. You just select your object and then choose the desired behavior from the list in the Behaviors panel.

Beyond the simplicities of attaching behaviors to objects lies functionality for managing events, event views, and determining browser support. The callouts in Figure 10.3 demonstrate the selectable options exposed by the Behaviors panel.

Figure 10.3. The Behaviors panel includes functionality for managing behaviors and events associated with behaviors.

In detail, the functionality exposed in the Behaviors panel is described here:

• Event: After you've added a behavior, the event associated with the action appears in this column. By default, Dreamweaver lists all events supported by the selected object. Although form objects, hyperlinks, and the page might share similar events, other objects might have different events all together. To pick a different event for selected object, click just to the right of the event in the event's row and choose the event from the drop-down menu (see Figure 10.4).

  Figure 10.4. Supported events for a particular object appear in the events drop-down menu.

  

  
  

  NOTE

  Depending on the selected object, event names may appear in parentheses. In general, these events are available only for links. Selecting an event that appears within parentheses automatically adds a null link (javascript:;) to the hyperlink's Href attribute. This prevents the link from trying to refresh the page by simply calling the JavaScript function.

  
  

• Action: The action associated with the behavior appears in this column. The action cannot be changed but can be modified by double-clicking it. Doing so opens the original dialog associated with the behavior.

• Show Set Events: Click this icon to display only events that have been attached to a particular object.

• Show All Events: Click this icon to display all events supported by a particular object, even though they might not be in use. After you've entered this mode, you can associate behaviors with particular events by selecting the event and then clicking the Add (+) icon and selecting a behavior.

• Add (+): Use this submenu to pick from the list of Dreamweaver behaviors. This option is covered with more detail later in this section.

• Remove (): After you've added a behavior, you can remove it by selecting it and clicking the Remove () button. You can also choose the Delete Behavior option from the panel's Options menu to remove a behavior.

• Reposition Behavior: When you have multiple behaviors associated with a particular object, use the up and down arrows to position particular behaviors within the list. Doing this allows you to set which behaviors is called before or after others.

For the most part, the functionality outlined in these bullet points is useful only after you've added a behavior. As I've mentioned, you can add a behavior by selecting the object on the page, clicking the Add (+) icon, and then picking one of the following pre-installed behaviors from the list:

• Call JavaScript

• Change Property

• Check Browser

• Check Plugin

• Control Shockwave or Flash

• Drag Layer

• Go To URL

• Jump Menu and Jump Menu Go

• Open Browser Window

• Play Sound

• Popup Message

• Preload Images

• Set Nav Bar Image

• Set Text

• Show and Hide Popup Menu

• ShowHide Layers

• Swap Image and Swap Image Restore

• Timeline

• Validate Form

Of course, choosing the appropriate behavior is really up to you. Unfortunately, trying to figure out what each behavior does can be a daunting task. For this reason, we'll describe each behavior throughout the rest of this chapter (except for the Popup Message behavior, since we've covered that in the beginning of the chapter). Before we do however, I want to discuss one more option available from the Add Behavior list: the Show Events For submenu (see Figure 10.5).

Figure 10.5. Select a browser version from the Show Events For submenu to display a list of supported events for different types of browsers.

The Show Events For submenu contains a list of browser versions, a generic HTML 4.01 option, and the backwards-compliant 4.0 and Later Browsers option. The browser selection you make from this menu determines which events appear in the Events pop-up menu. Older browsers generally support fewer events than newer browsers, and in most cases, the more general your choice of target browsers, the fewer events are shown. For example, I'll select Netscape 4.0 from the Show Events For submenu. As you can see from Figure 10.6, the events shown in the Events pop-up menu for the Behavior are limited.

Figure 10.6. Events supported in the Netscape 4.0 browser are limited. For this reason, the events you get to choose from are also limited.

Alternatively, I can choose the Internet Explorer 6.0 option from the Show Events For submenu. Because Internet Explorer is a much newer browser, it supports numerous events that weren't supported in older browsers. Figure 10.7 shows the long list of supported events for Internet Explorer 6.0.

Figure 10.7. Events supported in the Internet Explorer 6.0 browser are much greater than those supported in older browsers.

Because Netscape 4.0 and Internet Explorer 4.0 browsers are still in use, Dreamweaver provides the 4.0 and Later Browsers option. Of course, the needs of your organization dictate which event set you use. If you're developing for the web and want to target the most people, choose either the 4.0 and Later Browsers option or the HTML 4.01 option. By default, Dreamweaver defaults to the HTML 4.01 option.

You've probably noticed that the Events pop-up menu associated with a particular behavior contains events that are easy to understand just by their names and others that are not so easy to understand. Before we begin discussing the different types of events, let's quickly highlight the more popular events you might decide to use with your behaviors. For the most part, the following events are the ones you'll use most often:

• onClick: Event is fired and action is called when the object is clicked.

• onDblClick: Event is fired and action is called when the object is double-clicked.

• onMouseDown: Event is fired and action is called while the user's left mouse click is down. This event works great when you need to call an action repeatedly while the user holds the mouse button down (dragging an object, for instance).

• onMouseUp: Event is fired and action is called when the user's left mouse button is released. This event is similar to the onClick event.

  NOTE

  There is no practical difference between onClick and onMouseUp. onMouseUp is supposed to used with the <a> tag and onClick is supposed to be used with buttons. They are interoperable though.

  
  

• onMouseOver: Event is fired and action is called when the user's mouse pointer rolls over an object.

• onMouseOut: Event is fired and action is called when the user's mouse pointer rolls out of an object.

• onFocus: Event is fired and action is called when the object is highlighted. For instance, if my cursor is in the address bar of the browser and I press Tab to highlight the next object (possibly an object in the document), the next object has focus and the address bar loses focus.

• onBlur: Event is fired and action is called when the object loses its highlight state. For instance, if my cursor is in the address bar of the browser and I press Tab to highlight the next object (possibly an object in the document), the next object has focus and the address bar loses focus. That loss of focus is the onBlur event.

• onLoad: Event is fired and action is called when the page is loaded.

• onUnLoad: Event is fired and action is called when the browser is closed or a different page is loaded.

Now that you an idea as to what behaviors are, you're familiar with the Behaviors panel, you understand how behaviors are attached to objects, and you understand the fundamentals of events, let's move forward and begin outlining each behavior in detail.

Call JavaScript

You can use the Call JavaScript behavior when you want to write inline JavaScript for an object without having to switch to Code view. To demonstrate this behavior, let's add a Close Window button to the page. When the user clicks this button, we'll use one of the built-in JavaScript functions (close()), to display a Close Window confirmation dialog. Because no behavior exists for this action, we'll use the Call JavaScript behavior to write it ourselves. Begin by following these steps:

1.	With your cursor in the page, insert a new Button form object by clicking the Button icon from the Forms category of the Insert bar.
2.	When the Add Form Tag dialog appears, click No.
3.	With the Button form object selected, change the Action to None so that the button doesn't try to submit or reset the form when it's clicked. You can also change the Label to read anything you'd like. I'll changed my button's label to say Close Window.
4.	With the Close Button selected, choose the Call JavaScript behavior from the Add (+) menu in the Behaviors palette. The Call JavaScript dialog appears.
5.	In the dialog, enter the code window.close(); (including the final semicolon).
6.	Click OK.
7.	If the selected event isn't onClick, change it to the onClick event now.

Save your work and preview the results in Internet Explorer by choosing the Preview in Browser option from the Document bar (or by pressing F12). You'll notice that when you click the Close button in Internet Explorer, a Close dialog appears, asking whether you want to close the browser window (see Figure 10.8).

Figure 10.8. The Close Window dialog asks whether you want to close the existing browser window.

As you can see, the Call JavaScript behavior allows you to quickly write inline JavaScript functions that don't already exist as behaviors without having to switch to Code view.

Change Property

You can use the Change Property behavior as a way of changing the physical characteristics of a particular object. For instance, when a button is clicked, you might want to set the background color of a layer, set the text value of a text box, and so on. For our example, we'll use the Change Property behavior to add text to a text box dynamically when a button is clicked. You can do this by following these steps:

1.	With your cursor in the page, insert a new Button form object by clicking the Button icon from the Forms category of the Insert bar.
2.	When the Add Form Tag dialog appears, click Yes.
3.	With the Button form object selected, change the Action to None so that the button doesn't try to submit or reset the form when it's clicked. You can also change the Label to read anything you'd like. I'll change mine to say Set Text.
4.	Now add a Text Field form object to the Button by clicking the Text Field icon from the Forms category of the Insert bar.
5.	With the Set Text button selected, choose the Change Property behavior from the Add (+) menu in the Behaviors panel. The Change Property dialog appears.
6.	In the dialog, select the INPUT/TEXT option from the Type of Object menu, choose the text "textfield" in form "form1" option from the Named Object menu, choose the value option from the Select menu in the Property radio group, and type the text Hello World in the New Value text box. When you finish, the results will look similar to Figure 10.9. Figure 10.9. Customize the Change Property dialog.
7.	Click OK.
8.	If the selected event isn't onClick, change it to onClick now.

Save your work and preview the results in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). You'll notice that when you click the Set Text button in the browser window, the text Hello World is written into the accompanying text box (see Figure 10.10).

Figure 10.10. Clicking the button causes a text value to be written into the text field.

Although we've merely covered the basics as it relates to the Change Property dialog, you can begin to see the benefits it exposes. Beyond the simplicities of working with text fields, the Change Property dialog also supports the following functionality:

• Type of object: Select from a list of eleven supported objects. The objects that can have properties set include layer, div, span, image, form, check box, radio button, text field, text area, password, and list/menu.

• Named object: After you select the type of object you want to change the property for, the objects, if they exist within a form on the page, will appear in this list.

• Property: Select: Customizable properties for the selected object appear in this list. You might also want to choose your target browser from the menu to the right.

• Property: Enter: Although Dreamweaver includes common customizable properties, other less-used properties must be added by hand in this text box.

• New value: Enter the new value for the customized property in this text box.

Check Browser

It's considered common practice in web development to create pages suited for the variety of browsers currently available. The reason for this is simple: Users who visit your website using Internet Explorer 6.0 will have a much richer experience than those visiting your website using Netscape 4. To accommodate both users, you might decide to create two different websitesone that includes limited functionality and is mostly text-based, and another, a much richer design, that could potentially include CSS, JavaScript, and perhaps Flash animations. The dilemma is that you'll need some mechanism for detecting the type of browser the user is using to visit your site and then react to that discovery by displaying the appropriate content. The Check Browser behavior does just this. To demonstrate this behavior, follow these instructions:

1.	With your cursor in the same page we've been working with, insert a new Button form object by clicking the Button icon from the Forms category of the Insert bar.
2.	When the Add Form Tag dialog appears, click No.
3.	With the Button form object selected, change the Action to None so that the button doesn't try to submit or reset the form when it's clicked. You can also change the Label to read anything you'd like. I'll change mine to say Check Browser.
4.	With the Button object selected, choose the Check Browser behavior from the Add (+) menu in the Behaviors panel. The Check Browser dialog appears.
5.	The dialog allows you to check for Netscape versions before or after 4.0 and for Internet Explorer versions before or after 4.0; you can react accordingly by specifying the URL of the web page you want to use if the browser is 4.0 or later and an alternate URL if the browser is before version 4.0. A third drop-down menu specifies which URL to redirect to if it's any browser other than Netscape or Internet Explorer 4.0. To test the functionality, let's add the path index.htm to the URL text box and altindex.htm to the Alt URL text box. When you finish, the results will look similar to Figure 10.11. Figure 10.11. Customize the Check Browser dialog so that it goes to index.htm if the browser version is Netscape or Internet Explorer version 4.0 or greater.
6.	Click OK.
7.	If the selected event isn't onClick, change it to onClick now.

Based on our additions, when we click the Check Browser button in Internet Explorer or Netscape versions 4.0 or later, the page is redirected to index.htm. However, if we click the Check Browser button in Netscape or Internet Explorer versions 4.0 and earlieror any browser other than Netscape or Internet Explorer, such as Firefoxthe page is redirected to altindex.htm. try it for yourself in all three browsers. You'll notice that, when you preview the page in Firefox and click the Check Browser button, the page redirects to altindex.htm.

Of course, the best way to integrate this functionality is by placing it in a splash page called index.htm that the user doesn't ever get to see. Ideally, when index.htm loads, the Check Browser behavior script runs, checks the browser type, and then redirects accordingly. This would make the process much more seamless than forcing the user to click a button.

Check Plugin

Similar to the Check Browser behavior, the Check Plugin behavior makes it possible to check whether end users have a specific plug-in such as QuickTime, Flash, Shockwave, LiveAudio, or Windows Media Player installed on their systems. If the plug-in is detected, you can send the users to a specific page. If it's not found however, you can direct them to an alternate page. To demonstrate this behavior, follow these instructions:

1.	With your cursor in the same page we've been working with, insert a new Button form object by clicking the Button icon from the Forms category of the Insert bar.
2.	When the Add Form Tag dialog appears, click No.
3.	With the Button form object selected, change the Action to None so that the button doesn't try to submit or reset the non-existent form when it's clicked. You can also change the Label to read anything you'd like. I'll change mine to say Check Plugin.
4.	With the Button object selected, choose the Check Plugin behavior from the Add (+) menu in the Behaviors panel. The Check Plugin dialog appears.
5.	As you can see, the dialog allows you to check for one of the five plug-ins listed earlier by choosing the specific option from the Plugin: Select menu. If the plug-in you need is not listed in the menu, click the Plugin: Enter radio button and type one of your choice in the text box. In the If Found, Go to URL text box, enter the URL to go to if the plug-in is found. Alternatively, enter the URL of the page to go to if the plug-in was not found in the Otherwise, Go to URL text box. Often, visitors without the plug-in are prompted by the browser to download the plug-in. If the plug-in content is not essential to your page, leave the final Always Go to First URL if Detection Is Not Possible check box option deselected. When you've finished, your dialog may resemble mine (see Figure 10.12). Figure 10.12. Check for the Flash plug-in and enter pages to go to if the plug-in is detected or if it cannot be detected.
6.	Click OK.
7.	If the selected event isn't onClick, change it to onClick now.

Save your work and test the results in the browser by choosing the Preview in Browser option (or by pressing F12). If you're using a modern browser that has the Flash plug-in already installed, the page should redirect to index.htm right after the user clicks the Check Plugin button.

Again, ideally, you'd want to create a page that detects the plug-in and responds accordingly. With this behavior, however, you can simply leave the If Found, Go to URL text box blank. If the plug-in is found, the user will stay in the same page; otherwise the browser will display the alternate URL.

Control Shockwave or Flash

As you'll see in Chapter 20, "Integrating with Flash and Shockwave," you can control the animation of Flash and Shockwave movies using the Control Shockwave or Flash behavior. For instance, you might want to add a button that, when clicked, plays, stops, or goes to a specific point in the movie's timeline. All of this, as you'll see in Chapter 20, is possible with the Control Shockwave or Flash behavior.

Drag Layer

As you'll see in the next chapter, "Layers in Dreamweaver," you can use the Drag Layer behavior to create functionality that allows a user to manually click, hold, and drag objects within the web browser. I've used this behavior in the past to create children's web-based learning games. For instance, you can have two series of images, across the page from each other, where the images on the left are images of various types of fruit. On the other side of the screen you can have the phonetic spellings of the images. Using the Drag Layer behavior, you can have the user click, hold, and drag the word onto its respective picture and provide feedback. Again, this behavior is covered with more detail in Chapter 11.

Go to URL

Possibly the easiest behavior to use aside from the Popup Message behavior is the Go to URL behavior. You can use this behavior to quickly associate a link with a form object (such as a Button). Because form objects such as Buttons don't support the Href attribute, you must create links using JavaScript. The JavaScript is automated using the Go to URL is behavior.

TIP

The Go To URL behavior can also be used in conjunction with a standard link on an object to load two different pages into two different frames at the same time.

To attach this behavior to a Button object, follow these steps:

1.	With your cursor in the same page we've been working with, insert a new Button form object by clicking the Button icon from the Forms category of the Insert bar.
2.	When the Add Form Tag dialog appears, click No.
3.	With the Button form object selected, change the Action to None so that the button doesn't try to submit or reset the non-existent form when it's clicked. You can also change the Label to read anything you'd like. I'll change mine to read Visit Macromedia.
4.	With the Button object selected, choose the Go to URL behavior from the Add (+) menu in the Behaviors panel. The Go to URL dialog appears.
5.	Initially, the dialog allows you to choose which window to open the link in. Because we're not working with frames, the only option in this list box is Main Window. For our example, this option is fine. Secondly, you can specify the path of the URL to which you want to link the Button form object by typing in the URL text box. I'll enter the full path to Macromedia's website, which is http://www.macromedia.com. When you finish, your dialog might resemble mine (see Figure 10.13). Figure 10.13. Enter the path to Macromedia's website in the URL text box.
6.	Click OK.
7.	If the selected event isn't onClick, change it to onClick now.

When you finish, save your work and test the results in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). When the page loads, click the Visit Macromedia button. You should immediately be redirected to Macromedia's website.

Jump Menu and Jump Menu Go

In the previous chapter, we used the Jump Menu object located in the Forms category of the Insert bar to build a drop-down menu-based navigation system. Remember that we clicked the icon in the Insert bar to launch the Jump Menu dialog, which allowed us to dynamically add items to a list. When we finished adding items, we clicked OK, and the finished product ended up looking something like Figure 10.14 (also available by opening jumpmenu.htm located in the project folder).

Figure 10.14. The Jump Menu form object allowed us to build a drop-down menu-based navigation system.

The problem with the Jump Menu form object is that you can't simply reselect the icon in the Insert bar to re-launch the Jump Menu dialog to make edits to an existing Jump Menu. Fortunately, the Jump Menu dialog is just a front for the Jump Menu and Jump Menu Go behaviors. (Notice that selecting the Drop Down Menu or Button form objects displays the Jump Menu and Jump Menu Go behaviors in the Behaviors panel.) Even better, if you double-click the action in the Behavior list or right-click the action and select Edit Behavior from the context menu, the Jump Menu dialog reopens, complete with the original menu items you entered (see Figure 10.15).

Figure 10.15. Double-click the action in the Behavior list to reopen the original Jump Menu dialog, complete with the menu items you originally entered.

Of course, this isn't the behaviors' only use. You can use the Jump Menu and Jump Menu Go behaviors to build a Jump Menu complete with a Go button from scratch. To do this, follow these steps:

1.	If you haven't done so already, open the jumpmenu.htm page.
2.	Place your cursor just after the existing Go button and press Enter.
3.	Insert a new Drop Down Menu form object by clicking the List/Menu icon located in the Forms category of the Insert bar. Name the drop-down menu JumpMenu.
4.	Insert a new Button form object next to the Drop Down Menu by clicking the Button icon in the Forms category of the Insert bar. Give the new Button the text label Go and change the Action to None to prevent the form from submitting or resetting.
5.	With the Drop Down Menu selected, choose the Jump Menu behavior from the Add (+) menu in the Behaviors panel. The Jump Menu dialog appears.
6.	Customize the Jump Menu by adding menu items to the list as you did in the previous chapter. When you finish, click OK.
7.	Click the Go button and choose the Jump Menu Go behavior from the Add (+) menu in the Behaviors panel. The Jump Menu Go dialog appears, similar to Figure 10.16. Figure 10.16. The Jump Menu Go dialog allows you to select a Drop Down Menu control to associate with the Go button.
8.	The Jump Menu Go dialog allows you to select an existing Drop Down Menu located within a form. Because we named our Drop Down Menu JumpMenu, select it from the list and click OK.

Now save your work and test the results in the browser. Selecting an item from the list should automatically redirect you to the appropriate page. However, the first item in the list is already selected; selecting it again doesn't force the menu to jump to the appropriate page. Because this is the case, click the Go button.

NOTE

It may seem odd that the initially selected item in the menu doesn't jump when selected. If you select the menu in the Document window and look at its event in the Behaviors panel, notice that it uses the onChange event. The drawback to this event is that it doesn't recognize the action of selecting an initially selected item as a change in the menu. For this reason, the Go button is an integral part of the functionality of the Jump Menu. Selecting the Go button at any time, even with an initially selected item, forces the Jump Menu to respond.

Open Browser Window

Our next stop is the infamous pop-up window. Exposed in the Open Browser Window behavior, you can use this behavior as a way to open internal and external websites in a separate preconfigured window with specific width and height dimensions (among other functionality). We've all seen pop-up windows, right? The small secret cameras or travel advertisements that appear when you visit your favorite website. Although I certainly discourage you from using this behavior for purposes such as these, I can say that the Open Browser Window behavior comes in very handy for creating small pop-up Help pages for your website. To demonstrate the use of the Open Browser Window behavior, follow these steps:

1.	Reopen the page to which you've been adding your Button form objects. If you've accidentally closed it without saving, open the sample.htm file included with the files in this project.
2.	Place your cursor just after the previous Visit Macromedia button and press Enter.
3.	Insert a new Button form object by clicking the Button icon located in the Forms category of the Insert bar. Give the new Button the text label Open Macromedia and change the Action to None to prevent the form from submitting or resetting.
4.	With the Button selected, choose the Open Browser Window behavior from the Add (+) menu in the Behaviors panel. The Open Browser Window dialog appears, similar to Figure 10.17. Figure 10.17. Use the Open Browser Window dialog to customize properties for the pop-up window.
5.	The Open Browser Window dialog allows you to customize numerous properties including the URL to display, the width and height of the window to open the URL in, and a simple name to assign to the pop-up window. You can also customize various attributes including whether or not scrollbars should be added, whether or not to allow the user to resize the browser window after it's been opened, and so on. For our purposes, enter the URL http://www.macromedia.com in the URL to Display text box and assign the dimensions 400 for width and 400 for height. When you've finished, click OK.

As expected, the onClick event is assigned to the Button form object. Of course, if we really wanted to annoy our users, we could change that event to onLoad. That alteration would cause the Open Browser Window action to execute when the page is loaded as opposed to when the user physically clicks the button. In an effort to maintain retention rates among our users, we'll keep the onClick event so that our users have to click for themselves.

To preview the finished product, save your work and preview the page in the browser by selecting the Preview in Browser option from the Document bar (or by pressing F12). As you can see from Figure 10.18, clicking the button opens the Macromedia website in a small 400 by 400 window.

Figure 10.18. The Macromedia website appears in a small browser window.

Notice that the pop-up window is fairly plain and doesn't allow for much interaction in terms of scrolling to see all the website content or even resizing the window to make it bigger. However, the Open Browser Window dialog allows you to customize various attributes including setting check boxes for scrollbars and resize handles. In fact, the Open Browser Window dialog supports the following functionality (accessible by double-clicking the behavior in the Behaviors panel):

• URL to display: In this text box, enter the URL of the site you'd like to display in the pop-up window.

• Window width and height: Enter the width and height (in pixels) at which you want the pop-up window to initially display in these text boxes.

• Attributes: Use these check boxes to set whether or not you want to display the navigation toolbar, a location toolbar, a status bar, a menu bar, enable scrollbars, or even provide resize handles. For our example, let's check the Scrollbars as Needed option and the Resize Handles option.

• Window name: Enter a value in this text box to uniquely name the browser window. This value is optional.

Save your work and preview the result in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). This time, when the pop-up window opens, you are free to resize and scroll through the pop-up window as needed.

Play Sound

The next behavior in the Behaviors panel list is the Play Sound behavior. You can use this behavior as a way of playing sound files such as MP3, MIDI, and WAV in the browser window. Although popular browsers such as Internet Explorer can play most sound files directly within the browser, others such as Firefox and Netscape might require additional software like QuickTime to play the sound correctly. Netscape might even prompt you with a dialog, giving you the option of choosing the external audio player (QuickTime, Windows Media Player, iTunes, or RealAudio) to use.

Playing audio in the browser is covered with much more detail in Chapter 18, "Adding Video and Audio," but for now let's explore this simple behavior. To work with the Play Sound behavior in your web page, follow these steps:

1.	Place your cursor just after the previous Open Macromedia button and press Enter.
2.	Insert a new Button form object by clicking the Button icon in the Forms category of the Insert bar. Give the new Button the text label Play Sound and change the Action to None to prevent the form from submitting or resetting.
3.	With the Button selected, choose the Play Sound behavior from the Add (+) menu in the Behaviors panel. The Play Sound dialog appears.
4.	In this dialog, browse to select a sound file. I've included a simple MIDI file in the Media folder of your project called PlaySound.mid. Choose it.
5.	Click OK.
6.	Ensure that the onClick event is attached to the Button.

Save your work and test the result in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). If you're using Internet Explorer, as I am, the sound is played without the need for additional software, directly in the browser, when you click the button.

NOTE

You should be aware that a Stop Sound behavior doesn't exist. Therefore the only way to stop the sound file from playing is to close the browser. If your users find your sound file annoying, they might be tempted to close the browser or navigate to a different page in an effort to avoid the sound.

Preload Images

Typically added to image rollovers (covered later in this chapter) or when the page loads for the first time, the Preload Images Behavior can be used as a way of forcing the browser to load certain elements first, before other elements on the page are rendered. This behavior is beneficial when working with image rollovers (because they require two images to function correctly). As you'll see, when the page loads, a user sees the first image. As soon as their cursor rolls over the image, an event (typically the onMouseOver event) kicks in and calls necessary JavaScript code that changes the image to a second, usually different-colored image. On slower connections, the second image might appear as a broken image for a split second while it has a chance to load. To avoid showing a broken image icon (even for a split second), use the Preload Images behavior. This behavior forces the browser to load all images that are viewable on the page and to preload any images that might not be viewable on the page but must be queued for use in an effect such as a rollover. For the most part, this behavior is automatically added when working with rollovers in Dreamweaver.

Set Nav Bar Image

In Chapter 3, "Building a Web Page," we used the Navigation Bar dialog, available by selecting Insert, Image Objects, Navigation Bar, to build a fully functional navigation bar complete with images that changed color when the user's cursor rolled over them. Looking back, the dialog allowed us to add navigation bar elements, give the navigation bar element a unique name, add up, over, and down image states, set alternate text, give the element a link, set the layout of the navigation bar, and even set whether or not the images should preload (covered in the previous section). After we configured the dialog, it looks like Figure 10.19.

Figure 10.19. The navigation bar was built using the Navigation Bar dialog.

The beauty in the Navigation Bar dialog is that it allowed us to work with the navigation bar as a whole as opposed to adding individual rollover images five different times as we would have had to do with the Rollover Image option, also available in the Image Object menu on the Insert bar and covered in Chapter 3.

TIP

You can still work with the navigation bar as a whole by reselecting the Navigation Bar option in the Image Objects menu. Although you're not able to build another navigation bar on the same page (Dreamweaver allows only one "official" navigation bar per page), selecting this option when you have an existing navigation bar reopens the Navigation Bar dialog with your configured values prepopulated.

But what if we wanted to work with individual navigation bar elements within the context of the whole navigation bar? Even better, does a behavior exist for changing a second image on the page to something else while I roll over an element in my navigation bar? The answer is yes! This is where the Set Nav Bar Image behavior comes in. The Set Nav Bar Image behavior, aside from allowing you to work with individual navigation bar elements independently of the others, also allows you to set the image state of a second image anywhere on the page dynamically when you roll over an image in the navigation bar. A perfect example of when you'd want to use functionality such as this is when you're working with a navigation bar of employee names. In the example we'll build, we'll have images that represent the executive team for our fictitious Dorknozzle company. Initially, we'll display Ferris's headshot because he's the founder, but as a user rolls over names in the navigation bar, we'll use the Set Nav Bar Image behavior to dynamically change the headshot for Ferris to the headshot of the person whose name you've rolled over. To do this, follow these steps:

1.	Create a new page by choosing the New option from the File menu. The New Document dialog appears. Choose the HTML option from the Basic Page category and click Create.
2.	With your cursor on the page, navigate to the Rollovers folder, located in the Images folder for your defined site in the Files panel and drag out the four images titled xferris_up.gif, xagnes_up.gif, xherbert_up.gif, and xpat_up.fig. Give each image a unique name in the Name field in the Properties Inspector. Also, make sure to add line breaks between the images so that the finished version resembles a vertically structured navigation bar similar to Figure 10.20. Figure 10.20. Add the four nav bar images to the page, creating line breaks between them.
3.	Add a few more line breaks and drag the head_ferristhefounder.gif image into the page. This image is located in the Images folder of the project. Name the image ferrisheadshot in the Name text box in the Properties Inspector.
4.	Select one of the navigation bar images such as Agnes's (xagnes_up.gif) and select the Set Nav Bar Image behavior from the Add Behavior list in the Behaviors panel. The Set Nav Bar Image dialog appears (see Figure 10.21). Figure 10.21. Attach the Set Nav Bar Image behavior to an image in your nav bar. The Set Nav Bar Image dialog appears.
5.	The Set Nav Bar Image dialog is split into two tabs. The first tab, Basic, contains the same customizable properties that the Navigation Bar dialog does. Because you should already be familiar with the options in this tab, go ahead and set the Over images by selecting the appropriate images for the over state. These images are located in the Rollovers folder located in the Images folder of the project.
6.	Switch to the Advanced tab, where you can dynamically set the image that should appear in place of the existing headshot when a user rolls over the specific nav bar image. Because we're attaching this behavior to Agnes's nav bar image and not to Ferris's nav bar image, select the ferrisheadshot option from the Up Image list box.
7.	Browse to Agnes's headshot in the To Image File text box. The image is located in the Images folder of the project.
8.	Click OK.

To test the functionality, save your work and preview your page in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). Notice that rolling over Agnes's nav bar image changes Ferris's headshot to Agnes's. Rolling out of her nav bar image causes the headshot to return back to normal (to Ferris's headshot). To finish off this page, return to Dreamweaver and repeat steps 48 for the other three images in the navigation bar.

Set Text

You can use the Set Text set of behaviors to dynamically set text values within a frame, a layer, the browser's status bar, and a text field. Recall that we did something similar with the Change Property behavior. When a user clicked a button, that action set the value of a text box to read Hello World. Earlier in this chapter, we accomplished this functionality using the Change Property behavior, but we can accomplish the same goal, easier, using the Set Text of Text Field behavior. Because we've already looked at that functionality, the following steps explore setting the text of the browser's status bar instead of a text box:

1.	Reopen or switch back to the sample.htm page that you've been working with and place your cursor just after the previous Play Sound button; press Enter.
2.	Insert a new Button form object by selecting the Button icon located in the Forms category of the Insert bar. Give the new Button the text label Set Text of Status Bar and change the Action to None to prevent the form from submitting or resetting.
3.	With the Button selected, choose the Set Text of Status Bar behavior from the Set Text submenu of behaviors available by clicking the Add (+) button in the Behaviors panel. The Set Text of Status Bar dialog appears.
4.	In this dialog, enter the message that should appear in the status bar when the user clicks the button. For this example, enter the text Hello World and click OK.
5.	Ensure that the onClick event is attached to the Button.

Save your work and test the result in the browser by choosing the Preview in Browser option from within the Document bar (or by pressing F12). When the page appears, click the Set Text of Status Bar button. Immediately the text in the status bar changes to read Hello World.

Show and Hide Pop-Up Menu

Arguably one of the most feature-rich pieces of functionality included with Dreamweaver are the Show and Hide Pop-Up Menu behaviors. You can use these behaviors to create text-based pop-up menus similar to the ones shown in Figure 10.22.

Figure 10.22. ESPN's website displays a navigation bar of elements. Rolling over those elements opens a pop-up menu with more choices.

The ESPN website shown in Figure 10.22 displays numerous links that span horizontally across the top of the page. Rolling over each of the navigation elements reveals more options relating to the element you've rolled over. Traditional methods for building functionality such as this would have taken significant effort, but you can reduce the effort substantially by using the Show and Hide Pop-Up Menu behaviors. To get started with this functionality, follow these steps:

1.	Continuing with the sample.htm page you've been working with in this chapter, place your cursor just after the previous Set Text in Status Bar button and press Enter.
2.	Insert a new hyperlink by choosing the Hyperlink option from the Insert menu. The Hyperlink dialog appears.
3.	In the Text text box, enter About Us > . Also enter the # symbol in the Link text box and click OK. The new hyperlink appears on the page.
4.	Select the hyperlink and choose the Show Pop-Up Menu Behavior from the Add (+) menu in the Behaviors panel. The Show Pop-Up Menu dialog appears.

NOTE

Unlike other Dreamweaver behaviors, the Show Pop-Up Menu behavior cannot be attached to Button form objects. This behavior supports images and hyperlinks only.

The Show Pop-Up Menu dialog is divided into four distinct areas represented by tabs, all of which constitute an important part of the functionality or look of the pop-up menu. For instance, you'll add the text elements your pop-up menu will contain using the Content tab. You can customize the look of the pop-up menu in the Appearance and Advanced tabs. Finally, you can set the positioning of the pop-up menu in relation to the element that is causing the pop-up menu to expand using the Position tab. Here is a breakdown of functionality exposed on these tabs, beginning with the Content tab:

• Menu: Icons in this list let you add elements to and remove elements from the pop-up menu. Beyond that, you can use the Indent and Outdent icons to nest an element within another element, effectively creating a second pop-up menu. Finally, you can use the repositioning icons to move elements either up or down in the list.

• Text: Enter the text label of the element in this text box.

• Link: Enter the URL path that will link the text label in this text box.

• Target: Select from one of the four targets in this menu to set the window location in which the path should open.

• Element list: Use this list box as a visual aid when adding, removing, indenting, outdenting, and repositioning elements in your pop-up menu.

For our example, let's add eight elements by clicking the Add (+) icon eight times and adding the text Overview, History, Management, Ferris, Agnes, Herbert, Pat, and Contact Us for each element as it's added. I'm assuming that you've already acquired the skills required to create links, so we'll leave the Link and Target menus blank for now. So far, the interface should resemble Figure 10.23.

Figure 10.23. Add eight elements to the pop-up menu.

Moving forward, select each of the four names (Ferris, Agnes, Herbet, and Pat) and click the Indent Item icon located in the Menu bar of icons. For the second, third, and fourth names, you might have to click the Indent Item icon and then immediately click the Outdent Item icon to line all the names up under the Management section. The results resemble Figure 10.24.

Figure 10.24. Indent the four managers under the Management element. This effectively creates another pop-up menu.

Now that you've added the elements for your pop-up menu, let's customize the appearance by switching to the Appearance tab of the Show Pop-Up Menu dialog. Notice that the following functionality is exposed in this screen:

• Menu Type: Select an option from this menu to set your pop-up menu as either a vertical or horizontal menu. We'll keep ours as a vertical menu.

• Font: Enter the font family to which you want to set the text labels in your pop-up menu. I'll choose the Arial, Helvetica, Sans-serif option.

• Size: Enter the size (in pixels) you want to assign to the text labels in this text box. I'll stick with the default value of 12.

• Style: If you want to Bold or Italicize the text labels in your pop-up menu, click these icons. I'll leave my text unaltered.

• Alignment: Click one of these three icons to set the alignment of the text labels as they appear in their cells. I'll leave the Left Align icon selected.

• Up state: You can customize the text color and up state color of the cells in which the text labels are contained by selecting a color from these two color pickers. Again, I'll leave mine at their default values, but feel free to customize yours.

• Over state: You can customize the text color and over state color of the text label cells as they will appear when the user's mouse rolls over them by selecting a color from these two color pickers. Again, feel free to customize these colors as you see fit. I'll change the text color to black and the cell color to a bright blue.

When you finish making changes to this screen, it might resemble mine, shown in Figure 10.25.

Figure 10.25. Configure the appearance of the pop-up menu on the Appearance tab.

Now that you've made changes that will affect the appearance of the pop-up menu, let's switch to the Advanced tab. You can use this tab to set the dimensions, padding, and spacing of the cells in which the text labels are contained. Specifically, the functionality exposed by this screen includes:

• Cell width and Cell height: Use these text boxes to adjust the width and height of the cells that contain your text labels. By default, the Automatic option is preselected for the menu options next to the width and height fields. Choosing this option causes the menu dimensions to change according to the size of the largest text label in the cells. If you want to set your own width or height, select the Pixels option from the menu and then manually enter a pixel value in the width or height text box. I'll select the Pixel option for the Cell Width text box and enter a width of 100 pixels.

• Cell spacing and Cell padding: Use the Cell Padding text box to enter the padding to be assigned between the text labels and the borders. Furthermore, you can set the spacing between cells by entering a value in the Cell Spacing text box. The default values are 3 for Cell Padding and 0 for Cell Spacing. I'll leave mine as they are, but feel free to modify yours.

• Text indent: Use this text box to specify, in pixels, how far text in from the left a menu item is indented within its cell.

• Menu delay: Enter a value in this text box to set the length of time between when the user moves the pointer over the triggering image or link and when the menu appears. Values are in milliseconds, so the default setting, 1000, equals 1 second. I'll set mine to 300. This value equates to a third of a second.

• Pop-up borders: Show borders: Enabling this box ensures that a border will appear around the elements in the pop-up menu. Disabling this option disables the Border Width, Border Color, Shadow, and Highlight options.

• Border width: Sets the width in pixels for the border around elements in the pop-up menu. I'll stay with the default value of 1.

• Border color: Use this color picker to set the color of the border surrounding the elements. I'll select a white color for my pop-up menu borders.

• Shadow and Highlight: Use these color pickers to set a unique shadow or highlight for the border surrounding the menu elements. These colors are not visible in the preview. I'll leave these values as they are.

When you finish configuring the values in this screen, it may resemble mine, shown in Figure 10.26.

Figure 10.26. Customize the dimensions, padding, spacing, and border colors on the Advanced tab.

With everything pretty much configured, we can now set the positioning of the pop-up menu in relation to the About Us link that's triggering its visibility. To modify the positioning, switch to the Position tab of the Show Pop-Up Menu dialog. Notice that the Position tab exposes the following functionality:

• Menu position: Select from one of these four options to set the position relative to the element that's triggering the pop-up menu to open. Options include Bottom Right Corner, Below and At Left Edge, Above and At Left Edge, and Top Right Edge. For our example, choose Top right Edge.

• Menu position: X and Y: If you aren't happy with the four positioning options just listed, you can manually enter the X and Y coordinates in pixels to set a pinpoint accurate location for your menu in the browser window. The values listed are the default values of the menu position options you selected above.

• Hide menu on onMouseOut event: Enable this check box to ensure that the menu disappears when the user's cursor rolls out of the element that caused the pop-up menu to appear. Offhand, I can't think of a reason why you wouldn't want to enable this option.

When you finish, your screen might resemble mine, shown in Figure 10.27.

Figure 10.27. Use the Position tab to set the positioning of the pop-up menu in relation to its triggering element.

Finally, click OK to create the pop-up menu. Save your work and test the results in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). As you can see in Figure 10.28, the pop-up menu appears when I roll over the About Us hyperlink.

Figure 10.28. The pop-up menu appears when I roll over the hyperlink.

NOTE

The code involved for generating this functionality is so massive (764 lines of code) that Dreamweaver creates a separate mm_menu.js file and places it in the root of your defined site. It then links the .js file into the HTML page similar to the way external CSS files are linked in. Also notice an arrow.gif file in the root of the project folder. This is the image used to indicate the existence of the Management submenu in the pop-up menu.

Show-Hide Layers

As you'll see in Chapter 11, "Layers in Dreamweaver," you can use the Show-Hide Layers behavior as a way to show a layer when a user rolls over an element and to hide a layer when a user rolls out of an element. The Show Pop-Up Menu behavior you learned about in the previous section is based on this premise. The same pop-up menu we built using the Show Pop-Up Menu dialog could have been built with a bit more effort using some formatting techniques in conjunction with the Show-Hide Layers behavior.

Swap Image and Swap Image Restore

Similar to the Rollover Image option available from the Image Objects menu in the Insert menu, the Swap Image behavior allows you to quickly construct a rollover for a specific image. Although the Rollover Image dialog provides an intuitive interface for quickly creating a rollover image, the Swap Image behavior provides the flexibility to manipulate more advanced features (such as the ability to swap multiple images from one trigerring action) associated with rollover images. Working with the Swap Image behavior is just as easy as working with the Rollover Image dialog but requires a few more steps. To work with the Swap Image behavior, follow these steps:

1.	Continuing with the sample.htm page you've been working with, place your cursor just after the previous About Us hyperlink and press Enter.
2.	Insert a new image (preferably one that we've been using for the navigation bar) by selecting one of the "up" images located in the Rollovers folder in the Images folder of the project. I'll select home_up.gif and drag it into the page.
3.	With the image selected, uniquely identify it by typing the name home in the Image Name text box located in the Properties Inspector.
4.	Select the Swap Image behavior from the Add (+) menu in the Behaviors panel. The Swap Image dialog appears similar to Figure 10.29. Figure 10.29. The Swap Image Behavior dialog allows you to create a rollover for an image. The following functionality is exposed in the Swap Image dialog: Images: Use this list box to select the image for which you want to create a rollover. Because we have only one image on the page, home, it appears as the sole image in the list. It's important to note that the Swap Image behavior is attached to a single object, in our case the Home button. Setting the source to multiple images in this dialog would cause other images to swap states when I rolled over the Home image. If this is not the desired effect, attach a separate Swap Image behavior to each and every element that will have a rollover affect. Set source to: Browse to the file you want to use as the rollover. For our example, we'll browse to the home_over.gif image located in the Rollovers folder in the Images folder of the project. Preload images: A few sections ago, we discussed the Preload Images behavior. In that discussion, I mentioned that preloading images, especially when working with rollover images, is important. Preloading images prevents a user with a slow connection from seeing a broken image for a split second while the secondary image is trying to load when the mouse rolls over an image. I recommend leaving this option checked at all times. Restore images onMouseOut: Disabling this check box causes the image to remain in its rollover state. Enabling this check box ensures that the rollover image returns to its original state when the user's mouse rolls back out of the image.
5.	After you've added the correct URL to the Set Source To text box, click OK.
6.	Before you test the functionality, make sure that the Behaviors panel lists the onMouseOver event for the Swap Image behavior and the onMouseOut event for the Swap Image Restore behavior. If they're not properly associated, do that now by choosing the correct event.

Save your work and test the results in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). Notice that rolling over the image causes the secondary image to appear.

Timeline

As you'll see in Chapter 17, "DHTML and the Timeline," you can use behaviors exposed by the Timeline submenu in the Behaviors list to add interactivity between elements on the page and animation within a timeline. Behaviors exposed by this submenu include functionality for playing a timeline, stopping a timeline, or going directly to a frame within a timeline.

Validate Form

The last behavior included in Dreamweaver's Behaviors panel is the Validate Form behavior. You can use this behavior as a way to verify data types of values entered into form objects. For instance, in our helpdesk.htm page, we expose two Text Field form object and one Textarea form object. Because these form objects are responsible for collecting the employee's name, their station ID, and a description of the problem, we'll want to make sure that the user enters values into these fields before submitting the form. Furthermore, we'll want to make sure that the user enters only numbers in the station ID text field as opposed to letters, words, or a combination of numbers and letters. Using the Validate Form behavior is as simple as selecting the form to which you want to attach the behavior, selecting the behavior, and configure the fields to be validated in the dialog. To do this yourself, follow these steps:

1.	Open the helpdesk.htm page.
2.	Select the form. You can tell the form has been selected when all the objects within the form are highlighted. You can also tell that the form is highlighted when the Properties Inspector becomes a forms-based Properties Inspector.
3.	With the form selected, choose the Validate Form behavior, available by clicking the Add (+) button in the Behaviors panel. The Validate Form dialog appears, similar to Figure 10.30. Figure 10.30. The Validate Form dialog allows you to set fields to be verified of their content. The following functionality is exposed in the Validate Form dialog: Named fields: Select a named text field from this list box to set its validation rules. The naming convention in this list box is such that the type of form object is listed (text) followed by its name in quotation marks ("name", "stationid", and "description"), and the form name the object is contained in (in form "form1"). Value: Required: Selecting a form object from the Named Fields list and then checking this box guarantees that the specific form object will be required by the browser. If a user fails to add at least one character value before submitting the form, an error message appears, and the form is not submitted. Accept: Anything: Selecting a form object from the Named Fields list and then selecting this radio button instructs the browser to accept anything in the form object, even if it's left empty. If the Required check box is also selected, any value is accepted in the form object and the form object must not be left empty. Accept: Number: Selecting a form object from the Named Fields list and then selecting this radio button instructs the browser to accept any numeric value in the form object. However, the form object can be left empty. If the Required check box is also selected, a numeric value must be entered into the form object. Accept: Email address: Selecting a form object from the Named Fields list and then selecting this radio button instructs the browser to accept any value in the form object that appears to resemble an email address. However, the form object can be left empty. The formula for determining a valid email address is at least one character, an @ symbol, at least one more character, a . symbol, followed by at least one more character. If the Required check box is selected, a value must be entered into the form object that resembles an email address. Accept: Number from: Selecting a form object from the Named Fields list and then selecting this radio button instructs the browser to accept any numeric value in the form object that falls between the range of values specified in the first and second text boxes. However, the form object can be left empty. If the Required check box is selected, a numeric value must be entered into the form object that falls between the range of values specified in the first and second text boxes.
4.	For our demonstration, set all three form objects as required fields that accept anything. However, make sure that the stationid field accepts only a number. When you've finished, click OK.
5.	Make sure that the event associated with the behavior is onSubmit. If it's not, select that event now.

Save your work and test the results in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). As you can see from Figure 10.31, an alert message is displayed when you try to submit the form without entering values in the Employee Name, Station ID, or Problem Description text boxes.

Figure 10.31. An alert message is displayed when you try to submit the form without entering values into fields that are set as required.