chương 3: tạo tính sinh động cho trang web-tk web & đồ họa doc

TRƯỜNG ĐẠI HỌC HOA SEN
KHOA KHOA HỌC & CÔNG NGHỆ
BỘ MÔN HỆ THỐNG THÔNG TIN
TẠO TÍNH SINH ĐỘNG CHO
TRANG WEB
Ging viên điều phối: PHẠM TH THANH TÂM
Email:
Chương 3:
THIT K WEB & CÁC CÔNG CỤ Đ HA
(TINV205DV02)
NỘI DUNG
1. CHÈN ÂM THANH NỀN VÀO TRANG WEB
2. TẠO HIỆU ỨNG CHUYỂN TRANG
3. CHÈN NÚT NHẤN
4. SỬ DỤNG LỚP TRONG TRANG WEB
5. CHÈN HÀNH VI
Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
2
1. CHÈN ÂM THANH NỀN
 Trong chế đ Design View, click phi v tr bt k
trên trang web > Page Properties…, hoc
 Vo menu Format > Background… > General
Chn đưng
dn cha file
âm thanh
Âm thanh đưc
lp li liên tc
Chn số ln
lp li ca
âm thanh
Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web

3
2. TẠO HIỆU ỨNG CHUYỂN TRANG
 Khi nim:
– Hiu ng chuyển trang (Page Transition) gip
cho s chuyển tiếp gia cc trang thêm hp dn.
– Hiu ng chuyển trang đưc thc hin khi ngưi
duyt trang web hoc chuyển sang trang web
khc.
– C thể dng hiu ng khc nhau cho tng trang.
Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
4
2. TẠO HIỆU ỨNG CHUYỂN TRANG (tt)
 Thc hin hiu ng chuyển trang
– M trang web muốn thc hin hiu ng
– Chn menu Format > Page Transition
S kin xy
ra hiu ng
Khong thi
gian thc hin
hiu ng (s)
Danh sch cc
hiu ng
Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
5
3. CHÈN NÚT NHẤN
 Nt nhn tương tác (Interactive Button) c chc
năng đi mu khi con tr nhn vào, di chuyển đến
hay đi ngang qua
 Cch thc hin:
– Chn nơi muốn chn nt nhn

– Chn menu Insert > Interactive Buttons

Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
6
3. CHÈN NÚT NHẤN (tt)
Ni dung hiển th trên nt
Chn trang liên kết
khi nhn nt
Chn cc
kiểu nt
Mu ch khi di chuyển
con tr đến nt
Mu ch khi nt
đ đưc nhn
Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
7
3. CHÈN NÚT NHẤN (tt)
To nh nt gốc
To nh nt khi
đ đưc nhn
To nh nt khi
di chuyển con
tr đến nt
Kch thưc
ca nt
nh đưc to ra l nh
.JPG (c mu nền)
nh đưc to ra l nh
.GIF (không c mu nền)
Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web

8
3. CHÈN NÚT NHẤN (tt)
 Lưu ý: Khi lưu li trang web có chèn các nút nhn,
phi thay đi đưng dn thư mc cha các nút đưc
to ra (là thư mc cha các hình nh có trong
website)
Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
9
4. SỬ DỤNG LỚP (LAYER)
 Lp (Layer) đưc s dng trong trang web để bố tr
mt cách linh đng cc văn bn và các đối tưng đồ
ha.
 Lp làm cho các thành phn trong trang web thể
hin động, nghĩa là:
– Lp sẽ thay đi v trí khi kích thưc ca trình
duyt thay đi (v trí tuyt đối – Absolute)
– Lp sẽ gi nguyên v trí khi kích thưc ca trình
duyt thay đi (v trí tương đối – Relative)
 Để làm vic vi Layer: s dng khung tác vụ
Layers (Task Panes > Layers).

Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
10
4. SỬ DỤNG LỚP (LAYER) (tt)
 Chèn mt lp vào trong trang web
– Chn Insert Layers (chèn lp) hoc Draw
Layers (vẽ lp) trong khung tác v Layers

Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
11

Insert Layer
Draw Layer
4. SỬ DỤNG LỚP (LAYER) (tt)
 Thay đi kích thưc ca mt lp
– Chn lp cn thay đi kích thưc

Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
12
Thay đi theo chiều cao
Thay đi theo chiều rng
4. SỬ DỤNG LỚP (LAYER) (tt)
 Thay đi mt số thuc tính ca lp
– Chn lp muốn thay đi thuc tính

Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
13
Hiển th lp
(mắt m)
Ẩn lp (mắt nhắm)
Đng khung v
tô nền cho lp
Thay đi v
tr ca lp
Thay đi tên
ca lp (ID)
Thay đi th
t ca lp
4. CHÈN HÀNH VI
 Hành vi (Behavior) đưc dùng để b sung tính tương
tác và chc năng cho các thành phn (hình nh, văn

bn, lp) trong website

Hành vi = 1 S kin + 1 Hành đng
(Behavior) (Event) (Action)

• onClick
• onMouseOver
• onLoad
• …

• Popup Message
• Set Text
• Swap Image
• …
Kch hot
Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
14
4. CHÈN HÀNH VI (tt)
 Mt số s kin (Event) thông dng
Sự kiện Mô tả
onclick

Click
chut
ondbclick

Double
click
onmouseover

Di
chuyển chut ngang qua đối tưng

onmousemove

Di
chuyển chut
…



Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
15
4. CHÈN HÀNH VI (tt)
 Mt số hành đng (Action) thông dng

Sự kiện Mô tả
Change
Property
Thay đi
mt số thuc tnh ca đối tưng
Go
To URL
Duyt
trang web khác
Jump Menu

To
liên kết cc mc c trong menu
Open Browser

Window
M
1 website bằng 1 ca s mi
Play Sound

Phát
1 file âm thanh c thể
Popup Message

Hiển
th thông báo bật lên
Set Text

Hiển
th văn bn c thể trong khác khung, lp
Swap
Image
Thay
đi hình nh bằng mt nh khác
…

…

Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
16
4. CHÈN HÀNH VI (tt)
 Thêm mt hành vi vào trong trang web
– B1: Chn menu Format > Behavior
– B2: Chn đối tưng muốn thêm hành vi
– B3: Chn danh sách các hành đng (Action) t

nút Insert
– B4: (Tùy từng hành động sẽ thao tác khác nhau)
– B5: Bên dưi Events, xác đnh mt s kin
(Event) dùng để kích hot hành đng

Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
17
4. CHÈN HÀNH VI (tt)
Danh sách các
Hnh đng (Action)
Danh sách các
S kin (Event)
Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
18
KẾT THÚC
HỎI – ĐÁP









Môn học: Thiết kế Web & Các công cụ đồ họa - Chương 3: Tạo tính sinh động cho trang web
19