FrontPage DHTML effects on the DHTML Effects toolbar have one major flaw: they often work only in Internet Explorer. This is because the jury (the Worldwide Web Consortium, which sets standards for the Web) is still out on a lot of DHTML standards, so Microsoft has gone ahead and created what it thinks DHTML should be. Some effects may work in Netscape 4.0 or later, but things may not work the way you expect them to. As with any other browser compatibility issue, consider your audience and test your pages. (See Testing Your Site for a whole tutorial's worth of advice on page-testing strategies.)
Using the DHTML Effects Toolbar
You can unleash a handful of simple animations quickly using the DHTML Effects toolbar (Figure 9-1).
Figure 9-1. The DHTML toolbar forces you to select items from left to right. Your selection determines options in the next drop-down list. Unsure of what dynamic effects you've placed on a page? On the toolbar's far right, click the Highlight Dynamic HTML effects button, and they appear highlighted in blue right on your page in Design view.
To open the DHTML Effects toolbar, select View » Toolbars » DHTML Effects. Then:
-
Select the object on the page.
First, you need to choose a page element (by selecting its tag) that will trigger the action. Choices on the DHTML toolbar remain grayed out until you select an item on the page, like a paragraph, a hyperlink, or a picture. FrontPage forces you to choose a tag here. For instance, if you just select some words within a paragraph, the program applies the effect to the entire paragraph.
-
Set an event.
The "On" field of the toolbar is the only active field (at least initially). Click the drop-down menu next to it to select the event that will trigger the action. For instance, if you select "Mouse Over," then a cursor passing over the element you chose in step 1 will trigger the action you'll select next, in step 3.
-
Select an action to apply.
Once you've made a selection in the "On" field (where you set the event), FrontPage activates the "Apply" drop-down menu to its right. This menu is where you set the action. Your choices depend upon two things: the tag you initially chose to modify, and the event you just chose in the "On" field.
For example, if you selected a picture and choose "Mouse over," then "swap image" is your only choice under actions to apply (details on swapping images follow). If you select some text and then choose "Mouse over," the only action available is formatting. Most of the one-move animations that let you do things like gradually reveal an element (Wipe) or have it "fly in" or "spiral" onto the page can be set only on the "Page load" event (which is when a page initially appears in the browser).
-
Select action settings.
Once you choose an event and an action, you use the final drop-down menu to finish setting your effect. As with the other menus, options here depend on your previous selections. Choose the direction in which an element will fly or the special formatting a text will adopt in response to a cursor pass or click.
To test these effects, you must preview your page in a browser, not in FrontPage's Preview view.
Creating a Rollover Image (Image Swap)
How do you attract attention to your hyperlinks? Adding color works, but having a picture serve as a hyperlink is even better. And if that picture changes when a mouse passes over it, your readers are sure to take notice.
Web designers call this a rollover or an image swap. When you set up an image swap, FrontPage generates a script that replaces one image with another. The change can produce a subtle effect, like adding a shadow to a button to make it look 3-dimensional, or the new image can be completely different.
To make this effect look smooth, be sure to use pictures that are the same size.
To insert an image swap, first insert a picture on a page (Adding Pictures) and select it. In the DHTML toolbar, click the On drop-down menu and select "Mouse over." To the right, click the Apply drop-down menu, and then select Swap Picture. Then click Choose picture and browse to another image and select it. Save your page and preview the effect in a browser.
The Behaviors task pane includes a more advanced image swap action. See "Swap Image" on Creating Actions.
Interactive Buttons
Web authors swap images all the time to attract attention to hyperlinks. But you don't need to go to all the trouble of creating images and swapping them out. Right out of the box, FrontPage offers you an assortment of working rollover buttons, whose appearances change automatically when a cursor passes over them. To preview and choose buttons, select Insert » Interactive Button. The Interactive Buttons dialog box, pictured in Figure 9-2, appears.
Figure 9-2. Select a button style and it appears in the Preview pane at top. Pass your cursor over it to preview its "mouse over" effect.
Use the Text field to name your button. This text will show up as the button label on your Web page. Click Browse to the right of the Link field to set a button's hyperlink.
An interactive button's visual rollover effects won't display in Netscape Navigator, but hyperlinks will work correctly.
The Interactive Button dialog box gives you loads of ways to customize and configure your buttons. If you don't like the color and font settings of a particular button, change them within the Font tab. Click the Image tab to change button dimensions. To edit a button, click it, and then select Format » Properties. Or right-click it and select Button Properties. You can even double-click a button.
If you want to add even more interactivity, check out the tutorial at the end of this tutorial. It shows you how to mix these buttons with layers and behaviors to create cascading menus.
Page Transitions
When a Web page changes or refreshes, the new page pops up all at once. FrontPage has a special feature that lets you customize this transition with some special effects. For example, you could have parts of your new page first appear in a pattern, like vertical blinds or a checkerboard, until the whole image eventually changes. Or you can have the new page begin as a small circle in the middle of the page and expand out to the edge of the browser window. You may be familiar with these kinds of transitions if you've ever used Microsoft PowerPoint.
Not everyone's a fan of these page transitions. A lot of people find them unpleasantly distractingkind of like surfing the Web via the billboards in Times Square. Even more seriously, these transitions don't work in Netscape and other non-Microsoft browsers. Finally, transitions also slow your page download speed.
But maybe you have a page on the history of the periscope that you're dying to circle in on. If you want to set a special transition for a page, open it, and then select Format » Page Transition. Select the effect and specify whether you want it to appear when the page is opened (Page Enter) or closed (Page Exit). You can use the Duration field to set the duration of the transition by entering the number of seconds you want the transition to last.