Giáo án 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

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ

- GV yêu cầu HS liên hệ thực tế từ các trang web hay truy cập, cho biết: Hình ảnh, video trên trang web thường được tổ chức thành các dạng nào?

- GV yêu cầu HS quan sát Hình 1:

- GV yêu cầu HS dựa vào hình, kết hợp nghiên cứu thông tin trong SGK để trả lời câu hỏi: Các hình ảnh, video nào thường được sử dụng trên trang web? Kích thước, vị trí của chúng có gì đặc biệt?

Bước 2: HS thực hiện nhiệm vụ học tập

- HS tìm hiểu nội dung mục 1 SGK và thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận

- Đại diện HS trả lời:

* Trả lời câu hỏi của GV (DKSP).

- HS trả lời câu hỏi và nhận xét lẫn nhau.

Bước 4: Đánh giá kết quả thực hiện

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV kết luận các thông tin chính về hình ảnh, video trên 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.

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ

- GV tổ chức cho HS quan sát Hình 2:

- GV yêu cầu HS dựa vào hình, kết hợp nghiên cứu thông tin trong SGK, trả lời câu hỏi 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?

- GV cung cấp thông tin cho HS về trường hợp sử dụng thanh trượt.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 2 SGK và thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận 

- Đại diện HS trả lời:

* Trả lời câu hỏi Hoạt động (DKSP).

- HS trả lời câu hỏi và nhận xét lẫn nhau.

Bước 4: Đánh giá kết quả thực hiện

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV kết luận các thông tin chính về sự khác nhau giữa bộ sưu tập và thanh trượt.

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. 

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

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

Bước 1: GV chuyển giao nhiệm vụ

- GV nêu yêu cầu thực hành: 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.

- GV thực hành mẫu cho HS quan sát.

- GV yêu cầu HS dựa vào thông tin quan sát trong quá trình GV thực hành, kết hợp nghiên cứu nội dung trong SGK, cho biết: Nêu các bước để thêm hình ảnh/video vào trang web theo phần yêu cầu thực hành.

Bước 2: HS thực hiện nhiệm vụ học tập 

- HS tìm hiểu nội dung mục 3 SGK  và thảo luận theo nhóm đôi để thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận

- Đại diện 2 - 3 HS trả lời (DKSP).

- Các HS khác đưa ra ý kiến nhận xét.

Bước 4: Đánh giá kết quả thực hiện

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV tuyên dương các HS có bài thực hành đúng yêu cầu.

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

...........................................

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

...........................................