第5章 制作导航栏

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