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

TRƯỜNG ĐẠI HỌC HOA SEN
KHOA KHOA HỌC & CÔNG NGHỆ
BỘ MÔN HỆ THỐNG THÔNG TIN

THIẾT KẾ WEB & CÁC CÔNG CỤ ĐỜ HỌA
(TINV205DV02)

Chương 3:

TẠO TÍNH SINH ĐỘNG CHO
TRANG WEB
Giảng viên điều phối: PHẠM THỊ THANH TÂM
Email:


NỘI DUNG
1.
2.
3.
4.
5.

CHÈN ÂM THANH NỀN VÀO TRANG WEB
TẠO HIỆU ỨNG CHUYỂN TRANG
CHÈN NÚT NHẤN
SỬ DỤNG LỚP TRONG TRANG WEB
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 số lần
lặp lại của
âm thanh

Chọn đường
dẫn chứa file
âm thanh
Âm thanh được
lặp lại liên tụ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

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)

Chọn các
kiểu nút

Nội dung hiển thị trên nút

Chọn trang liên kết
khi nhấn 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)

Kích thước
của nút
Tạo ảnh nút khi
di chuyển con
trỏ đến nút

Tạo ảnh nút gốc

Tạo ảnh nút khi
đã được nhấn

Ả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
dụt thay đởi (vị trí tụt đối – Absolute)
– Lớp sẽ giữ ngun vị trí khi kích thước của trình
dụ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

Insert Layer
Draw Layer

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


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

Thay đổi theo chiều cao

Thay đổi theo chiều rộ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

12


4. SỬ DỤNG LỚP (LAYER) (tt)
 Thay đổi một số tḥc tính của lớp
– Chọn lớp muốn thay đởi tḥc tính

Thay đởi thứ
tự của lớp

Hiển thị lớp
(mắt mở)

Đóng khung và
tơ nền cho lớp

Ẩn lớp (mắt nhắm)

Thay đổi vị
trí của lớp

Thay đổi tên
của lớp (ID)

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


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 =
(Behavior)

•
•
•
•

onClick
onMouseOver
onLoad
…

1 Sự kiện + 1 Hành đợng
(Event)
(Action)

Kích hoạt

•
•
•
•

Popup Message
Set Text
Swap Image
…

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