S DNG BEHAVIOR

1. Gii thiu:
2. Pannel Behavior
3. Pannel Behavior
4. To behavior
5. B Behavior
6. Cc loi behavior
7. Lab
1. Gii thiu:
Trong Dreamweaver, behavior l cc on m lnh Javascript c to sn, bn c th
gn 1 behavior cho cc i tng trong trang web, m lnh javascipt trong behavior s thi
hnh khi c 1 s kin xy ra vi i tng.
Bn c th gn cho mt i tng nhiu behavior.
2. Pannel Behavior
L ni lit k cc behavior ca cc i tng. Ni bn c th to, chnh, xo cc behavior
Hin pannel Behavior: Vo menu Window Behavior
3. To behavior (cc bc chung)
- B1: Chn 1 i tng HTML s c behavior
- B2: Nhp du + trong panel Behavior ri chn loi behavior
- B3: Khai bo cc tham s cho Behavior
- B4: Chn s kin mun p behavior
4. B Behavior
Nhp Behavior Delete
5. Cc loi behavior
a. Call Javascript:
- Tc dng: Gi 1 lnh hoc 1 hm Javascript.
- Thng s: l cc lnh javascript
- V d: alert('Cho bn');

b. Change Property:
- Tc dng: Thay i thuc tnh ca 1 i tng
- Cc thng s:
Type of Element: Tag ca i tng chu tc ng ca hiu ng

Lu hnh ni b Trang 1
 Element ID: Tn ca i tng chu tc ng ca hiu ng
Property: Tn thuc tnh s thay i
New Value: Gi tr n nh cho thuc tnh
- V d: i thuc tnh rng ng vin ca hnh c tn l langque: Xem hnh

c. Grow/Shrink (phng to/thu nh):

- Tc dng: to hiu ng phng to/thu nh
- Thng s:
Target Element: i tng chu tc dng ca hiu ng
Effect duration: Thi gian xy ra hiu ng
Effect: Chiu din ra hiu ng (Grow/Shrink)
Grow from, Grow to: Chn t l t X n Y (X,Y t 0 n 100%)
Grow from: V tr trong i tng m hiu ng din ra.
Toogle effect : i chiu hiu ng
- V d:

d. Shake
- Tc dng: to hiu ng lc qua lc li
- Thng s: i tng chu tc dng
- V d:

Lu hnh ni b Trang 2
 e. HightLight
- Tc dng: Chuyn mu ca 1 i tng
- Thng s
Target Element: i tng chu tc dng ca hiu ng
Effect duration: Thi gian xy ra hiu ng
Start color: Mu bt u chuyn
End color: Mu kt thc
Color After Effect: Mu nn ca i tng sau khi hiu ng kt thc
Toogle effect : i chiu hiu ng
- V d:

f. GoTo URL:
- Tc dng: nhy n 1 trang web.
- Thng s: URL ca trang web
- V d:

g. Open Browser Window:

- Tc dng: M mi 1 ca s trnh duyt c ch nh cch hin th ca s mi:
Width, Height, hin n thanh menu, hin n thanh a ch, hin n thanh scrollbar,
Tn ca s, Status bar, URL
- Thng s:
URL: a ch trang web hoc a ch hnh
Window Width: rng ca s mi
Window height: cao trang web
Attribute: Cc thuc tnh ca ca s
Window name: Tn ca s mi
- V d:

Lu hnh ni b Trang 3
 h. SetText Of Container:
- Tc dng: Thay i ni dung (text, html) trong 1 i tng (div, span)
- Thng s:
Container: i tng m ni dung s thay i
New HTML: Ni dung mi s a vo i tng
- V d:

i. SetText Of Status Bar

- Tc dng: n nh text trn thanh status ca trnh duyt
- Thng s: dng ch mun gn
- V d:

j. Swap Image:
- Tc dng: i hnh khi a chut vo
- Thng s
Images: Hnh chu tc ng ca hiu ng
Set source to: a ch hnh s thay i
- V d:

Lu hnh ni b Trang 4
 k. Popup Message
- Tc dng: Hin 1 thng bo
- Thng s
Message: Ni dung thng bo
- V d:

Lu hnh ni b Trang 5
LAB
Chun b: Chp folder Behavior t vo site ca bn

M file behavior.html

Vo Menu Window chn Behavior , m

panel Behavior
Bn phi mn hnh Dreamweaver xut hin th
Behaviors

1. Grow/Shrink: phng to /thu nh 1 i tng

Yu cu: on text u tin, t Mt con chut n pht hin ra l ci by chut .on ny nm trong
tag p c tn l doan1. Hy thm 1 hiu ng khi nhp chut vo, n s phng to hoc thu nh
li
Thc hin:

B1: Chn 1 i tng HTML s c behavior.

V d hy chn tag p c tn don1 (Mt con
chut....pht hin ra l ci by chut)
B2: Nhp du + trong panel Behavior
EffectsGrow/Shrink

B3: Khai bo cc tham s cho

Behavior

Target Element: i tng chu tc

ng ca hiu ng, Current selection
l i tng hin hnh
Effect duration: s mili giy din ra
hiu ng(1000 =1 giy)
Effect: kiu hiu ng
Shrink from: S % ban u ca i
tng
Shrink to: S % cn li sau hiu ng

Lu hnh ni b Trang 6
Shrink to: Center v tr xy ra hiu
ng
Toogle effect : o hiu ng khi nhp
chut
Nhp OK
B4: Chn s kin mun p behavior:
Trong panel Behaviors, chn mc
onclick ch nh s kin kch hot
hiu ng. (hnh bn)

