《通过Dreamweaver学习HTML DIV CSS教学第14章__导航条的设计》由会员分享，可在线阅读，更多相关《通过Dreamweaver学习HTML DIV CSS教学第14章__导航条的设计（23页珍藏版）》请在金锄头文库上搜索。
1、建网站 http/第14章 导航条的设计l导航条在网站网页上具有导航作用，并是指引和方便浏 览者访问另一页面的快速通道。网站导航是网站的指路 灯，也是网站内容的总体概述，同时也是搜索引擎收录 网站的重要权衡因素。创建一套良好的网站导航系统将 会使网站更易访问。建网站 http/14.1 导航条的风格选择l导航条的风格多种多样，有适合国字型的导航布局、有 适合T字型的导航布局、有适合左右和上下宽度的导航 布局。导航条使用的技术主要包括CSS+DIV的导航、框 架导航和表格布局的导航。建网站 http/14.1.1 导航条的目的l许多网站缺乏方便的导航系统，也未提供有助于浏览者找到所需信息的帮 助
2、。这些网站把所有的导航信息都放在杂乱的按钮和文本链接上，从而造 成浏览者在寻找有关内容时非常困难。因此，创建一个便于浏览者识别和 操作的网站导航系统是必不可少的。建网站 http/14.1.2 导航条的设计原则和技巧l网站导航系统在设计上通常遵循一些基本的原则，下面 讲解关于导航设计的有用技巧。l1尽可能多地提供相关资源的链接l2一致性原则l3网站板块和层次划分合理l4常用的导航技巧建网站 http/14.1.3 设计导航的技术l导航设计的技术一般都是根据布局的技术来确定。如果 一个网站是框架布局，那么相应的导航设计也是基于框 架技术实现的。下面是现在比较流行的导航设计技术。lCSS+DIV设
3、计：完全采用CSS设计导航。lFLASH设计：用Flash动画制作导航，其优点是生动、 形象。l框架设计：导航是框架的组成部分之一。一般用于论坛 或网站后台管理系统中。l表格设计：采用表格技术制作导航。 建网站 http/14.1.4 导航条的布局方式l导航条是网站风格的主要组成部分。一个好的导航可以 在确定网页风格的同时，也会使页面层次清晰。导航制 作一直是设计师们需要重点思考的问题，也是网页创意 的重要体现。现在互联网最流行的导航布局方式有以下 几种。建网站 http/14.1.4 导航条的布局方式l1水平导航条l水平导航条以水平方式排列导航项。 建网站 http/14.1.4 导航条的布
4、局方式l2垂直导航条l垂直导航条以垂直的方式排列导航项。 建网站 http/14.1.4 导航条的布局方式l3POP导航条lPOP导航条以体现网站的个性为主，不拘一格，重点在于表现网站的与众 不同。 建网站 http/14.1.5 各式各样的导航l虽然大部分网站以水平导航为主，但大部分的导航在颜 色搭配、字体控制和导航框等选择上都有自己的特色， 下面是流行在网上的各式各样的导航条。l效果比较简单的导航如图所示，在导航条基础上进行加 光等适当地修饰导航。建网站 http/14.1.5 各式各样的导航l同样是水平导航，可以用绘图软件自带的小图标或英文拼音美化导航，l组织有序的导航条适合网页较多的网
5、站。下面是一个组织有序的导航条， 建网站 http/14.2 导航条制作l上一节介绍了导航制作的目的、技巧以及导航条的风格 等。在这一节中，将分别通过表格技术说明水平导航条 和垂直导航条的制作方法。由于POP导航使用较少，读 者如对POP导航条感兴趣可以在水平垂直导航条制作方 法的基础进行扩充，制作出适合自己网站的导航条。建网站 http/14.2.1 水平导航条的制作l水平导航条制作方法。具体步骤如下：建网站 http/14.2.1 水平导航条的制作l在上一章中介绍的页面头部所用到的导航就是一个典型的水平导航条，在 这一小节中将重点介绍其制作方法。具体步骤如下：建网站 http/14.2.2
6、 垂直导航条的制作l在左右两栏目布局的网站和一些子页面中，垂直导航条 也是比较常见的导航形式。在现实应用中，垂直导航条 更多是几张图片，或文字垂直排列在单元格中。其制作 步骤如下：建网站 http/14.2.2 垂直导航条的制作设置各导航栏的链接。此处将各链接设置为空链接。具 体的设置方法读者可参照上一小节水平导航条制作中的 步骤。设置完成后的效果如图所示。 建网站 http/14.3 样式调整及修改l通过前面的步骤，把水平导航栏和垂直导航栏的大体轮 廓完成了。但是，水平导航看起来有点单调，垂直导航 栏的文字颜色与背景太相近，不适合浏览。CSS有强大 的表现功能，接下来用CSS样式对导航栏进行
7、调整和修 改。建网站 http/14.3.1 水平导航条的样式调整及修改l在14.2.1中介绍了水平导航条的制作，但其美观效果并不能达到一 个网页的要求，需要对其进行样式控制。下面是其样式调整的具体 步骤：建网站 http/14.3.1 水平导航条的样式调整及修改l将导航条放入上一章制作的页面头部中，可以看到页面头部的最终 效果，如图所示。建网站 http/14.3.2 垂直导航条的样式调整及修改l上一节中介绍的垂直导航条制作的最终效果比较粗糙， 对整个网页的美观程度有影响。下面通过样式的调整， 让其变得美观实用。具体步骤如下：建网站 http/14.3.2 垂直导航条的样式调整及修改l调整导
8、航条链接的样式。单击CSS面板的【编辑样式】按钮，弹出 【新建CSS规则】对话框，进行如图左所示的设置。 按【确定】按钮后 ，弹出CSS规则定义对话框，选择【分类】列表框中的【类型】选项，对 链接的字体大小、粗细、修饰和颜色进行设置，如图右所示。 建网站 http/14.3.2 垂直导航条的样式调整及修改l分别双击导航条的链接文字，在【属性】面板中单击【样式】右侧的三角 按钮，在弹出的下拉列表中选择样式menu选项，设置其CSS样式如图左 所示。单击【文件】|【保存】命令，保存文件index.html。按F12 键浏览对样式调整后的导航条。可以看到如图右所示的效果图。建网站 http/14.4 专家总结l本章从理论和实践两个方面介绍了关于导航条设计和制 作的知识，重点和难点均在于掌握导航条的构思设计， 以及页面头部与整体的搭配，读者应注意掌握。
