中职高教版《网页设计与制作任务驱动教程》6.3制作包含纵向主导航栏的网页0603课件

1 单元6　制作包含超级链接和 导航栏的网页 【任务6-3】制作包含纵向主导航栏的 网页0603.html 《网页设计与制作任务驱动教程（第3版）》 1 2 【任务描述】 【任务【任务6-3】制作包含纵向主 导航栏的网页0603.html （1）创建样式文件main.css，在该样式文件中定义标签的属性、类选择符及其属性。 （2）创建网页文档0603.html，且链接外部样式文件main.css。 《网页设计与制作任务驱动教程（第3版）》 3 （3）在网页0603.html中添加必要的HTML标签和输入文字。 （4）浏览网页0603.html的效果，如图6-22所示，该网页包含纵向排列的栏目导航栏。 图6-22 网页0603.html的浏览效果 《网页设计与制作任务驱动教程（第3版）》 4 【任务实施】 （1）创建文件夹与网页 在站点“单元6”中创建文件夹“task06-3”，在该文件夹中创建子文件夹“CSS”。在文件夹“task06-3”中创建网页文档0603.html。 （2）定义美化超链接和导航栏的CSS代码 在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，代码如表6-6所示。 《网页设计与制作任务驱动教程（第3版）》 5 表6-6　网页0603.html中样式文件main.css的CSS代码定义 序号 CSS代码 序号 CSS代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 a:link, a:visited { text-decoration: none; color: #666; }   .box-sort { width: 160px; background-color: transparent; border-bottom: 5px solid #19A1DB; box-shadow: 0 2px 1px #E1E1E2; height: 40px; line-height: 40px; }   .box-sort ul { background-color: #E0ECFC; padding: 0; overflow: hidden }   .box-sort li { border-top: 2px solid #FFF; } 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 .box-sort li.first { border-top: 0; } .box-sort li a { line-height: 40px; height: 40px; display: block; margin: 2px 5px; text-align: center; text-indent: 5px; padding: 0 10px; font-weight: bold; font-size: 16px; font-family: 微软雅黑; }   .box-sort li a:hover { color: #0375e8; } .box-sort li.on a:link, .box-sort li.on a:visited, .box-sort li.on a:hover { color: #06c; } 《网页设计与制作任务驱动教程（第3版）》 5 6 （3）在网页文档0603.html中链接外部样式表 切换到网页文档0603.html的【代码视图】，在标签“</head>”的前面输入链接外部样式表的代码，如下所示： <link type="text/css" rel="stylesheet" href="css/main.css"/> 《网页设计与制作任务驱动教程（第3版）》 7 （4）在网页中添加必要的HTML标签与输入文本内容 在网页文档0603.html中添加必要的HTML标签与输入文本内容，对应的HTML代码如表6-7所示。 表6-7　网页0603.html的HTML代码 序号 HTML代码 01 02 03 04 05 06 07 08 09 <div class="box-sort"> <ul> <li class="first on"><a href="">阿坝动态</a></li> <li class=" "><a href="">旅游公告