Giáo án Tin học ứng dụng 12 chân trời Bài E4: Sử dụng Content Blocks, Button, Divider

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 thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ Công cụ Content Blocks dùng để làm gì?

+ Để sử dụng công cụ Content Blocks, em thực hiện như thế nào?

+ Để chèn đối tượng vào các khối nội dung, em thực hiện như thế nào?

+ Ngoài sáu mẫu thiết kế có sẵn trên Google Sites, em có thể thay đổi bố cục trình bày của một mẫu bất kì không?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.73 SGK:

Câu 1. Để thiết kế nội dung trang web theo mẫu cho trước thì em sử dụng công cụ nào?

Câu 2. Công cụ Content Blocks cung cấp bao nhiêu mẫu thiết kế có sẵn?

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 tr.72 – 73 và thảo luận theo nhóm 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 các nhóm HS trả lời.

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

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.73 SGK:

Câu 1. Để thiết kế nội dung trang web theo mẫu cho trước thì em sử dụng công cụ Content Blocks.

Câu 2. Công cụ Content Blocks cung cấp 6 mẫu thiết kế có sẵn?

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ông cụ Content Blocks cho phép chèn vào trang web các dữ liệu: văn bản, hình ảnh, Drive, YouTube, Calendar, Map dưới dạng mẫu thiết kế có sẵn và có thể tuỳ ý hiệu chỉnh các mẫu này.

1. Công cụ Content Blocks

- Chức năng: Công cụ Content Blocks (các khối nội dung) cung cấp các mẫu được thiết kế trước, các mẫu này chia nội dung thành các cột, sử dụng cho các dạng dữ liệu như văn bản, hình ảnh, Drive, YouTube, Calendar và Map. 

- Cách sử dụng: Nháy chọn thẻ Insert chọn 1 trong 6 mẫu thiết kế có sẵn:

Hình 2. Công cụ Content Blocks

Trong đó, chứa các đối tượng được chèn; chứa văn bản.

- Chèn đối tượng vào các khối nội dung:

+ Chọn một mẫu thiết kế có sẵn Nháy chọn biểu tượng chọn một trong các tuỳ chọn:

• Upload (chèn hình ảnh trên máy tính).

• Select image (chèn hình ảnh trực tuyến).

• From Drive (chèn từ Drive).

• YouTube (chèn liên kết youtube.com).

• Calendar (chèn lịch Google).

• Map (chèn bản đồ Google). 

Hình 3. Các tuỳ chọn chèn

+ Việc nhập dữ liệu văn bản ở đây tương tự nhập văn bản trong công cụ Text box.

- Ngoài sáu mẫu thiết kế có sẵn trên Google Sites, có thể thay đổi bố cục trình bày của một mẫu bất kì bằng cách kéo thả các khối nội dung sang các vị trí khác phù hợp. 

Ví dụ: Thay đổi bố cục của Hình 4 (cột trái có hai đối tượng, cột phải có một đối tượng) thành cột trái có một đối tượng, cột phải có hai đối tượng bằng cách kéo thả đối tượng bên phải sang bên trái như Hình 5.

Hình 4. Mẫu cần hiệu chỉnh

Hình 5. Kết quả sau hiệu chỉ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 yêu cầu HS hoạt động cá nhân và trả lời các câu hỏi: 

+ Công cụ Divider dùng để làm gì?

+ Để sử dụng công cụ Divider, em thực hiện như thế nào?

+ Màu sắc đường phân chia được thiết lập như thế nào?

+ Nếu muốn thay đổi màu đường phân chia thì phải làm như thế nào?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.74 SGK:

Theo em, màu sắc đường phân chia trang web có thay đổi được hay không? 

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 tr.74 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: 

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

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.74 SGK:

Màu sắc đường phân chia trang web có thay đổi được nếu thay đổi màu giao diện của trang web.

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ông cụ Divider tạo đường phân chia các nội dung trên trang web.

2. Công cụ Divider

- Chức năng: Công cụ Divider (bộ chia) được dùng để tạo đường phân chia các nội dung trên trang web.

- Cách sử dụng: Nháy chọn thẻ Insert Công cụ Divider.

- Màu sắc đường phân chia được thiết lập theo màu giao diện của trang web. 

- Nếu muốn thay đổi màu đường phân chia thì phải thay đổi màu giao diện của 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 hoạt động cá nhân và trả lời các câu hỏi: 

+ Công cụ Button dùng để làm gì?

+ Để tạo nút bấm liên kết đến các trang web khác, em thực hiện như thế nào?

+ Khi được chèn vào trang web, nút sẽ có màu như thế nào?

+ Google Sites cung cấp những tuỳ chọn định dạng nào cho nút?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.74 SGK:

Em có thể tuỳ ý thay đổi màu sắc của nút hay không? Có bao nhiêu tuỳ chọn thay đổi màu sắc của nú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 3 SGK tr.74 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: 

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

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.74 SGK:

+ Có thể tuỳ ý thay đổi màu sắc của nút.

+ Có 3 tuỳ chọn thay đổi màu sắc của nút:

• Tô màu nền.

• Màu đường viền.

• Màu chữ.

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ông cụ Button tạo nút bấm liên kết đến các trang web khác.

3. Công cụ Button

- Chức năng: Công cụ Button (nút) được dùng để tạo nút bấm liên kết đến các trang web khác. 

- Cách tạo nút bấm: 

+ Chọn thẻ Insert → Công cụ Button.

+ Xuất hiện hộp thoại Insert button:

Hình 6. Hộp thoại Insert button

Nhập tên nút trong mục Name và chọn trang web cần liên kết đến khi nháy vào nút trong mục Link Insert.

- Màu sắc của nút: mặc định theo màu giao diện trang web. 

- Các tuỳ chọn định dạng cho nút:

Hình 7. Các tuỳ chọn button

+ Button style (kiểu nút): 

• Filled (tô màu nền).

• Outlined (đường viền).

• Text (văn bản).

+ Align (căn chỉnh).

+ Edit button (hiệu chỉnh nút) nếu muốn thay đổi nội dung nút hoặc thay đổi liên kết. 

+ Duplicate (sao chép).

+ Remove (xoá nút).