Operation Manual

451
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
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 elements except applet, body, iframe, object, tr, tbody, or th.
1 (Optional) Select the content or layout element you want to apply the effect to.
2 In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Appear/Fade from the menu.
3 Select the element’s ID from the target element menu. If you already selected an element, choose <Current
Selection>.
4 In the Effect Duration box, define the time it takes for the effect to occur, in milliseconds.
5 Select the effect you want to apply: Fade or Appear.
6 In the Fade From box, define the percentage of opacity you want the effect to have when it appears.
7 In the Fade To box, define the percentage of opacity you want to fade to.
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 effect
Note: You can only use this effect with these HTML elements: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p,
ol, ul, li, applet, center, dir, menu, or pre.
1 (Optional) Select the content or layout element you want to apply the effect to.
2 In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Blind from the menu.
3 Select the element’s ID from the target element menu. If you already selected an element, choose <Current
Selection>.
4 In the Effect Duration box, define the time it takes for the effect to occur, in milliseconds.
5 Select the effect you want to apply: Blind Up or Blind Down.
6 In the Blind Up From/Blind Down From box, define the blind-scrolling starting point as a percentage or as a pixel
number. These values are calculated from the top of the element.
7 In the Blind Up To/Blind Down To field, define the blind-scrolling end point as a percentage or as a pixel number.
These values are calculated from the top of the element.
8 Select Toggle Effect if you want the effect to be reversible, scrolling up and down with successive clicks.
Apply a Grow/Shrink effect
Note: You can use this effect with these HTML elements: address, dd, div, dl, dt, form, p, ol, ul, applet, center,
dir, menu, or pre.
1 (Optional) Select the content or layout element you want to apply the effect to.
2 In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Grow/Shrink from the
popup menu.