网站导航设计需要注意哪些问题？

导航设计：导航是整个网站的指南针，带领用户准确查找所需的信息。可从以下方面讲述导航设计的重要性：

1）、从优化方面看导航：有些人会把网站导航设计成flash的形式。flash的导航是很有特色，但是不利于优化。蜘蛛抓取网页根据文字和的脚本进行抓取，而flash导航把所有的链接都放到了flash脚本里，蜘蛛是不会抓取flash脚本里的链接的。

2）、从用户体验方面看导航：有些不成熟的网站，尽管导航设计得非常漂亮非常有特色，但是用户体验并不好。

建设网站中的导航栏在设计时有哪些常见的样式？

分享几个常见的导航设计：

1、滑出导航

滑出式导航是现在很流行的一种，当用户打开页面时，第一眼看到的是主要的内容而非菜单，给用户更好的第一印象。响应式全屏滑出导航也可以给人愉悦的体验。

2、全屏导航

全屏导航设计对内容有强调作用，用户可以更加便捷地切换到不同的页面，让内容成为更加触手可及的东西。如果设计的够合理，用户会在无意识间充分运用起它的导航功能。

3、单页滚动导航

对于不含有大量内容的网站而言，单页式的导航的效果非常不错。这样的网站只需要简单的向下滚动操作，内容就会持续不断地到你的眼前。

4、垂直导航

垂直导航最流行的有两种排版方式，一种是隐藏式的导航菜单，需要的时候点击显示。另外一种是固定的侧边栏来展示菜单。它为网站设计提供了一种新的视觉体验。

导航如何使用，还是要结合你的项目的具体特征来决定的。

网页设计导航条

下面的代码，你去看看，不好用再说。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

style type="text/css"

!--

body {

background-color: #0099FF;

}

#navigation {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

#navigation ul {

margin: 0px;

padding: 0px;

list-style-type: none;

}

#navigation li {

border-bottom-style: none;

border-bottom-color: #ed9f9f;

border-top-style: none;

border-right-style: none;

border-left-style: none;

border-top-color: #ed9f9f;

border-right-color: #ed9f9f;

border-left-color: #ed9f9f;

float: left;

}

#navigation li a {

text-decoration: none;

display: block;

padding-top: 5px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 0.5em;

border-right-width: 1px;

border-left-width: 12px;

border-right-style: solid;

border-left-style: solid;

border-right-color: #711515;

border-left-color: #711515;

border-top-style: none;

border-bottom-style: none;

width: 50px;

text-align: center;

margin: 0px;

}

#navigation li a:link, #navigation li a:visited {

color: #FFFFFF;

background-color: #c11136;

}

#navigation li a:hover {

color: #ffff00;

background-color: #990020;

}

#navigation ul li:hover ul,#navigation ul a:hover ul {

visibility: visible;

}

#navigation ul ul {

visibility: hidden;

}

#navigation ul ul li {

clear: both;

}

#navigation ul ul li a {

border: 1px solid #CCCCCC;

}

#navigation ul ul li a:link, #navigation ul ul li a:visited {

color: #000000;

background-color: #FFCC66;

}

#navigation ul ul li a:hover {

color: #006699;

background-color: #99CC00;

}

.nav {

border: 1px solid #0099CC;

position: absolute;

width: 357px;

left: 112px;

top: 34px;

}

.nav ul {

margin: 0px;

padding: 0px;

list-style-type: none;

font-size: 12px;

}

.nav li {

float: left;

}

.nav li a {

border: 1px solid #FF3333;

display: block;

padding: 5px;

background-color: #FFCC33;

text-decoration: none;

}

--

/style

/head

body

div id="navigation"

ul

lia href="#"首页/a/li

lia href="#"关于我们/a/li

lia href="#"产品展示/a

div

ul

lia href="#"产品1一/a/li

lia href="#"产品2一/a/li

lia href="#"产品3一/a/li

lia href="#"产品4一/a/li

lia href="#"产品5一/a/li

lia href="#"产品6一/a/li

/ul

/div

/li

lia href="#"联系电话/a

div

ul

lia href="#"产品1一/a/li

lia href="#"产品2一/a/li

lia href="#"产品3一/a/li

lia href="#"产品4一/a/li

lia href="#"产品5一/a/li

lia href="#"产品6一/a/li

/ul

/div

/li

lia href="#"公司介绍/a/li

/ul

/div

/body

/html