网页基础与制作 5

第1章PHP开篇PAGE16《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第9章CSS应用技巧计划课时4课时教学引入通过前面几章的学习，我们已经掌握了CSS的基本原理和使用技巧，但是在实际制作网页的过程中，有时需要使用CSS制作一些特殊的技巧，如使用margin负值制作压线效果、CSS精灵技术等。由于这些技术之间并不存在特定的关联，因此本章将分别对这些CSS应用技巧进行详细讲解。教学目标使学生掌握CSS精灵技术，能够归纳CSS精灵的概念和作用使学生掌握CSS滑动门技术，能够描述滑动门的概念使学生掌握margin设置负值技巧，能够说出margin值设置为负数的作用使学生掌握CSS精灵的应用，能够在网页制作中熟练使用CSS精灵定义背景图片使学生掌握CSS滑动门技术，能够运用滑动门技术制作网站导航使学生掌握margin负值的设置方法，能够使用margin负值设置压线效果教学重点CSS精灵技术CSS滑动门技术margin设置负值技巧教学难点CSS精灵技术CSS滑动门技术margin设置负值技巧教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（CSS精灵技术）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课当用户访问一个网站时，需要向服务器发送请求，服务器接收请求，会返回请求页面，最终将效果展示给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求，这将大大降低页面的加载速度。这时使用CSS精灵就可以有效地减少服务器接收和发送请求的次数，提高页面的加载速度。三、新课讲解知识点-CSS精灵技术教师通过PPT结合实际操作的方式讲解CSS精灵技术。认识CSS精灵应用CSS精灵制作精灵图制作页面四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（CSS滑动门技术）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课在制作网页导航时，经常会碰到导航栏长度不同，但背景相同的情形。此时如果通过拉伸背景图的方式来适应文本内容，就会造成背景图变形。在制作网页时，为了使各种特殊形状的背景能够自适应元素中的文本内容，并且不会变形，CSS提供了滑动门技术，本节课将对CSS滑动门的使用技巧进行具体讲解。三、新课讲解知识点-CSS滑动门技术教师通过PPT结合实际操作的方式讲解CSS滑动门技术。认识滑动门使用滑动门制作导航条四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（margin设置负值技巧）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课制作网页时，为了拉开内容元素之间的距离，常常给标签设置数值为正数的外边距margin。但是在实际工作中，为了实现一些特殊的效果，就需要将标签的margin值设置为负数，也就是常说的“margin负值”。接下来，本节课将对margin负值的应用技巧进行详细讲解。三、新课讲解知识点-margin设置负值技巧教师通过PPT结合实际操作的方式讲解margin设置负值技巧。margin负值基本应用对同级标签应用margin负值对子标签应用margin负值利用margin负值制作压线效果四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机：（考