Giáo án Tin học ứng dụng 12 cánh diều bài 3: Tạo thanh điều hướng 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 làm việc nhóm đôi, nghiên cứu thông tin trong SGK và trả lời câu hỏi mục Hoạt động: Em hãy tìm hiểu thanh điều hướng có chức năng gì và thường được đặt ở vị trí nào.

- GV yêu cầu HS quan sát Hình 3.

- GV yêu cầu HS dựa vào hình và thông tin vừa tìm hiểu, trả lời câu hỏi: Màu sắc của thanh điều hướng được chọn như thế nào để tạo sự nhất quán cho màu sắc của các thành phần trong trang web?

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.134-135 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 mục Hoạt động (DKSP).

* 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ề thanh điều hướng.

1. Giới thiệu thanh điều hướng

- Thanh điều hướng thường liệt kê các mục nội dung chính của website. Mỗi mục nội dung sẽ liên kết đến một hoặc nhiều trang web. 

- Vị trí:

+ Ngay phía dưới của phần đầu trang web.

+ Phần đầu trang web. 

- Màu sắc chủ đạo của thanh điều hướng (màu nền hoặc màu chữ) đồng nhất với màu chủ đạo của trang web và biểu tượng nhận diện thương hiệu như logo của doanh nghiệp.

- Thanh điều hướng trên các trang web thường chỉ hiển thị một dòng ⇒ Các website gồm nhiều trang web không thể hiển thị hết tất cả các liên kết ở cạnh nhau ⇒ Các liên kết đến các trang web được phân thành các nhóm dưới dạng thanh điều hướng nhiều cấp, danh sách các mục con hiển thị khi di chuột vào các mục nội dung.

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 nêu yêu cầu thực hành: Em hãy tạo một thanh điều hướng chứa các đường liên kết tới tất cả các trang web trong website “Giới thiệu trường em” mà em đã thực hiện ở Bài 2.

- 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 để tạo được thanh điều hướng 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 2 SGK tr.135-139 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 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.

2. Thực hành

Các bước tạo thanh điều hướng:

- Bước 1: Thêm khối thanh điều hướng vào trang web:

+ Chọn Add Block to Page.

+ Chọn Menu ⇒ chọn thanh điều hướng ⇒ nháy giữ chuột, kéo thả vào vị trí thích hợp trên trang web.

+ Thông báo tùy chọn thêm thanh điều hướng xuất hiện, chọn OK để thêm thanh điều hướng cho tất cả các trang web trong website.

- Bước 2: Điều chỉnh các thông số thiết lập của thanh điều hướng

+ Di chuột lên trên thanh điều hướng để 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: bật/tắt các nút lệnh bên cạnh chức năng, kéo thanh trượt hoặc chọn màu trong bảng chọn để thay đổi thanh điều hướng.

- Bước 3: Chỉnh sửa và tạo liên kết cho các mục nội dung trên thanh điều hướng

+ Thay đổi tên mục nội dung: Chọn từng mục nội dung tại vị trí (1) (Hình 8), nhập nội dung mới.

+ Chèn liên kết: Chọn mục nội dung muốn chèn liên kết, chọn Link ở vị trí (2) (Hình 8). Trong hộp thoại Link to, thực hiện một trong các cách:

• Liên kết đến một trang web khác trên Internet: Nhập đường dẫn trong Web Address, chọn Insert Link.

• Liên kết đến một trang web trong website hiện tại: Chọn đích liên kết là một trang web hiện có tại phần Site Pages của thẻ Page, chọn Insert Link.

• Chọn liên kết đến một khối nội dung cụ thể trên trang web vừa chọn trong phần Block on “Tên trang web” Page (nếu bỏ trống phần Site Pages thì mặc định là trang web hiện tại).

+ Chèn biểu tượng:

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