BÀI 5. TẠO NỘI DUNG HÌNH ẢNH CHO TRANG WEB

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 dưới dạng hình ảnh, video,.... Theo em, việc sử dụng hình ảnh, video trên trang web có những ưu điểm gì?

Giải rút gọn:

Ưu điểm của việc sử dụng hình ảnh, video trên trang web:

• Thu hút sự chú ý.
• Truyền tải thông tin hiệu quả.
• Tăng tính tương tác.
• Tăng thời gian lưu trang.
• Tăng thứ hạng SEO.
• Tạo dựng thương hiệu.
• Thể hiện sự chuyên nghiệp.
• Tăng doanh số bán hàng.

1. HÌNH ẢNH, VIDEO TRÊN TRANG WEB

2. BỘ SƯU TẬP VÀ THANH TRƯỢT

HOẠT ĐỘNG

Em có biết bộ sưu tập và thanh trượt khác nhau như thế nào không?

Giải rút gọn:

3. THỰC HÀNH

LUYỆN TẬP

Câu 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.

Giải rút gọn:

Các bước tạo nội dung cho trang web bằng hình ảnh và mô tả trong Mobirise:

1. Chọn khối nội dung:

• Khối "Image with Text": 1 hình ảnh lớn + mô tả bên dưới.
• Khối "Gallery": Nhiều hình ảnh + mô tả ngắn gọn.
• Khối "Carousel": Hình ảnh trượt + mô tả.

2. Thêm nội dung:

• Chọn hình ảnh: Upload hoặc chọn từ thư viện.
• Thêm mô tả: Nhập nội dung, định dạng văn bản.

3. Tùy chỉnh giao diện:

• Bố cục: Thay đổi vị trí hình ảnh/mô tả.
• Giao diện: Chọn giao diện tổng thể cho khối.
• Hiệu ứng: Thêm hiệu ứng di chuột cho hình ảnh.
• Màu sắc: Thay đổi màu sắc toàn trang web.

4. Xuất bản trang web:

• Chọn tên miền và hosting.
• Nhấp "Publish" để hoàn tất.

Câu 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.

Giải rút gọn:

Tạo bộ sưu tập hình ảnh trong Mobirise:

Bước 1: Chọn khối "Gallery".

Bước 2: Thêm hình ảnh:

• Nhấp "Edit" trong khối "Gallery".
• Chọn "Upload Images" để tải hình ảnh từ máy tính.
• Hoặc chọn "Browse Media Library" để sử dụng hình ảnh có sẵn.

Bước 3: Thêm mô tả (tùy chọn):

• Di chuột qua hình ảnh và nhấp "Edit".
• Nhập mô tả vào phần "Caption".

Bước 4: Tùy chỉnh giao diện:

• Layout: Thay đổi số cột, kích thước hình ảnh, khoảng cách,...
• Style: Thay đổi giao diện tổng thể (màu sắc, font chữ, hiệu ứng,...).
• Effects: Thêm hiệu ứng di chuột cho hình ảnh.

Bước 5: Xuất bản trang web:

• Nhấp "Publish".
• Chọn tên miền và hosting.
• Nhấp "Publish" để hoàn tất.

Câu 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.

Giải rút gọn:

Tạo thanh trượt hình ảnh trong Mobirise:

Bước 1: Chọn khối "Slider".

Bước 2: Thêm hình ảnh:

• Nhấp "Edit" trong khối "Slider".
• Chọn "Upload Images" để tải hình ảnh từ máy tính.
• Hoặc chọn "Browse Media Library" để sử dụng hình ảnh có sẵn.

Bước 3: Thêm tiêu đề và mô tả (tùy chọn):

• Di chuột qua slide và nhấp "Edit".
• Nhập tiêu đề vào phần "Title".
• Nhập mô tả vào phần "Caption".

Bước 4: Tùy chỉnh giao diện:

• Layout: Thay đổi kích thước hình ảnh, vị trí tiêu đề/mô tả, hiệu ứng chuyển đổi slide,...
• Style: Thay đổi giao diện tổng thể (màu sắc, font chữ, hiệu ứng,...).
• Effects: Thêm hiệu ứng di chuột cho hình ảnh.

Bước 5: Xuất bản trang web:

• Nhấp "Publish".
• Chọn tên miền và hosting.
• Nhấp "Publish" để hoàn tất.

TỰ KIỂM TRA

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ế.

Giải rút gọn:

Đánh giá các câu về nội dung trang web:

a) Sai. Nội dung trang web có thể được trình bày dưới nhiều dạng khác nhau, không chỉ giới hạn ở bài viết văn bản hoặc hình ảnh. Ví dụ: video, âm thanh, biểu đồ, infographic, v.v. đều có thể được sử dụng để truyền tải thông tin.

b) Sai. Bạn có thể sử dụng nhiều nguồn hình ảnh khác nhau để đưa vào trang web, bao gồm:

• Hình ảnh được lưu sẵn trong máy tính: Đây là cách phổ biến nhất.
• Hình ảnh được tìm kiếm trên internet: Bạn có thể sử dụng các công cụ tìm kiếm hình ảnh như Google Images để tìm kiếm và tải xuống hình ảnh miễn phí hoặc trả phí.
• Hình ảnh được chụp trực tiếp: Bạn có thể sử dụng webcam hoặc điện thoại thông minh để chụp ảnh và tải lên trang web.
• Hình ảnh được mua từ các trang web cung cấp ảnh miễn phí hoặc trả phí: Shutterstock, iStock, Pixabay,...
• Hình ảnh được lấy từ các nguồn chính thống: Báo chí, tạp chí, website uy tín,...

c) Đúng. 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. Đây là một cách hiệu quả để giới thiệu các sản phẩm, dịch vụ, bài viết hoặc dự án.

d) Đúng. 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ế. Thanh trượt giúp tiết kiệm diện tích và thu hút sự chú ý của người dùng.

Kết luận:

• Câu a và b là thông tin sai lệch về nội dung trang web.
• Câu c và d là thông tin chính xác về cách trình bày nội dung hình ảnh và video trên trang web.