CHỦ ĐỀ E-ICT. BÀI 3. TẠO THANH ĐIỀU HƯỚNG CHO TRANG WEB
Trang bìa
Trang bìa
Ảnh
TIN HỌC 12 CHỦ ĐỀ E-ICT. BÀI 3. TẠO THANH ĐIỀU HƯỚNG CHO TRANG WEB
Ảnh
Yêu cầu cần đạt
Yêu cầu cần đạt
Ảnh
Yêu cầu cần đạt
Hình vẽ
Nêu được ý nghĩa và cách sử dụng thanh điều hướng trong website. Tạo được thanh điều hướng cho trang web.
Khởi động
Khởi động
Khởi động
Em hãy truy cập một số website như: https://moet.gov.vn, https://baomoi.net.vn, htps://học10.vn và khám phá xem phần đầu của trang web thường có thông tin gì?
1. Giới thiệu thanh điều hướng
Hoạt động
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?
Tìm hiểu
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. Để giúp người dùng thuận tiện trong việc di chuyển qua lại giữa các trang web, thanh điều hướng thường được đặt ở vị trí ngay phía dưới của phần đầu trang web (Hình 1).
Ảnh
Tiếp
Một số trang web có thể gộp chung thanh điều hướng với phần đầu của trang web, khi đó các thành phần thường xuất hiện trong phần đầu trang web như logo, tên website, các nút lệnh chia sẻ trên mạng xã hội, các nút đăng nhập, đăng kí hay ô tìm kiếm,... sẽ được sắp xếp trên cùng vị trí thanh điều hướng (Hình 2).
Ảnh
Tiếp
Để tạo sự nhất quán cho màu sắc của các thành phần trong trang web và tạo ấn tượng cho người xem, màu sắc chủ đạo của thanh điều hướng (màu nền hoặc màu chữ) sẽ đồng nhất với màu sắc 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 (Hình 3).
Ảnh
Tiếp
Thanh điều hướng trên các trang web thường chỉ hiển thị trên một dòng, vì vậy 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. Khi đó, các liên kết đến các trang web sẽ được phân thành các nhóm được tổ chức dưới dạng thanh điều hướng nhiều cấp (thường có dạng thả xuống như Hình 4). 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.
Ảnh
2. Thực hành
Yêu cầu
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 trong website “Giới thiệu trường em” mà em đã thực hiện ở Bài 2.
Bước 1
Hướng dẫn thực hiện: Bước 1. Thêm khối thanh điều hướng vào trang web – Chọn Add Block to Page + phía góc phải dưới màn hình. – Chọn Menu, chọn một thanh điều hướng theo mẫu ở vị trí (1) trong Hình 5 để thêm vào phía dưới cùng của trang web hoặc nháy giữ chuột và kéo thả vào vị trí thích hợp trên trang web tại vị trí (2) trong Hình 5.
Ảnh
Tiếp (Bước 1)
- Thông báo tuỳ chọn thêm thanh điều hướng xuất hiện (Hình 6), chọn OK để thêm thanh điều hướng cho tất cả các trang web trong website. Vì thanh điều hướng chứa liên kết đến các trang web, do vậy các trang web trong cùng website thường sẽ có cùng thanh điều hướng.
Ảnh
Bước 2
Bước 2. Điều chỉnh các thông số thiết lập của thanh điều hướng Phần mềm Mobirise cho phép điều chỉnh thanh điều hướng của trang web một cách trực quan thông qua bảng thiết lập thông số. Mở bảng thiết lập thông số của thanh điều hướng (Hình 7) bằng cách di chuột lên trên thanh điều hướng để hiển thị thanh công cụ và chọn Block Parameters . Các mẫu thanh điều hướng khác nhau sẽ có các tuỳ chọn trên bảng thông số tương ứng. Tuỳ chỉnh các thông số trong bảng bằng cách 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. Một số thông số tuỳ chỉnh chính như sau:
Tiếp (Bước 2)
• 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. • Sricky: 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).
Ảnh
Bước 3
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
Khi chọn khối thanh điều hướng, một thanh điều hướng với các mục nội dung mặc định sẽ được thêm vào trang web. Để chỉnh sửa thanh điều hướng, có thể thực hiện thay đổi tên mục nội dung, chèn liên kết, chèn biểu tượng, thay đổi màu sắc và tạo danh mục con.
Tiếp (Bước 3)
– Thay đổi tên mục nội dung: Chọn từng mục nội dung tại vị trí (D) (Hình 8) và nhập nội dung mới. – Chèn liên kết: Chọn các mục nội dung muốn chèn liên kết và 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 sau: + Liên kết đến một trang web khác trên Internet: Nhập đường dẫn trong thẻ Web Address, chọn INSERT LINK (Hình 9) để gắn liên kết cho mục nội dung.
Ảnh
Tiếp (Bước 3)
+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ó trong dự án website tại phần Site Pages của thẻ Page, chọn INSERT LINK (Hình 10). Ngoài ra, có thể 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). Ví dụ ở Hình 10, trang web hiện tại là trang Home.
Ảnh
Tiếp (Bước 3)
– Chèn biểu tượng: + Chọn các mục nội dung muốn chèn biểu tượng và chọn Insert icon ở vị trí (Hình 8). + Trong hộp thoại Select icons (Hình 11): Chọn biẻu tượng phù hợp ở vị trí (1), thay đổi màu sắc biểu tượng bằng cách chọn Icon Color ở vị trí (2), tuỳ chỉnh kích thước biểu tượng tại Icon Size bằng cách tắt lệnh Auto ở vị trí (3) và điều chỉnh độ lớn của biểu tượng. Chọn INSERTICON ở vị trí (4) để thêm biểu tượng cho mục nội dung đó.
Ảnh
Tiếp (Bước 3)
– Chỉnh sửa màu sắc: Chọn mục nội dung bất kì và chọn Color ) ở vị trí 2) (Hình 8) để thay đổi màu sắc cho tất cả các mục nội dung. Lưu ý: Khi thay đổi màu sắc một mục nội dung thì các mục nội dung khác cũng tự động được thay đổi màu.
Ảnh
Tiếp (Bước 3)
– 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 ở vị trí 2 (Hình 8). + 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 ở trên.
Ảnh
Tiếp (Bước 3)
– Xoá thanh điều hướng: +Di chuột lên trên thanh điều hướng để hiển thị thanh công cụ và chọn Remove Block. + Chương trình hiển thị hộp thoại xác nhận chắc chắn muốn xoá thành phần đang chọn khỏi trang web hay không (Hình 12). Chọn OK để xoá và CANCEL để huỷ bỏ thao tác xoá.
Ảnh
Vận dụng
Vận dụng
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.
Ảnh
Câu hỏi tự kiểm tra
Câu hỏi
Câu hỏi
Bài tập trắc nghiệm
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.
Tổng kết
Ghi nhớ
Ghi nhớ
Hình vẽ
Thanh điều hướng liệt kê các mục nội dung liên kết đến các trang web của website và thường được đặt ở phần đầu của trang web. Thanh điều hướng nhiều cấp thường được sử dụng khi có nhiều liên kết cần hiển thị trên thanh điều hướng.
Kết thúc bài hoc
Ảnh