Adobe 38040334 - Dreamweaver CS3 User Manual page 494

Effects can alter an element's opacity, scale, position, and styling properties such as background color. You can create
interesting visual effects by combining two or more properties.
Because these effects are Spry-based, when a user clicks on an object with an effect, only the object is dynamically
updated, without refreshing the entire HTML page.
Spry includes these effects:
Makes an element appear or fade away.
Appear/Fade
Changes the background color of an element.
Highlight
Simulates a window blind that goes up or down to hide or reveal the element.
Blind Up/Down
Moves the element up or down.
Slide
Increases or reduces the size of the element.
Grow/Shrink
Simulates shaking the element from left to right.
Shake
Makes the element disappear into the upper-left corner of the page.
Squish
Important: When you use an effect, various lines of code are added to your file in the Code view. One line identifies the
SpryEffects.js file, which is necessary to include the effects. Do not remove this line from your code or the effects will not work.
For a comprehensive overview of the Spry effects available in the Spry framework, visit
www.adobe.com/go/learn_dw_spryeffects.
Apply an Appear/Fade effect
Note: You can use this effect with any HTML objects except applet, body, iframe, object, tr, tbody, or th.
(Optional) Select the content or layout object you want to apply the effect to.
1
2 In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Appear/Fade from the menu.
Select the object's ID from the target element menu. If you already selected an object, choose <Current Selection>.
3
4 In the Effect Duration box, define the time it takes for the effect to occur, in milliseconds.
Select the effect you want to apply: Fade or Appear.
5
6 In the Fade From box, define the percentage of opacity you want the effect to have when it appears.
In the Fade To box, define the percentage of opacity you want to fade to.
7
8 Select Toggle Effect if you want the effect to be reversible, going from fade to appear and back again with
successive clicks.
Apply a Blind up/Blind down effect
Note: You can only use this effect with these HTML objects: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul,
li, applet, center, dir, menu, or pre.
(Optional) Select the content or layout object you want to apply the effect to.
1
2 In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Blind from the menu.
Select the object's ID from the target element menu. If you already selected object, choose <Current Selection>.
3
4 In the Effect Duration box, define the time it takes for the effect to occur, in milliseconds.
Select the effect you want to apply: Blind Up or Blind Down.
5
September 4, 2007
DREAMWEAVER CS3 487
User Guide