HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）教案 第3章 运用CSS3美化页面-教学设计

第1章PHP开篇PAGE16《HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第3章运用CSS3美化页面计划课时6课时教学引入在第2章，我们深入学习了HTML技术的相关知识。然而，网页技术日新月异，单纯依靠HTML标签属性来设置样式，已难以契合当今网页设计的多样化需求。如今的网页开发者渴望拥有更多元化的字体选择、更易实现的样式效果，以及更绚丽多彩的图形、动画，以打造出独具魅力的网页。CSS应运而生，在不改变原有网页结构的基础上，CSS能够精准且有效地控制网页的外观和布局，从而显著提升用户体验。本章将对CSS的基础应用进行详细讲解。教学目标使学生了解CSS基本概念，能够说出CSS的作用和优势使学生掌握CSS样式规则，能够按照CSS样式规则正确编写CSS代码使学生熟悉CSS代码书写方式，能够在文档中正确书写CSS代码使学生掌握CSS基础选择器的用法，能够使用基础选择器准确控制HTML元素使学生熟悉字体样式属性的用法，能够给网页中的字体设置不同的样式使学生熟悉文本外观属性的用法，能够给网页中的文本设置不同的样式使学生掌握CSS复合选择器的用法，能够快捷选择页面中的元素使学生熟悉CSS层叠性和继承性，能够优化CSS代码结构使学生掌握CSS优先级，能够选择合适的选择器来设置样式教学重点案例3-1变色文字案例3-2鲜花专题栏目CSS复合选择器CSS优先级案例3-3搜索页面教学难点CSS复合选择器教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（认识CSS、CSS样式规则、引入CSS样式）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课使用HTML标签属性对网页进行修饰存在很大的局限和不足，如网站维护困难、不利于代码阅读等。如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS将网页的HTML结构和网页的样式分离。本节课将对CSS和CSS3进行讲解。三、新课讲解知识点1-认识CSS教师通过PPT的方式讲解认识CSS。CSS的概念和作用CSS3的概念和它与CSS的区别CSS3的新样式知识点2-CSS样式规则教师通过PPT的方式讲解CSS样式规则。CSS样式规则的语法格式通过案例学习如何使用CSS对标题标签<h1>进行控制注意CSS代码结构中的特点知识点3-引入CSS样式教师通过PPT的方式讲解引入CSS样式。行内式内嵌式外链式四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（CSS基础选择器、案例3-1变色文字）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课要想将CSS样式应用于特定的HTML标签，首先需要找到该目标标签。在CSS中，执行这一任务的样式规则部分称为选择器。本节课将对CSS基础选择器进行讲解。三、新课讲解知识点1-CSS基础选择器教师通过PPT的方式讲解CSS基础选择器。标签选择器类选择器id选择器通配符选择器知识点2-案例3-1变色文字教师通过PPT的方式讲解案例3-1变色文字。分析效果图搭建页面结构四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（字体样式属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课为了更方便地控制网页中各种各样的字体，CSS提供了一系列的字体样式属性，本节课将对字体样式属性进行讲解。三、新课讲解知识点-字体样式属性教师通过PPT的方式讲解字体样式属性。font-size:字号font-family:字体font-weight:字体粗细font-cariant:变体font-style:字体风格font:综合设置字体样式@font-face规则四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（文本外观属性、案例3-2鲜花专题栏目）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课为了更方便地控制网页中各种各样的字体，CSS提供了一系列的字体样式属性，本节课将对字体样式属性进行讲解。三、新课讲解知识点1-文本外观属性教师通过PPT的方式讲解文本外观属性。color:文本颜色letter-spacing:字间距word-spacing:单词间距line-height:行间距text-transform:文本转换text-decoration:文本装饰text-align:水平对齐方式text-indent:文本缩进white-space:空白符处理text-shadow:阴影效果text-overflow:标示溢出文本word-wrap属性：控制换行知识点2-鲜花专题栏目教师通过PPT的方式讲解鲜花专题栏目。结构分析样式分析搭建页面结构定义CSS样式四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五课时（CSS复合选择器、CSS层叠性和继承性、CSS优先级、案例3-3搜索页面）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课除了前面学习的CSS基础选择器外，在CSS中还有复合选择器。复合选择器配合CSS的层叠性和继承性、优先级可以实现更复杂的网页效果。本节课将对CSS复合选择器、CSS层叠性和继承性和CSS优先级进行讲解。三、新课讲解知识点1-CSS复合选择器教师通过PPT的方式讲解CSS复合选择器。交集选择器后代选择器并集选择器知识点2-CSS层叠性和继承性教师通过PPT的方式讲解CSS层叠性和继承性。层叠性继承性知识点3-CSS优先级教师通过PPT的方式讲解CSS优先级。CSS优先级的概念和作用选择器的权重复合选择器权重知识点4-案例3-3搜索页面教师通过PPT的方式讲解案例3-3搜索页面。结构分析样式分析搭建页面结构定义CSS样式四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