FrontPage 2003 (The Missing Manual)
9.2. Creating Basic DHTML Effects
You apply the most fundamental effects using FrontPage's DHTML Effects toolbar. These are mostly one-move animations that can make an element on a page slide, hop, or fly in or out of view. The toolbar also easily creates slick effects like rollover images (pictures that change when a mouse passes over them). If you want to create rollover images for any navigation buttons you're using, FrontPage gives you a specially designed shortcut: interactive buttons . This section will show you how easy it is to create all these bells and whistles. Note: 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 Chapter 12 for a whole chapter's worth of advice on page-testing strategies.) 9.2.1. Using the DHTML Effects Toolbar
You can unleash a handful of simple animations quickly using the DHTML Effects toolbar (Figure 9-1).
To open the DHTML Effects toolbar, select View
Note: To test these effects, you must preview your page in a browser, not in FrontPage's Preview view. 9.2.2. 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. Tip: 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 (Section 4.1.1) 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. Tip: The Behaviors task pane includes a more advanced image swap action. See "Swap Image" on Section 9.4.3.5. 9.2.3. 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
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. Note: 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 If you want to add even more interactivity, check out the tutorial at the end of this chapter. It shows you how to mix these buttons with layers and behaviors to create cascading menus. 9.2.4. 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 |