Understanding and Working with Behaviors

Behaviors are one of the most exciting enhancements in FrontPage's history. Even after working with Behaviors for a while, you might still find yourself saying "I had no idea I could do that" as you dig deeper into the functionality of this great feature of FrontPage 2003. After reading this chapter, you will never say that again because you'll be an expert at working with Behaviors.

A Behavior is a FrontPage design-time component that adds script to your Web page to make it more dynamic and interactive. You can insert Behaviors that range from performing a simple task such as calling a client-side script, to complex tasks such as configuring a DHTML menu for your Web site.

NOTE

A design-time component is a component that is generated in its entirety during the design process. Unlike browse-time components, design-time components do not require the FrontPage Server Extensions, SharePoint Team Services, or SharePoint Services to function on the Web server.

Using the Behaviors Task Pane

Behaviors are inserted from the Behaviors task pane shown in Figure 23.1. The task pane is the perfect place for Behaviors because it allows you to work with them without the interface getting in the way of your work. That's very important because Behaviors are not inserted and forgotten. After you insert a Behavior, there's plenty of tweaking you can do, and not having to dismiss a dialog box between each change makes working with Behaviors more efficient.

Figure 23.1. The Behaviors task pane makes it convenient to insert and work with Behaviors.

To access the Behaviors task pane, select Format, Behaviors from the main menu in FrontPage or press Ctrl+F1. If another task pane is already displayed, you can use the Other Task Panes dropdown at the top of the task pane to select the Behaviors task pane.

TIP

The Behavior task pane, like all task panes, is a dockable window. This means that you can drag it from its current position to a position convenient for you. Place your mouse in the upper-left corner of the task pane. When the mouse pointer turns to a four-way arrow, click and drag the task pane to its desired position. To redock it, drag it to the far right of the screen.

Click the Insert button and you'll see a collection of 16 Behaviors that you can insert into your page. Whether a specific Behavior is available for insertion depends on what is selected when you click the Insert button.

In some situations, it might be necessary to insert more than one Behavior for a single element. For example, when you are implementing rollover buttons, you need a Swap Image Behavior and a Swap Image Restore Behavior for the image. In cases in which you have inserted more than one Behavior on a single HTML element, depending on the type of Behavior you have selected, you can change the order of precedence using the up and down arrow buttons in the Behaviors task pane. Select a Behavior and click the up arrow to move the Behavior up in the list and the down arrow to move it down in the list. Behaviors are processed from top to bottom.

How Behaviors Work

Behaviors are implemented using events and actions. An event is a message that is intercepted by the Web browser when a certain action takes place. For example, when you click a hyperlink, a onclick event is sent to the browser. An action is what the browser does in response to the event. Behaviors allow you to add interactive scripts to your pages to take advantage of events.

NOTE

The events that are available in the Behavior task pane are documented on Microsoft's MSDN Web site. To access the documentation, browse to http://msdndhtml.frontpagelink.com and click on DHTML Reference.

The number and type of events available to you depends on what element you select before inserting the Behavior. When you insert a Behavior, FrontPage adds attributes to the closest HTML element to the left of the insertion point. (The Scripts On Tag label in the Behaviors task pane will indicate which element the Behavior is being applied to.)

Adding Behaviors Within a Paragraph

Behaviors are easily applied to hyperlinks, images, and other page elements because these elements are already associated with an HTML tag to which the Behavior can be applied. However, in cases in which you want to define a Behavior for one or more words within a paragraph, it becomes a bit more complicated. If you simply select the words and apply a Behavior, you will find that the Behavior is applied to the entire paragraph and not just the selected words.

If you want to apply a Behavior to one or more words within a paragraph, you can enclose those elements within a span tag. The easiest way to do this is to select the word or words you want to use, switch to Split view, and enclose those words in a span tag, including a unique ID. For example, if you wanted to use the words "click here" in a paragraph as the link for a Behavior, change the code from this,

 <p>For more information, click here.</p> 

to this,

 <p>For more information, <span >click here</span>.</p> 

Switch back to Design view, and you can now click the span Quick Tag Selector to select the words "click here" prior to inserting your Behavior. Your Behavior will then be applied on to those words. Without using this method, the Behavior will affect the entire paragraph.

For more information on the Quick Tag Selector, see "Selecting Code with the Quick Tag Selector," p. 530.

CAUTION

Once a Behavior has been applied to an element, there is no visual indicator that it has been applied. Because of this, it is quite easy to inadvertently apply a Behavior to an HTML element only to find that another Behavior is applied to that element's parent. In these cases, the parent's Behavior will take precedence. Hopefully, future versions of FrontPage will include some visual indication of where Behaviors are applied.

TIP

Behaviors are implemented in FrontPage using a combination of a JScript source file and an HTML file. If you have the coding knowledge necessary, you can edit these files to enhance a Behavior to suit your specific needs. These files are located by default in the C:\Program Files\Microsoft Office\Templates\1033\Behaviors11\ACTIONS folder.