配色与网页设计项目5：制作导航栏5-2.pptx

下载文档

15
0
约1.75千字
约 10页
2021-06-17 发布于北京
举报
版权申诉
保障服务

配色与网页设计项目5：制作导航栏5-2.pptx

1、本文档共10页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

素质目标能够坚持科学的价值观和道德观；具有良好的团队合作意识和较强的团队合作能力；学习目标任务说明本案例中，我们将通过制作简单横向导航栏，来继续学习制作导航栏的方法及CSS样式表的使用。本案例将会用到前一个案例中的一些步骤，同时会涉及到浮动、块元素等知识。任务步骤打开“文件”面板，在上一案例中拷贝的文件夹“第5章\task2”中新建一个名为“menu-lx.html”的网页文档。在Dreamweaver中打开新建的文档，在代码界面的body部分输入文字“雪域西藏”“天府四川”“稻城亚丁”“神奇九寨”“永恒三峡”“雄秀峨眉”“川藏万里”“城市驿站”和“出国咨询”。添加超链接，即为文字添加超链接标签<a>。选中“雪域西藏”文字，单击“插入”面板“常用”类别中的“Hyperlink”按钮，打开“Hyperlink”对话框为文字添加空链接，然后参照同样的方法为其他文字添加空链接。将文字用<nav>标签括起来。在代码视图中选中前面输入的文字，单击“插入”面板“结构”类别中的“Navigation”按钮，弹出“插入Navigation”对话框，在“ID”编辑框中输入“topmenu”，然后单击“确定”按钮，插入<nav>标签。任务步骤指定在页面中引入CSS样式的方法。本例使用内嵌样式，在<head></head>标签对之间输入如下代码。 <style type="text/css">  </style> 任务步骤为<nav>块设置样式，包括设置背景颜色和高度，以及其内的文字大小和颜色等。本例中<nav>块的id为topmenu，所以用“#topmenu”选择器来控制其样式。在<style type="text/css"></style>标签对之间输入如下代码。 #topmenu { background:#515151; /*设置nav块的背景颜色*/ font-size:14px; /*设置nav块中文字的大小为14像素*/ color: #ffffff; /*设置nav块中文字的颜色*/ height:27px; /*设置nav块的高度为27像素*/ } 任务步骤为<nav>块中的超链接标签<a>设置样式。在步骤2输入的代码下方添加如下代码。 #topmenu a { float:left; /*将超链接块设置为向左浮动*/ width: 100px; /*设置超链接的宽度为100像素*/ color: #FFF; /*设置超链接的文字颜色*/ text-decoration: none; /*去掉超链接的下划线*/ text-align: center; /*设置超链接块的文字对齐方式为居中*/ line-height:27px; /*设置超链接块的行高为27像素*/ } 任务步骤设置超链接在hover状态下的效果。在步骤3输入的代码下方添加如下代码。 #topmenu a:hover { background:#f00; /*设置超链接在hover状态下的背景色*/ color: #fff; /*设置超链接在hover状态下的文字颜色*/ } 当设置行内元素的属性为float:left以后，就不需要再设置display:block属性，除非这个元素有显示和隐藏状态的切换，即display:hidden属性和display:block属性的切换。任务步骤保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。这样一个简单的横向导航栏就完成了。任务步骤