CHỦ ĐỀ E-ICT. BÀI 5. TẠO NỘI DUNG HÌNH ẢNH CHO TRANG WEB
Trang bìa
Trang bìa
Ảnh
TIN HỌC 12 CHỦ ĐỀ E-ICT. BÀI 5. TẠO NỘI DUNG HÌNH ẢNH CHO TRANG WEB
Ảnh
Yêu cầu cần đạt
Yêu cầu cần đạt
Ảnh
Yêu cầu cần đạt
Hình vẽ
Tạo được các nội dung hình ảnh trên trang web: ảnh đại diện, video, thư viện ảnh dưới dạng thanh trượt và bộ sưu tập .
Khởi động
Khởi động
Khởi động
Bên cạnh việc sử dụng các bài viết (dạng văn bản) thì thông tin trên trang web còn có thể được truyền tải thông tin dưới dạng hình ảnh hoặc video… Theo em, việc sử dụng hình ảnh, video trên trang web có những ưu điểm gì?
1. Hình ảnh, video trên trang web
Tìm hiểu
1. Hình ảnh, video trên trang web
Để trang web thu hút được nhiều người truy cập, ngoài việc cung cấp những nội dung hữu ích và chi tiết, hình thức trình bày trang web đẹp mắt và tiện lợi cũng cần được chú trọng. Do vậy, các đối tượng đồ hoạ như hình ảnh, video riêng lẻ hoặc được tổ chức thành bộ sưu tập hay thanh trượt,... thường được sử dụng.
Tiếp
Ảnh
Tiếp
Các hình ảnh phổ biến trên trang web là ảnh đại diện, ảnh minh hoạ cho nội dung bài viết, hay các hình ảnh/video nổi bật được thiết kế để thu hút sự chú ý của khách truy cập. Các ảnh đại diện, ảnh minh hoạ thường có kích thước nhỏ và được đặt xen kẽ với các nội dung văn bản ở nhiều vị trí khác nhau trên trang web. Những hình ảnh/ video nổi bật thường ở đầu trang ngay dưới thanh điều hướng, có màu nền nhất quán với phần còn lại của trang, có chiều rộng bằng chiều rộng của trang web và có thể chứa tiêu đề hoặc một nội dung ngắn làm rõ thêm chủ đề của hình ảnh. Một số ví dụ về hình ảnh trên trang web như được minh hoạ trong Hình 1.
2. Bộ sưu tập và thanh trượt
Hoạt động
2. Bộ sưu tập và thanh trượt
Hoạt động Bên cạnh việc sử dụng các bài viết (dạng văn bản) thì thông tin trên trang web còn có thể được truyền tải thông tin dưới dạng hình ảnh hoặc video… Theo em, việc sử dụng hình ảnh, video trên trang web có những ưu điểm gì?
Tìm hiểu
Bộ sưu tập (còn gọi là gallery) là cách thức hiển thị cùng lúc nhiều hình ảnh hoặc video khác nhau trên trang web dưới dạng lưới hoặc danh sách như ở Hình 2a. Khác với bộ sưu tập, thanh trượt (còn gọi là slider) cũng gồm nhiều hình ảnh hoặc video khác nhau nhưng không hiển thị tất cả trên trang web cùng lúc. Các hình ảnh sẽ lần lượt xuất hiện trên trang web một cách tự động bằng cách trượt từ trái sang phải hoặc dưới sự tương tác của người dùng thông qua các nút điều hướng. Thanh trượt thường được sử dụng để thể hiện các chương trình ưu đãi, các ảnh hoặc video quảng cáo dịch vụ hay sản phẩm của doanh nghiệp, ví dụ như Hình 2b.
Tiếp
Ảnh
3. Thực hành
NV1. Thêm hình ảnh, video cho trang web
Nhiệm vụ 1. Thêm hình ảnh, video cho trang web
Yêu cầu: Em hãy thêm một hình ảnh về cảnh quan trường em vào phía dưới bài viết giới thiệu về trường mà em đã thực hiện ở Bài 4.
Bước 1 (NV1. Thêm hình ảnh, video cho trang web)
Hướng dẫn thực hiện: Bước 1. Thêm khối hình ảnh, video vào trang web – Chọn Add Block to Page – phía góc phải dưới màn hình. – Chọn Image & Video, chọn một khối mẫu phù hợp (Hình 3) để thêm vào phía dưới cùng của trang web hoặc nhấn giữ chuột và kéo thả vào vị trí thích hợp trên trang web.
Ảnh
Bước 2 (NV1. Thêm hình ảnh, video cho trang web)
Bước 2. Điều chỉnh thông số bố cục và định dạng Mở bảng thông số bằng cách di chuột lên trên khối hình ảnh/video để hiển thị thanh công cụ rồi chọn Block Parameters. Các thông số trong bảng gồm có: • Full Width: Hiển thị khối hình ảnh/video trải rộng toàn màn hình. Top: Điều chỉnh khoảng cách với các nội dung phía trên khối hình ảnh/video. • Bottom: Điều chỉnh khoảng cách với các nội dung phía dưới khối hình ảnh/video. Image/Video (mục Size): Điều chỉnh độ lớn của hình ảnh/video. • Title: Hiển thị tiêu đề khối hình ảnh/video. • Subtitle: Hiển thị tiêu đề phụ phía dưới tiêu đề. • Text: Hiển thị nội dung văn bản. • Description: Hiển thị mô tả phía dưới hình ảnh/video. Color|Image|Video (mục Background): Chọn màu nền/ảnh nền/video nền cho khối hình ảnh/video.
Bước 3 (NV1. Thêm hình ảnh, video cho trang web)
Bước 3. Thay đổi hình ảnh/video - Thay đổi hình ảnh: Chọn phần chữ và chỉnh sửa nội dung hoặc chọn phần hình ảnh để thay hình ảnh mới với các tuỳ chọn trong Hình 4:
Ảnh
Tiếp (Bước 3)
+ Browse Computer: Chọn hình ảnh được lưu trữ trong máy tính. + Free Online Library: Chọn hình ảnh có sẵn trong thư viện của phần mềm. + Site Library: Chọn hình ảnh có trong dự án website. + Link Image to: Gán liên kết khi người xem nháy chuột vào ảnh. + Alt: Nhập nội dung để hiển thị thay thế ảnh bị lỗi không hiển thị được. – Thay đổi video: Chọn phần chữ và chỉnh sửa nội dung hoặc chọn phần video để thay đổi video mới với các tuỳ chọn trong Hình 5: + Video URL: Nhập đường dẫn tới video trên Internet. Mobirise hiện chỉ hỗ trợ chọn các video trên https://www.youtube.com hoặc https://vimeo.com/. + Aspect Ratio: Chọn tỉ lệ khung hiển thị video. + Autoplay: Tự động phát video. + Loop: Tự động phát video lặp lại.
NV2. Thêm bộ sưu tập và thanh trượt vào trang web
Nhiệm vụ 2. Thêm bộ sưu tập và thanh trượt vào trang web
Yêu cầu Hãy thêm một số hình ảnh hoạt động của học sinh dưới dạng thanh trượt vào phía trên bài viết giới thiệu về trường mà em đã thực hiện ở Bài 4.
Bước 1 (NV2. Thêm bộ sưu tập và thanh trượt vào trang web)
Hướng dẫn thực hiện: Bước 1. Thêm khối hình ảnh dưới dạng bộ sưu tập và thanh trượt vào trang web - Chọn Add Block to Page phía góc phải dưới màn hình. - Trong cửa sổ Gallery & Slider (Hình 6), chọn một khối mẫu phù hợp để thêm vào phía dưới cùng của trang web hoặc nháy giữ chuột và kéo thả vào vị trí thích hợp trên trang web.
Ảnh
Bước 2 và 3 (NV2. Thêm bộ sưu tập và thanh trượt vào trang web)
Bước 2. Điều chỉnh thông số bố cục và định dạng Mở bảng thông số bằng cách trỏ chuột vào khối hình ảnh để xuất hiện thanh công cụ và chọn Block Parameters . Tuỳ chỉnh các thông số tương tự như với khối nội dung bài viết và hình ảnh riêng lẻ. Bước 3. Chỉnh sửa nội dung Chọn phần chữ và chỉnh sửa nội dung hoặc chọn phần hình ảnh để thay hình ảnh mới phù hợp. Lưu ý: Với những trang web cần tốc độ tải trang nhanh hoặc dùng trên thiết bị di động, cần hạn chế tổ chức các hình ảnh dưới dạng thanh trượt vì nó chiếm nhiều tài nguyên và làm chậm tốc độ tải trang.
Vận dụng
Vận dụng 1
Vận dụng 1
Em hãy tạo nội dung cho trang web được thể hiện dưới dạng hình ảnh có kèm mô tả theo mẫu như ở hình 7
Ảnh
Vận dụng 2
Vận dụng 2
Em hãy tạo nội dung cho trang web được thể hiện dưới dạng bộ sưu tập theo mẫu như Hình 8.
Ảnh
Vận dụng 3
Vận dụng 3
Em hãy tạo nội dung cho trang web được thể hiện dưới dạng thanh trượt theo mẫu như ở Hình 9.
Ảnh
Câu hỏi tự kiểm tra
Câu hỏi
Câu hỏi
Bài tập trắc nghiệm
Trong các câu sau, những câu nào đúng?
a) Nội dung trang web chỉ có thể được trình bày dưới dạng bài viết văn bản hoặc hình ảnh.
b) Chỉ có thể sử dụng các hình ảnh được lưu sẵn trong máy tính để đưa vào trang web.
c) Bộ sưu tập cho phép hiển thị cùng lúc nhiều hình ảnh hoặc video khác nhau trên trang web dưới dạng lưới hoặc danh sách.
d) Thanh trượt thường được sử dụng để hiển thị nhiều hình ảnh khi không gian trên trang web hạn chế.
Tổng kết
Ghi nhớ
Ghi nhớ
Hình vẽ
Nội dung trang web có thể được thể hiện dưới nhiều dạng đối tượng đồ hoạ khác nhau như các hình ảnh, video riêng lẻ hoặc được tổ chức thành bộ sưu tập, thanh trượt. Hình ảnh, video có thể được hiển thị kèm theo tiêu đề hoặc một văn bản ngắn giúp thể hiện rõ thêm chủ đề và nội dung của các đối tượng đồ hoạ này.
Kết thúc bài hoc
Ảnh