网页设计导航栏代码怎么写（网站建设的导航栏怎么设计）

本文目录

• 网站建设的导航栏怎么设计
• dreamwear怎么制作二级导航代码
• 用DW怎样制作网页导航条鼠标经过的时候和鼠标离开两种背景效果，和两种字体颜色

网站建设的导航栏怎么设计

网站的导航栏是一个网站的精髓，客户就是通过导航栏的指导来一步一步了解我们的网站的，而设计网站导航的目的无非就是提升用户浏览和搜索体验，延长用户网页停留时间、减少跳出率、提高PV等。网站导航如此重要，那么，如何设置才是最好呢?

1、首选文字导航系统

导航系统的链接是内部链接中最重要的，而且文字更方便搜索引擎抓取收录，所以使用文字导航是最好的设置方式。开创云在进行网站导航制作时，最佳的方案往往用html文本导航，再同时使用CSS样式表，能够有效的提升网站的视觉体验。

2、内页级别不要太深

有的网站内页目录层次超过六七层，这对用户找到目标页比较难达成。内页级别在三层以内算是合适，这样能够有效的提升页面的用户体验度。而这里就可以通过导航系统来提升内页的级别!

3、导航锚文本链接关键字

栏目页面要想获得内链的来源就是导航系统，而它的锚文本对于网站的相关性也有着很大的影响，同时还能够有效提升栏目页的权重，因此栏目名称要尽量使用目标相关的关键词。网站导航是部署关键词的重要部位，但是如果部分就里的胡乱堆砌，反而起到相反的效果!

4、打造面包屑型导航系统

面包屑型导航系统目前是非常的流行，关键在于该模型导航在判断页面在网站整个结构中的位置是目前最好的方法，所以在提升网站的用户体验以及网站的优化都有着很好的帮助，特别是对于大型的网站。

5、明确导航在整个页面的位置

明确导航的位置是非常重要的，这点能告诉从搜索引擎直接来的用户进到页面之后然后通过导航系统让自己知道现在在哪个页面，这个页面是目录页面还是内容页面还是什么页面，然后下一步自己能够去哪，我的上一级目录在哪，下一级目录又在哪，从这点可以看出的是只要明确了导航在整个页面的未知，就可以让用户和蜘蛛知道自己到底该去哪，自己的所在的位置在哪等等。

以上就是关于网站建设的导航栏的设计。

dreamwear怎么制作二级导航代码

dreamweaver制作二级导航代码的步骤如下：
1、创建一个包含导航栏文字的div元素。
2、在样式表中添加一个空的div元素，设置样式为“#”和“链接”。
3、将该div元素放在HTML文件中的导航栏中。
4、保存该网页文件。
5、在浏览器中预览该HTML代码效果。

用DW怎样制作网页导航条鼠标经过的时候和鼠标离开两种背景效果，和两种字体颜色

可以直接在DW的代码区域输入相应代码即可解决：
背景图片hover 很简单的
#globalNavi {
width: 908px;
margin: 0 auto 18px;
height: 42px;
overflow: hidden;
}
#globalNavi li {
float: left;
}
#globalNavi li a {
display: block;
}
#globalNavi li.gnavi01 a {
width: 97px;
background: url(../img/template/globalnavi01_out.jpg) no-repeat;
}
#globalNavi li.gnavi02 a {
width: 158px;
background: url(../img/template/globalnavi02_out.jpg) no-repeat;
}
#globalNavi li.gnavi03 a {
width: 118px;
background: url(../img/template/globalnavi03_out.jpg) no-repeat;
}
#globalNavi li.gnavi04 a {
width: 118px;
background: url(../img/template/globalnavi04_out.jpg) no-repeat;
}
#globalNavi li.gnavi05 a {
width: 128px;
background: url(../img/template/globalnavi05_out.jpg) no-repeat;
}
#globalNavi li.gnavi06 a {
width: 128px;
background: url(../img/template/globalnavi06_out.jpg) no-repeat;
}
#globalNavi li a:hover {
background-color: #FFFFFF;
}
#globalNavi li a:hover img {
visibility: hidden;
}
上面是css样式，下面是代码：
《ul id="globalNavi"》
《li class="gnavi01"》《a href="/"》《img src="common/img/template/globalnavi01_out.jpg" alt="Top Page" /》《/a》《/li》
《li class="gnavi02"》《a href="/"》《img src="common/img/template/globalnavi02_out.jpg"alt="30" /》《/a》《/li》
《li class="gnavi03"》《a href="/"》《img src="common/img/template/globalnavi03_out.jpg" alt="竣" /》《/a》《/li》
《li class="gnavi04"》《a href="/"》《img src="common/img/template/globalnavi04_out.jpg" alt="原" /》《/a》《/li》
《li class="gnavi05"》《a href="/"》《img src="common/img/template/globalnavi05_out.jpg" alt="住" /》《/a》《/li》
《li class="gnavi06"》《a href="/"》《img src="common/img/template/globalnavi06_out.jpg" alt="计 /》《/a》《/li》
《/ul》
如果是矩形区域，可以直接用CSS
比如原HTML标签为
《a href="#"》博客《/a》
然后CSS部分加上代码 a {background:blue} 然后 a:hover {background:red} 这样可以实现背景色的转换，如果想要变色的区域不是矩形，那就得准备好原图和激活图了，然后也用 a:hover {background:url()}来实现了，很简单。
上面的是一个背景图片
是用js改变样式
《div style="" onmouseover=“aa(this);” onmouseout="aaa(this);"》 鼠标放上来试试《/div》
《script》
function aa(obj)
{
obj.style.background="blue";//你也可以把后面的值换成图片
//obj.style.background="url(图片路径)";
}
function aaa(obj)
{
obj.style.background="red";
}
《/script》
也可以复制下面代码保存成html即可：
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》无标题文档《/title》
《style type="text/css"》
《!--
img{border:0;}
#nav {height:32px;list-style:none;float:left;}
#nav li{float:left;font-size:14px; line-height:32px;}
#nav li a{color:#FFF;text-decoration:none;display:block;width:78px;height:32px;text-align:center; background-color:#ccc;}
#nav li a:hover{ background-color:#F00;color:#FFF;}
--》
《/style》
《/head》
《body》
《ul id="nav"》
《li》《a href="#"》首 页《/a》《/li》
《li》《a href="#"》我的相册《/a》《/li》
《li》《a href="#"》照片冲印《/a》《/li》
《li》《a href="#"》礼品定制《/a》《/li》
《li》《a href="#"》精彩画廊《/a》《/li》
《li》《a href="#"》中华空间《/a》《/li》
《/ul》
《/body》
《/html》
上面的那个是更换图片的
要更换背景的话在字体所在的单元格写上：onMouseOver="this.bgColor=’想改变的颜色’"
《td onMouseOver="this.bgColor=’想改变的颜色’" onMouseOut="this.bgColor=’’原来的颜色"》导航文字《/td》