Thực hiện điều hướng trang. Sử dụng Ngăn Điều hướng trong MS Word. Lấy hình ảnh vệ tinh hoặc bản đồ của khu vực

Một trang web chất lượng cao phải tốt từ mọi phía. Chỉ cần tham quan một số dự án phổ biến là đủ để hiểu rằng mỗi dự án đó đều Bạn đã làm rất tốt, về việc thiết lập hoàn toàn tất cả các thành phần.


Trong bài viết này, chúng tôi sẽ nêu bật một yếu tố quan trọng như điều hướng, điều mà những người mới bắt đầu thường quên.

Điều hướng trang web chính xác không chỉ là thiết lập các mục menu và vị trí của chúng, mà còn là đảm bảo quá trình chuyển đổi thoải mái thông qua tài nguyên. Không chắc rằng những khách truy cập không cảm thấy thoải mái khi thực hiện chuyển đổi trong trang web sẽ dành nhiều thời gian cho nó và ít có khả năng sẽ liên tục truy cập tài nguyên hơn.

Những loại điều hướng nên được thực hiện trên trang web?

Để làm cho việc điều hướng trang web trở nên thuận tiện, trước tiên bạn sẽ phải phát triển cấu trúc tài nguyên của mình. Bạn có thể lấy một tờ giấy thông thường và ghi trên đó tất cả các trang quan trọng mà khách truy cập của bạn sẽ truy cập. Khi phát triển cấu trúc, hãy nhớ quy tắc vàng - mỗi tài liệu sẽ có sẵn sau 3 lần nhấp chuột từ trang chính.

Đang phát triển điều hướng thuận tiện trang web, hãy nhớ cài đặt sơ đồ trang web. Điều này sẽ giúp khách truy cập được hưởng lợi từ nội dung tài nguyên của bạn.

Hệ thống điều hướng trang web sẽ trở thành một hướng dẫn cho mọi khách truy cập. Nó sẽ có năng lực, chu đáo và thuận tiện như thế nào yếu tố hành vi. Liệu du khách có tìm thấy thông tin cần thiết liệu anh ấy có dành nhiều thời gian trên trang web hay không và liệu anh ấy có quay lại trang đó trong tương lai hay không.

Để thanh điều hướng của trang web trở nên hữu ích, nó phải đơn giản và hiệu quả. Mức độ chuyển đổi lưu lượng truy cập thậm chí còn phụ thuộc vào điều này. Điều này không chỉ áp dụng cho menu chính, điều hướng chính xác nên có trên mọi trang. Khách truy cập nên có gợi ý về nơi cần đến và những gì cần nhấp vào.

Quy tắc để điều hướng tốt

Điều hướng sẽ dẫn khách truy cập đến các hành động được nhắm mục tiêu. Nếu đây là cửa hàng trực tuyến thì bạn cần xây dựng cấu trúc để hướng dẫn người dùng mua hàng. Sẽ mất rất nhiều thời gian để thiết lập và bạn vẫn cần thực hiện thử nghiệm, nhưng điều đó rất đáng giá.

Để không bỏ lỡ điểm quan trọng, hãy xem xét các khuyến nghị sau:

  1. Trực giác. Điều hướng không cần phải phức tạp, vì vậy dù bạn có thích nó đến đâu thì tốt hơn hết là đừng hình dạng phức tạp và các menu được viết, chẳng hạn như bằng Flash. Tốt hơn là sử dụng điều hướng tiêu chuẩn với giao diện quen thuộc.
  2. Ý nghĩa. Sẽ chẳng ích gì khi thêm các mục menu, liên kết và khối mới để trình bày nội dung không quan trọng đối với khách truy cập của bạn. Mỗi phần tử điều hướng phải hữu ích; bạn không nên làm quá tải tài nguyên.
  3. Danh tính. Một số quản trị viên web cố tình thể hiện sự sáng tạo của mình và tạo các điều hướng khác nhau cho từng trang riêng lẻ của trang web. Tốt nhất là không nên làm điều này vì du khách có thể dễ dàng bị nhầm lẫn.
  4. Hòa hợp. Tất cả các yếu tố điều hướng mà bạn cài đặt trên trang web phải phù hợp với thiết kế tổng thể của tài nguyên. Điều này không chỉ áp dụng cho menu mà còn cho các thành phần như đường dẫn hoặc khối có liên kết.

