adobe dreamweaver cs5 on demand part 60 potx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (657.25 KB, 7 trang )
ptg
368 Chapter 15
The Change Property behavior allows you to change properties, such
as font styles, borders or visibility, for an element on a Web page. The
Change Property behavior is useful for adding interactivity to a Web
page. For example, you can have the Change Property behavior display
a text description or link address when a user points to a picture on a
page. Along with the Change Property behavior, you can also use the
Change Property Restore behavior, which restores the most recent
property changes made by the Change Property behavior. When you
use the Change Property Restore behavior, Dreamweaver displays a
message dialog box acknowledging the use of the behavior. You can
double-click the behavior to display a list of properties being restored.
Changing Element
Properties
Use the Change Property
Behavior
Open the Web page you want to
apply a behavior.
Click the Window menu, and then
click Behaviors to display the
Behaviors panel.
Click the element you want to add
the Change Property behavior (in
this example, select the cell phone
image).
Click the Add Behavior button
(plus sign), and then click Change
Property.
A dialog box appears, allowing you
to set the details of the action.
Click the Type Of Element list
arrow, and then select the type
you want to change (in this
example, select DIV).
Click the Element ID list arrow, and
then select an ID (in this example,
select div “apTextSign”).
The AP element to the right of the
cell phone image contains text,
which you’ll change the font size
to a larger size.
6
5
4
3
2
1
3
2
4
1
From the Library of Wow! eBook
ptg
Chapter 15 Working with Behaviors 369
Click the Select option and select
the property you want to change
(in this example, select fontSize),
or click the Enter option and enter
the property you want to change.
Enter the new value you want (in
this example, enter 24).
Click OK.
To ch ange the trig ger, click the
event, click the Event list arrow,
and then select the event you
want.
10
9
8
7 5
8
9
7
6
Point here to change property
Font size
changes to
24 pt.
10
From the Library of Wow! eBook
ptg
370 Chapter 15
The Drag AP Element behavior allows you let visitors on a Web page to
drag an AP (Absolute Positioned) element. This behavior is useful for
creating interactive training, games, and interface controls, such as a
slider. The behavior allows you to specify how you want the AP ele-
ment to move. You can constrain the movement in a specific direction,
to a specific location or target, or to snap to another element. In order
to use the Drag AP Element behavior, you need to call the behavior
before the visitor can drag the element. To achieve this, you need to
attach the Drag AP Element behavior to the body object with the
onLoad event.
Dragging an AP
Element
Use the Drag AP Element
Behavior
Open the Web page you want to
apply a behavior.
Click the Window menu, and then
click Behaviors to display the
Behaviors panel.
Create the AP Element you want to
add the Drag AP Element behavior.
Click <body> in the tag selector in
the Document window.
Click the Add Behavior button
(plus sign), and then click Drag AP
Element.
A dialog box appears displaying
the Basic tab.
Click the Movement list arrow, and
then click Constrained or
Unconstrained.
If you selected the Constrained
option, enter values for Up, Down,
Left, and Right (in pixels).
The values are relative to the
starting position of the AP
element. To constrain movement,
use the following methods:
◆ Rectangle. Enter positive
values in all four boxes.
◆ Vertical. Enter positive values
for Up and Down and 0 for Left
and Right.
7
6
5
4
3
2
1
4
1
5
2
From the Library of Wow! eBook
ptg
Chapter 15 Working with Behaviors 371
◆ Horizontal. Enter positive
values for Left and Right and 0
for Up and Down.
Enter values for the Drop Target in
the available Up, Down, Left, and
Right boxes (in pixels), or click Get
Current Position to automatically
insert the current position of the
AP element.
The drop target is the spot where
you want the visitor to drag the AP
element. Values are relative to the
top left corner of the browser
window.
Enter a Snap If Within value (in
pixels) to specify how close the
visitor needs to be to the drop
target before the AP element
snaps to the target.
To de fine the drag handle, track
movement, and trigger an action,
click the Advanced tab.
◆ Drag Handle. Click the list
arrow, and then select Entire
Element or Area Within
Element. For an area, enter
values for the area you want
within the element.
◆ While Dragging. Select the
Bring Element To Front, then
check box, select a position,
and then enter the script code
or function you want executed
during the drag.
◆ When Dropped. Enter the script
code or function you want
executed when dropped, and
then select the Only If Snapped
check box to execute the code
only if snapped.
Click OK.
To ch ange the trig ger, click the
event, click the Event list arrow,
and then select the event you
want.
12
11
10
9
8
9
6
8
10
11
Select the advanced
options you want
12
From the Library of Wow! eBook
ptg
372 Chapter 15
The Show-Hide Elements behavior allows you to show, hide, or restore
the visibility of elements on a page. This behavior is useful for display-
ing information or providing interaction when a visitor points to an ele-
ment. For example, when a visitor points to a picture or a text box, you
can display information about the item to provide added value and
some interactivity. When the visitor moves the pointer away, you can
restore the element back to its original state.
Showing and Hiding
Elements
Show or Hide Page Elements
Open the Web page you want to
apply a behavior.
Click the Window menu, and then
click Behaviors to display the
Behaviors panel.
Click the element you want to add
a behavior.
Click the Add Behavior button
(plus sign), and then click Show-
Hide Elements.
A dialog box appears, allowing you
to set the details of the action.
Click the element you want to
show, hide, or restore.
Click Show, Hide, or Default,
which restores the default visibility
of the element.
Repeat steps 5 and 6 for each
element you want.
Click OK.
To ch ange the trig ger, click the
event, click the Event list arrow,
and then select the event you
want.
9
8
7
6
5
4
3
2
1
5
6
8
4
9
From the Library of Wow! eBook
ptg
Chapter 15 Working with Behaviors 373
The Call JavaScript behavior runs a line of script when an event
occurs. The behavior only runs one line of script, which means you can
execute a single line of code or a procedure that calls a section of
code. To use the Call JavaScript behavior, you need JavaScript experi-
ence and coding knowledge, which is outside the scope of this book.
Executing a
JavaScript
Use the Call JavaScript
Behavior
Open the Web page you want to
apply a behavior.
Click the Window menu, and then
click Behaviors to display the
Behaviors panel.
Click the element you want to add
a behavior.
Click the Add Behavior button
(plus sign), and then click Call
JavaScript.
A dialog box appears, allowing you
to set the details of the action.
Type the line of script you want to
run.
Click OK.
To ch ange the trig ger, click the
event, click the Event list arrow,
and then select the event you
want.
7
6
5
4
3
2
1
1
4
2
3
5
6
From the Library of Wow! eBook
ptg
This page intentionally left blank
From the Library of Wow! eBook
