Slide bài giảng Tin học ứng dụng 12 cánh diều bài 5: Tạo nội dung hình ảnh cho trang web

Tóm lược nội dung

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

Bài làm rút gọn:

• Thu hút sự chú ý.
• Truyền tải thông tin hiệu quả.
• Tăng tính tương tác.
• 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?

Bài làm rút gọn:

3. THỰC HÀNH

Luyện tập 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.

Bài làm rút gọn:

Bước 1: Chọn khối nội dung phù hợp:

Mobirise cung cấp nhiều khối nội dung để hiển thị hình ảnh và mô tả. Tùy thuộc vào bố cục mong muốn.

Bước 2: Thêm nội dung vào khối:

• Chọn hình ảnh:
  • Nhấp vào "Edit" trong khối.
  • Chọn "Upload Image" để tải lên hình ảnh từ máy tính.
  • Hoặc chọn "Browse Media Library" để sử dụng hình ảnh có sẵn trong Mobirise.
• Thêm mô tả:
  • Nhập nội dung mô tả vào phần "Text".
  • Định dạng văn bản (font chữ, màu sắc, kích thước) theo ý muốn.

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

• Thay đổi bố cục:
  • Chọn "Layout" để thay đổi vị trí của hình ảnh và mô tả.
  • Chọn "Style" để thay đổi giao diện tổng thể của khối.
• Thêm hiệu ứng:
  • Chọn "Effects" để thêm hiệu ứng cho hình ảnh khi di chuột qua.
• Thay đổi màu sắc:
  • Chọn "Theme" để thay đổi màu sắc của toàn bộ trang web, bao gồm cả khối nội dung.

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

• Nhấp "Publish".
• Chọn tên miền và hosting.
• Nhấp "Publish" để xuất bản trang web lên internet.

Luyện tập 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.

Bài làm rút gọn:

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

Bước 2: Thêm hình ảnh vào bộ sưu tập:

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

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

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

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

• Chọn "Layout": Thay đổi số lượng cột, kích thước hình ảnh, khoảng cách, v.v.
• Chọn "Style": Thay đổi giao diện tổng thể của bộ sưu tập, bao gồm màu sắc, font chữ, hiệu ứng, v.v.
• Chọn "Effects": Thêm hiệu ứng cho hình ảnh khi di chuột qua.

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

• Nhấp "Publish".
• Chọn tên miền và hosting.
• Nhấp "Publish" để xuất bản trang web lên internet.

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.

Bài làm rút gọn:

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

Bước 2: Thêm hình ảnh vào thanh trượt:

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

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

• Di chuột qua slide và nhấp vào "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:

• Chọn "Layout": Thay đổi kích thước hình ảnh, vị trí tiêu đề và mô tả, hiệu ứng chuyển đổi slide, v.v.
• Chọn "Style": Thay đổi giao diện tổng thể của thanh trượt, bao gồm màu sắc, font chữ, hiệu ứng, v.v.
• Chọn "Effects": Thêm hiệu ứng cho hình ảnh khi di chuột qua.

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

• Nhấp "Publish".
• Chọn tên miền và hosting.
• Nhấp "Publish" để xuất bản trang web lên internet.

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

Bài làm rút gọn:

a) Sai.

b) Sai.

c) Đúng.

d) Đúng.