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

Hiệu ứng chuyển trang (page transition) giúp cho sự chuyển tiếp giữa các trang cho 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. 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.Nút nhấn tương tác có chức năng đổi màu khi con trỏ nhấn vào,di chuyển đến hay đi ngang qua....

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: ptttam@khcn.hoasen.edu.vn NỘI DUNG 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 CHÈN ÂM THANH NỀN  Trong chế độ Design View, click phải vị trí bất kỳ trang web > Page Properties…, hoặc  Vào menu Format > Background… > General Chọn số lần lặp lại của âm Chọn đường dẫn chứa file âm Âm đượ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 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 người duyệt trang web hoặc chuyển sang trang web khác – Có thể dùng hiệu ứng khác 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 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 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 CHÈN NÚT NHẤN  Nút nhấn tương tác (Interactive Button) có chức đổi màu trỏ nhấn vào, di chuyển đến hay 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 CHÈN NÚT NHẤN (tt) Chọn các kiểu nút Nội dung hiển thị nút Chọn trang liên kết nhấn nút Màu chữ di chuyển trỏ đến nút Màu chữ 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 CHÈN NÚT NHẤN (tt) Kích thước của nút Tạo ảnh nút di chuyển trỏ đến nút Tạo ảnh nút gốc Tạo ảnh nút đã được nhấn Ảnh được tạo là ảnh JPG (có màu nền) Ảnh được tạo 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 CHÈN NÚT NHẤN (tt)  Lưu ý: Khi lưu lại trang web có chèn nút nhấn, phải thay đổi đường dẫn thư mục chứa nút được tạo (là thư mục chứa hình ảnh có 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 SỬ DỤNG LỚP (LAYER)  Lớp (Layer) được sử dụng trang web để bố trí một cách linh động các văn bản đối tượng đồ họa  Lớp làm cho thành phần trang web thể hiện động, nghĩa là: – Lớp thay đổi vị trí kích thước của trình dụt thay đởi (vị trí tuyệt đối – Absolute) – Lớp giữ nguyên vị trí 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 SỬ DỤNG LỚP (LAYER) (tt)  Chèn một lớp vào trang web – Chọn Insert Layers (chèn lớp) hoặc Draw Layers (vẽ lớp) 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 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 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ô 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 CHÈN HÀNH VI  Hành vi (Behavior) được dùng để bở sung tính tương tác chức cho thành phần (hình ảnh, văn bản, lớp) website Hành vi = (Behavior) • • • • onClick onMouseOver onLoad … Sự kiện + 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 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 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ó menu Open Browser Window Mở website cửa sổ mới Play Sound Phát file âm 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ể khác khung, lớp Swap Image Thay đởi hình ảnh 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 CHÈN HÀNH VI (tt)  Thêm một hành vi vào 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 hành động (Action) từ nút Insert – B4: (Tùy hành động 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 CHÈN HÀNH VI (tt) Danh sách Hành động (Action) Danh sách 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 ... 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 ... 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 CHÈ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 CHÈN HÀNH VI (tt)  Thêm một hành vi vào trang web – B1: Cho? ?n menu Format > Behavior – B2: Cho? ?n đối tượng