Điều hướng trang web chính xác là yếu tố quan trọng bất kỳ tài nguyên nào và dành cho quản trị viên web không muốn làm mọi thứ trong mẫu, bạn cần hiểu rằng không một khách truy cập nào sẽ lãng phí thời gian nghiên cứu giao diện của bạn. Nó dễ dàng hơn nhiều để đi đến một trang web khác.

Điều hướng trang web thuận tiện bắt đầu từ menu chính

Công việc cải thiện khả năng sử dụng nên bắt đầu với menu chính. Đó là nội dung của dự án dành cho du khách. Mỗi người dùng sẽ chú ý đến menu chính và từ đó sẽ đưa ra kết luận về những dữ liệu có thể tìm thấy ở đây. Đó là lý do tại sao menu chính nên có những món tốt nhất.

Đừng vội cộng càng nhiều điểm càng tốt để thể hiện bao nhiêu thông tin khác nhau Trực tuyến. Nhiều thử nghiệm đã chỉ ra rằng khách truy cập chỉ cảm nhận được 5-7 món trong thực đơn. Điều gì xảy ra với phần còn lại? Đơn giản là họ không được tính đến.

Ví dụ: nếu bạn đang chuẩn bị menu cho một cửa hàng trực tuyến, các mục menu chính tối ưu sẽ là: dịch vụ, giá cả, liên hệ, danh mục, về công ty.

Khối menu phải được đặt trên mỗi trang và được sử dụng ở khu vực nổi bật. Theo quy định, đây là góc trên bên trái của màn hình, nhưng tất cả phụ thuộc vào thiết kế của trang web (menu có thể nằm ngang). Ở đây không cần phải sáng tạo, người dùng đã quen với một định dạng nhất định nên hãy sử dụng nó.

Điều hướng trang web theo từng trang – liên kết nội bộ

Trên mỗi trang riêng, cần phải tính toán các tiện ích riêng biệt. Khi thêm trang mới, tốt hơn hết bạn nên đặt ngay liên kết đến các tài liệu khác. Chúng tôi đã nói với bạn rồi... Điều này rất quan trọng đối với một trang thông tin và cũng thuận tiện khi liên kết đến các bài viết liên quan đến chủ đề.

Chủ sở hữu dịch vụ và cửa hàng trực tuyến có thể thêm các khối khác nhau nơi họ sẽ trình bày Sản phẩm tương tự, công cụ bổ sung và như thế. mục tiêu chính Tất cả điều này là để tăng số lượng chuyển đổi nội bộ, một số khách truy cập có thể đơn giản là không biết những gì khác trên trang web.

Tôi nên sử dụng cái gì khác? Menu bổ sung trên mỗi trang. Trong khi liệt kê, chúng tôi đã đề cập đến vụn bánh mì. Việc cài đặt chức năng như vậy không khó, các plugin đã được tạo cho tất cả các công cụ:

Đây là ví dụ về một menu bổ sung mà khách truy cập có thể dễ dàng điều hướng cấu trúc và hiểu mình đang ở đâu khoảnh khắc này. Có lẽ một người sẽ truy cập trang trực tiếp từ máy tìm kiếm, trong trường hợp này anh ấy chắc chắn sẽ cần một thực đơn như vậy. Chỉ cần làm cho nó đáng chú ý.

Điều hướng trang của trang web

Cách đây không lâu tôi đã quyết định cải thiện blog của mình và hiện tại đã có nhiều bài viết có nội dung. Các yếu tố điều hướng trang web như vậy giúp bạn điều hướng trang nhanh chóng nếu nó chứa nhiều thông tin. Người dùng có thể đang tìm kiếm thứ gì đó cụ thể, tại sao lại buộc họ phải đọc những tài liệu dài dòng.

Đối với các cửa hàng trực tuyến, tốt hơn hết bạn không nên tải các trang có thông tin mà nên chia thông tin thành nhiều phần. Lựa chọn lý tưởng là thêm thực đơn bổ sung với khả năng điều hướng đến dữ liệu quan trọng nhất - đặc điểm, đánh giá, giá cả, sản phẩm tương tự, v.v.:

