第3章使用CSS技术美化网页教学设计精品文档.docx
《第3章使用CSS技术美化网页教学设计精品文档.docx》由会员分享，可在线阅读，更多相关《第3章使用CSS技术美化网页教学设计精品文档.docx（15页珍藏版）》请在冰豆网上搜索。
第3章使用CSS技术美化网页教学设计精品文档
《HTML+CSS+JavaScript网页制作案例教程》
教学设计
课程名称：
HTML+CSS+JavaScript网页制作案例教程
授课年级：
2015年级
授课学期：
2015学年第二学期
教师姓名：
某某老师
201年月日
课题名称
第3章使用CSS技术美化网页
计划课时
8课时
内容分析
使用HTML制作网页时，可以使用标记的属性对网页进行修饰，但是这种方式存在很大的局限和不足，例如维护困难、不利于代码的阅读等。
如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS，实现结构与表现的分离。
本章将对CSS的基本语法、引入方式、选择器、高级特性及常用的文本样式设置进行详细讲解。
教学目标
●掌握CSS样式规则，能够书写规范的CSS样式代码；
●掌握CSS字体样式及文本外观属性，能够控制页面中的文本样式；
●掌握CSS复合选择器，能够快捷选择页面中的元素；
●理解CSS层叠性、继承性与优先级，学会高效控制网页元素；
重点及措施
教学重点：
CSS基础选择器、CSS复合选择器、CSS层叠性与继承性、CSS优先级。
措施：
通过上机操作加强学习和补充案例进行巩固。
难点及措施
教学难点：
CSS层叠性与继承性、CSS优先级。
措施：
通过上机操作加强学习和补充案例进行巩固。
教学方式
教学采用教师课堂讲授为主，使用教学PPT讲解。
教
学
过
程
第一课时
（制作“文字Logo”，讲解CSS样式规则、引入CSS样式表、CSS基础选择器）
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习第二章“从零开始构建HTML页面”的相关知识。
1、通过上一章的学习，我们知道：
HTML文档的基本格式中，有一个重要的标记——
DOCTYPE>标记。
请简要描述什么是“
DOCTYPE>标记”及其用法？
答案：
●
DOCTYPE>标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。
●在文档开头处使用
DOCTYPE>标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。
说明：
教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
如果把一个网页看成一个人的话，XHTML就相当于人的骨架，是结构；CSS相当于人的衣服，是表现。
那么如何使用CSS去修饰页面呢？
其实，给网页应用样式首先需要使用CSS中的选择器。
那么，CSS基础选择器主要有哪些？
又有哪些不同呢？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
CSS基础选择器主要包括四种，具体如下：
●标记选择器。
标记选择器是指用HTML标记名称作为选择器。
用标记选择器定义的样式对页面中该类型的所有标记都有效。
●类选择器。
类选择器使用“.”进行标识，后面紧跟类名。
其最大的优势是可以为元素对象定义单独或相同的样式。
●id选择器。
id选择器使用“#”进行标识，后面紧跟id名。
元素的id值是唯一的，只能对应于文档中某一个具体的元素。
●通配符选择器。
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
✧案例描述
“Logo”是“商标”的英文缩写，是企业最基本的视觉识别形象，通过商标的推广可以让消费者识别企业主体和品牌文化。
“文字Logo”由于涵义明确、直接，易于被理解、认知，被广泛应用。
本节将引入CSS，通过CSS控制文字来模拟一款“文字Logo”。
✧知识点讲解
Ø总结知识点
教师和学生一起总结在案例中涉及到的知识点，主要包括“CSS样式规则、引入CSS样式表、CSS基础选择器”等。
Ø讲解“CSS样式规则”
（1）、教师展示PPT对“CSS样式规则”的具体格式进行讲解，并使用代码进行演示。
（2）、教师展示PPT，对初学者在书写CSS样式时需要注意的问题进行讲解。
（3）、教师让学生自行尝试，理解“CSS样式规则”的语法，并能灵活运用。
（4）、学生练习，教师巡视，对疑难问题进行解答。
Ø讲解“引入CSS样式表”
（1）、教师展示PPT对“HTML文档中引入CSS样式表”进行说明，并指出“引入CSS样式表”的三种方式。
（2）、教师分别对“行内式”、“内嵌式”及“链入式”引入CSS样式表进行讲解并通过代码进行演示。
（3）、教师指出“行内式”、“内嵌式”及“链入式”的基础语法格式及其优缺点。
（4）、学生练习，教师巡视，对疑难问题进行解答。
Ø讲解“CSS基础选择器”
（1）、教师展示PPT对“CSS选择器”的概念及用法进行讲解。
（2）、教师分别对“标记选择器”、“类选择器”、“id选择器”及“通配符选择器”的基本语法格式进行详细讲解并通过代码进行演示。
（3）、教师对比“标记选择器”、“类选择器”、“id选择器”及“通配符选择器”的使用方法及应用效果，并指出其优缺点。
（4）、学生练习，教师巡视，对疑难问题进行解答。
✧案例讲解
Ø案例分析
分析“文字Logo”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。
Ø案例实现
教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。
说明：
在网页制作时可适时停下来，让学生自行尝试。
小组之间可以协作讨论，教师巡视，对疑难问题进行解答。
✧阶段小结
Ø小结
重点：
CSS样式规则、引入CSS样式表、CSS基础选择器。
易错点：
注意区分标记选择器、类选择器、id选择器及通配符选择器。
Ø答疑
教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与解释。
✧巩固练习
Ø巩固“文字Logo”的制作
学完知识点后，让学生再制作一次“文字Logo”。
以此使学生更熟练地掌握“CSS样式规则、引入CSS样式表、CSS基础选择器”等知识点。
Ø通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
第二、三课时
（制作“专题栏目”，讲解CSS字体样式属性、CSS文本外观属性）
说明：
●将3.2节作为两个课时进行讲解。
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、通过上节课的学习，我们知道引入CSS样式的方法有很多，例如：
行内式、内嵌式以及链入式。
那么，现在请同学们回顾下：
什么是“内嵌式CSS”，以及其使用方法？
答案：
●内嵌式是将CSS代码集中写在HTML文档的
头部标记中，并且用