--制作导航栏.pptx

1 2 Contents Page目录页第5章 制作导航栏案例一 制作简单纵向导航栏案例二 制作简单横向导航栏案例三 制作带图像效果的横向导航栏案例四 制作带下拉菜单的横向导航栏 3 案例一 制作简单纵向导航栏案例说明 导航栏的主要功能是通过超链接实现从本页面跳转到浏览者想要查看的其他页面，其中鼠标移动到导航栏上的某个菜单项时一般会有变色效果。一个好的导航栏应让用户能快捷、准确地访问网站要展现的主要内容，同时导航栏的风格也要与网站本身的风格相匹配。导航栏包括纵向导航栏、横向导航栏、带下拉菜单的导航栏等。在制作导航栏的过程中，一般会应用CSS样式表来对导航栏进行设置和美化。本案例中，我们从最基础的纵向导航栏开始学习。4 案例一 制作简单纵向导航栏案例步骤 在HTML 5中，导航栏是由标签定义的。导航栏一般分为横向横向和纵向向，针对使用制作的导航栏，横向菜单无须改变结构，只需设置样式的变化即可；此处制作的纵向菜单，需要使用“display:block;”属性改变超链接列表的结构。构建HTML结构1.步骤 01将本书附赠的“素材与实例第5章”文件夹拷贝至本地磁盘创建的“My Web”站点根目录中。步骤 02打开“文件”面板，在刚拷贝的文件夹“第5章task1”中新建一个名为“menu-lx.html”的网页文档。5 案例一 制作简单纵向导航栏案例步骤步骤 03在Dreamweaver中打开新建的文档，在body区域输入文字“我的首页 心情日记 学习心得 工作笔记 生活琐碎 联系我们”。6 案例一 制作简单纵向导航栏案例步骤步骤 04选中所有输入的文字，单击“插入”面板“结构”类别中的“Navigation”按钮，弹出“插入Navigation”对话框，在“ID”编辑框中输入“dh”，然后单击“确定”按钮，插入标签。7 案例一 制作简单纵向导航栏案例步骤步骤 05添加超链接添加超链接，即为文字添加超链接标签。选中“我的首页”文字，单击“插入”面板“常用”类别中的“Hyperlink”按钮，打开“Hyperlink”对话框。由于现在还没有需要跳转的页面，所以在“链接”编辑框中输入“#”符号（表示插入空链接），然后单击“确定”按钮。8 案例一 制作简单纵向导航栏案例步骤步骤 06参考步骤5的操作，依次为“心情日记”“学习心得”“工作笔记”“生活琐碎”和“联系我们”这些文字添加超链接。9 案例一 制作简单纵向导航栏案例步骤步骤 07保存文件。保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。此时网页的结构部分制作完成，涉及的HTML标签如表5-1所示。标 签描 述网页主体标签HTML 5中的新标签，定义导航链接部分超链接文字超链接 10 案例一 制作简单纵向导航栏案例步骤设置CSS样式2.步骤 01指定在HTML页面中引入CSS样式表的方法，这里使用内嵌样式，在标签对之间添加以下代码。11 案例一 制作简单纵向导航栏案例步骤步骤 02设置超链接样式，包括纵向排列，消除下划线，设置文字大小和颜色，设置背景颜色和内边距等。在步骤1输入的标签对之间输入代码。设置各超链接块高度为30像素，再设置行高为30像素，目的是让文字可以在块中纵向居中，这也是使用line-height实现内容纵向居中的方法。超链接标签属于行内元素，将其转换为块元素（display:block）的原因有两个，一是可以控制标签的宽度、高度及能填充边框等；二是为了使鼠标指针放在导航栏的任意位置（文字之外的地方）都可产生悬停效果。提示 12 案例一 制作简单纵向导航栏案例步骤步骤 03设置鼠标移到超链接上时，超链接文字颜色发生变化的效果（使用hover伪类），在步骤2输入的代码下方输入代码。#dh a:hovercolor:#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 Contents Page目录页第5章 制作导航栏案例一 制作简单纵向导航栏案例二 制作简单横向导航栏案例三 制作带图像效果的横向导航栏案例四 制作带下拉菜单的横向导航栏 17 案例二 制作简单横向导航栏案例说明 本案例中，我们将通过制作简单横向导航栏，来继续学习制作导航栏的方法及CSS样式表的使用。本案例将会用到前一个案例中的一些步骤，同时会涉及到浮动、块元素等知识。18 案例二 制作简单横向导航栏案例步骤步骤 01打开“文件”面板，在上一案例中拷贝的文件夹“第5章task2”中新建一个名为“menu-lx.html”的网页文档。构建HTML结构1.步骤 02在Dreamweaver中打开新建的文档，在代码界面的body部分输入文字“雪域西藏”“天府四川”“稻城亚丁”“神奇九寨”“永恒三峡”“雄秀峨眉”“川藏万里”“城市驿站”和“出国咨询”。步骤 03添加超链接，即为文字添加超链接标签。选中“雪域西藏”文字，单击“插入”面板“常用”类别中的“Hyperlink”按钮，打开“Hyperlink”对话框为文字添加空链接，然后参照同样的方法为其他文字添加空链接。19 案例二 制作简单横向导航栏案例步骤步骤 04将文字用将文字用标签括起来。标签括起来。在代码视图中选中前面输入的文字，单击“插入”面板“结构”类别中的“Navigation”按钮，弹出“插入Navigation”对话框，在“ID”编辑框中输入“topmenu”，然后单击“确定”按钮，插入标签。20 案例二 制作简单横向导航栏案例步骤步骤 01指定在页面中引入指定在页面中引入CSS样式的方法。样式的方法。本例使用内嵌样式，在标签对之间输入如下代码。设置CSS样式2.21 案例二 制作简单横向导航栏案例步骤步骤 02为块设置样式，包括设置背景颜色和高度，以及其内的文字大小和颜色等。本例中块的id为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: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:#fff;/*设置超链接在hover状态下的文字颜色*/当设置行内元素的属性为float:left以后，就不需要再设置display:block属性，除非这个元素有显示和隐藏状态的切换，即display:hidden属性和display:block属性的切换。24 案例二 制作简单横向导航栏案例步骤步骤 05保存文件。保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。这样一个简单的横向导航栏就完成了。25 Contents Page目录页第5章 制作导航栏案例一 制作简单纵向导航栏案例二 制作简单横向导航栏案例三 制作带图像效果的横向导航栏案例四 制作带下拉菜单的横向导航栏 26 案例三 制作带图像效果的横向导航栏案例说明 通过前面2个案例的学习，大家已经对导航栏有了初步的了解，现在我们需要在前面2个例子的基础上，对导航栏进行更深入的学习，制作一个带有背景图像变换效果的横向导航栏，当将鼠标指针移到导航栏的菜单项时背景会发生变化。27 案例三 制作带图像效果的横向导航栏案例步骤步骤 01打开“文件”面板，在案例一拷贝的文件夹“第5章task3”中新建一个名为menu-lx.html的网页。步骤 02在Dreamweaver中打开新建的文档，然后在代码界面的body区域输入文字“首页”“管理咨询”“营销策划”“项目推广”“招生代理”“展览展示”“兼职人事”“设计制作”“联系我们”和“投诉建议”。构建HTML结构1.28 案例三 制作带图像效果的横向导航栏案例步骤步骤 03添加类名为menus的标签。选中前面输入的文字，然后单击“插入”面板“结构”类别中的“Navigation”按钮，在弹出的“插入Navigation”对话框的“Class”编辑框中输入类名为menus，单击“确定”按钮。此时在代码界面中会看到插入的代码。29 案例三 制作带图像效果的横向导航栏案例步骤步骤 04添加超链接，即为文字添加超链接标签添加超链接，即为文字添加超链接标签。选中“首页”文字，单击“插入”面板“常用”类别中的“Hyperlink”按钮，打开“Hyperlink”对话框为文字添加空链接，然后参照同样的方法为其他文字添加空链接。30 案例三 制作带图像效果的横向导航栏案例步骤步骤 01指定在页面中引入CSS样式的方法。本例使用内嵌样式，在标签对之间输入如下代码。设置CSS样式2.31 案例三 制作带图像效果的横向导航栏案例步骤步骤 02设置类名为menus的块的宽度、高度和背景。在标签对之间输入如下代码。.menuswidth:802px;/*设置nav块的宽度*/height:41px;/*设置nav块的高度*/background:url(images/menuBg.jpg)no-repeat;/*设置nav块的背景图像且图像不重复*/32 案例三 制作带图像效果的横向导航栏案例步骤步骤 03设置设置块中超链接标签块中超链接标签的默认样式。的默认样式。在前一个步骤完成后，可以看到超链接的效果及位置都不合适，因此需要设置其样式。在步骤2中输入的代码下方输入如下代码。.menus a float:left;/*设置超链接向左浮动*/width:78px;/*设置超链接宽度*/height:41px;/*设置超链接高度*/text-align:center;/*设置超链接文字居中*/line-height:41px;/*设置超链接行高*/color:#FFFFFF;/*设置超链接文字颜色*/text-decoration:none;/*设置超链接无下划线*/font-size:12px;/*设置超链接字体大小*/33 案例三 制作带图像效果的横向导航栏案例步骤步骤 04设置超链接在hover状态（将鼠标指针放在超链接上）下的样式。.menus a:hoverbackground:url(images/menu_ok.jpg)no-repeat center;overflow:hidden 34 Contents Page目录页第5章 制作导航栏案例一 制作简单纵向导航栏案例二 制作简单横向导航栏案例三 制作带图像效果的横向导航栏案例四 制作带下拉菜单的横向导航栏 35 案例三 制作带图像效果的横向导航栏案例说明 本案例将要制作带下拉菜单的横向导航栏。该导航栏的制作比前面3个案例的制作都要复杂一些。要在不使用javascript的情况下制作带下拉菜单的导航栏，需要合理利用CSS的display属性，通过设置display属性的值来完成菜单的显示和隐藏。36 案例三 制作带图像效果的横向导航栏案例步骤步骤 01打开“文件”面板，在案例一中拷贝的文件夹“第5章task4”中新建一个名为“menu-lx.html”的网页文档。步骤 02在Dreamweaver中打开新建的文档，在代码界面的body部分输入作为一级菜单的文字：“首页”“企业新闻”“产品信息”“特价促销”“联系我们”和“新手论坛”。构建HTML结构1.37 案例三 制作带图像效果的横向导航栏案例步骤步骤 03在代码界面中选择前面输入的文字，单击“插入”面板“结构”类别中的“ul 项目列表”按钮，为所选文字添加无序列表标签。38 案例三 制作带图像效果的横向导航栏案例步骤步骤 04依次选中“首页”“企业新闻”“产品信息”“特价促销”“联系我们”和“新手论坛”文字，单击“插入”面板“结构”类别中的“li 列表项”按钮，分别为这些文本添加列表项标签。39 案例三 制作带图像效果的横向导航栏案例步骤步骤 05为文字添加超链接标签为文字添加超链接标签。选中“首页”文字，单击“插入”面板“常用”类别中的“Hyperlink”按钮，打开“Hyperlink”对话框，在“链接”编辑框中输入“#”符号，单击“确定”按钮。步骤 06参考步骤5的方法，依次为“企业新闻”“产品信息”“特价促销”“联系我们”和“新手论坛”文字添加超链接。40 案例三 制作带图像效果的横向导航栏案例步骤步骤 07添加一个添加一个块标签。块标签。在代码界面中选择前面添加的包括在内的标签元素，然后单击“插入”面板“结构”类别中的“Navigation”按钮，打开“插入Navigation”对话框，单击“确定”按钮插入块标签。步骤 08添加二级菜单。添加二级菜单。在代码界面body部分的首页代码下面输入作为“首页”的二级菜单文字：“最新更新”和“下载排行”，然后参照前面的步骤为这2段文字添加、和标签。41 案例三 制作带图像效果的横向导航栏案例步骤步骤 09参照步骤8，依次为其他一级菜单添加对应的二级菜单文字及、和标签，涉及的HTML标签如表5-2所示。42 案例三 制作带图像效果的横向导航栏案例步骤标 签描 述网页主体标签无序列表无序列表项HTML 5中的新标签，定义导航链接部分超链接文字超链接 43 案例三 制作带图像效果的横向导航栏案例步骤步骤 01指定在页面中引入指定在页面中引入CSS样式的方法。样式的方法。本例使用内嵌样式，在标签对之间输入如下代码。设置CSS样式2.44 案例三 制作带图像效果的横向导航栏案例步骤步骤 02设置整体页面所有标签的通用属性。设置整体页面所有标签的通用属性。在标签对之间输入如下代码。*margin:0;/*设置页面所有标签的外边距为0*/padding:0;/*设置页面所有标签的内边距为0*/*号代表所有标签的通用属性，在*选择器中设置的CSS样式将会被页面中所有标签共同使用。此处为了清空在各种浏览器上可能出现的内边距和外边距，故统一将其定义为0像素。45 案例三 制作带图像效果的横向导航栏案例步骤步骤 03设置标签的样式，输入的代码如下。li list-style:none;/*设置列表项无编号*/text-align:center;/*设置列表项的文字为居中*/line-height:24px;/*设置列表项的行高*/46 案例三 制作带图像效果的横向导航栏案例步骤步骤 04设置超链接样式，输入的代码如下。此时按【F12】键，可在浏览器中看到效果。a text-decoration:none;/*设置超链接无下划线*/color:#333333;/*设置超链接文字颜色*/font-size:12px;/*设置超链接文字大小*/line-height:24px;/*设置超链接行高*/displayblock;/*将超链接转换为块元素*/47 案例三 制作带图像效果的横向导航栏案例步骤步骤 05此时该导航栏的初步样式已经完成，下面将要调整块及其包含的元素样式。首先设置该块中第1级列表项标签的样式，完成后在浏览器中预览页面。nav ul liwidth:120px;/*设置标签的宽度为120像素*/float:left;/*设置标签向左浮动*/border:1px#333 dashed;/*设置标签边框的粗细、颜色及线型*/background:#FFD2D2;/*设置标签的背景色*/48 案例三 制作带图像效果的横向导航栏案例步骤要为某个标签下面的子标签设置样式，只需将该标签的名称（或类名、id名）写在前面即可。例如，设置类名为menu的标签下的标签样式，可以写成：.menu ul。这样设置的好处在于样式只会影响指定位置的标签，而对于其他地方的标签不会有任何影响。提示 49 案例三 制作带图像效果的横向导航栏案例步骤步骤 06隐藏隐藏2级菜单。级菜单。样式设置中nav ul li只影响了块中的第1级、标签，而对第2级的、标签并没有产生向左浮动的效果。在需求中，2级菜单的默认状态是隐藏的，由于二级菜单的标签是位于1级菜单的下面，因此输入如下代码来隐藏二级菜单。nav ul li uldisplay:none;/*设置2级菜单默认隐藏*/50 案例三 制作带图像效果的横向导航栏案例步骤步骤 07设置设置1级菜单中级菜单中标签下标签下标签的标签的hover状态样式。状态样式。设置完成后，保存并在浏览器中预览网页，可以看到效果（鼠标指针移到“产品信息”上）。nav ul li a:hovercolor:#fff;/*设置hover状态时标签的文字颜色*/background-color:#BB0916;/*设置hover状态时标签的背景颜色*/51 案例三 制作带图像效果的横向导航栏案例步骤步骤 08显示显示2级菜单。级菜单。要显示被隐藏的2级菜单，只需要设置display属性为block即可。设置完成后，在浏览器中预览网页。nav ul li:hover ul,.nav ul li a:hover ul display:block;/*设置display属性为block，即显示*/width:120px;/*设置2级菜单列表项宽度*/height:24px;/*设置2级菜单列表项高度*/52 案例三 制作带图像效果的横向导航栏案例步骤步骤 09设置设置2级菜单样式。级菜单样式。经过上述设置后，2级菜单的背景色还是和一级菜单一样的，下面就对2级菜单的列表项样式作简单调整。nav ul li ul li background-color:#FEE;/*设置2级菜单的背景色*/width:120px;/*设置2级菜单的宽度（可自行定义宽度）*/53 案例三 制作带图像效果的横向导航栏案例步骤步骤 10设置设置2级菜单级菜单hover状态时的样式。状态时的样式。做完该步骤后，保存文档并在浏览器中查看，可以看到图示效果（将鼠标移动到二级菜单上）。nav ul ul li a:hover background:#F7F7B9;color:#666666;54 案例一 制作简单纵向导航栏支撑知识点使用CSS的一些小技巧 对网页进行样式设置时，有时会遇到需要设置全局样式的情况，也就是设置页面上所有标签、类、id都使用的共有样式。CSS为我们提供了一种解决方法，就是使用*选择器。由该选择器定义的样式，默认会被浏览器页面上所有的内容都采用。用*号设置全局样式1.55 案例三 制作带图像效果的横向导航栏对特定标签下的子标签设置样式2.要给不同位置的标签添加样式，一种方法是为这些不同位置的标签设置对应的class或id，但这样会使页面上有大量的class或id，不利于样式的处理；另外一种方法就是使用父标签加子标签的形式，也就是利用在第2章学习的嵌套选择器。其语法格式为：父父标签 子子标签 孙标签 曾曾孙标签 其中，父标签、子标签等既可以是标签名称，也可以是class名或id名。56 谢谢观看谢谢观看北京金企鹅文化发展中心http:/