Việc điều hướng trang web được sử dụng để bán hàng phải thuận tiện nhất có thể. Khách hàng càng thực hiện ít cú nhấp chuột trên trang web để đặt hàng thì càng tốt. Vì vậy, ngoài việc thực đơn khác nhau Trang sản phẩm phải chứa các nút đặt hàng, vào giỏ hàng, thanh toán và các nút (liên kết) khác.

Cách tạo điều hướng trang web: menu bổ sung

Trong khi một số quản trị viên web lấp đầy thanh bên bằng các biểu ngữ, những người khác lại cài đặt liên kết bổ sung và thực đơn. Tôi đã chọn tùy chọn thứ hai; dưới menu chính trên mỗi trang blog của tôi có một số loại menu khác cung cấp liên kết đến các tài liệu hữu ích nhất.

Tốt nhất, nên tạo các menu như vậy được liên kết với các phần nhất định. Ví dụ: nếu một người quan tâm đến Forex, hãy cho anh ấy xem một menu và nếu anh ấy tạo một trang web, hãy cho anh ấy xem các mục hoàn toàn khác nhau. Cho đến nay, trên blog Workion, mọi người đều được hiển thị cùng một menu, nơi tập hợp những bài viết hay nhất.

Một lần nữa, hãy nói đôi lời về các trang web thương mại. Bạn cũng có thể tạo các khối trên chúng và nếu không có bài viết nào trên trang web, hãy bắt đầu từ những gì có ở đó. Lựa chọn các sản phẩm bán chạy nhất, dịch vụ phổ biến, danh mục sản phẩm có khuyến mãi, ưu đãi hấp dẫn và nhiều hơn thế nữa.

Sự dễ dàng điều hướng của trang web cần phải được cải thiện liên tục. Để tìm ra những gì cần phải làm, hãy nhờ bạn bè của bạn sử dụng trang web và bày tỏ ý kiến ​​​​của họ về sự thuận tiện. Hãy để họ bày tỏ quan điểm của mình, đừng chạy đi sửa chữa mọi thứ, hãy dùng cái đầu của mình, bạn cần lắng nghe ý kiến ​​của số đông và những người có chuyên môn.

Bạn cũng có thể quan tâm đến:


Tôi sẽ biết ơn nếu bạn chia sẻ bài viết này trên mạng xã hội:

Cập nhật lần cuối: 27/04/2016

Thanh điều hướng đóng một vai trò quan trọng trên trang web vì nó cung cấp sự chuyển tiếp giữa các trang của trang web hoặc với các tài nguyên bên ngoài. Hãy xem cách tạo một thanh điều hướng đơn giản.

Về cơ bản, thanh điều hướng là một tập hợp các liên kết, thường ở dạng danh sách không đánh số. Thanh điều hướng có nhiều dạng khác nhau: dọc và ngang, đơn cấp và đa cấp, nhưng trong mọi trường hợp, trung tâm của mỗi điều hướng là một phần tử . Vì vậy, khi tạo thanh điều hướng, chúng ta có thể gặp một số khó khăn phát sinh từ những hạn chế của thành phần liên kết. Cụ thể là phần tử là chữ thường, có nghĩa là chúng ta không thể chỉ định chiều rộng, chiều cao hoặc phần đệm cho nó. Chiều rộng của liên kết sẽ tự động chiếm không gian cần thiết.

Trình đơn dọc

Một giải pháp phổ biến cho vấn đề này khi tạo menu dọc là biến liên kết thành một phần tử khối.

Thanh điều hướng trong HTML5

Sau khi thiết lập thuộc tính display: block, chúng ta có thể xác định chiều rộng, phần đệm, v.v. của khối liên kết.

Trình đơn ngang

Để tạo menu ngang Có hai phương pháp. Đầu tiên là sử dụng thuộc tính nổi và tạo các phần tử nổi từ các liên kết chạy xung quanh nhau từ bên trái. Và cách thứ hai là tạo một đường liên kết bằng cách đặt thuộc tính display:inline-block.

Sử dụng phao

Thuật toán tạo thanh điều hướng bằng float được chia thành hai giai đoạn. Ở giai đoạn đầu tiên, phần tử li chứa liên kết được đặt thành float: left; . Điều này cho phép tất cả các mục danh sách được xếp thành hàng với chiều rộng đủ để mục danh sách bên phải bao quanh mục danh sách bên trái.

