资源简介

课题 HTML5与CSS3基础( 二 ）
课时 2课时（90 min）
教学目标 知识技能目标： （1）认识CSS3 （2）了解CSS3的基本语法 （3）熟悉CSS3的选择器 （4）能够在HTML文档中引入CSS （5）认识CSS3的继承性与层叠性 思政育人目标： （1）掌握网页制作语言的基础知识，学习语法规则，养成良好的工作习惯。 （2）练习制作网页，培养自己的钻研精神。
教学重难点 教学重点：CSS3的选择器 教学难点：在HTML文档中引入CSS
教学方法 情景模拟法、问答法、讨论法、练习法
教学用具 电脑、投影仪、多媒体课件、教材
教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（5 min）→传授新知（28 min）→课堂抢答（10 min） 第2节课： 任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min）
教学过程 主要教学内容及步骤 设计意图
第一节课
课前任务 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解CSS3 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望
考勤
（2 min） 【教师】使用文旌课堂APP进行签到 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况
问题导入
（5 min） 【教师】提出以下问题： 什么是CSS3，它的作用是什么？ 【学生】思考、举手发言 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容
传授新知
（28 min） 【教师】通过学生的发言，引入新的知识点，介绍CSS3的基本语法，及如何在HTML文档中引入CSS 一、CSS3简介 【教师】展示CSS3设计器，帮助学习理解 随着HTML功能的不断完善，结构代码和样式代码的混合使用让HTML文档的代码结构十分混乱，为网页的维护工作增加了难度。此时CSS应运而生，它将网页的结构层和表现层分离开来，大大简化了HTML代码。 1994年，哈坤·利提出了CSS的最初设想，之后CSS技术经历了几次发展，最终W3C于2005年12月开始制定CSS3标准。到目前为止该标准还没有最终定稿，但主流浏览器已经开始支持其中的大部分特性。 （详见教材） 二、CSS3基本语法 【课堂互动】【教师】提出以下问题： CSS3的基本语法格式是什么形式的？有哪些组成部分？ 【学生】思考、举手回答 样式为：body { font-size: 20 px;color: lightblue;} CSS3样式是由选择器和声明组成。 （详见教材） 【教师】展示CSS3样式的基本格式，辅助学习理解CSS3样式的组成部分 （1）选择器用于匹配HTML文档中的某个或某些元素。 （2）声明可以有若干个，声明之间用分号隔开并放置在一对大括号（即样式分隔符）中，它们用于命令浏览器如何渲染指定对象。声明由属性和属性值两部分组成。 （3）属性是用于设置样式的具体效果项，属性名一般由一个或多个单词组成，多个单词中间用连字符连接。 （4）属性值是设置属性效果的参数，可以是数值或关键字。 （详见教材） 三、在HTML文档中引入CSS HTML与CSS是两种不同的语言，要让它们同时对一个网页产生作用，必须在HTML文档中引入CSS。在HTML文档中引入CSS的3种方式分别为行内样式、内嵌样式表与链接样式表。 1. 行内样式 【教师】利用多媒体辅助讲解行内样式 行内样式也称为内联样式，即直接为HTML标签设置style属性，具体格式为： <标签名 style="属性1:属性值1;属性2:属性值2;……">内容 其中，style是标签的属性，它自身又包含了多个样式属性，这些属性与属性值的规范与CSS3相同。 （详见教材） 2．内嵌样式表与链接样式表 【教师】利用多媒体辅助讲解内嵌样式表与链接样式表 在网页内容较多时，大量使用行内样式会使页面代码显得非常杂乱，降低可读性。而使用内嵌样式表或链接样式表可以避免这类问题。 在Dreamweaver CC中添加内嵌样式表和链接样式表的方法为，单击“CSS设计器”面板中“源”窗格左侧的加号按钮，在展开的列表中可以看到3个选项。其中，“在页面中定义”选项表示设置内嵌样式表，“创建新的CSS文件”与“附加现有的CSS文件”选项表示设置链接样式表。 （1）内嵌样式表。选择“在页面中定义”选项后，文档窗口即自动生成