网站设计的五彩导航怎么做（网站导航页面制作）
本文目录一览：
- 1、如何设计网站导航系统？
- 2、如何打造完美的网站导航系统
- 3、如何设计出清晰的网站导航？
- 4、网站建设中导航应该如何设计
- 5、那位大神可以告诉在下网页设计中的导航图片变色怎么做？
- 6、网页设计导航是怎么做的
如何设计网站导航系统？
导航模式
网站的导航如何设计，在设计网站导航时首先应该明确用户的浏览习惯，根据用户的浏览习惯，首先会先大概地扫视一遍页面，其次则会开始寻找导航栏，快速从导航栏上找到主要信息，引导用户寻找网站对他有用的信息。一般来说左边的权重要比右边的权重要高一些。
网站的导航信息应该明确，，设计一个有魅力的导航还能留住用户浏览更多的内容信息，带给用户良好的体验。在网站导航设计上应该主要关注一下几点：导航的模式常见的导航模式有很多，例如顶部水平横栏式，垂直导航栏，侧边固定式，滑出或者弹出窗口导航等，通常网站是根据所要展示的内容要点来选择不同的导航。如果网站的内容较少，在网站导航上可以选取水平式导航，这样既可以重点内容而且简单清晰，网站内容较多的时候可以选择抽屉式的导航，用户在浏览网站时各种信息都很明确。如果网站的显示页过长，比较试用的是垂直式导航，方便用户在浏览内容时导 航信息始终保持在一个位置可以被快速找到。
导航内容
网站的导航应该是对整个网站想要展示的信息总结，导航的信息要与详细页面符合，标题的总结要精简，注意网站小内容最好不要以导航的总标题形式出现，可通过细分的下拉菜单，或者以更多形式的小菜单栏里出现。
导航细节
在导航设计时可以设置一个“回到顶部” 的标志，以便用户快速到达头部的导航位置。这样对于网站内容较多用户下滚的内容过长时就可以快速的回到顶部了。
导航创意
我们都喜欢新的东西，在看惯了千篇一律的导航形式如果能给导航加点创意，那么肯定会非常吸引人眼球。
网站的导航在网站设计中有着举足轻重的地位，好的网站导航是成功的一半，所以在网站的导航设置上更加注意。
如何打造完美的网站导航系统
清晰的网站导航，是网站设计中一个重要的组成部分，可以更好的降低网站跳出率，使访问网站的用户更完整的了解网站结构。那么，如何打造完美的网站导航系统，本文从网站优化的角度，描述网站导航设计的五个要点。
第一、导航使用文字编辑
分析：导航栏使用文字编辑，一个最主要的目的就是可以让搜索引擎蜘蛛更容易爬行，使其更清楚的明白网站的结构，及当前所处的位置。
还有一个导航坚持使用文字编辑的原因是，加快网页加载速度，很多网站，为了美观或者其他一些原因，喜欢使用图片、Flash、Javascript生成导航系统，其实使用CSS完全可以实现各种视觉效果，如背景、文字颜色变化、下沙菜单等
第二、缩短内页与首页的距离
分析：我们说，用户从首先进入任何一个内页，点击不超过3-5次，被认为是最合理的。但是，随着网站内容的增多，用户要进入页面的距离也就随之加长，我们可以观察一下，淘宝、京东的页面分类，和内容数量。
要改变这种情况，缩短内页和首页的距离，最好的方式就是拥有一个合理的导航，只有在导航页面，做好合理的分配，通过导航，用户可以在最短的距离内，随心所欲的进入想要进入的页面。
当然，还有一个原因就是，缩短内页和首页的距离，可以使内容获得更好的权重。一般而言，首页的权重是最高的，然后依次传递，只有缩短内页和首页的距离，内页才能获得更多的排名的机会。
第三、导航文字中包含关键词
分析：无论是首页还是栏目页，我们说，在拥有数量众多的内容页时，导航中关于首页、栏目页的链接是获得内部链接最重要的来源。由于内页数量多，锚文本指向首页和栏目页，所传递的权重也就相应越高。
这也是为什么，我们在构建网站时，需要对核心关键词，进行定位、分类，在栏目名称中包含核心关键词，这样一个可以很好的对网站进行分类，知道用户喜欢什么样的内容，还有一个原因，就是可以很好的宣传核心关键词。这个可以参考Q猪博客中，对于分类的规划：网站建设、SEO优化，就是Q猪博客最核心的两个主题。
第四、使用面包屑导航
分析：面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回，我们在浏览网页时，经常可以看到“您当前的位置是。。。”，这就是面包屑导航，可以说，一个结构清晰的网站，都会拥有一个面包屑导航，在内容页面众多的大型网站，尤其需要注意，对面包屑导航的合理使用。
第五、底部避免关键词堆积
分析：很多网站，为了提高关键词的密度，及宣传核心关键词，都喜欢在网站的底部，加上一串关键词。其实，这种底部添加关键词的做法，一方面，有堆积关键词的嫌疑，一方面，对关键词的提权来说，也没有太大的帮助，随着百度算法的不断调整，底部关键词堆积的这种现象也得到了很好的发展。
清晰的网站导航，作为用户进入网站后的GPS系统，可以很清楚的告诉你，你现在处于什么位置，将要去哪一个地方。无论对用户还是对搜索引擎，都可以帮助他们，很好的理解网站的结构。
如何设计出清晰的网站导航？
1.文字导航
网站建设时尽量使用最普通的HTML文字导航，不要使用图片作为导航链接，更不要使用JavaScript生成导航系统。CSS也可以设计出很好的视觉效果。
2.点击距离及扁平化
对于权重普通的网站，内页离首页不要超过四五次点击。要做到这一点，通常应该在链接结构上使网站尽量扁平化。网站导航系统的安排对减少链接层次至关重要。主导航中出现的页面将处于仅低于首页的层次，所以主导航中页面越多，网站越扁平。
3.锚文字包含关键词
导航系统中的链接通常是分类页面获得内部链接的最主要来源，数量巨大，其锚文字对目标页面相关性有相当大的影响，因此分类名称应尽量使用目标关键词。
网站建设中导航应该如何设计
网站导航是影响用户体验的重要因素，只有清晰专业的设计才会给用户带来耳目一新的感觉，从而提升公司的形象，故而在网站建设中，设计师要重视导航的设计。以下是设计网站导航的几个特点。
1、清晰性
清晰性是网站导航设计的首要目标，导航起着引导用户浏览信息的重要作用，而导航设计的清晰与否直接影响了网站信息架构以及用户体验。导航的清晰不仅体现在导航按钮的明朗设计上，还要体现出主导航与副导航之间清晰明了层次性。
2、面包屑导航
面包屑导航是一种线性的导航方式，通过搭建极具层次的网站架构，让用户在访问网站时迅速获取当前页面在网站中的位置，通过提供各个层级的快速入口，方便用户操作。需要注意的是，并不是所有的网站都适用面包屑导航，对于一些层级较深骨架清晰的网站，面包屑导航不失为一种极佳的选择。
那位大神可以告诉在下网页设计中的导航图片变色怎么做？
你确定不是背景变色？
鼠标经过是这样的
背景颜色：
div a { display:block; width:100px; height:30px; background:#fff;}
div a:hover { background:#999;}
背景图片：
div a { display:block; width:100px; height:30px; background:url(../images/1.jpg) no-repick;}
div a:hover { background:url(../images/2.jpg) no-repick;}
没理解可以继续问，望采纳，谢谢！
网页设计导航是怎么做的
1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：
html xmlns="网址"
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title导航栏示例/title
/head
body
ul id="navigation"
li/li
lia href="#"首 页/a/li
lia href="#"我的博客/a/li
lia href="#"互动交流/a/li
lia href="#"开心一刻/a/li
lia 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代码之间，网页此时的效果如图：
