Create an interactive Web site using FrontPage 2003 behaviors

By Gregory A. Beamer

Applies to
Microsoft Office FrontPage® 2003

Introduction

“We have a problem, Greg,” says John, the frazzled project manager. “Management is unhappy with the new site; they say it’s not as ‘fun’ as our competitor’s Web site. They say we need to address this issue in the site immediately, or they will replace us with someone who can.”

Does this sound familiar? If it doesn’t, you have either been lucky or you are relatively new to the field of Web design and application development. Sure, your situation might have been slightly different, but it’s fairly common for management to push for making a functional site more interactive and exciting.

This article reviews some of the more common interactive design elements and how you can implement them by using Behaviors in the Microsoft Office FrontPage 2003 Web site creation and management tool.

What are Behaviors?

Behaviors are scripting options that enable you to quickly add interactivity or increased functionality to text or other elements of your Web page. Use Behaviors to author client-side scripts in languages that comply with the European Computer Manufacturers Association’s ECMAScript specification, such as JScript® development software and JavaScript. You don’t have to learn these scripting languages to work with Behaviors, as FrontPage 2003 enables you to insert and configure Behaviors without writing a single line of code.

While this is not an article on coding, here’s an example of what FrontPage 2003 does behind the scenes when you add a Behavior. The following is the JavaScript for the Go To URL Behavior:

<script language="JavaScript">
<!--
function FP_goToURL(url) {//v1.0
 window.location=url;
}
// -->
</script>
<body onload="FP_goToURL(/*href*/'http://www.mynewsite.com')">

Some scripts for Behaviors are far more elaborate than this one. Every Behavior is very simple to insert, however, following this simple pattern:

  1. On the Format menu, click Behaviors.
  2. In the Behaviors task pane, click Insert, and then select a Behavior.

A real-world example

“Calm down, John,” Greg replies, “Take a deep breath and tell me exactly what management is looking for.” John’s list of specific requirements from management includes:

  1. The old Web site must redirect users to the new Web site.
  2. Some of the pages require newer browsers to work correctly. Users with older browser versions need to be redirected to a page that informs them that they need to update their browser.
  3. Management wants a drop-down menu for the most popular pages in the site.
  4. Any image that links to another page must change appearance when a user rests a mouse pointer on it.
  5. Any link to another site must open in a new browser window, leaving our site open in its original browser window.
  6. The message on the status bar should welcome people to the site.

Redirecting users to another Web site

With mergers, acquisitions, and the buying-up of domain names, the need to redirect users to another site is a fairly common endeavor. Fortunately, you don’t have to engage in a lot of work to get this done.

There are two ways to redirect a browser to another URL. The first is to use a metatag redirect in the header of the HTML. The second is to use JavaScript, which is how the Go To URL Behavior works.

The primary reason to use a scripted Behavior is flexibility; you can customize the script for specific needs. You can also bind multiple Behaviors to a single event. The metatag always acts alone and cannot easily be combined with other Behaviors.

To redirect a user to a new site:

  1. In the Behaviors task pane, click the Insert button and choose Go To URL.
  2. In the Go To URL dialog box, either type the URL in the Go To URL box, or use the Browse button to locate the URL.

Redirecting users with specific browsers

Today, users can choose from dozens of browsers, each of which has its own method of displaying Web pages. Many of these methods are incompatible with the other methods.

While it is possible to create rather elaborate JavaScript scripts to overcome the inconsistencies between browsers and browser versions, FrontPage 2003 allows for a much simpler solution. To accommodate different browsers and versions, you can create a common page that redirects users of certain browsers and versions to one page, and users of all other browsers and versions to another page.

  1. Open your Web page.
  2. In the Behaviors task pane, click Insert, and then click Check Browser.
  3. In the If the current browser type is drop-down menu, click the target browser.
  4. In the Version drop-down menu, click the browser version.
  5. Select the Go To URL check box, and type the URL to redirect users who are using the target browser.
  6. In the Otherwise, for all other browsers section, select the Go To URL check box, and then type the URL to redirect users who are not using the target browser.

While not mentioned in management’s list of requirements above, sometimes you have to check whether users have a specific plug-in installed on their computers. A common example is the Windows Media® player. FrontPage 2003 has a Behavior called Check Plug-in to solve this issue. The Check Plug-in Behavior works exactly like the Check Browser Behavior.

To check plug-ins:

  1. Open your Web page.
  2. In the Behaviors task pane, click the Insert button, and then click Check Plug-in.
  3. In the If the current plug-in is drop-down menu, click the target plug-in.
  4. Check the Go To URL check box and type the URL to redirect users who are using the target plug-in.
  5. In the Otherwise, for all other plug-ins section, select the Go To URL check box, and then type the URL to redirect users who are not using the target plug-in.

Creating drop-down menus

Since management wants a drop-down menu with the most common pages listed, you can use the Jump Menu Behavior to facilitate this without a lot of effort.

