Lý thuyết Tin học 12 Bài 3 (Cánh diều): Tạo thanh điều hướng cho trang web

Lý thuyết Tin học 12 Bài 3: Tạo thanh điều hướng cho trang web

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

Thanh điều hướng liệt kê các mục nội dung chính của website và liên kết đến các trang web khác. Để thuận tiện cho người dùng, thanh điều hướng thường được đặt ngay dưới phần đầu trang web.( Hình 1)

Một số trang web kết hợp thanh điều hướng với phần đầu trang web. Trong trường hợp này, các thành phần như logo, tên website, nút chia sẻ mạng xã hội, nút đăng nhập, đăng ký, và ô tìm kiếm thường được sắp xếp trên thanh điều hướng.( Hình 2)

Để tạo sự nhất quán và ấn tượng cho trang web, màu sắc chủ đạo của thanh điều hướng (màu nền hoặc màu chữ) thường được đồng bộ với màu sắc chủ đạo của trang web và các biểu tượng thương hiệu như logo.( Hình 3)

Khi thanh điều hướng không đủ không gian để hiển thị tất cả các liên kết, nó sẽ được phân thành các nhóm dưới dạng thanh điều hướng nhiều cấp, thường có dạng thả xuống. Chỉ một số mục nội dung chính được hiển thị trên thanh điều hướng, danh sách các mục con sẽ xuất hiện khi di chuột vào các mục chính.( Hình 4)

2.Thực hành

Yêu cầu :

Tạo 1 thanh điều hướng chưa các đường liên kết tới tất cả các trang web:

Hướng dẫn:

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

- Chọn Add Block to Page ở góc phải dưới màn hình.

- Chọn Menu và chọn mẫu thanh điều hướng (vị trí D trong Hình 5).

- Thêm thanh điều hướng vào phía dưới cùng của trang web hoặc kéo thả vào vị trí mong muốn trên trang web (vị trí 2 trong Hình 5).

- Khi thêm thanh điều hướng, một thông báo tuỳ chọn xuất hiện (Hình 6). Chọn **OK** để áp dụng thanh điều hướng cho tất cả các trang web trong website. Thanh điều hướng sẽ chứa liên kết đến các trang web, nên các trang trong cùng một website thường sử dụng chung một thanh điều hướng.

Bước 2: Điều chỉnh thông số của thanh điều hướng

1. Mở bảng thiết lập thông số của thanh điều hướng bằng cách di chuột lên thanh điều hướng để hiển thị thanh công cụ, sau đó chọn Block Parameters (Hình 7).

2. Tuỳ chỉnh thông số bằng cách bật/tắt các nút lệnh, kéo thanh trượt hoặc chọn màu trong bảng chọn.

3. Các mẫu thanh điều hướng khác nhau có các tuỳ chọn trên bảng thông số tương ứng.

Full Width: Hiển thị các mục trên thanh điều hướng trải rộng toàn màn hình.

Logo: Hiển thị logo website.

Logo Size: Thay đổi kích cỡ của logo.

Brand Name: Hiển thị tên website hoặc thương hiệu.

Menu Items: Hiển thị các liên kết.

Icons: Hiển thị các biểu tượng.

Amount. Chọn số lượng biểu tượng.

Icons Color. Chọn màu sắc biểu tượng.

Button: Hiển thị các nút điều khiển.

Sticky: Chế độ hiển thị thanh điều hướng cố định phía trên màn hình khi người xem cuộn chuột hoặc kéo trang web xuống phía dưới.

Collapsed. Chế độ thu gọn lại nếu nội dung trên thanh điều hướng dài hơn chiều rộng của màn hình hiển thị trang web.

Transparent. Chọn màu nền trong suốt.

Color: Chọn màu nền của thanh điều hướng.

Hamburger: Chọn màu của thanh điều hướng khi thu gọn (dành cho màn hình nhỏ như máy tính bảng hoặc điện thoại).

Bước 3:Chỉnh sửa thanh điều hướng:

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

- Chèn liên kết: Chọn mục nội dung, nhấn Link, ( vị trí 2, Hình 8)và trong hộp thoại Link to, nhập đường dẫn trong thẻ Web Address để liên kết đến một trang web khác, Nhập đường dẫn Web Address ( Hình 9)

Chèn biểu tượng:

Chọn các mục nội dung muốn chèn chọn Insert icons ( vị trí 2 Hình 8)

Trong hộp thoại Select icons chọn biểu tưởng phù hợp ( vị trí 1 ở hình 11)

Thay đổi màu sắc chọn màu trong bảng Icon Color ( vị trí 2. Hình 11),

Tùy chỉnh kích thước chọn Icon Site bằng cách tắt nút lệnh Auto ở vị trí số 3( hình 11)

