SỬ DỤNG LỚP TRONG TRANG WEB 5.. 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 ứn
Trang 1TRƯỜ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: ptttam@khcn.hoasen.edu.vn
Chương 3:
THIẾT KẾ WEB & CÁC CÔNG CỤ ĐỒ HỌA
(TINV205DV02)
Trang 2NỘ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
Trang 31 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
Trang 42 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
Trang 52 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
Trang 63 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
Trang 73 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
Trang 83 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)
Trang 93 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)
Trang 104 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ụ
Trang 114 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
Trang 124 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
Trang 134 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
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
Trang 144 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
Trang 154 CHÈN HÀNH VI (tt)
Một số sự kiện (Event) thông dụng
Sự kiện Mô tả
ondbclick Double click onmouseover Di chuyển chuột ngang qua đối tượng onmousemove Di chuyển chuột
…
Trang 164 CHÈN HÀNH VI (tt)
Một số hành động (Action) thông dụng
Change Property Thay đổi một số thuộc tính của đối tượng
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
Trang 174 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
Trang 184 CHÈN HÀNH VI (tt)
Danh sách các Hành động (Action)
Danh sách các Sự kiện (Event)
Trang 19KẾ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