实验八 制作网页导航条

导航条制作【实训目标】导航条制作1.在网页中插入标题、文字。

2. CSS对HTML标签的美化。

【实训课时】2学时【背景资料】导航条是网页设计中不可缺少的部分，它是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容，是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。

利用导航条，我们就可以快速找到我们想要浏览的页面。

导航条的目的是让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并管理信息，让用户在浏览网站过程中不至迷失。

为了让网站信息可以有效地传递给用户，导航一定要简洁、直观、明确。

作用就是你有什么需要如浏览新闻，你可以直接点击“新闻”便可进入新闻页面。

在企业网站上，导航条上常见的有：产品介绍，公司简介，最新产品，联系我们等。

【实训环境】一、PC最低配置要求如下——操作系统：Windows XP / Windows Vista / Windows 7CPU：英特尔奔腾4 3.0 GHz 或AMD 速龙3200+物理内存：512M硬盘空间：12 GB显卡：带有256 MB 显存、支持DirectX 9.0c、核心达到NVIDIA GeForce 6600 GT 或ATI Radeon X1600 XT 级别声卡：支持DirectX 9.0c二、PC软件要求如下——安装Dreamweaver CS4版本，安装office2003以上版本【实训内容】本节实训课的安排是完成导航条的制作。

导航栏是一个网站的大纲，可以引导浏览者快速到达所要访问的页面。

在大多数的网站导航中都使用项目列表来制作。

任务实施步骤：1. 主导航条制作（1）启动Dreamweaver CS5，打开index.html页面。

（2）新建CSS文件。

执行菜单栏上的“文件”→“新建”。

在弹出的“新建文档”对话框中，选择新建“空白页”，在“页面类型”中选择CSS，单击“创建”，建立文件。

本案例将练习 Dreamweaver 中行为的使用。

案例的制作思路：(1) 向预留的导航栏位置插入嵌套表格。

(2) 插入导航栏图片。

(3) 对图片添加“交换图像”行为，使得鼠标移到图片上时文字发光，如图所示，鼠标移开图片时文字恢复，如图所示。

图鼠标移到导航栏上图鼠标从导航栏移开在介绍案例的具体实现之前，先来介绍相关的知识。

8.3.1 行为概述Dreamweaver 提供了一种称为“行为”的机制，帮助用户构建页面中的交互行为。

行为，就是在网页中进行一系列动作，通过这些动作实现用户与页面的交互，是一个带有面向对象设计思想的工具。

事实上，行为是由预先书写好的JavaScript 代码构成的，使用它可以完成诸如弹出浏览器窗口、显示-隐藏元素等任务。

利用Dreamweaver 中的行为，不需要书写代码，就可以实现丰富的动态页面效果。

行为有 3 个重要的组成部分：对象、事件和行为。

对象是产生行为的主体，许多网页元素都可以成为对象，如图片、文字、多媒体文件等。

事件是触发动态效果的条件，它可以被添加到各种页面元素上，也可以被添加到 HTML 标记中。

不同的浏览器支持的事件种类和数量不一样，通常高版本浏览器支持更多的事件。

行为通过动作来完成动态效果。

例如，弹出信息、改变属性、交换图像等都是动作。

动作是一段JavaScript 代码，在Dreamweaver CS3 中使用内置的行为，系统会自动往页面中添加JavaScript 代码，用户完全不必自己编写。

Dreamweaver 内置了很多行为动作，形成一个JavaScript 程序库，用户还可以到官方网站下载并安装更多的行为。

另外，如果精通JavaScript 语言，也可以编写自己的行为，添加到Dreamweaver CS3 中。

选择“窗口”→“行为”可以显示“行为”面板。

在网页中添加行为时，首先需选择要添加行为的对象，然后在“行为”面板中单击按钮打开“动作”菜单，如图所示。

自己制作动感的flash导航条最近做网页美化的时候自己做了一个flash的导航条，由于看到目前网上的一些有关此类的教程太过复杂而且问题交待不是很清楚，因此在这里再跟大家分享一下一个基本的flash导航条的制作方法：所谓“导航条”就是指一般置于网页上方、可以链接到不同网页位置的按钮菜单。

所谓“动感效果”，是指可以响应鼠标在各个按钮图标上移动和点击时产生不同的画面显示效果，此外还可以添加音频等多媒体效果。

