BÀI 3. TẠO THANH ĐIỀU HƯỚNG CHO TRANG WEB

KHỞI ĐỘNG

Em hãy truy cập một số website như: https://moet.gov.vn, https://baomoi.net.vn, https://hoc10.vn và khám phá xem phần đầu của các trang web thường có thông tin gì.

Giải rút gọn:

Phần đầu trang web thường chứa các thông tin sau:

• Logo: Nhận diện thương hiệu website.
• Thanh công cụ: Các mục chính của website.
• Banner: Quảng bá nội dung hoặc sản phẩm của website.
• Thông tin nổi bật: Tin tức mới nhất, sự kiện quan trọng, nội dung được quan tâm.
• Thanh tìm kiếm: Giúp người dùng tìm kiếm thông tin nhanh chóng.
• Thông tin khác: Thời tiết, đăng nhập/đăng ký, v.v.

1. GIỚI THIỆU THANH ĐIỀU HƯỚNG

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?

Giải rút gọn:

Thanh điều hướng website:

Chức năng:

• Thanh điều hướng giúp người dùng dễ dàng truy cập các mục chính của website.
• Hiển thị các danh mục, trang quan trọng để người dùng di chuyển nhanh chóng.

Cấu tạo:

• Bao gồm các mục như Trang chủ, Giới thiệu, Sản phẩm/Dịch vụ, Tin tức, Liên hệ,...
• Tùy chỉnh theo nhu cầu và nội dung website.

Vị trí:

• Hai vị trí phổ biến:
  • Phía trên cùng: Dễ nhìn thấy, truy cập nhanh.
  • Phía bên trái: Tiết kiệm diện tích nội dung.

Lưu ý:

• Thiết kế thanh điều hướng đơn giản, rõ ràng, dễ sử dụng.
• Sắp xếp các mục hợp lý, logic.
• Sử dụng màu sắc, phông chữ phù hợp với giao diện website.
• Đảm bảo thanh điều hướng hiển thị tốt trên mọi thiết bị.

2. THỰC HÀNH

VẬN DỤNG

Ở Bài 2, em đã tạo một dự án website “Phần mềm học tập” gồm có một số trang web. Em hãy tạo và chỉnh sửa thanh điều hướng chứa liên kết tới các trang web trong website này như mẫu ở Hình 13.

Giải rút gọn:

Bước tạo thanh điều hướng website "Phần mềm học tập":

1. Mở dự án:

• Mở dự án "Phần mềm học tập" trong phần mềm thiết kế website bạn sử dụng.

2. Tạo thanh điều hướng:

• Thêm thanh điều hướng mới.
• Vị trí: đầu trang hoặc bên trái trang (tùy thiết kế).

3. Thêm mục vào thanh điều hướng:

• Mỗi mục tương ứng một trang web:
  • Trang chủ: Giới thiệu website, phần mềm nổi bật.
  • Phần mềm làm phim hoạt hình: Giới thiệu, hướng dẫn, tải xuống.
  • Phần mềm chỉnh sửa ảnh: Giới thiệu, hướng dẫn, tải xuống.
  • Phần mềm tạo website: Giới thiệu, hướng dẫn, tải xuống.
  • Liên hệ: Thông tin ban quản trị.

4. Chỉnh sửa giao diện:

• Thay đổi màu sắc, font chữ, kích thước cho phù hợp với thiết kế website.

5. Liên kết mục với trang web:

• Liên kết mỗi mục trong thanh điều hướng với trang web tương ứng.
• Khi người dùng nhấp vào mục, họ sẽ được chuyển đến trang web đó.

TỰ KIỂM TRA

Trong các câu sau, những câu nào đúng?

a) Thanh điều hướng thường được tạo chung cho tất cả các trang web trong cùng một website.

b) Mỗi trang web có thể có nhiều thanh điều hướng.

c) Chỉ có thể tạo được tối đa hai cấp cho thanh điều hướng trên trang web.

d) Trên thanh điều hướng nhiều cấp chỉ hiển thị một số mục nội dung, danh sách các mục con sẽ hiển thị khi di chuột vào các mục nội dung.

e) Chỉ có thể tạo liên kết cho các mục nội dung trên thanh điều hướng đến các trang web trong cùng website.

Giải rút gọn:

Đánh giá các câu về thanh điều hướng website:

a) Đúng. Thanh điều hướng thường được thiết kế thống nhất cho tất cả các trang trong website để đảm bảo tính nhất quán và giúp người dùng dễ dàng di chuyển giữa các trang.

b) Đúng. Website có thể có nhiều thanh điều hướng cho các mục đích khác nhau. Ví dụ: thanh điều hướng chính hiển thị các mục chính, thanh điều hướng phụ hiển thị các mục liên quan đến nội dung cụ thể.

c) Sai. Số lượng cấp cho thanh điều hướng không giới hạn, nhưng cần cân nhắc tính dễ sử dụng và trải nghiệm người dùng khi thiết kế thanh điều hướng nhiều cấp.

d) Đúng. Thanh điều hướng có thể tạo liên kết đến cả các trang web ngoài website hiện tại.

e) Sai. Thanh điều hướng được thiết kế để điều hướng người dùng trong website, không phải dẫn đến các trang web bên ngoài trực tiếp. Tuy nhiên, có thể sử dụng các nút hoặc liên kết riêng biệt để dẫn đến các trang web khác.

Kết luận:

• Câu a, b, d là những thông tin chính xác về thanh điều hướng website.
• Câu c và e chứa đựng thông tin sai lệch về chức năng và cách sử dụng thanh điều hướng.