adobe dreamweaver cs5 on demand part 64 docx

ptg
392 Chapter 16
Creating a Spry
Region
Create a Spry Region
Open the Web page you want to
insert a spry region, and then click
to place the insertion point where
you want it.
Click the Spry tab on the Insert
panel, or click the Insert menu,
point to Spry, and then click Spry
Region.
Select the DIV or SPAN option.
Click the Region or Detail Region
option to specify the type of region
you want to insert.
Click the Spry Data Set list arrow,
and then select the data set you
want to use.
Click the Wrap Selection option to
insert a new region around an
object, or the Replace Selection
option to replace an existing
region for an object.
Click OK.
Dreamweaver inserts a region
placeholder on your page.
You can replace the placeholder
with spry data objects, such as a
table or repeat list, or with

dynamic data from the Bindings
panel.
7
6
5
4
3
2
1
After you identify the data sets (HTML or XML source files) you want to
use, you can insert one or more spry data objects to display the data on
a page. A spry data object is enclosed in a spry region on a page, so
you need to insert one first or let Dreamweaver do it for you. You can
create a region or a repeated region. There are two types of regions: a
region and a detail region. A spry region is a page section that wraps
around data objects. A spry detail region updates data based on
changes made in a master table object (also known as a spry table)
somewhere else on a page. A repeat region is a data structure you can
format to display your data. A repeat region is useful for elements you
want to repeat within a page layout, such as a gallery of images.
1
Spry region
2
3
7
6
4
5
From the Library of Wow! eBook
ptg

Chapter 16 Using Spry Widgets and Effects 393
Create a Spry Repeat Region
Open the Web page you want to
insert a spry region, and then click
to place the insertion point where
you want it.
Click the Spry tab on the Insert
panel, or click the Insert menu,
point to Spry, and then click Spry
Repeat.
Select the DIV or SPAN option.
Click the Repeat or Repeat
Children option to specify the type
of region you want to insert.
Use the Repeat Children option
when data validation is done for
each line in a list at the child level.
Click the Spry Data Set list arrow,
and then select the data set you
want to use.
Click the Wrap Selection option to
insert a new region around an
object, or the Replace Selection
option to replace an existing
region for an object.
Click OK.
Dreamweaver inserts a region
placeholder on your page.
You can replace the placeholder
with spry data objects, such as a

table or repeat list, or with
dynamic data from the Bindings
panel.
7
6
5
4
3
2
1
1
2
Spry repeat region
3
7
6
4
5
From the Library of Wow! eBook
ptg
394 Chapter 16
A spry data object, such as a repeat list, displays data from a spry data
set. A spry data object is enclosed in a spry region on a page, so you
need to insert one first. If you don’t, Dreamweaver inserts one for you.
The repeat list data object allows you to display your data as an
ordered list, an unordered (bulleted) list, a definition list, or a drop-
down list.
Creating a Spry Repeat
List
Create a Spry Repeat List

Open the Web page you want to
insert a spry region, and then click
to place the insertion point where
you want it.
Click the Spry tab on the Insert
panel, or click the Insert menu,
point to Spry, and then click Spry
Repeat List.
Click the Container Tag list arrow,
and then select the tag you want
to use: UL (Unordered List), OL
(Ordered List), DL (Definition List),
or SELECT (Drop-down List).
◆ If you choose the SELECT
(Drop-down List) option, you
also need to select a display
column and value column (the
value sent to the background
server).
Click the Spry Data Set list arrow,
and then select the data set you
want to use.
Click the Display Column list
arrow, and then select the column
you want to display.
Click OK.
Dreamweaver inserts a repeated
region in your page.
6
5

4
3
2
1
1
2
3
5
6
4
From the Library of Wow! eBook
ptg
Chapter 16 Using Spry Widgets and Effects 395
Each spry widget is associated with a CSS and JavaScript file. The CSS
file contains all the styling for the widget and the JavaScript file pro-
vides all the functionality for the widget. (For example, the files associ-
ated with the Validation Radio Group widget are called
SpryValidationRadio.css and SpryValidationRadio.js). When you insert a
widget in a saved page, Dreamweaver creates a SpryAssets folder in
your site and saves the associated files in it. If you want to customize
the styling for a spry widget, all you need to do is open the CSS file in
the SpryAssets folder, make the changes you want, and then save it.
Customizing a Spry
Widget
Change the Style of a Spry
Widget
Click the File menu, click Open,
navigate to the SpryAssets folder
in your site, select the CSS file for
the widget that you want to

