1、授课班级授课日期授课题目：第五章 网页元素导航目的要求：了解导航的设计原则 ；会分析判断导航的优劣 ；会用 PS 临摹优秀导航 重点难点：导航基本常识；导航的常见表现形式；导航的设计原则组织教学：点名考勤 引入新课 讲解新课 总结 学生练习 巡回指导 总结问题 总结复习导入新课：在现代生活中，人们随处都需要导航，比如：引导消费的“购物导航” ，方便汽车随时搜索路线和定位的“车载 GPS 导航”等。在互联网世界中，网站的导航就是导引浏览者畅游网络、获取信息的工具。提问： 文字的常识？ 特效字的常见表现形式？ 特效字的设计原则？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：一、
2、导航栏简介举例子：书的索引目录；手机 GPS 导航；地图；高速路标等等看看现在的互联网，不管是商业网站还是个人网站，也不管是网站的风格是简洁还是繁复，是卡通还是实,不管这些网站是什么样子，它们都有导航栏。导航条在网站网页上具有导航作用，并是指引和方便浏览者访问另一页面的快速通道。网站导航是网站的指路灯，也是网站内容的总体概述，同时也是搜索引擎收录网站的重要权衡因素。创建一套良好的网站导航系统将会使网站更易访问。 二、使用导航菜单的目的（一）页面导航使用户在网站浏览中有明确的方向（二）可以快速链接到相关内容页面 三、广义导航栏导航栏一般包括五个元素（一）网站的 logo 标识我们凭借网站的 LO
3、GO 标识来识别目前所在的是哪个网站。它就好像是商标，有其独特的识别性和显著性。我们应该一眼就能分辨出一个 logo 标识和其他 logo 标识的区别。由于网站的特殊性，网站 logo 不应该过于复杂或者花哨。一般很难看清网站的不算一个好标识。（二）网站的栏目（主菜单及子菜单）顾名思义，栏目就是旺仔结构化后的各个子版块，不同的版块决定了彼此不同的种类的内容，对于那些交大的网站来说，我们还需要对栏目进行二次分类。也就是常说的“二级导航”。回到首页这是导航栏中非常重要的一个元素，也许你不知道该怎样去网站的其他地方，这时候点击“回到首页”就能够回到最开始的地方。不管你是否迷路，你都能随时从新开始。（
4、三）搜索工具很多人喜欢搜索工具。有些人一到某个网站就开始寻找搜索框，就好像他们一到商场就找服务员一样（这类大多是男性）。对于那些大型网站尤其如此，用户没有很多精力和时间去寻找内容，特别是他们觉得要找的内容比较冷门的时候. 此外，由于导航栏那里的空间有限，如果放太多附加功能可能会有点喧宾搜索工具要注意的是，清晰的告诉浏览者“搜索工具在这里”。不要使用自以为是的用词，例如“找你所找”、“我帮你查查”之类的词语。（四）附加功能（链接及位置提示）这里可以说是一个使用工具栏，它同样指向一些重要的页面，但这些页面并不属于网站的主要内容。他们一般是针对网站本身所需要的功能，例如帮助、网站地图、联系我们等等。
5、四、导航总的表现形式（一）水平导航条(横排导航)水平导航条以水平方式排列导航项。 横向文本导航可应用于网站页面内容多、风格多样的门户网站内容部分logo（二）垂直导航条（纵排导航）垂直导航也是网站导航的一种重要形式，垂直导航是指放页面的左右两侧从上至下排列的一种导航方式垂直导航菜单（三）pop 导航条（特殊排列）POP 导航条以体现网站的个性为主，不拘一格，重点在于表现网站的与众不同。 （四）下拉菜单（水平和垂直）当页面版式比较紧凑时，页面设计适合使用下拉式导航菜单。它能够充分利用现有页面空间，并分类显示内容 （五）Tab 导航适用于导航菜单文本较少的页面，可以强化页面视觉效果 Tab标签导航
6、五、导航栏设计原则及技巧（一） 注意超链接颜色与单纯叙述文字的颜色WWW 的语言 HTML 允许网页设计者特别标明单纯叙述文字与超链接的颜色，以便丰富页面的色彩呈现。如果您的网站充满知识性的信息，欲传达给访问者，建议您将网页文字与超链接颜色设计成较干净素雅的色调，会较有利于阅读纯粹的叙述文字采用较暗、较深颜色来呈现(如黑色、墨绿色、暗褐色)，超链接文字则以较鲜明抢眼的色彩来强调，至于探访过的链接则采用较淡颜色。（二）测试所有的超链接与导览按钮的真实可行性网页发布之后，第一件该做的事，是逐一测试每一页的每一个链接与每一个导航按钮的真实可行性。彻底检验有没有失败的链接，这是一个负责任、够水准的网页
7、设计者对自己作品应有的基本品质要求。（三）让超链接的字串长短适中且走文自然抓住能传达主要讯息的字眼当做超链接的锚点(anchor)，可有效地控制住超链接的字串长度，避免字串过长(如整行、整句都是锚点字串)或过短(如仅一个字当做锚点) ，而不利于读者阅读。（四）在较长的页面内提供目录表与大标题理想的页面长度以不超过三、四个荧幕页面为佳。但是如果基于某些特殊理由，一定要做得很长，那么不要忘了在此页面最上头，提供一个目录表，以利清楚阅读。尤其重要的是，在这些标题与目录表的 HTMLsource 里分别设置锚点，并链接到锚点，以使页面真正发扬 WWW 高互动性、高便捷性功能。（五）暂时不提供超链接到尚
8、未完成的网页如果你网站还没完成制作好，建议您先暂时别发布，等到完工后再正式放到服务器上。（六）不要在一篇短文里提供太多的超链接适当、有效率地使用超链接，是一个优良网页导航系统不可或缺的条件之一。但过份滥用超连结，造成短短的一篇文章里却处处是链接，反而让浏览者浏览不够流畅。另外链接超过一百个还会被搜索引擎认为作弊。（七）当导览按钮连结到目前此页时各 Webpage 若重复使用同一组的导览按钮，无可避免地会产生某一导览按钮连结到目前此页的情形。为达成界面设计的一致性，并没有绝对的必要性拿掉此导览按钮，但 Webpage 设计者可让此按钮不再具有超连结的功能 ;或将此按钮的彩度、亮度降低(如深绿色变
9、成淡绿色，亮红色变成暗红色)，使读者可清楚地意识到这个暗设下来的导览按钮不再具有超连结的功能。（八）在具有前后连续顺序的文件里提供必要的连结将篇幅过长的文件分隔成数篇较小的 Webpages 大大地增加了界面的亲和性，但在导览按钮与超连结的配置上，Webpage 设计者则要更细心周全地安排，使得读者不论身处您站台的哪一阶层，依然能够快速便捷地通往其他任何一个页面。Webpage 设计者应特别注意提供“上一页” 、“下一页” 、“回子目录页”与“回首页”简明扼要地标明此页、上一页与下一页文件的标题或内容梗概。提醒读者某一系列文件已到尽头。六、案例分析（一）工业化网站导航 （二）异形导航 （三）动感网球导航 （四）MP3 专卖网站导航 （五）金属镂空导航 总结巩固：导航的基本常识；导航的常见表现形式；导航的设计原则布置作业：课后作业 4、5参考资料：教材教学后记：编写日期： 编写人员：
