1、网站的导航设计原则?
你说的是网站的导航条吧?
网站导航条的设计原则是精简——使用文字而不使用图片或Flash;
因为搜索引擎在抓取的时候只看的懂文字,而不认识图片与Flash;
其次,导航条的设计无论是颜色还是方案都要与整个页面符合!否则的话,视觉角度就不好了!
最主要的是导航条的布局要简单,让用户一眼看了就明白!
2、网页设计导航条
下面的代码,你去看看,不好用再说。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品展示</a>
<div>
<ul>
<li><a href="#">产品1一</a></li>
<li><a href="#">产品2一</a></li>
<li><a href="#">产品3一</a></li>
<li><a href="#">产品4一</a></li>
<li><a href="#">产品5一</a></li>
<li><a href="#">产品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">联系电话</a>
<div>
<ul>
<li><a href="#">产品1一</a></li>
<li><a href="#">产品2一</a></li>
<li><a href="#">产品3一</a></li>
<li><a href="#">产品4一</a></li>
<li><a href="#">产品5一</a></li>
<li><a href="#">产品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">公司介绍</a></li>
</ul>
</div>
</body>
</html>
3、网页设计导航是怎么做的
1、打开Deamweaver8,新建一网页文件。接着输入以下导航菜单的内容:
<html xmlns="网址">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航栏示例</title>
</head>
<body>
<ul id="navigation">
<li></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>
<li></li>
</ul>
</body>
</html>
2、此时对应效果如图:
3、接下来准备相关的导航按钮图片(可以事先利用PS制作好)。
4、然后将以下CSS代码加入到<head></head>之间:
<style type="text/css">
body {text-align:center;}
#navigation
{ list-style-type:none; height:auto;}
#navigation li { width:154px; height:60px; text-align:center;
float:left; padding-top:18px;font-size:20px; font-family:"微软雅黑", "宋体", "隶书";
background-image:url(images/noactive.jpg);}
a {width:154px; height:72px;}
a:link { text-decoration:none; color:#FFFF00;}
a:visited { text-decoration:none; color:#FFFF00; }
#navigation li:hover { color:#CC0000; text-decoration:underline;
background-image:url(images/active.jpg);}
a:hover{ color:#CC0033;}
#left {background-image:url(images/left.jpg); width:22px;}
</style>
5、在加入CSS代码之间,网页此时的效果如图:
4、网站导航的设计有哪些特点
你好、网站导航是影响用户体验的重要因素,只有清晰专业的设计才会给用户带来耳目一新的感觉,从而提升公司的形象,故而在网站建设中,设计师要重视导航的设计。以下是设计网站导航的几个特点。
1、清晰性
清晰性是网站导航设计的首要目标,导航起着引导用户浏览信息的重要作用,而导航设计的清晰与否直接影响了网站信息架构以及用户体验。导航的清晰不仅体现在导航按钮的明朗设计上,还要体现出主导航与副导航之间清晰明了层次性。
2、面包屑导航
面包屑导航是一种线性的导航方式,通过搭建极具层次的网站架构,让用户在访问网站时迅速获取当前页面在网站中的位置,通过提供各个层级的快速入口,方便用户操作。需要注意的是,并不是所有的网站都适用面包屑导航,对于一些层级较深骨架清晰的网站,面包屑导航不失为一种极佳的选择。
3、关键词
导航系统中的链接通常是网站获得内部链接的最后主要来源,在导航栏目设计中,尽量使用目标关键词,并对重要栏目添加目录式的链接,以提高网站关键词的权重。需要注意点是这虽然是优化网站的好办法,但在导航设计中要注意关键词的密度。
如果你有其它的疑问可以继续追问,如果觉得有帮助,请采纳,谢谢!
5、网站导航设计该具备哪些功能
1. 导航与内容要有明显的区别。导航的目录或主题种类必须清晰,不要让用户感到困惑,如果有需要突出的区域,则应该与一般网页在视觉上有所区别。
2. 导航的链接必须全是有效链接。无论是一般导航还是有下拉菜单的导航,里面的所有文字都应该是有效的链接。
3. 准确的导航文字描述。用户在点击导航链接前对他们所找的东西有一个大概的了解,链接上的文字必须能准确描述链接所到达的页面内容。
4. 搜索导航结果。搜索的结果一定不要出现无法找到的结果,因为这是很让用户失望的,如果无法精确找出结果,搜索功能应该实现对错字、类似产品或相关产品给出一个相近的模糊结果。
6、什么是网页设计导航条
上面有各个栏目,例如百度,新闻,网页,知道,这一横向就是导航条,放的位置比较明显,导向的作用!
7、如何设计网站导航系统?
导航模式
网站的导航如何设计,在设计网站导航时首先应该明确用户的浏览习惯,根据用户的浏览习惯,首先会先大概地扫视一遍页面,其次则会开始寻找导航栏,快速从导航栏上找到主要信息,引导用户寻找网站对他有用的信息。一般来说左边的权重要比右边的权重要高一些。
网站的导航信息应该明确,,设计一个有魅力的导航还能留住用户浏览更多的内容信息,带给用户良好的体验。在网站导航设计上应该主要关注一下几点:导航的模式常见的导航模式有很多,例如顶部水平横栏式,垂直导航栏,侧边固定式,滑出或者弹出窗口导航等,通常网站是根据所要展示的内容要点来选择不同的导航。如果网站的内容较少,在网站导航上可以选取水平式导航,这样既可以重点内容而且简单清晰,网站内容较多的时候可以选择抽屉式的导航,用户在浏览网站时各种信息都很明确。如果网站的显示页过长,比较试用的是垂直式导航,方便用户在浏览内容时导 航信息始终保持在一个位置可以被快速找到。
导航内容
网站的导航应该是对整个网站想要展示的信息总结,导航的信息要与详细页面符合,标题的总结要精简,注意网站小内容最好不要以导航的总标题形式出现,可通过细分的下拉菜单,或者以更多形式的小菜单栏里出现。
导航细节
在导航设计时可以设置一个“回到顶部” 的标志,以便用户快速到达头部的导航位置。这样对于网站内容较多用户下滚的内容过长时就可以快速的回到顶部了。
导航创意
我们都喜欢新的东西,在看惯了千篇一律的导航形式如果能给导航加点创意,那么肯定会非常吸引人眼球。
网站的导航在网站设计中有着举足轻重的地位,好的网站导航是成功的一半,所以在网站的导航设置上更加注意。
8、浅谈网页中导航的设计技巧
如下是我自己的体会
1、导航一般要求放在网页最醒目的地方,例如头部横向导航,侧栏竖向导航。
2、导航的文字要清晰,一般要粗体,并且比正文的字体要大一号。
3、导航不要用图片按钮,一定要用文字描述,这样做是为了让搜索引擎清楚你站的主题,以便在搜索排名中获得更靠前的位置;图片一般是用作导航的背景,而链接肯定要用文字。
4、导航栏目不能随意修改,那样会让搜索引擎认为你站不稳定,会降权。