導航系統對網站的重要性 #工業品網絡營銷

銷百科：導航系統對網站的重要性。

今天我來介紹一下導航系統對網站的重要性，設置導航注意事項有哪些？

·站在用戶的角度，導航系統需要解決兩個問題：一個是我現在在哪里，用戶可能從首頁進入網站，也可能從任何一個內頁進入。再點擊了多個鏈接后，用戶已經忘了怎么來到當前頁面的導航系統，這時就要清楚地告訴用戶現在正處在網站總體結構的哪一部分。

·另一個是我下一步要去哪里，有時候用戶知道自己想做什么，頁面的導航設計就要告訴用戶點擊哪里才能完成目標。有時候用戶不知道自己該干點什么，網站導航就要給用戶一個好的建議，引導用戶流向網站，目標完成頁面。如網站上的相關推薦，網站地圖，站內搜索框等都有助于幫助用戶點擊到下一個頁面。

·站在SEO的角度，網站導航系統應該注意以下幾點：

→1、文字導航：盡量使用最普通的html文字導航，不要使用圖片作為導航鏈接，更不要使用JS生成導航系統。CSS也可以設計出很好的視覺效果，如背景、文字顏色變化，下拉菜單等。最普通的文字鏈接對搜索引擎來說是阻力最小的爬行和抓取通道。導航系統鏈接是整個網站收錄最重要的內部鏈接，千萬不要在導航上給搜索引擎設置任何障礙。

→2、點擊距離及扁平化：導航的目標之一，就是使頁面與首頁點擊距離越近越好。權重普通的網站內頁與首頁的距離不要超過3-4次點擊。網站導航系統的合理安排對減少鏈接層次至關重要。

→3、錨文本包含關鍵詞：導航系統中的鏈接通常是分類頁面獲得內部鏈接的主要來源，其錨文本對目標頁面相關性有很大的影響，因此分類名稱應盡量使用目標關鍵詞，當然也要先顧及用戶體驗，導航中不要堆積關鍵詞。

→4、面包屑導航：面包屑導航對用戶和搜索引擎來說是判斷頁面在網站整個結構中的位置最好的方法。正確使用面包屑導航的網站通常是架構比較清晰的網站。

→5、避免頁腳堆積：避免在網站頁腳堆積富含關鍵詞的分類頁面鏈接。近年來搜索引擎比較反感這種做法，常常會進行某種形式的懲罰，

果如圖:

代碼如下：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css垂直菜單欄</title>
<link rel="stylesheet" href="index.css" media="screen" type="text/css" />
</head>
<body>
<div id="container">
<div style="text-align:center;clear:both;">
</div>
<div class="tab-container">
<div id="c1">
<a href="#c1" title="First">First</a>
<div class="tab-content"> 
<h3>First</h3>
</div>
</div>
<div id="c2">
<a href="#c2" title="Second">Second</a>
<div class="tab-content">
<h3>Second</h3>
</div>
</div>
<div id="c3">
<a href="#c3" title="Third">Third</a>
<div class="tab-content">
<h3>Third</h3>
</div>
</div>
<div id="c4">
<a href="#c4" title="Fourth">Fourth</a>
<div class="tab-content">
<h3>Fourth</h3>
</div>
</div>
</div>
</div>
</body>
</html>

index.css

body {
line-height:1;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
}
p, .tab-content li, h1, h2, h3{
margin-bottom: 10px;
}
.tab-container h3{
font-size:147%;
}
#container{
margin: 0 auto;	
margin-top: 4%;	
}
.tab-container {
position: relative;
width: 100%;
z-index: 0;
}
.tab-container > div {
}
.tab-container > div > a {
position: relative !important;
display: inline-block;
font-size: 15px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 1px;
background: #ddd;
padding: 20px 55px;
-moz-border-radius: 3px;
-webkit-border-radius: 0px;
border-radius: 3px;
-moz-box-shadow: 0 4px 10px -5px #000000;
box-shadow: 0 4px 10px -5px #000000;
-webkit-box-shadow: 0 4px 10px -5px #000000;
width: 50px;
height: 10px;
text-decoration: none;
}
.tab-container > div:not(:target) > a {
}	
.tab-container > div:target > a {
background: none repeat scroll 0 0 #948a81;
text-shadow: 0 1px 0 #4C4648;
}
.tab-container > div > div {
background: #ddd;
top: 0;
padding: 20px;
min-height: 250px;
position: absolute;
left: 180px;
width: 400px;
}
.tab-container > div:target > div {
position: absolute;
z-index: 3 !important;
}

內容來自作者csdn博客號

頁設計——如何讓HTML在谷歌瀏覽器上支持鍵盤快捷鍵導航？

