BÀI 3. TẠO THANH ĐIỀU HƯỚNG CHO TRANG WEB (CÁNH DIỀU

Bài 3 - Tạo thanh điều hướng cho trang web (Cánh diều - ict)

Đây là bài soạn lý thuyết tin học 12 - sách Cánh diều. Bài học này thuộc định hướng Tin học ứng dụng (ICT). Lý thuyết được tóm tắt ngắn gọn, dễ hiểu, bám sát nội dung cốt lõi của bài học. Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

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

- Thanh điều hướng (Navigation Bar) giúp người dùng di chuyển giữa các trang web dễ dàng.
- Thường được đặt ngay dưới phần đầu trang web hoặc gộp chung với tiêu đề website.

- Các đặc điểm quan trọng của thanh điều hướng:
+ Màu sắc & thiết kế đồng bộ với giao diện website.

+ Hiển thị dạng một dòng, nếu quá nhiều mục thì dùng menu thả xuống (dropdown menu).

+ Chứa liên kết đến các trang web khác hoặc các phần trong trang web hiện tại.
+ Tích hợp biểu tượng (icon), nút tìm kiếm, đăng nhập,…

2. Thực hành

Yêu cầu:
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.
Các bước thực hiện:
Bước 1: Thêm thanh điều hướng vào trang web
+ Chọn "Add Block to Page" → Chọn Menu.
+ Chọn mẫu thanh điều hướng rồi kéo thả vào vị trí phù hợp trên trang web.
+ Khi có thông báo “Thêm thanh điều hướng vào tất cả các trang?”, chọn OK.
Lưu ý: Thanh điều hướng sẽ hiển thị trên tất cả các trang web trong website.
Bước 2: Điều chỉnh thanh điều hướng
- Mở bảng thiết lập: Di chuột lên thanh điều hướng → Chọn Block Parameters.
- Các tùy chỉnh chính:
+ Full Width → Hiển thị thanh điều hướng toàn màn hình.
+ Logo → Hiển thị logo website.
+ Brand Name → Hiển thị tên website.
+ Sticky → Cố định menu khi cuộn trang.
+ Collapsed → Thu gọn menu khi hiển thị trên điện thoại/màn hình nhỏ.
+ Color → Chỉnh màu nền của thanh điều hướng.
Bước 3: Chỉnh sửa & tạo liên kết
- Đổi tên mục nội dung: Nhấp vào từng mục trên menu → Nhập nội dung mới.
- Thêm liên kết
+ Nhấp vào mục nội dung cần liên kết → Chọn Link.
+ Liên kết đến một trang web khác → Nhập URL vào Web Address.
+ Liên kết đến trang trong website → Chọn Site Pages → Chọn trang cần liên kết.
- Thêm biểu tượng (icon)
+ Chọn Insert Icon → Chọn biểu tượng từ danh sách có sẵn.
+ Tùy chỉnh màu sắc, kích thước icon theo ý muốn.
- Tạo menu thả xuống (submenu)
+ Chọn Add Submenu → Nhập nội dung danh mục con.
+ Tạo liên kết, chỉnh màu sắc, chèn biểu tượng như menu chính.
- Xóa thanh điều hướng: Chọn Remove Block → Xác nhận OK để xóa.

---The End!---

CÙNG CHUYÊN MỤC: