整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
銷百科：導(dǎo)航系統(tǒng)對(duì)網(wǎng)站的重要性。
今天我來(lái)介紹一下導(dǎo)航系統(tǒng)對(duì)網(wǎng)站的重要性，設(shè)置導(dǎo)航注意事項(xiàng)有哪些？
·站在用戶的角度，導(dǎo)航系統(tǒng)需要解決兩個(gè)問題：一個(gè)是我現(xiàn)在在哪里，用戶可能從首頁(yè)進(jìn)入網(wǎng)站，也可能從任何一個(gè)內(nèi)頁(yè)進(jìn)入。再點(diǎn)擊了多個(gè)鏈接后，用戶已經(jīng)忘了怎么來(lái)到當(dāng)前頁(yè)面的導(dǎo)航系統(tǒng)，這時(shí)就要清楚地告訴用戶現(xiàn)在正處在網(wǎng)站總體結(jié)構(gòu)的哪一部分。
·另一個(gè)是我下一步要去哪里，有時(shí)候用戶知道自己想做什么，頁(yè)面的導(dǎo)航設(shè)計(jì)就要告訴用戶點(diǎn)擊哪里才能完成目標(biāo)。有時(shí)候用戶不知道自己該干點(diǎn)什么，網(wǎng)站導(dǎo)航就要給用戶一個(gè)好的建議，引導(dǎo)用戶流向網(wǎng)站，目標(biāo)完成頁(yè)面。如網(wǎng)站上的相關(guān)推薦，網(wǎng)站地圖，站內(nèi)搜索框等都有助于幫助用戶點(diǎn)擊到下一個(gè)頁(yè)面。
·站在SEO的角度，網(wǎng)站導(dǎo)航系統(tǒng)應(yīng)該注意以下幾點(diǎn)：
→1、文字導(dǎo)航：盡量使用最普通的html文字導(dǎo)航，不要使用圖片作為導(dǎo)航鏈接，更不要使用JS生成導(dǎo)航系統(tǒng)。CSS也可以設(shè)計(jì)出很好的視覺效果，如背景、文字顏色變化，下拉菜單等。最普通的文字鏈接對(duì)搜索引擎來(lái)說(shuō)是阻力最小的爬行和抓取通道。導(dǎo)航系統(tǒng)鏈接是整個(gè)網(wǎng)站收錄最重要的內(nèi)部鏈接，千萬(wàn)不要在導(dǎo)航上給搜索引擎設(shè)置任何障礙。
→2、點(diǎn)擊距離及扁平化：導(dǎo)航的目標(biāo)之一，就是使頁(yè)面與首頁(yè)點(diǎn)擊距離越近越好。權(quán)重普通的網(wǎng)站內(nèi)頁(yè)與首頁(yè)的距離不要超過3-4次點(diǎn)擊。網(wǎng)站導(dǎo)航系統(tǒng)的合理安排對(duì)減少鏈接層次至關(guān)重要。
→3、錨文本包含關(guān)鍵詞：導(dǎo)航系統(tǒng)中的鏈接通常是分類頁(yè)面獲得內(nèi)部鏈接的主要來(lái)源，其錨文本對(duì)目標(biāo)頁(yè)面相關(guān)性有很大的影響，因此分類名稱應(yīng)盡量使用目標(biāo)關(guān)鍵詞，當(dāng)然也要先顧及用戶體驗(yàn)，導(dǎo)航中不要堆積關(guān)鍵詞。
→4、面包屑導(dǎo)航：面包屑導(dǎo)航對(duì)用戶和搜索引擎來(lái)說(shuō)是判斷頁(yè)面在網(wǎng)站整個(gè)結(jié)構(gòu)中的位置最好的方法。正確使用面包屑導(dǎo)航的網(wǎng)站通常是架構(gòu)比較清晰的網(wǎng)站。
→5、避免頁(yè)腳堆積：避免在網(wǎng)站頁(yè)腳堆積富含關(guān)鍵詞的分類頁(yè)面鏈接。近年來(lái)搜索引擎比較反感這種做法，常常會(huì)進(jìn)行某種形式的懲罰，
果如圖:
代碼如下：
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;
}內(nèi)容來(lái)自作者csdn博客號(hào)
許多小伙伴都知道，在網(wǎng)頁(yè)開發(fā)中，我們只要在HTML代碼中設(shè)置元素的accesskey屬性，就可讓IE瀏覽器支持鍵盤快捷導(dǎo)航，按下相應(yīng)的accesskey鍵，就能在元素之間進(jìn)行跳轉(zhuǎn)。如頁(yè)面內(nèi)容較多，可在關(guān)鍵的元素上設(shè)置accesskey屬性，可以讓使用鍵盤操作的視障用戶方便高效的瀏覽頁(yè)面內(nèi)容，大大縮短瀏覽無(wú)效數(shù)據(jù)的時(shí)間。然而目前微軟已經(jīng)放棄了對(duì)IE瀏覽器的支持，許多小伙伴們也選擇了更加快速高效的谷歌瀏覽器(Google Chrome)作為默認(rèn)瀏覽器。而谷歌瀏覽器對(duì)accesskey屬性的處理機(jī)制與IE有所不同,按下accesskey鍵并非跳轉(zhuǎn)到相應(yīng)元素上，而是直接激活相應(yīng)元素的onclick事件。這對(duì)使用鍵盤操作的視障用戶來(lái)說(shuō)，如需導(dǎo)航到一個(gè)頁(yè)面內(nèi)容較多的站點(diǎn)就會(huì)十分不便。
test
實(shí)現(xiàn)原理：
1.判斷是否為IE瀏覽器，若為IE瀏覽器則使用默認(rèn)設(shè)定的accesskey對(duì)頁(yè)面元素進(jìn)行導(dǎo)航。若不是IE瀏覽器則執(zhí)行相應(yīng)js腳本代碼，更改相應(yīng)屬性和設(shè)定鍵盤監(jiān)視事件。
2.注釋掉頁(yè)面上的accesskey屬性，防止使用谷歌瀏覽器時(shí)按下對(duì)應(yīng)accesskey觸發(fā)相應(yīng)元素的onclick事件。
3.監(jiān)視頁(yè)面的鍵盤按下事件，檢索焦點(diǎn)元素的上一個(gè)或下一個(gè)匹配項(xiàng)目，從而跳轉(zhuǎn)到相應(yīng)位置。
下面將用一個(gè)實(shí)例講解實(shí)現(xiàn)方法：
<html>
<head>
<title>測(cè)試鍵盤導(dǎo)航</title>
</head>
<body>
<a href="無(wú)憂天空 - PC秘書 - 菜鳥老鳥通通一網(wǎng)打盡！" accesskey='x'>無(wú)憂天空</a>
<a href="http://amhl.vip" accesskey='x'>愛忙網(wǎng)</a>
<a href="首頁(yè) - TK貓" accesskey='x'>tk貓</a>
<a href="http://test1" accesskey='z'>測(cè)試1</a>
<a href="http://test2" accesskey='z'>測(cè)試2</a>
<a href="http://test3" accesskey='z'>測(cè)試3</a>
<script src="acc.js">
</script>
</body>
</html>
html代碼
(function() {
"use strict";//以嚴(yán)格模式運(yùn)行
//下面檢測(cè)是否是IE瀏覽器，如果是，那么就不執(zhí)行下面的代碼
if(window.ActiveXObject || "ActiveXObject" in window) {
return;
}
//下面的函數(shù)將注釋掉accesskey屬性，否則在諸如谷歌瀏覽器中按下相應(yīng)的access鍵就會(huì)激活對(duì)應(yīng)元素的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函數(shù)用來(lái)跳轉(zhuǎn)到當(dāng)前焦點(diǎn)的上一個(gè)或下一個(gè)匹配元素
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;
}
}
}
}
//監(jiān)視頁(yè)面的鍵盤按下事件
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代碼
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