下手开始制作之前，首先需要筹划一下，导航条在原始状态、鼠标移动到按钮上方时、以及点击时究竟需要显示怎样的效果。

从简单的来说，我可以设置两种显示状态，一种就是上面图中所示的原始状态，另一种就是文字呈反白显示，按钮图标更突出显示（从原有的水晶覆盖层下显示改为到覆盖层上方显示）。

这就需要准备两套不同显示状态下的图片（如果你愿意，当然也可以只用一套图片，而用flash中编辑图片效果的方式来改变另一种状态下的显示效果）。

因为原有的静态导航条是我用Photoshop做的，因此准备两套图片不需要新找素材制作，现成就可以拿来使用。

打开flash mx，文件—导入—导入到库，把需要使用的图片都导入到当前的库中，其中一张底图如下：其他图片则是各个按钮的原始图标图片。

按<F11>可以显示库中的内容，如下图：接下来，从库中将那张长条形的底图拖入到场景中，并且设置背景文档的大小与底图大小相同：下面制作各个按钮，插入—新建元件，“行为”选择“按钮”，名字可命名为“首页”，单击确定按钮进入按钮的编辑界面，在上方选中第一帧“弹起”帧（即导航条的原始显示状态），然后将之前导入到库中的代表“首页”的按钮图标拖入到编辑区中，然后添加静态文字，设置字体样式，字体颜色为黑色，将文字和图片的相对位置设置整齐，如下图所示：然后在上方选中“弹起”帧，右键选择“复制帧”，再选中第二帧“指针经过”帧（即响应鼠标动作的显示状态），右键选择“粘贴帧”，然后在“指针经过”帧的编辑区内将文字颜色改为浅蓝色，如下图所示：再将这个“指针经过”帧复制一下，粘贴到“按下”和“点击”两个帧中。

【第一步】我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放我们的导航的哟~代码如下：HTML代码：<div id="nav"></div>CSS代码：#nav{width:960px;height:35px;background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/margin:0 auto;/*水平居中*/margin-top:30px;/*顶部30px*/}还有一点需要提醒的是，为了页面在浏览器的兼容性，不要忘记在CSS文件顶部加入标签重置代码哟~代码：body,div{padding:0; margin:0;}这里就不多说了，不明白的就看，课程顶部的课程关键词怎么样，作出来了没有，效果是不是一个灰色条，位于页面的正中间，并且所有浏览器效果一样呢~呵呵(如果没有做出来证明你没有认真看教程哟~用这种态度看教程会学不好的，本身我把整个XHTML+CSS的理论都压缩到教程里了，或者说教程的“知识点浓度”很高，有时需要你一字不漏的去品我说的话，不要一目十行的去看哟~只要你把我写的教程逐字逐句的研究透了，KwooJan保证你以后只要做出个页面就很Easy 的兼容各种浏览器，并且代码绝对的精简！CSS文件加载速度大大提升哟~)【第二步】盒子做好了，我们就要往里面放导航条中的内容了“CSS学习学前准备入门教程提高教程布局教程精彩应用”，如果我们把这内容(目前有6个)，当成酒杯的话，如果直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有，但是我们平时会用一个隔板将每个酒杯隔开，这样就是酒杯很有序的放入盒子，并且牢稳而且防震，方便使用！现在我们把这个隔板叫做“有序列表”起个英文名字叫：ul,里面的每个单元格我们也给起个英文名字叫“li”，大家想想里面的这个ul是不是和盒子里面的空间一样大，小了，酒杯放不进去，大了杯子就会不稳，所以我们定义UL的时候大小一定也要和外面的盒子一样大哟~,所以呢，我们的代码就知道怎么写了吧HTML代码<div id="nav"><ul><li>CSS学习</li><li>学前准备</li><li>入门教程</li><li>提高教程</li><li>布局教程</li><li>精彩应用</li></ul></div>CSS代码：#nav ul{width:960px;height:35px;}效果作出来了没有，下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试，总结规律)：效果不一样吧，没关系，IE6中盒子被撑大，FF中却没有，但是我们的“酒杯”却出来了，还有我们不希望我们的酒杯纵向排列，而是横向排列，怎么办呢？给大家一分钟时间想~~~想出来了没有？什么没有？没关系，我带着大家想想，因为<li>标签也是块状元素，所以他也有块状元素的“霸道”，不允许其他元素和自己处于同一行，总共六个<li>,所以他们六个就像台阶似的纵向排列起来了，我提示到这里，大家应该知道怎么做才能让这些“酒杯”横向排列了吧！^_^对喽~用浮动Float！可是让谁浮动呢，当然是<li>标签喽~代码如下：#nav ul li{ float:left;}效果是不是和下面的一样呢大家会发现虽然“酒杯”横向排列了，但IE6和FF中的效果还是不一样的1）盒子(#nav)高度不一样2) 在FF中“酒杯”前面有个大黑圆点，而IE6中却没有！解决上面这两个问题，也很容易，如下1）做到这里标签ul和li有没有进行重置？只要我们在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中“body,div,ul,li{padding:0; margin:0;}”2）“酒杯”前面的大黑圆点，是FF给li标签定义的默认样式，我们只需要将li的默认样式去掉就是了，在li标签的CSS属性中加入“list-style:none;”就OK了现在在瞅瞅，两种浏览器的显示效果是不是和下图一样了呢~如果你做到这里的效果和我说的不一样，没关系，我把做到目前第二步的代码发出来，你对着上面说的再看看，绝对可以学会【第三步】第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴着前面的文字。

