网页基础与制作 8

第1章PHP开篇PAGE16《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第3章运用CSS3设置网页样式计划课时7课时教学引入随着网页制作技术的不断发展，陈旧的CSS特性和标准已经无法满足现今的交互设计需求，开发者往往需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS3的出现，在不需要改变原有设计结构的情况下，增加了许多新特性，极大地满足了开发者的需求。本章将对CSS3的基础知识进行详细讲解。教学目标使学生了解CSS和CSS3，能够归纳CSS和CSS3的概念以及区别使学生了解CSS样式规则，能够说出其组成部分使学生熟悉CSS的层叠性和继承性，能够归纳CSS的层叠性和继承性使学生熟悉CSS优先级，能够归纳CSS优先级使学生熟悉CSS3新增的选择器，能够归纳这些选择器的基本使用使学生掌握CSS的引入方式，能够将CSS应用于HTML文档使学生掌握基础选择器的使用方法，能够通过基础选择器选择要改变样式的元素使学生掌握字体样式属性和文本外观属性的用法，能够设置字体、文本的样式教学重点引入CSSCSS基础选择器字体样式属性文本外观属性教学难点CSS层叠性和继承性CSS优先级CSS3新增选择器教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（认识CSS和CSS3、CSS样式规则、引入CSS）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课使用HTML标签属性对网页进行修饰存在很大的局限和不足，如网站维护困难、不利于代码阅读等。如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS将网页的HTML结构和网页的样式分离。本节课将对CSS和CSS3进行讲解。三、新课讲解知识点1-认识CSS和CSS3教师通过PPT的方式讲解认识CSS和CSS3。CSS的概念和作用CSS3的概念和它与CSS的区别CSS3的新样式知识点2-CSS样式规则教师通过PPT的方式讲解CSS样式规则。CSS样式规则的语法格式通过案例学习如何使用CSS对标题标签<h1>进行控制注意CSS代码结构中的特点知识点3-引入CSS教师通过PPT结合实际操作的方式讲解引入CSS。行内式内嵌式外链式四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（CSS基础选择器）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课要想将CSS样式应用于特定的HTML标签，首先需要找到该目标标签。在CSS中，执行这一任务的样式规则部分称为选择器。本节课将对CSS基础选择器进行讲解。三、新课讲解知识点-CSS基础选择器教师通过PPT结合实际操作的方式讲解CSS基础选择器。标签选择器类选择器id选择器通配符选择器标签指定式选择器后代选择器并集选择器四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（字体样式属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课为了更方便地控制网页中各种各样的字体，CSS提供了一系列的字体样式属性，本节课将对字体样式属性进行讲解。三、新课讲解知识点-字体样式属性教师通过PPT结合实际操作的方式讲解字体样式属性。font-size:字号大小font-family:字体font-weight:字体粗细font-style:字体风格font:综合设置字体样式@font-face规则word-wrap:自动换行四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（文本外观属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课使用HTML可以对文本外观进行简单的控制，但是效果并不理想。为此CSS提供了一系列的文本外观样式属性。本节课将对文本外观样式属性进行讲解。三、新课讲解知识点-文本外观属性教师通过PPT结合实际操作的方式讲解文本外观属性。color:文本颜色letter-spacing:字间距word-spacing:单词间距line-height:行间距text-transform:文本转换text-decoration:文本装饰text-align:水平对齐方式text-indent:文本缩进white-space:空白符处理text-shadow:阴影效果text-overflow:标示对象内文本的溢出四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五课时（CSS层叠性和继承性、CSS优先级）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课网页设计图中的设计元素有些外观是相同的，那么标签这些元素显示效果的CSS代码也是重复的，想要简化代码、降低代码复杂性，就需要学习CSS高级属性。本节课将具体介绍CSS高级属性的相关知识。三、新课讲解知识点1-CSS层叠性和继承性教师通过PPT结合实际操作的方式讲解CSS层叠性和继承性。层叠性继承性知识点2-CSS优先级教师通过PPT结合实际操作的方式讲解CSS优先级。CSS优先级的概念和作用选择器的权重复合选择器权重四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第六课时（CSS3新增选择器、阶段案例：制作新闻页面）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课CSS3是CSS的最新版本，在CSS3中增加了许多新的选择器。运用这些选择器可以简化网页代码的书写，让文档的结构更加简单。本节课将对CSS3新增选择器进行讲解。三、新课讲解知识点1-CSS3新增选择器教师通过PPT结合实际操作的方式讲解CSS3新增选择器。属性选择器关系选择器结构化伪类选择器伪元素选择器知识点2-阶段案例：制作新闻页面教师通过PPT结合实际操作的方式讲解阶段案例：制作新闻页面。案例分析案例实现四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节