Web1013 lab14

LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II)  -MỤC TIÊU: Kết thúc thực hành bạn có khả  Nhúng Youtube Video  Nhúng Gmap  Nhung uhChat BÀI (3 ĐIỂM) Hãy nhúng video từ Youtube vào trang giới thiệu (about.html) theo hướng dẫn sau:  Bước 1: Lấy mã tích hợp Nhấp [Share] > [Embed] > Chép mã tích hợp đặt vào trang about WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) Bước 2: Hiệu chỉnh Responsive  Sử dụng thẻ div bọc video với thuộc tính class video-container  Viết mã CSS cho video-container{} video-container>iframe,- sau BÀI (4 ĐIỂM) Nhúng đồ vào trang liên hệ (contact.html) theo hướng dẫn sau  Bước 1: Tạo đồ https://www.google.com/maps/d/?hl=vi WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) Nhấp nút [TẠO BẢN ĐỒ MỚI]  Bước 2: Cung cấp tên mô tả cho đồ Nhấp vào dòng chữ [Bản đồ khơng có tiêu đề] > Nhập thông tin đồ vào form sau: Nhấp nút *Lưu+ > đồ có tên hình sau WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II)  Bước 3: Tìm đánh dấu điểm đồ o Phóng đồ tìm điểm muốn đánh dấu o Nhấp biểu tượng đánh dấu o Nhấp vào điểm muốn đánh dấu o Cung cấp thông tin o Nhấp vào nút *Lưu+  Bước 4: Chia sẻ đồ mức công khai WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) Nhấp vào [Chia sẻ] WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) Nhấp vào *Thay đổi] WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) Chọn mức chia sẻ công khai > *Lưu+ > *Đã xong+  Bước 4: Điều chỉnh độ phóng đồ cho phù hợp lưu thay đổi WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II)  Bước 5: Lấy mã tích hợp đồ nhúng vào trang web WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) Chép lấy đoạn mã tích hợp nhúng vào trang contact.htm  Bước 6: Chạy xem kết BÀI (3 ĐIỂM) Nhúng uhChat vào trang chủ website theo hướng dẫn sau  Bước 1: vào uhchat.com/vn đăng ký tài khoản WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II)  Bước 2: Lấy mã tích hợp nhúng vào trang web o Chọn tab *Mã nhúng+ > Chép mã nhúng > Đặt mã nhúng vào trang chủ o Chạy trang chủ bạn thấy hộp chat xuất góc bên phải cửa sổ trang web o Thực gửi vài tin nhắn đến quản trị website  Bước 3: Trả lời người dùng WEB1013 – XÂY DỰNG TRANG WEB TRANG 10 LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) Sau đăng nhập uhchat.com bạn đến trang quản trị Tại trang bạn chọn tab [Tin nhắn] sau nhấp vào tin nhắn muốn trả lời, hộp chat nhỏ xuất để bạn trả lời tin nhắn từ người dùng Quay trở lại trang chủ website bạn, bạn thấy hồi đáp bạn xuất hộp chat  Bước 4: Cấu hình hộp chat uhChat cho phép bạn điều chỉnh để thay đổi thơng số hộp chat như: o Hình đại diện quản trị viên o Màu sắc o Vị trí hiển thị hộp chat o Các tin nhắn tự động o … WEB1013 – XÂY DỰNG TRANG WEB TRANG 11 LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) Để thực điều này, bạn vào trang quản trị uhChat chọn tab *Cài đặt+ sau thực thay đổi theo giao diện sau WEB1013 – XÂY DỰNG TRANG WEB TRANG 12 LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) WEB1013 – XÂY DỰNG TRANG WEB TRANG 13 ... vào nút *Lưu+  Bước 4: Chia sẻ đồ mức công khai WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) Nhấp vào [Chia sẻ] WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH... đổi] WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) Chọn mức chia sẻ công khai > *Lưu+ > *Đã xong+  Bước 4: Điều chỉnh độ phóng đồ cho phù hợp lưu thay đổi WEB1013. .. … WEB1013 – XÂY DỰNG TRANG WEB TRANG 11 LAB 14: TÍCH HỢP TIỆN ÍCH INTERNET (PHẦN II) Để thực điều này, bạn vào trang quản trị uhChat chọn tab *Cài đặt+ sau thực thay đổi theo giao diện sau WEB1013