Bootstrap教程第二课：制作网站导航条上一课介绍了用Bootstrap前端框架制作一个简易的主页，其中介绍了使用Bootstrap框架所需要的准备工作，以及文档格式要求，在这里及以后将不再复述，如有不明白的地方，可以查看上一节的内容（Bootstrap教程第一课：简单的Bootstrap主页（1））。

制作网站的导航条，先从导航开始，导航的结构代码很简单，如下：<ul class="nav"><li><a href="">首页</a></li><li><a href="">博文</a></li><li><a href="">留言</a></li></ul>添加了.nav样式的导航，将会像如下图样显示：要把这个导航变成网站的横排导航条，需要继续给 ul 添加 .navbar-nav 样式，代码如下：<ul class="nav navbar-nav"><li><a href="">首页</a></li><li><a href="">博文</a></li><li><a href="">留言</a></li></ul>显示结果如下：导航的栏目默认提供了两种，一种是.navbar-default 默认样式，另一种是 .navbar-inverse 黑色底色样式，我们可以分别给上面的ul外层添加一个DIV，然后加入两个样式，同时还要给这个DIV添加 .navbar 导航条样式，并给导航中的li添加当前高亮样式.active，代码如下：<div class="navbar navbar-default"><ul class="nav navbar-nav"><li class="active"><a href="">首页</a></li><li><a href="">博文</a></li><li><a href="">留言</a></li></ul></div>navbar-default样式如下：navbar-inverse样式如下：接下来，我们需要给导航添加自适应的导航隐藏展开按钮，同时给导航添加一个文字LOGO，代码如下：<div class="navbar navbar-inverse"><div class="navbar-header"><!-- 自适应隐藏导航展开按钮 --><button type="button" class="navbar-togglecollapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><!-- 导航条LOGO --><a class="navbar-brand" href="#">Brand</a></div><div class="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="">首页</a></li> <li><a href="">博文</a></li><li><a href="">留言</a></li></ul></div></div>导航条隐藏时显示效果如下：导航条显示时如下：接着，我们可以在导航后面添加一个搜索框，搜索框代码添加在</ul>下面，代码如下：<form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control"placeholder="Search"></div><button type="submit" class="btnbtn-default">Submit</button></form>效果如下：我们还可以在导航上添加右边的功能导航，这个代码添加在刚刚添加的form表单后面，代码如下：<ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul>显示效果如下：最后，在导航中添加一个下拉菜单功能，我们可以把这个代码添加在留言的后面，代码如下：<li class="dropdown"><a href="#" class="dropdown-toggle"data-toggle="dropdown">下拉菜单 <spanclass="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#">导航一</a></li><li><a href="#">导航二</a></li><li><a href="#">导航三</a></li></ul></li>显示效果：一个完整的带有LOGO、主导航、功能导航、搜索框、下拉菜单的导航条就制作完成了，下面贴出完整的代码供大家参考，Bootstrap很强大，需要大家在实践中去学习，所以，简单的复制粘贴，很快就能见到效果，但不如手写一篇来得印象深刻。