F12 test
Nhp chut vo on text chn bc 1 kim tra.

2. Change property: Thay i thuc tnh i tng.

Yu cu: Nhp chut vo on text Ch G cc ta cc tc..... vng mt ci by chut mu nn s
thay i, a chut ra khi mu nn tr li bnh thng. on text ny nm trong tag p c tn l
doan3
Thc hin:

B1: Nhp chn tag p c tn l doan3 Ch G cc ta cc tc..... vng mt ci by chut

B2: Nhp du + trong panel Behavior

Change Property
B4: Ch nh s kin l onMouseOver cho
behavior va mi to.

B3: Khai bo tham s

Type of element: chn tag p.
Element ID: chn P doan3
Property: chn thuc tnh backgroundColor.
New value: Blue (mu thay th c th thay
bng m mu).
OK

B4: Ch nh s kin l onMouseOver cho

behavior va mi to.

Lu hnh ni b Trang 7
To thm behavior tr li mu c khi
a chut ra:

B4: Nhp du + trong panel Behavior

Change Property
B5: Khai bo tham s
Type of element: chn tag p.
Element ID: chn P doan3
Select : chn thuc tnh backgroundColor.
New value: white (mu c).
OK

B5: Chn s kin onMouseOut trong behavior

mi to (behavior bn di). Sa xong s thy
nh hnh bn

F12 a chut vo kim tra.

3. HightLight
Yu cu: a chut vo on text Chut quay sang ni vi anh Heo cu nguyn cho ch
mu nn s thay i theo hiu ng ca hightlight. (on text ny nm trong tag p c tn l doan4)
Thc hin:

B1: Nhp chn tag p c tn l doan4 Chut quay sang ni vi anh Heo cu nguyn cho ch
B2: Nhp du + trong panel Behavior Effects HightLight
B3: Khai bo tham s

OK
F12 , nhp vo on text doan4

Lu hnh ni b Trang 8
4. Shake
Yu cu: a chut vo on text Chut chy ti bc B bc nng dn hiu ng git s xy
ra. (on text ny nm trong tag p c tn l doan5)
Thc hin:

B1: Nhp chn tag p c tn l doan5 Chut chy ti bc B bc nng dn

B2: Nhp du + trong panel Behavior Effects Shake
B3: Khai bo tham s

OK
B4: Chn s kin onMouseOver cho behavior

5. Swap Image v Swap Image Restore: a chut vo hnh , s i

thnh hnh khc. a chut ra ngoi, hin li hnh ban u.
Yu cu: Trong trang web c hnh hoa hu (i tng ny ang c tn l miss). Khi a chut vo, s
i sang hnh missonha.jpg, a chut ra tr li hnh c
Thc hin:

B1: Chn hnh cn apply behavior (hnh hoa hu)

B2: Nhp du + trong panel Behavior, chn Swap image.
Image: Chn i tng hnh s thay i bi
behavior.
Set source to: Nhp Browse chn hnh mun
i khi a chut vo.
Preload images:check
Restore images onMouseOver:Check.
Nhp OK
F12 a chut vo hnh kim tra.

6. Open browser windows: m mt ca s trnh duyt mi.

Yu cu: Nhp p vo hnh con kh, m ra trnh duyt mi c cha hnh ln
Thc hin:

B1: Chn i tng s gn behavior (hnh khi)

B2: Nhp du + trong panel Behavior, chn Open browser windows

Lu hnh ni b Trang 9
B3: Khai bo thng s
Url to display: a ch trang web hoc
hnh s hin trong ca s mi.
Window width: Chiu rng Browser
Window height: Chiu cao Browser
Attributes: Cc thuc tnh dng n/
hin cc thnh phn trong ca s mi
(Toolbar, Address, bar, Status bar, Scroll bar,
menu bar). y bn khi check ci no
Window name: t 1 tn ty cho ca
s mi
OK
B4: Chn OnDblclick cho behavior

Mi bn t thc hin: Nhp ch Tm kim, s hin ca s mi cha trang http://google.com.

Rng 600, Cao 500, Hin Scrollbar

7. Set Text Container : Thay i ni dung (text, html) ca 1 i

tng
Yu cu:
- Nhp nt ng, s hin trong div thng bo <img src=cuoi.jpg><br>ng ri!
B gii qu
- Nhp nt ng, s hin trong div thng bo Sai ri b i ! C ln
- Nhp p nt Gi , hin text trn thanh Status l 7 cng vi 1 bng my vy em
Thc hin:

B1: Nhp nt ng
B2: Nhp du + trong panel Behavior, chn Set text Set Text of Container
B3: Khai bo thng s nh sau:

Lu hnh ni b Trang 10
Nhp OK

B4: Nhp nt Sai

B5: Nhp du + trong panel Behavior, chn Set text Set Text of Container
B6: Khai bo thng s nh sau:

B7: Nhp nt Gi
B8: Nhp du + trong panel Behavior, chn Set text SetText Status
B9: Khai bo thng s nh sau:

B10: Chnh s kin onDblClick cho behavior mi to

F12 Kim tra , nhp/nhp p chut vo cc nt

Lu hnh ni b Trang 11
8. Popup Message:
Yu cu: Nhp nt Chao, hin ra thng bo Cho bn
Thc hin:
B1: Chn Button
B2: Nhp nt du + trong panel Behavior chn Popup Masages
B3: Mc Message g on text cn hin OK

F12 click vo (Button chao) kim tra, bn s thy box

Lu hnh ni b Trang 12