导航系统对网站的重要性 #工业品网络营销

销百科：导航系统对网站的重要性。

今天我来介绍一下导航系统对网站的重要性，设置导航注意事项有哪些？

·站在用户的角度，导航系统需要解决两个问题：一个是我现在在哪里，用户可能从首页进入网站，也可能从任何一个内页进入。再点击了多个链接后，用户已经忘了怎么来到当前页面的导航系统，这时就要清楚地告诉用户现在正处在网站总体结构的哪一部分。

·另一个是我下一步要去哪里，有时候用户知道自己想做什么，页面的导航设计就要告诉用户点击哪里才能完成目标。有时候用户不知道自己该干点什么，网站导航就要给用户一个好的建议，引导用户流向网站，目标完成页面。如网站上的相关推荐，网站地图，站内搜索框等都有助于帮助用户点击到下一个页面。

·站在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小时内与您取得联系。