To create a jump menu:

  1. Click the page on which you want to place the menu.
  2. In the Behaviors task pane, click Insert, and then choose Jump Menu.
  3. Click Add.
  4. In the Add Choice dialog box, specify the text for the drop-down menu item.
  5. In the Value box, type the URL associated with the menu item.
  6. To save the menu, click OK.

You now have a drop-down menu similar to the one in Figure 1.

The Jump Menu dialog box

Figure 1: The Jump Menu dialog box.

Jump Menu drop-down menu

Figure 2: A drop-down menu built using the Jump Menu Behavior.

Creating rollover images

Rollover images add a nice professional touch without making the site unusable for users who have a dial-up connection. With the Swap Image and Swap Image Restore Behaviors, rollover buttons are easy to implement.

To create a rollover image:

  1. Click an image to select it.
  2. On the Behaviors task pane, click Insert, and then click Swap Image. Select the Preload Images and Restore on mouseout event check boxes.
  3. To locate the image for the rollover, click Browse.

Opening external links in a new window

There are times when you will want to open a page in a new window without closing the current window. New windows can be opened from any hyperlink, whether text- or image-based. For images, simply select the graphic and insert the Open Browser Window Behavior from the Behavior task pane. In the Open Browser Window dialog box, type the URL in the Go To URL box, and the name you want associated with the new window in the Window name box.

For text hyperlinks, however, I recommend replacing the http:// in the URL with JavaScript:// before highlighting the text and adding the Open Browser Window Behavior. If you do not change the http:// portion of the URL to begin with JavaScript://, when the link is clicked, the page may open in the current window as well as in the new window, depending on which browser is being used. Using JavaScript:// gives you more control over the Behavior, regardless of which browser is calling the new window. Once you have replaced the http:// with JavaScript://, simply select the URL and insert the Open Browser Window Behavior from the Behavior task pane. In the Open Browser Window dialog box, type the URL in the Go To URL box and the name you want associated with the new window in the Window name box.

If you use A HREF, you can also use target=new to open a link in a new window. However, much like the Go To URL Behavior, using a Behavior in this instance provides more flexibility. With the A HREF tag, the new window will open to the default size of the user’s browser. With the Open Browser Window Behavior, you can control the appearance of the new window, including the size, the presence of scrollbars, and a host of additional customizations.

For clickable links, you will want to make sure that the Open Browser Window Behavior is set to work on the onClick event. With the associated graphic or text selected, you will see an event in the Event column of the Behavior task pane associated with the action Open Browser Window (which appears in the Action column). Click the arrow that appears to the right of the event in the Event column, and select onClick from the drop-down list (see Figure 3).

Behavior task pane drop-down list of events

Figure 3: Selecting the arrow to the right of the event in the Behavior task pane reveals a drop-down list of events from which you can select an event to associate with an action.

 Note   If you are using links from your local site, the Preview view may not operate properly when testing your links. In these cases, use the Preview in Browser option from the File menu.

Displaying messages in the status bar

It is quite common for people to use the status bar to display messages. FrontPage 2003 has a Behavior for changing text in the status bar.

To display text in the status bar:

  1. In the Behaviors task pane, click Insert.
  2. Click Set Text, and then click Set Text of Status Bar.
  3. In the Message box, type your message, and then click OK.

What else can I do with Behaviors?

This article has barely scratched the surface of what you can accomplish with Behaviors. Here are some other common tasks, along with hints for implementing the Behaviors described:

  • Change the background color of a text box when it is ready for a user to type in it by using the Change Property Behavior with the onFocus event, and the Change Property Restore Behavior with the onBlur event.
  • Open a pop-up window when a user clicks a button by using the Popup Message Behavior.
  • Play a sound when a user clicks a graphic by using the Play Sound Behavior.
  • Create a jump menu that has a Go button by using the Jump Menu Behavior and adding a Jump Menu Go Behavior to the button.
  • Change a Flash presentation when a user clicks a graphic by using the Control Flash Behavior.

Conclusion

Prior to Behaviors, creating effects like the ones described in this article was time-consuming and error-prone. Fortunately, FrontPage 2003 Behaviors make it easy to create a site with flair.

Some of the Behaviors included in FrontPage 2003 work only with newer browsers. You can determine which browsers your users are using when they visit your site by reviewing your user logs. You can then set the page options to include as many browsers as possible. FrontPage 2003 will help you by dimming options that are not available with the browsers you have chosen.

Have fun, and think outside the box. Combining a few Behaviors can lead to an interactive Web site that people will want to return to again and again.


Gregory A. Beamer works as a Webmaster and Internet architect for Central Parking Corporation in Nashville, Tennessee. Greg holds certifications as a Microsoft Certified Systems Engineer (MCSE), Microsoft Certified Solution Developer (MCSD), Microsoft Certified Database Administrator (MCDA), and Microsoft Certified Professional + Internet (MCP+I). He is the author of ADO.NET and XML: ASP.NET On The Edge.

 
 
Applies to:
FrontPage 2003