Creating Spry Elements and Alternate Style Sheets - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 454

Using Spry Effects Effectively
Add Spry effects to a page only when they enhance the user's experience. An effect
should draw attention to an important piece of information or provide a transition
between two important points. It is easy to overdo effects in a page. Use them sparingly.

You will add the Shake effect to the tickets.png graphic in the home page to draw
attention to it and promote ticket sales.

To add the Shake effect to the home page:

◗

1. Open the index.html page in the Document window, and then select the
tickets.png image.

◗

2. On the Application bar, click Window , and then click Behaviors . The Tag
Inspector opens in the CSS Styles panel group.

◗

3. Click the Behaviors button, if necessary. The Behaviors panel is displayed.
◗

4. In the Behaviors panel, click the Add behavior button , point to Effects , and
then click Shake . The Shake dialog box opens. See Figure 8-17.

Figure 8-17 Shake dialog box

◗

5. Click the Target Element button, and then click <Current Selection> , if
necessary.

◗

6. Click the OK button. Shake is listed in the Behaviors panel.
Next, you'll change the event to onLoad so that the behavior occurs when the
page opens in a browser.

◗

7. In the Behaviors panel, click in the Events box next to Shake, click the Events
arrow, and then click onLoad . The tickets.png graphic will shake when it is loaded
in the browser window.

◗

8. Save the page, and then click the OK button in the Copy Dependent Files dialog
box that opens. The SpryEffects.js file is saved in the SpryAssets folder.

◗

9. Preview the page in a browser. The tickets.png graphic shakes briefly after the
page is loaded.

◗

10. Close the browser.

So far, you added a Spry widget to the contact.html page and modifi ed its properties
to match the NextBest Fest styles. You also added a Spry effect to the home page. Next,
you will create a Spry data set.