How to Use Spry Effects in Dreamweaver CS3

Contributor

By Virginia DeBolt
eHow Contributing Writer

Article Rating:

(4 Ratings)

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

Step 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."
Step 2

If the Behaviors panel is not open, go to Window > Behaviors to bring it to the front.
Step 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.
Step 4

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

Select the ID

Select the ID you want to apply the effect to. I selected h1 "beefy."
Step 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.
Step 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.
Step 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.
Step 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.

Comments

Veesites said

Flag This Comment

on 6/13/2008 Hi tomed3210,
You should be able to use a background image instead of the background color in the Spry Menubars. Find the right selector in the CSS panel, click the pencil icon to edit it, and insert a background image rule.

My article about Spry menu bars is here
http://www.ehow.com/how_2245492_dreamweaver-cs-spry-menu-bars.html