change, and then click Open.
The CSS file becomes available in
the SpryAssets folder after you
use it on a web page.
Locate the CSS rule for the part of
the widget that you want to
change.
The available CSS rules vary
depending on the spry widget.
Make the changes you want.
◆ You can also make changes to
a CSS file in the CSS Styles
panel.
Click the File menu, and then click
Save to save your changes.
Click the File menu, and then click
Close.
5
4
3
2
1
See Also
See Chapter 9, “Working with CSS
Rules” on page 224 for more informa-
tion on changing CSS styles.
1
2
3
4

From the Library of Wow! eBook
ptg
396 Chapter 16
Dreamweaver goes a step further with spry widgets that allows you to
add special effects to page elements. A spry effect is useful for high-
lighting information or creating an animated transition. You can use the
Behaviors panel to add a variety of spry effects including fades, high-
lights, blinds, slides, shakes, and squishes. You can combine more than
one effect to an element to create a unique display. If you no longer
want to use an effect, you can quickly remove it.
Adding and Removing
Spry Effects
Apply a Spry Effect
Open the Web page with the
element you want to apply a spry
effect.
Select the element on the page
you want to change.
Click the Window menu, and then
click Behaviors to display the
Behaviors panel.
Click the Add Behavior button
(plus sign), point to Effects, and
then select the effect you want:
◆ Appear/Fade. Makes the
element appear or fade away.
◆ Highlight. Changes the element
background color.
◆ Blind. Displays the element
with a window blind effect.

◆ Slide. Moves the element up or
down.
◆ Grow/Shrink. Makes the
element increase or decrease
in size.
◆ Shake. Makes the element
shake from left to right.
◆ Squish. Makes the element
disappear in the upper left
corner.
Specify the options you want for
the selected spry effect; the
options for the effect vary
depending on the one you select.
Click OK.
6
5
4
3
2
1
1
2
Add Behavior button
3
6
5
4
From the Library of Wow! eBook
ptg

Chapter 16 Using Spry Widgets and Effects 397
Remove a Spry Effect
Open the Web page with the effect
you want to remove.
Select the element on the page
with the spry effect.
Click the Window menu, and then
click Behaviors to display the
Behaviors panel.
Select the effect you want to
remove in the Behaviors panel.
Click the Remove Event button in
the subpanel title bar.
◆ You can also right-click (Win)
or control-click (Mac) the
behavior, and then click Delete
Behavior.
5
4
3
2
1
2
1
Behaviors panel
3
5
4
Did You Know?
Applying a spry effect adds code to

your Web page file.
When you apply a
spry effect, Dreamweaver adds code
to the document that initiates and iden-
tifies the SpryEffects.js file, which pro-
vides the executable code to perform
the effect. Do not remove or modify
this code in Code view.
You can add multiple effects to an ele-
ment.
Select the element you to which
want to apply multiple effects, open the
Behaviors panel, click the Add
Behavior button (plus sign), point to
Effects, select the effect you want on
the submenu, select the element’s ID
from the target element list, or select
<Current Selection>, specify the other
options you want, and then click OK.
From the Library of Wow! eBook
ptg
398 Chapter 16
Before you add Spry widgets, you need to
download and link the latest required Spry
Framework files from the Adobe Labs Web
site (
When you unzip the Spry Framework files,
you also get some samples and demo files
that show you by example how to use a spry
widget.

In addition to spry widgets, there are also
other widgets available that work with
Dreamweaver. You can browse for widgets on
the Adobe Exchange web site, which you can
quickly access from Dreamweaver. Click the
Browse for Web Widgets from the Extend
Dreamweaver menu on the Applications bar.
Checking Out Spry Samples
From the Library of Wow! eBook