許多小伙伴都知道，在網頁開發中，我們只要在HTML代碼中設置元素的accesskey屬性，就可讓IE瀏覽器支持鍵盤快捷導航，按下相應的accesskey鍵，就能在元素之間進行跳轉。如頁面內容較多，可在關鍵的元素上設置accesskey屬性，可以讓使用鍵盤操作的視障用戶方便高效的瀏覽頁面內容，大大縮短瀏覽無效數據的時間。然而目前微軟已經放棄了對IE瀏覽器的支持，許多小伙伴們也選擇了更加快速高效的谷歌瀏覽器(Google Chrome)作為默認瀏覽器。而谷歌瀏覽器對accesskey屬性的處理機制與IE有所不同,按下accesskey鍵并非跳轉到相應元素上，而是直接激活相應元素的onclick事件。這對使用鍵盤操作的視障用戶來說，如需導航到一個頁面內容較多的站點就會十分不便。

test

那么我們如何讓HTML在谷歌瀏覽器中也能支持鍵盤導航呢？

實現原理：

1.判斷是否為IE瀏覽器，若為IE瀏覽器則使用默認設定的accesskey對頁面元素進行導航。若不是IE瀏覽器則執行相應js腳本代碼，更改相應屬性和設定鍵盤監視事件。

2.注釋掉頁面上的accesskey屬性，防止使用谷歌瀏覽器時按下對應accesskey觸發相應元素的onclick事件。

3.監視頁面的鍵盤按下事件，檢索焦點元素的上一個或下一個匹配項目，從而跳轉到相應位置。

下面將用一個實例講解實現方法：

一、html代碼

<html>
<head>
<title>測試鍵盤導航</title>
</head>
<body>
<a href="無憂天空 - PC秘書 - 菜鳥老鳥通通一網打盡！" accesskey='x'>無憂天空</a>
<a href="http://amhl.vip" accesskey='x'>愛忙網</a>
<a href="首頁 - TK貓" accesskey='x'>tk貓</a>
<a href="http://test1" accesskey='z'>測試1</a>
<a href="http://test2" accesskey='z'>測試2</a>
<a href="http://test3" accesskey='z'>測試3</a>
<script src="acc.js">
</script>
</body>
</html>

html代碼

二、acc.js代碼

(function() {
"use strict";//以嚴格模式運行
//下面檢測是否是IE瀏覽器，如果是，那么就不執行下面的代碼
if(window.ActiveXObject || "ActiveXObject" in window) {
return;
}

//下面的函數將注釋掉accesskey屬性，否則在諸如谷歌瀏覽器中按下相應的access鍵就會激活對應元素的onclick事件。
(function(){
var reset_element_key=function(elements,name,value,new_name){
var elt_array=Array.prototype.slice.call(elements);
    var filtered=elt_array.filter(function (elt) {
  elt.removeAttribute(name);
elt.setAttribute(new_name,value);

return elt;
});
return filtered;
}
var x_element=document.querySelectorAll("[accesskey='x']");
reset_element_key(x_element,"accesskey","x","accesskeyx");
var z_element=document.querySelectorAll("[accesskey='z']");
reset_element_key(z_element,"accesskey","z","accesskeyz");
})();

//setFocus函數用來跳轉到當前焦點的上一個或下一個匹配元素
function setFocus(selector, op) {
var elsArray=Array.prototype.slice.call(document.all);
var len=elsArray.length;
var fs=document.activeElement
var fsIndex=elsArray.indexOf(fs);
var index=0;
if(op=='+'){
index=fsIndex+1;
if(index>=len){
index=0;
}
}else if(op=='-'){

index=fsIndex-1;
if(index<0){
index=len-1;
}
}



while(index!=fsIndex)
{
if(elsArray[index].hasAttribute&&elsArray[index].hasAttribute(selector)){
elsArray[index].focus();
break;
}
if(op=='+'){
index+=1;
if(index>=len){
index=0;
}
}else{
index-=1;
if(index<0){
index=len-1;
}
}



}

}


//監視頁面的鍵盤按下事件
            document.onkeydown=function (e) {

//用戶按下了alt+shift+x
if(e.altKey&&e.shiftKey && e.keyCode==88) {
setFocus("accesskeyx", '-');
return false;
}
else if(e.altKey&& e.keyCode==88) {//用戶按下了alt+x
setFocus("accesskeyx", '+');
return false;
}
else if(e.altKey&&e.shiftKey && e.keyCode==90) {//用戶按下了alt+shift+z
setFocus("accesskeyz", '-');
return false;
}
else if(e.altKey&& e.keyCode==90) {//用戶按下了alt+z
setFocus("accesskeyz", '+');
return false;
}


 }

})();

acc.js代碼

在線咨詢

上一篇：極客精神解讀
下一篇：SpringBoot整合FastJson過程解析

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。