adobe dreamweaver cs5 on demand part 62 ppsx

Working with Spry Panel Widgets Insert and Work with Spry Panel Widgets Open the Web page you want to insert a spry widget, and then click to place the insertion point where you want i

Working with Spry

Panel Widgets

Insert and Work with Spry Panel

Widgets

Open the Web page you want to

insert a spry widget, 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 select the

spry panel element you want:

◆ Spry Tabbed Panels Creates a

set of panels to store data in a

compact space

◆ Spry Accordion Creates a set

of collapsible panels to store

large amounts of data in a

compact space

◆ Spry Collapsible Panel Creates

a set of collapsible panels to

store data in a compact space

Select the panel widget

Point to a tab, click the eye icon (if

available) to edit the panel

contents, or select the panel

contents and edit it

Click the Window menu, and then

click Properties to display the

Properties panel

5

4

3

2

1

A spry panel widget allows you to store content in a compact space using tabs Dreamweaver provides three different types of spry panels:

accordion, collapsible, and tabbed Each spry panel type provides a tab-like interface that displays content when a visitor clicks a tab The differences between the spry panel types lies in the display and style of the tabs If you have a large amount of content, the accordion panel is your best bet Try each one to see which one works best with the con-tent you want to display

2

Specify the options you want in

the Properties panel for the

selected widget; the options vary

depending on the widget Some of

the options include:

◆ Panel Order Click the Up or

Down Arrow buttons.

◆ Default Panel Click the Default

Panel list arrow, and then

select the panel you want

◆ Delete Panel Select the panel,

and then click the Minus

button

◆ Animate Panel Select the

panel, and then select or clear

the Enable Animation check

box

6

Working with Spry

Validation Widgets

Insert and Work with Spry

Validation Widgets

Open the Web page you want to

insert a spry widget, 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 select the

spry validation element you want:

◆ Spry Validation Text Field.

Creates a text box that displays

valid or invalid states when a

visitor enters text or doesn’t

enter text as a required field

◆ Spry Validation Textarea.

Creates a text area that displays

valid or invalid states when a

visitor enters text or doesn’t

enter text as a required field

◆ Spry Validation Checkbox.

Creates a check box that

displays valid or invalid states

when a visitor selects or

doesn’t select a check box

◆ Spry Validation Select Creates

a drop-down menu with a list of

options divided into sections

that displays valid or invalid

states when a visitor selects an

element in the list

◆ Spry Validation Password.

Creates a password text field

that enforces password rules

2

1

A spry validation widget allows you to determine whether information

or data in a form is valid or invalid Dreamweaver provides several types of spry validation elements: text field, text area, select (from a drop-down menu), and check box When you insert a spry validation element, the Input Tag Accessibility Attributes dialog box opens, requesting information and options to make the form object accessible

to the visually impaired After you insert a spry validation element, you can use the Properties panel to specify the validation options you want;

each element provides different validation options

◆ Spry Validation Confirm

Creates a text or password field

that displays valid or invalid

states

◆ Spry Validation Radio Group

Creates a group of radio buttons

with validation

support

Specify the Input Tag Accessibility

Attributes dialog box options you

want

Click OK.

Select the panel widget

Click the Window menu, and then

click Properties to display the

Properties panel

Specify the options you want in the

Properties panel for the selected

widget; the options vary depending

on the widget Some of the general

options include:

◆ Initial State Indicates the state

when the page loads in the

browser or when the form is

reset

◆ Focus State Indicates the state

with the insertion point

◆ Valid State Indicates the state

when the visitor entered

information correctly

◆ Required State Indicates the

state when the visitor fails to

enter information

◆ Minimum or Maximum Number

of Characters State Indicates

the state when the visitor has

not entered enough characters

or entered too many characters

◆ Minimum or Maximum Value

State Indicates the state when

the visitor has entered a value

that is less or greater than the

7

6

5

4

3

4

3

6 5

7

Working with Spry

Menu Bar Widgets

Insert and Work with Spry Menu

Bar Widgets

Open the Web page you want to

insert a spry widget, 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

Menu Bar.

IMPORTANT If your page

contains Flash content, the DHTML

layers used to create the menu bar

may cause problems

Click the Horizontal or Vertical

option

Click OK.

Select the panel widget

Click the Window menu, and then

click Properties to display the

Properties panel

Specify the options you want in

the Properties panel for the

selected widget:

◆ Add Main Menu Click the Plus

(+) button above the first

column, and then rename the

menu in the Text box

◆ Add Submenu Select a main

menu item, click the Plus (+)

button above the second

column, and then rename the

menu in the Text box

7

6

5

4

3

2

1

A spry menu bar widget allows you to create a set of navigational menus that come with submenus A menu bar makes it easy for visitors

to navigate to different parts of your site in the same way they choose commands in a program, such as Dreamweaver You can insert two types of menu bars: horizontal or vertical You can link a menu item to a specific place or execute a script In addition, you can add tool tips to provide a short description of menu items for visitors

4

3

◆ Delete Menu Select the main

menu or submenu item you

want to delete, and then click

the Minus (-) button.

◆ Change Menu Order Select the

menu item you want to reorder,

and then click the Up or Down

buttons

◆ Link Menu Select the menu

item you want to apply a link,

and then type the link in the

Link box or click the Browse

button to select a file

◆ Add Tool Tip Select the menu

item you want to create a tool

tip, and then type the text for

the tool tip in the Title text box

◆ Target Enter one of the

following options:

◆ _blank Opens the linked

page in a new window

◆ _parent Loads the linked

document in the immediate

frameset of the active

document

◆ _self Loads the linked

document in the same

browser window (default)

◆ _top Loads the linked

document in the topmost

window of a frameset

◆ Styles Click the Turn Styles Off

button to disable the styling of

a menu bar, which is helpful to

see the HTML structure of the

widget Click the Turn Styles On

button to enable it again

7