Ví dụ về phân cấp trong cấu trúc web

Đặt sơ đồ tổ chức của công ty bên cạnh sơ đồ bố trí của trang web và bạn có thể tìm thấy sự tương đồng đáng chú ý giữa hai tài liệu. Các doanh nghiệp, chính phủ và các thực thể khác thường sử dụng các mẫu bố cục phân cấp giống như các trang web. Giám đốc điều hành của một tập đoàn, chẳng hạn, có thể ngồi ở đầu mô hình phân cấp giống như cách trang chủ cư trú ở đầu mô hình trang web. Hệ thống phân cấp được thiết kế hiệu quả tạo ra các trang web mà mọi người thích truy cập.

Cấu trúc trang web

Như các tác giả của Hướng dẫn về Phong cách Web Web Ghi chú, lưu ý Thành công của việc tổ chức trang web của bạn sẽ được quyết định phần lớn bởi kiến ​​trúc thông tin trang web của bạn phù hợp với mong đợi của người dùng của bạn như thế nào. " Có thể dành nhiều thời gian hơn để xem xét nó. Một cách để họ dễ dàng làm điều đó là cung cấp cho trang web một bố cục hợp lý và có thể dự đoán được, để khách truy cập có thể điều hướng qua các trang Web mà không cần tham khảo tài liệu trợ giúp của trang web.

Phương pháp tiếp cận kim tự tháp

Nó có thể giúp nghĩ về một trang web như một kim tự tháp. Ở trên cùng của kim tự tháp là cấp độ đầu tiên của trang web, trang chủ. Một hệ thống phân cấp hiệu quả chứa thông tin chung và các liên kết trỏ đến các trang Web khác có chứa thông tin chi tiết hơn. Các trang đó xuất hiện bên dưới trang chủ và trở thành cấp thứ hai của trang trong phân cấp. Một trang web cơ bản có thể chỉ cần hai cấp độ và một trang chủ có thể chỉ cần có các liên kết trỏ đến các trang như từ Giới thiệu, Sản phẩm của chúng đến trang chủ từ bất kỳ trang nào, chẳng hạn như bằng cách bao gồm một liên kết, nút hoặc mục menu trên mỗi trang trỏ đến trang chủ.

Cấp ba và hơn thế nữa

Whitehouse.gov là một ví dụ về một trang web có nhiều cấp độ tạo thành một hệ thống phân cấp phức tạp. Trang chủ đơn giản, nhưng bạn có thể truy cập bất kỳ trang nào khác trên trang web từ trang chủ. Kiểu phân cấp này có thể mở rộng xuống nhiều cấp độ, trong đó các cấp thấp hơn cung cấp nhiều chi tiết hơn các cấp cao hơn. Một ví dụ điển hình của hệ thống phân cấp ba cấp là một trang web đánh giá sách. Trang chủ, ở cấp một, có thể cung cấp thông tin chung cũng như các liên kết trỏ đến trang Đánh giá. Trang đó, hình thành cấp độ thứ hai, có thể chứa một danh sách các cuốn sách. Khi bạn nhấp vào một cuốn sách, một trang khác có tên "Chiến tranh và Hòa bình" có thể hiển thị đánh giá cho cuốn sách đó. Trang này sẽ ngồi ở cấp thứ ba của trang web. Nếu bạn lập sơ đồ phân cấp này theo cách bạn tạo biểu đồ tổ chức, bạn sẽ vẽ một hộp ở trên cùng và viết "Trang chủ" trong đó. Sau đó, bạn có thể vẽ hộp "Đánh giá" bên dưới hộp "Trang chủ" và thêm hộp "Chiến tranh và Hòa bình" bên dưới hộp "Trang chủ".

Sử dụng các tiêu đề để hiển thị phân cấp

Ngoài việc tổ chức các trang trên trang web, bạn có thể sắp xếp nội dung của trang để hiển thị các mối quan hệ phân cấp. Ví dụ, các tiêu đề cho phép mọi người trình bày thông tin dưới dạng phác thảo dễ tiêu hóa. HTML cung cấp một số thẻ tiêu đề, chẳng hạn như h1, h2 và h2, có thể giúp bạn thêm phân cấp vào trang Web. Ví dụ: bạn có thể sử dụng thẻ h1 lớn làm tiêu đề chính của trang và thẻ h2 nhỏ hơn cho phần có tên "Sản phẩm". Sau đó, bạn có thể thêm thẻ h3 bên dưới Sản phẩm để tạo phần phụ mô tả sản phẩm của mình. Bạn cũng có tùy chọn để thêm danh sách dấu đầu dòng vào trang của mình. Bằng cách kết hợp tất cả các yếu tố này, bạn tạo ra một phác thảo trực quan mà khách truy cập trang web có thể hiểu trong nháy mắt.