Giai đoạn thứ hai là đặt liên kết display: block cho phần tử, điều này cho chúng ta cơ hội đặt chiều rộng, phần đệm và nói chung tất cả các tính năng đặc trưng cho phần tử khối.

Thanh điều hướng trong HTML5

khối nội tuyến và nội tuyến

Để tạo một thanh điều hướng ngang, chúng ta cần tạo từng phần tử li nội tuyến, nghĩa là đặt display: inline của nó. Sau đó, đối với phần tử liên kết nằm trong phần tử li, chúng ta có thể đặt display: inline-block:

Thanh điều hướng trong HTML5

Để điều hướng trang web một cách thuận tiện, bạn cần điều hướng, điều mà tôi đã sử dụng Tập lệnh HTML và CSS. Kết quả công việc của tôi, bạn có thể thấy 2 loại menu (dọc và ngang). Và bây giờ, tôi sẽ cố gắng nói về các nhiệm vụ mà theo ý kiến ​​​​của tôi, một menu cho một trang web nên thực hiện:

  • Dễ sử dụng;
  • Điều hướng phải được tạo cho tất cả các phần của trang web;
  • Mỗi trang của trang web phải có quyền truy cập vào trang chủ;
  • Chuyển đến bất kỳ trang nào của trang web với tối đa 3 lần nhấp chuột.

Ở đây tôi sẽ cố gắng trình bày càng nhiều tài liệu càng tốt về cách tạo thực đơn, hãy chuẩn bị sẵn sàng, nhiều người có thể gặp khó khăn, ít nhất là tôi đã làm được. Vì vậy, hãy bắt đầu!

Trước hết, tôi sẽ cho bạn biết cách thực hiện. Đầu tiên chúng ta viết script trong style sheet:

#navigation ( chiều rộng: 560px; chiều cao: 50px; lề: 0; phần đệm: 0; hình nền: url(img/gor_menu.jpg); lặp lại nền: không lặp lại; vị trí nền: giữa; ) #navigation ul ( list-style: none; lề: 0; đệm: 0; ) #navigation ul li ( display: inline; lề: 0px; ) #navigation ul li a ( Height:28px; display: block; float: left; color: #333333; trang trí văn bản: không có; họ phông chữ: Arial; cỡ chữ: 12px; độ dày phông chữ: in đậm; hình nền: url(img/menu_separatorline.jpg); lặp lại nền: không lặp lại; nền- vị trí: giữa bên phải; đệm-trên: 17px; đệm-phải: 15px; đệm-dưới: 0; đệm-trái: 15px; ) #navigation ul li a:hover ( color:#FFF; hình nền: url(img /button_hover.jpg); lặp lại nền: lặp lại-x; vị trí nền: trên cùng bên trái; ) #navigation ul li#active a ( hình nền: url(img/button_hover.jpg); lặp lại nền: lặp lại-x ; vị trí nền: trên cùng bên trái; )

Đừng lo lắng, không có gì sai với mã này. Để bạn hiểu rõ hơn, tôi sẽ viết ngay mã HTML cho thực đơn này:

Như bạn có thể thấy, chúng ta đang xử lý một danh sách, nếu không có biểu định kiểu thì sẽ không có giá trị gì. Câu lệnh div gọi các biến từ bảng bên ngoài Kiểu CSS, thì danh sách của chúng ta sẽ được chuyển đổi và biến thành thứ mà tôi nghĩ là một menu khá nằm ngang.

Bây giờ chúng ta cần giải thích một chút điều này đề cập đến điều gì, sau đó tôi nghĩ bạn sẽ tự mình tìm ra:

- chứa toàn bộ cấu trúc menu. Hình ảnh trên cùng mà tôi đã chuẩn bị trước bằng Photoshop sẽ được chèn vào đó;

— phần thân của menu, chứa danh sách không có thứ tự. Một hình ảnh sẽ được chèn vào đó, hình ảnh này sẽ được lặp lại theo chiều dọc và tạo nền. Có thể tôi chọn màu quá sáng nhưng theo tôi chúng không gây hại mắt;

- chứa khung của chính menu;

  • Tạo menu trang web
  • — đây là một trong những vị trí mà bạn sẽ cần chèn liên kết cần thiết vào a href="#";