Nội dung chính 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

CHỦ ĐỀ : ỨNG DỤNG TIN HỌC THỰC HÀNH SỬ DỤNG PHẦN MỀM TẠO TRANG WEB

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

1. Hình ảnh, video trên trang web

- Các đối tượng đồ họa như hình ảnh, video riêng lẻ được tổ chức thành bộ sưu tập hay thanh trượt.

- Hình ảnh phổ biến trên trang web:

+ Ảnh đại diện, ảnh minh họa cho nội dung bài viết.

+ Ảnh/video nổi bật để thu hút sự chú ý của khách truy cập.

- Kích thước, vị trí:

+ Ảnh đại diện, ảnh minh họa: kích thước nhỏ, đặ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/video nổi bật: ở đầu trang, ngay dưới thanh điều hướng, màu nền nhất quán với phần còn lại của trang, chiều rộng bằng chiều rộng của trang web, 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.

2. Bộ sưu tập và thanh trượt

- Bộ sưu tập (gallery): hiển thị cùng lúc nhiều ảnh hoặc video khác nhau trên trang web dưới dạng lưới hoặc dạng danh sách.

- Thanh trượt (slider): gồm các hình ảnh, video khác nhau nhưng không hiển thị tất cả trên trang web cùng lúc. Hình ảnh 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.

3. Thực hành

Nhiệm vụ 1: Thêm hình ảnh, video cho trang web

Các bước thêm hình ảnh, video vào trang web:

- Bước 1: Thêm khối hình ảnh, video vào trang web

+ Chọn Add Block to Page.

+ Chọn Image & Video, chọn khối mẫu phù hợp để 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.

- Bước 2: Điều chỉnh thông số bố cục và định dạng

+ Di chuột lên trên khối hình ảnh/video để hiển thị thanh công cụ, chọn Block Parameters để mở bảng thiết lập thông số.

+ Tùy chỉnh các thông số trong bảng (thực hiện tương tự Bài 4):

- 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 tùy chọn:

• 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 tùy chọn:

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

Nhiệm vụ 2: Thêm bộ sưu tập và thanh trượt vào trang web

Các bước thêm bộ sưu tập và thanh trượt vào trang web:

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

+ Trong cửa sổ Gallery & Slider, 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.

- Bước 2: Điều chỉnh thông số bố cục và định dạng

+ Trỏ chuột vào khối hình ảnh để xuất hiện thanh công cụ và chọn Block Parameters.

+ Tùy chỉnh 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.