Điều chỉnh độ lớn của biểu tượng chọn INSERT ICON (vị trí 4. Hinh 11)

Tạo danh mục con:

- Chọn mục nội dung cần tạo danh mục con và chọn Add Submenu.

- Nhập nội dung danh mục con vào New Item. Sau đó, tạo liên kết, chỉnh sửa màu sắc, chèn biểu tượng như đã hướng dẫn.

- Xoá thanh điều hướng:

- Di chuột lên thanh điều hướng để hiển thị thanh công cụ và chọn Remove Block.

- Xác nhận việc xoá trong hộp thoại hiện ra bằng cách chọn OK hoặc chọn Cancel để huỷ thao tác.

Trắc nghiệm: Tạo thanh điều hướng cho trang web

PHẦN I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.

Câu 1: Thanh điều hướng thường được đặt ở đâu trên trang web?

A. Ở cuối trang web

B. Ở giữa trang web

C. Ngay dưới phần đầu trang web

D. Ở bên trái trang web

Câu 2: Khi không đủ không gian hiển thị, thanh điều hướng sẽ làm gì?

A. Ẩn bớt các mục chính

B. Phân thành các nhóm dưới dạng thả xuống

C. Thay đổi kích thước văn bản

D. Tăng kích thước màn hình

Câu 3: Tùy chọn nào trong bảng thiết lập thông số cho phép thay đổi kích thước của logo?

A. Logo Size

B. Brand Name

C. Icons Color

D. Transparent

Câu 4: Để thêm một liên kết vào một mục nội dung trên thanh điều hướng, ta sử dụng thao tác nào?

A. Nhấn vào mục nội dung và chọn "Insert icons"

B. Nhấn vào mục nội dung và chọn "Link"

C. Chọn mục nội dung và chọn "Add Block"

D. Chọn mục nội dung và chọn "Remove Block"

Câu 5: Thanh điều hướng có thể hiển thị các mục trải rộng toàn màn hình bằng cách chọn tùy chọn nào?

A. Full Width

B. Sticky

C. Collapsed

D. Transparent

Câu 6: Tùy chọn nào cho phép hiển thị thanh điều hướng cố định khi cuộn trang?

A. Sticky

B. Full Width

C. Collapsed

D. Transparent

Câu 7: Để tạo một danh mục con cho một mục nội dung trên thanh điều hướng, ta sử dụng thao tác nào?

A. Chọn "Add Submenu"

B. Chọn "Insert icons"

C. Chọn "Link"

D. Chọn "Remove Block"

Câu 8: Tùy chọn nào cho phép thay đổi màu sắc biểu tượng trên thanh điều hướng?

A. Color

B. Icons Color

C. Logo Size

D. Brand Name

Câu 9: Khi thanh điều hướng dài hơn chiều rộng màn hình, tùy chọn nào giúp nó thu gọn lại?

A. Transparent

B. Sticky

C. Collapsed

D. Full Width

Câu 10: Để xoá thanh điều hướng, ta làm gì?

A. Chọn "Add Block"

B. Chọn "Remove Block"

C. Chọn "Block Parameters"

D. Chọn "Insert icons"

PHẦN II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai

Câu 1: Phát biểu sau đây đúng hay sai về các đặc điểm của thanh điều hướng:

a) Thanh điều hướng liệt kê các mục nội dung chính của website và liên kết đến các trang web khác.

b) Thanh điều hướng thường được đặt ở cuối trang web.

c) Các thành phần như logo, tên website, nút chia sẻ mạng xã hội, nút đăng nhập, đăng ký, và ô tìm kiếm thường được sắp xếp trên thanh điều hướng.

d) Khi thanh điều hướng không đủ không gian để hiển thị tất cả các liên kết, nó sẽ tự động ẩn đi các liên kết không cần thiết.

Câu 2: Phát biểu sau đây đúng hay sai về các bước thực hành tạo và chỉnh sửa thanh điều hướng:

a) Để thêm thanh điều hướng vào trang web, ta chọn "Add Block to Page" và sau đó chọn "Menu".

b) Sau khi thêm thanh điều hướng, một thông báo tuỳ chọn xuất hiện, và chọn "OK" để áp dụng thanh điều hướng cho tất cả các trang web trong website.

c) Tùy chọn "Full Width" cho phép thanh điều hướng chỉ hiển thị một phần nhỏ trên màn hình.

d) Để tạo danh mục con, ta chọn mục nội dung cần tạo và chọn "Add Block".

PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

Câu 1: Thanh điều hướng thường được đặt ở đâu trên trang web?

Câu 2: Màu sắc của thanh điều hướng nên được đồng bộ với những gì?

Câu 3: Khi thanh điều hướng không đủ không gian để hiển thị tất cả các liên kết, giải pháp là gì?