《制作导航栏》由会员分享，可在线阅读，更多相关《制作导航栏（56页珍藏版）》请在金锄头文库上搜索。
1、 1 2 Contents Page 目录页 第5章 制作导航栏 案例一 制作简单纵向导航栏 案例二 制作简单横向导航栏 案例三 制作带图像效果的横向导航栏 案例四 制作带下拉菜单的横向导航栏 3 案例一 制作简单纵向导航栏 案例说明 导航栏的主要功能是通过超链接实现 从本页面跳转到 浏览 者想要查看的其他页面，其中鼠标移动到导航栏上的 某个菜单项时 一般会有变色效果。一个好的导航栏应让 用 户能快捷、准确地访问 网站要展现的主要内容，同时导 航 栏的风格也要与网站本身的风格相匹配。 导航栏包括纵向导航栏、横向导航栏、带下拉菜单的 导航栏等。在制作导航栏的过程中，一般会应用CSS样式表 来对导
2、 航栏进 行设置和美化。本案例中，我们从最基础的 纵向导航栏开始学习。 4 案例一 制作简单纵向导航栏 案例步骤 在HTML 5中，导航栏是由标签 定义的。导航栏一般分为横向和纵纵向，针 对使用制作的导航栏，横向菜单无须改变结 构，只需设置样式的变化即可； 此处制作的纵向菜单，需要使用“display: block;”属性改变超链接列表的结构。 构建HTML结构 1. 步骤 01 将本书附赠的“素材与实例第5章”文件夹拷贝至本地磁盘创建的“My Web”站点根目录中。 步骤 02 打开“文件”面板，在刚拷贝的文件夹“第5章task1”中新建一个名为“menu-lx.html” 的网页文档。 5
3、 案例一 制作简单纵向导航栏 案例步骤 步骤 03 在Dreamweaver中打开新建的文档，在body区域输入文字“我的首页 心情日记 学 习心得 工作笔记 生活琐碎 联系我们”。 6 案例一 制作简单纵向导航栏 案例步骤 步骤 04 选中所有输入的文字，单击“插入”面板“结构”类别中的“Navigation”按钮，弹 出“插入Navigation”对话框，在“ID”编辑框中输入“dh”，然后单击“确定”按 钮，插入标签。 7 案例一 制作简单纵向导航栏 案例步骤 步骤 05 添加超链接，即为文字添加超链接标签。选中“我的首页”文字，单击“插入” 面板“常用”类别中的“Hyperlink”按
4、钮，打开“Hyperlink”对话框。由于现在还 没有需要跳转的页面，所以在“链接”编辑框中输入“#”符号（表示插入空链接） ，然后单击“确定”按钮。 8 案例一 制作简单纵向导航栏 案例步骤 步骤 06 参考步骤5的操作，依次为“心情日记”“学习心得”“工作笔记”“生活琐碎”和 “联系我们”这些文字添加超链接。 9 案例一 制作简单纵向导航栏 案例步骤 步骤 07 保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。 此时网页的结构部分制作完成，涉及的HTML标签如表5-1所示。 表5-1 涉及的HTML标签 标 签描 述 网页主体标签 HTML 5中的新标签，
5、定义导航链接部分 超链接文字超链接 10 案例一 制作简单纵向导航栏 案例步骤 设置CSS样式 2. 步骤 01 指定在HTML页面中引入CSS样式表的方法，这里使用内嵌样式，在标 签对之间添加以下代码。 11 案例一 制作简单纵向导航栏 案例步骤 步骤 02 设置超链接样式，包括纵向排列，消除下划线，设置文字大小和颜色，设置背景颜 色和内边距等。在步骤1输入的标签对之间输入代码。 设置各超链接块高度为30像素，再设置行高为30像素，目的是让 文字可以在块中纵向居中，这也是使用line-height实现内容纵向居中 的方法。 超链接标签属于行内元素，将其转换为块元素（ display:bloc
6、k）的原因有两个，一是可以控制标签的宽度、高度 及能填充边框等；二是为了使鼠标指针放在导航栏的任意位置（文字之 外的地方）都可产生悬停效果。 提示 12 案例一 制作简单纵向导航栏 案例步骤 步骤 03 设置鼠标移到超链接上时，超链接文字颜色发生变化的效果（使用hover伪类），在 步骤2输入的代码下方输入代码。 #dh a:hover color:#FFFFFF; /*设置超链接在hover状态时的文字颜色*/ background-color: #000033; /*设置超链接在hover状态时的背景色*/ border-left-width: 10px; /*设置超链接在hover状态时
7、左边框的宽度为10像素*/ border-left-style: solid; /*设置超链接在hover状态时左边框的线型为实线*/ border-left-color:#D8D803; /*设置超链接在hover状态时左边框的颜色*/ padding属性叫做填充（或内边距），用来设置块元素中的元素（如文字）同 块边 框之间的距离；margin属性叫做外边距，用来设置元素与元素之间的距离。 13 案例一 制作简单纵向导航栏 案例步骤 步骤 04 保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效 果。 a:hover表示鼠标放到超链接上时超链 接的状态；a:lin
8、k是超链接没被访问时的状 态；a:active为鼠标单击超链接但没释放时 的状态；a:visited为超链接被访问后的状 态。对于其他元素也可设置动态效果，只需 将a换成其他选择器名即可。 提示 14 案例一 制作简单纵向导航栏 支撑知识点 使用CSS的一些小技巧 display属性规定元素的显示类型，其具有多个不同的属性值，其中 display:block表示将元素转换为块级 元素。 合理利用display:block属性 1. 要对行内元素进行有关高度、宽度等样式的设置，就需要为此行内元素添加 display:block属性，将其转换为块 元素。 15 案例二 制作简单横向导航栏 利用bo
9、rder设置特殊边框 2. 利用border可以对4个方向的边框分别 进行设置。因此在设置边框的时候，可以 单独设置一个方向的边框，也可以对多个方 向的边框分别进行不同的样式设置。 16 Contents Page 目录页 第5章 制作导航栏 案例一 制作简单纵向导航栏 案例二 制作简单横向导航栏 案例三 制作带图像效果的横向导航栏 案例四 制作带下拉菜单的横向导航栏 17 案例二 制作简单横向导航栏 案例说明 本案例中，我们将通过制作简单横向导 航栏，来继续学习制作导航栏的方法及CSS 样式表的使用。本案例将会用到前一个案例 中的一些步骤，同时会涉及到浮动、块元素 等知识。 18 案例二 制
10、作简单横向导航栏 案例步骤 步骤 01 打开“文件”面板，在上一案例中拷贝的文件夹“第5章task2”中新建一个名为 “menu-lx.html”的网页文档。 构建HTML结构 1. 步骤 02 在Dreamweaver中打开新建的文档，在代码界面的body部分输入文字“雪域西藏 ”“天府四川”“稻城亚丁”“神奇九寨”“永恒三峡”“雄秀峨眉”“川藏万 里”“城市驿站”和“出国咨询”。 步骤 03 添加超链接，即为文字添加超链接标签。选中“雪域西藏”文字，单击“插入 ”面板“常用”类别中的“Hyperlink”按钮，打开“Hyperlink”对话框为文字添加 空链接，然后参照同样的方法为其他文字
11、添加空链接。 19 案例二 制作简单横向导航栏 案例步骤 步骤 04 将文字用标签括起来。在代码视图中选中前面输入的文字，单击“插入”面板 “结构”类别中的“Navigation”按钮，弹出“插入Navigation”对话框，在“ID”编 辑框中输入“topmenu”，然后单击“确定”按钮，插入标签。 20 案例二 制作简单横向导航栏 案例步骤 步骤 01 指定在页面中引入CSS样式的方法。本例使用内嵌样式，在标签对之 间输入如下代码。 设置CSS样式 2. 21 案例二 制作简单横向导航栏 案例步骤 步骤 02 为块设置样式，包括设置背景颜色和高度，以及其内的文字大小和颜色等。本 例中块的i
12、d为topmenu，所以用“#topmenu”选择器来控制其样式。在标签对之间输入如下代码。 #topmenu background:#515151; /*设置nav块的背景颜色*/ font-size:14px; /*设置nav块中文字的大小为14像素*/ color: #ffffff; /*设置nav块中文字的颜色*/ height:27px; /*设置nav块的高度为27像素*/ 22 案例二 制作简单横向导航栏 案例步骤 步骤 03为块中的超链接标签设置样式。在步骤2输入的代码下方添加如下代码。 #topmenu a float:left; /*将超链接块设置为向左浮动*/ width
13、: 100px; /*设置超链接的宽度为100像素*/ color: #FFF; /*设置超链接的文字颜色*/ text-decoration: none; /*去掉超链接的下划线*/ text-align: center; /*设置超链接块的文字对齐方式为居中*/ line-height:27px; /*设置超链接块的行高为27像素*/ 23 案例二 制作简单横向导航栏 案例步骤 步骤 04设置超链接在hover状态下的效果。在步骤3输入的代码下方添加如下代码。 #topmenu a:hover background:#f00; /*设置超链接在hover状态下的背景色*/ color: #
14、fff; /*设置超链接在hover状态下的文字颜色*/ 当设置行内元素的属性为float:left以后，就不需要再设置display:block属性，除非这 个元素有显示和隐藏状态的切换，即display:hidden属性和display:block属性的切 换。 24 案例二 制作简单横向导航栏 案例步骤 步骤 05保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。 这样一个简单的横向导航栏就完成了。 25 Contents Page 目录页 第5章 制作导航栏 案例一 制作简单纵向导航栏 案例二 制作简单横向导航栏 案例三 制作带图像效果的横向导航栏 案例
15、四 制作带下拉菜单的横向导航栏 26 案例三 制作带图像效果的横向导航栏 案例说明 通过前面2个案例的学习，大家已经对导 航栏有了初步的了解，现在我 们需要在前面2个例子的基础上，对导航栏进行更深入的学习，制作一个带 有背景图像变换效果的横向导航栏，当将鼠标指针移到导航栏的菜单项时 背景会发生变化。 27 案例三 制作带图像效果的横向导航栏 案例步骤 步骤 01 打开“文件”面板，在案例一拷贝的文件夹“第5章task3”中新建一个名为menu- lx.html的网页。 步骤 02 在Dreamweaver中打开新建的文档，然后在代码界面的body区域输入文字“首页 ”“管理咨询”“营销策划”“项目推广”“招生代理”“展览展示”“兼职人 事”“设计制作”“联系我们”和“投诉建议”。 构建HTML结构 1. 28 案例三 制作带图像效果的横向导航栏 案例步骤 步骤 03添加类名为menus的标签。选中前面输入的文字，然后单击“插入”面板“结 构”类别中的“Navigation”按钮，在弹出的“插入Navigation”对话框的“Class” 编辑框中输入类名为menus，单击“确定”按钮。此时在代码界面中会看到插入的 代码。 29 案例三 制作
