How to Use Spry Effects in Dreamweaver CS3

Spry Effects were added to the available Dreamweaver behaviors in the CS3 version. They create visual effects such as highlighting particular parts of a page, making things fade in and out, shake or grow. They can create a focal point, but should not be used in large doses. Here is how to work with Spry Effects.

Difficulty:

Moderate

Instructions

Things You'll Need

• Dreamweaver CS3 software or higher

1. Dreamweaver document

   An element must have an ID applied to become the target of a Spry Effect. In this partially-constructed Dreamweaver page I have applied an ID called "beefy" to the heading that says "Beefy Treats."

2. If the Behaviors panel is not open, go to Window > Behaviors to bring it to the front.

3. The Spry Effects

   Click the plus sign (+) to add a new behavior. Select Effects to see the available Spry Effects: Appear/Fade, Blind, Grow/Shrink, Highlight, Shake, Slide or Squish.

4. Choose the one you want from the Effects menu. I selected Highlight and the Highlight dialog opened.

5. Select the ID

   Select the ID you want to apply the effect to. I selected h1 "beefy."

6. Set your parameters

   Select the options for the effect. For highlight, pick a duration, a start color and end color, and the color after the effect.

7. Dreamweaver will inform you that it is adding a JavaScript file to your site root. Click OK. Remember to upload the scripts folder with the page.

8. Select a trigger

   Select the user event such as onClick or onMouseOver that you want to have trigger the Spry Effect. This menu is in the behaviors panel.

9. Take a look at your page in a browser to see if you like the effect. You can edit it by double-clicking the effect name in the behavior panel.