1、 2023-1-142 任务目标任务目标:（1）认识网页导航的主要作用；（2）掌握网页导航的分类与方向；（3）掌握用CSS创建网页水平导航与垂直导航的方法。任务6.2设计网页导航 6.2.1网页导航概述网页导航概述网页导航的目的是使网站的层次结构以一种有条理的方式清晰展示出来，引导用户毫不费力地找到所需信息，使用户在浏览网站的过程中不至于迷失。它的作用概括起来主要有以下几个方面。（1）定位显示位置。和现实生活不同，互联网无法体现类似东西南北、前后左右的方向感，为使用户不迷失在庞大的互联网信息中，需要由网页导航给用户提供信息来找到方向感，如“我在哪里？”“这里有哪些内容？”“我还能去什么地方？”
2、“怎样去？”等。任务6.2设计网页导航 （2）展现网站架构。网页导航需要提供信息来展现整个网站内容的架构，如网站包括哪几部分（如首页、公司简介、产品等）、主要板块的内容分类（如当当网站按照商品种类划分产品）、每个分类中的细化分类（往往称为二级菜单）、特殊信息的入口（如热点、新闻等）。（3）显示品牌形象。不同的品牌诉求，采用不同的网页导航风格，主要体现在颜色、线条、形状、质感等。（4）影响用户体验。尤其对于购物网站来说，导航的设计对转化率、销售额影响巨大。如果导航设置不当将导致顾客找不到要购买的商品，使客服中心等服务部门成本增加，降低用户在网站中的沉浸感等。任务6.2设计网页导航 6.2.2网页
3、导航分类网页导航分类1水平栏导航水平栏导航水平栏导航是最流行的网站导航设计模式之一，它常用于网站的主导航菜单，用于显示网站的内容分类，如图所示。水平栏导航设计模式有时设有下拉菜单，当鼠标移到某个菜单项上时，会弹出对应的二级子导航项。任务6.2设计网页导航 2垂直栏导航垂直栏导航类似水平栏导航，垂直栏导航也是当前最通用的模式之一，几乎存在于各类网站上。垂直栏导航可以单独使用，作为次导航，也常常与子导航菜单结合用于包含很多链接的网站主导航，如图所示。任务6.2设计网页导航 3选项卡导航选项卡导航选项卡导航几乎可以设计成用户想要的任何样式，如立体效果的标签、圆角标签，以及简单的方边标签等。选项卡导航
4、存在于各种各样的网站中，一般是水平方向的，也有垂直的（堆叠标签）。选项卡导航对用户有积极的心理效应，但不太适用于链接很多的情况，如图所示。任务6.2设计网页导航 4菜单导航菜单导航菜单导航主要有出式菜单和下拉菜单两种，出式菜单（一般与垂直栏导航一起使用）和下拉菜单（一般与水平栏导航一起使用）是构建健壮的导航系统的良好方法，它使得网站整体上看起来很整洁，而且使得深层结构页面很容易被访问，如图所示。任务6.2设计网页导航 5面包屑导航面包屑导航面包屑导航是二级导航的一种形式，是辅助网站的主导航系统。面包屑对于多级别、具有层次结构的网站特别有用，它可以帮助访客知道当前自己在整个网站中所处的位置。如果
5、访客希望返回到某一级，只需要单击相应的面包屑导航项即可，如图所示。任务6.2设计网页导航 6标签导航标签导航标签导航经常被用于博客和新闻网站，它们常常被组织成一个标签云，导航项可能按字母顺序排列，或者按流行程度排列。标签导航也多用于二级导航，可以提高网站的可发现性和探索性，如图所示。任务6.2设计网页导航 7页脚导航页脚导航页脚导航通常用于次要导航，而且通常用于放置其他地方都没有的导航项。页脚导航一般使用文字链接，偶尔带有图标，如图所示。任务6.2设计网页导航 8个性化导航个性化导航有些网页的导航以体现网站的个性为主，不拘一格，采用各种样式力求使网站与众不同，如图标样式导航、气泡样式的导航、三
6、维样式导航，以及JavaScript动画导航等，如图所示。任务6.2设计网页导航 6.2.3网页导航方向网页导航方向网页导航的方向总地说来主要有横向、纵向和不规则三种。1横向导航横向导航横向导航是网页主导航采用最多的形式，而且主导航的项目个数通常在512个。对于有非常复杂的信息结构且有很多模块组成的网站来说，横向导航应该使用水平栏导航和下拉菜单导航相结合的方式进行构建。任务6.2设计网页导航 2纵向导航纵向导航纵向导航几乎适用于所有种类的网站，尤其适合有大量主导航链接的网站。由于纵向导航菜单可以不受页面长度限制，因此可以含有很多链接。但是需要注意，纵向导航太长、导航项目太多时，容易削弱用户对已
7、浏览项目的印象。纵向导航可以放在页面的左侧，也可以放在右侧，但是根据用户从左向右的习惯，左边的纵向导航比右边的纵向导航效果要好。任务6.2设计网页导航 3不规则导航不规则导航不规则导航打破了网页常见的“横平竖直”的布局形式，它可能是倾斜的，也可能是波浪形的，甚至是分散的。不规则导航可以充分体现网站的个性与特色，带给用户强烈的视觉冲击，但是，不适合信息量特别大、需要有较多分类的网站。任务6.2设计网页导航 6.2.4为为“中国地理中国地理”网页增加垂直方向导航网页增加垂直方向导航任务6.2设计网页导航请在Dreamweaver中完成案例操作。用CSS设计制作网页导航，是把导航项目看做列表项目，通
8、常用标签进行定义，然后设置列表项与超链接的样式，这样不仅将导航项目与样式进行了分别控制，更有利于导航项目的增删与修改。下面为“中国地理网页”添加垂直方向导航条。任务6.2设计网页导航.vnav li acolor:#000;text-decoration:none;background-color:#D9FFA0;text-align:center;line-height:32px;display:block;width:189px;margin-bottom:2px;.vnav li a:hovercolor:#ADB96E;background-color:#fff;CSS参考代码如下。.
9、vnav li list-style-type:none;.vnavmargin:0;padding:0;6.2.5为为“中国地理中国地理”网页增加水平方向导航网页增加水平方向导航水平方向导航与垂直方向的导航创建方式类似，但是由于列表项目本身是垂直方向排列，因此需要设置float属性来使导航项目浮动以达到水平排列的效果。继续为“中国地理”网页添加水平方向的导航。任务6.2设计网页导航请在Dreamweaver中完成案例操作。任务6.2设计网页导航.hnav list-style:none;padding:0px;.hnav lifloat:left;CSS参考代码如下。.hnav li acolor:#000;text-decoration:none;background-color:#ADB96E;text-align:center;display:block;height:auto;line-height:35px;width:118px;margin-left:2px;.hnav li a:hoverbackground-color:#093;color:#FF0;.hnav.current a background-color:#093;color:#FF0;2023-1-1421
