BÀI 5 - TẠO NỘI DUNG HÌNH ẢNH CHO TRANG WEB (CÁNH DIỀU

Bài 5-Tạo nội dung hình ảnh cho trang web (Cánh diều - ict)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Cánh diều). Bài này thuộc định hướng: Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động
Vận dụng	Câu hỏi tự kiểm tra

Khởi động (trang 145):

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ì?

Gợi ý trả lời:

Ưu điểm của việc sử dụng hình ảnh, video trên trang web:
- Thu hút sự chú ý của người xem
- Tăng tính trực quan, dễ hiểu
- Tạo ấn tượng và ghi nhớ lâu hơn
- Tăng sự tương tác và trải nghiệm người dùng
- Hỗ trợ SEO và cải thiện xếp hạng trang web
- Dễ dàng chia sẻ trên mạng xã hội

Hoạt động (trang 146):

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

Gợi ý trả lời:

- Bộ sưu tập cho phép người dùng xem nhiều nội dung cùng lúc.
- Thanh trượt cho phép người dùng xem từng nội dung một cách tuần tự.

Vận dụng (trang 150):

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.

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.

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.

Gợi ý cách thực hiện:

Câu 1.
Bước 1: Mở dự án website trong Mobirise
Mở phần mềm Mobirise và tải dự án trang web đã tạo trước đó.
Bước 2: Thêm khối nội dung mới
- Nhấn vào dấu "+" để mở "Blocks" (Khối mẫu).
- Chọn một khối thuộc nhóm "Article" (Bài viết) hoặc "Features" (Tính năng) có bố cục phù hợp (bao gồm hình ảnh và mô tả).
- Kéo khối này vào vị trí mong muốn trên trang web.
Bước 3: Chỉnh sửa nội dung
- Hình ảnh: Nhấp vào hình mặc định của khối, sau đó tải lên hình ảnh logo Microsoft Word hoặc ảnh liên quan.
- Tiêu đề: Đổi tiêu đề thành "Phần mềm soạn thảo" hoặc "Microsoft Word".
- Mô tả: Nhập đoạn văn bản giới thiệu về Microsoft Word theo mẫu trong hình.
Bước 4: Tùy chỉnh giao diện
- Điều chỉnh cỡ chữ, màu sắc, hoặc căn chỉnh nội dung sao cho dễ đọc và thu hút.
- Nếu muốn, em có thể thêm hiệu ứng động để nội dung hiển thị hấp dẫn hơn.
Bước 5: Lưu và xuất bản
- Kiểm tra lại nội dung.
- Nhấn "Preview" để xem trước trang web.
- Nếu đã ưng ý, nhấn "Publish" để xuất bản trang web.
Câu 2.
Bước 1: Mở dự án trang web
Khởi động Mobirise và mở dự án trang web mà em đã tạo trước đó.
Bước 2: Thêm khối bộ sưu tập ảnh
- Nhấn vào dấu "+" để mở danh sách khối (Blocks).
- Chọn danh mục "Gallery" (Bộ sưu tập ảnh).
- Kéo khối bộ sưu tập phù hợp vào trang web.
Bước 3: Thêm hình ảnh vào bộ sưu tập
- Nhấp vào khối bộ sưu tập vừa thêm, sau đó chọn hình ảnh để tải lên từ máy tính.
- Nếu cần, em có thể thêm mô tả ngắn cho từng hình ảnh.
Bước 4: Tùy chỉnh hiển thị bộ sưu tập
- Chỉnh sửa bố cục lưới (grid) hoặc thanh trượt (slider) tùy theo yêu cầu của bài tập.
- Điều chỉnh số lượng ảnh hiển thị trên một hàng.
- Chọn hiệu ứng hiển thị ảnh khi người dùng di chuột vào (hover).
Bước 5: Lưu và xem trước trang web
- Nhấn "Preview" để kiểm tra giao diện.
- Nếu nội dung đã đúng với yêu cầu, nhấn "Publish" để xuất bản trang web.
Câu 3.
Bước 1: Mở dự án trang web
Mở Mobirise và vào trang web đã tạo trước đó.
Bước 2: Thêm khối thanh trượt (Slider)
- Nhấp vào dấu "+" ở góc dưới để mở danh sách khối.
- Chọn mục "Sliders & Galleries".
- Kéo khối "Image Slider" hoặc "Content Slider" vào trang web.
Bước 3: Thêm nội dung vào thanh trượt
- Nhấp vào khối thanh trượt vừa thêm.
- Thay thế hình ảnh bằng cách tải lên hình ảnh mới cho từng phần trong thanh trượt.
- Thêm nội dung văn bản mô tả ngắn về từng ngôn ngữ lập trình (Python, Java, C++).
- Nếu cần, điều chỉnh font chữ, kích thước, màu sắc cho dễ đọc.
Bước 4: Tùy chỉnh thanh trượt
- Cài đặt chế độ tự động chuyển đổi (Auto-slide) nếu muốn hình ảnh thay đổi theo thời gian.
- Chỉnh hiệu ứng chuyển đổi giữa các trang trượt (Fade, Slide, Zoom,...).
- Nếu muốn, em có thể thay đổi bố cục hiển thị, thêm nút điều hướng trái/phải.
Bước 5: Lưu và kiểm tra hiển thị
- Nhấn Preview để xem trước.
- Nếu mọi thứ đã ổn, nhấn Publish để xuất bản trang web.

Câu hỏi tự kiểm tra (trang ):

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

Gợi ý trả lời:

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. → Sai. Nội dung trang web không chỉ giới hạn ở văn bản hoặc hình ảnh. Nó còn có thể bao gồm:
- Video, âm thanh
- Biểu mẫu, bản đồ, slideshow, liên kết, hình động (animation)
- Tương tác người dùng (như chatbot, bình luận, đánh giá)
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. → Sai. Người dùng có thể chèn hình ảnh từ nhiều nguồn, không chỉ từ máy tính cá nhân:
- Ảnh từ internet (qua đường dẫn URL)
- Ảnh từ thư viện hình ảnh tích hợp sẵn trong phần mềm tạo web
- Ảnh từ dịch vụ lưu trữ đám mây (Google Drive, Dropbox...)
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. → Đúng. Bộ sưu tập (gallery) là một thành phần phổ biến trên website, cho phép hiển thị nhiều hình ảnh/video một cách trực quan. Cách trình bày có thể là:
- Dạng lưới (grid)
- Dạng danh sách (list)
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ế. → Đúng. Thanh trượt (slider, carousel) là một công cụ giúp hiển thị nhiều hình ảnh hoặc nội dung theo kiểu trượt ngang hoặc dọc, rất hữu ích khi không muốn chiếm quá nhiều diện tích màn hình.

---The end!---

CÙNG CHUYÊN MỤC: