adobe dreamweaver cs5 on demand part 64 docx

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

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

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

3

7 4

5

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

3

7

6 4

5

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

3

5

6

4

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

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

5

4

3

2

6

5 4

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

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

Before you add Spry widgets, you need to

download and link the latest required Spry

Framework files from the Adobe Labs Web

site (http://labs.adobe.com/technologies/spry/)

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