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: ptttam@khcn.hoasen.edu.vn 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 [...]... 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 ... 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ố thuộc tính của lớp – Cho n lớp muốn thay đổi thuộ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. .. hành vi vào trong trang web – B1: Cho n menu Format > Behavior – B2: Cho n đối tượng muốn thêm hành vi – B3: Cho 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... trong trang web – Cho 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 – Cho 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... độ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. .. 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. .. 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) . 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. 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. 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