第3章使用CSS技术美化网页-教学设计

《第3章使用CSS技术美化网页-教学设计》由会员分享，可在线阅读，更多相关《第3章使用CSS技术美化网页-教学设计（10页珍藏版）》请在金锄头文库上搜索。

1、HTML+CSS+JavaScript 网页制作案例教程教学设计课程名称： HTML+CSS+JavaScript 网页制作案例教程授课年级： 2015 年级授课学期： 2015 学年第二学期教师姓名：某某老师201年 月 日课题名称第 3 章 使用CSS 技术美化网页计划8 课时课时内容分析教学目标使用 HTML 制作网页时，可以使用标记的属性对网页进行修饰，但是这种方式存在很大的局限和不足，例如维护困难、不利于代码的阅读等。如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用 CSS，实现结构与表现的分离。本章将对 CSS 的基本语法、引入方式、选择器、高级特性及常用的文本样式设置进

2、行详细讲解。l 掌握 CSS 样式规则，能够书写规范的CSS 样式代码；l 掌握 CSS 字体样式及文本外观属性，能够控制页面中的文本样式；l 掌握 CSS 复合选择器，能够快捷选择页面中的元素；l 理解 CSS 层叠性、继承性与优先级，学会高效控制网页元素；教学重点：CSS 基础选择器、CSS 复合选择器、CSS 层叠性与继承性、CSS 优先重点及措施级。措施：通过上机操作加强学习和补充案例进行巩固。难点及措施教学方式教学过程教学难点： CSS 层叠性与继承性、CSS 优先级。措施：通过上机操作加强学习和补充案例进行巩固。教学采用教师课堂讲授为主，使用教学PPT 讲解。第一课时（制作“文字L

3、ogo”，讲解 CSS 样式规则、引入CSS 样式表、CSS 基础选择器）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第二章“从零开始构建HTML 页面”的相关知识。1、 通过上一章的学习，我们知道：HTML 文档的基本格式中，有一个重要的标记标记。请简要描述什么是“ 标记”及其用法？答案：l 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。l 在文档开头处使用 标记为所有的 XHTML 文档指定XHTML 版本和类型，只有这样浏览器才能将该网页作为有效的XHTML 文档，并按指定的文档类型进行解析。说明：教师可根据学生对上述问题的

4、回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：如果把一个网页看成一个人的话，XHTML 就相当于人的骨架，是结构； CSS 相当于人的衣服，是表现。那么如何使用CSS 去修饰页面呢？其实，给网页应用样式首先需要使用 CSS 中的选择器。那么，CSS 基础选择器主要有哪些？又有哪些不同呢？请小组代表对以上问题发表见解。教师对上述问题进行解释：CSS 基础选择器主要包括四种，具体如下：l 标记选择器。标记选择器是指用HTML 标记名称作为选择器。用标记选择器定义的样式对页面中该类型的所有标记都有效。l 类选择器。类

5、选择器使用“.”进行标识，后面紧跟类名。其最大的优势是可以为元素对象定义单独或相同的样式。l id 选择器。id 选择器使用“#”进行标识，后面紧跟id 名。元素的id 值是唯一的，只能对应于文档中某一个具体的元素。l 通配符选择器。通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。 案例描述“Logo”是“商标”的英文缩写，是企业最基本的视觉识别形象，通过商标的推广可以让消费者识别企业主体和品牌文化。“文字 Logo”由于涵义明确、直接，易于被理解、认知，被广泛应用。本节将引入 CSS，通过 CSS 控制文字来模拟一款“文字Logo”。 知识点讲解 总结知识

6、点教师和学生一起总结在案例中涉及到的知识点，主要包括“CSS 样式规则、引入CSS 样式表、CSS 基础选择器”等。 讲解“CSS 样式规则”（1） 、教师展示PPT 对“CSS 样式规则”的具体格式进行讲解，并使用代码进行演示。（2） 、教师展示 PPT，对初学者在书写 CSS 样式时需要注意的问题进行讲解。（3） 、教师让学生自行尝试，理解“CSS 样式规则”的语法，并能灵活运用。（4） 、学生练习，教师巡视，对疑难问题进行解答。 讲解“引入 CSS 样式表”（1） 、教师展示 PPT 对“HTML 文档中引入 CSS 样式表”进行说明， 并指出“引入CSS 样式表”的三种方式。（2） 、

7、教师分别对“行内式”、“内嵌式”及“链入式”引入CSS 样式表进行讲解并通过代码进行演示。（3） 、教师指出“行内式”、“内嵌式”及“链入式”的基础语法格式及 其优缺点。（4） 、学生练习，教师巡视，对疑难问题进行解答。 讲解“CSS 基础选择器”（1） 、教师展示 PPT 对“CSS 选择器”的概念及用法进行讲解。（2） 、教师分别对“标记选择器”、“类选择器”、“id 选择器”及“通配符选择器”的基本语法格式进行详细讲解并通过代码进行演示。（3） 、教师对比“标记选择器”、“类选择器”、“id 选择器”及“通配符选择器”的使用方法及应用效果，并指出其优缺点。（4） 、学生练习，教师巡视，对

8、疑难问题进行解答。 案例讲解 案例分析分析“文字Logo”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML 标记及应用了哪些CSS 样式。 案例实现教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面结构、定义CSS 样式等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。 阶段小结 小结重点：CSS 样式规则、引入CSS 样式表、CSS 基础选择器。易错点：注意区分标记选择器、类选择器、id 选择器及通配符选择器。 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的

9、知识点给与解释。 巩固练习 巩固“文字 Logo”的制作学完知识点后，让学生再制作一次“文字 Logo”。以此使学生更熟练地掌握“CSS 样式规则、引入CSS 样式表、CSS 基础选择器”等知识点。 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第二、三课时（制作“专题栏目”，讲解 CSS 字体样式属性、CSS 文本外观属性）说明：l 将 3.2 节作为两个课时进行讲解。复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。1、通过上节课的学习，我们知道引入CSS 样式的方法有很多，例如：行内式、内嵌式以

10、及链入式。那么，现在请同学们回顾下：什么是“内嵌式 CSS”，以及其使用方法？答案：l 内嵌式是将CSS 代码集中写在HTML 文档的头部标记中，并且用标记定义。标记一般位于标记中标记之后，也可以把它放在HTML 文档的任何地方。l 同时，必须设置 type 的属性值为“text/css”，这样浏览器才知道标记包含的是CSS 代码，因为标记还可以包含其他代码，如JavaScript 代码。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：浏览网页时，我们可以看到字号大小不同，字体颜色

11、各异以及不同形态的字体效果。那么，CSS 字体样式中的哪些属性可以设置网页中的字体效果呢？请分别列举。请小组代表对以上问题发表见解。教师对上述问题进行解释：CSS 字体样式属性主要包括：l font-size:字号大小；l font-family:字体；l font-weight:字体粗细；l font-variant:变体；l font-style:字体风格；l font:综合设置字体样式； 案例描述“专题栏目”是网页信息的一种重要表现形式，通常围绕某一个特定的主题，进行较全面、深入的报道。本节将通过 CSS 字体样式及CSS 文本外观样式制作一个专题栏目。 知识点讲解 总结知识点教师和学生

12、一起总结在案例中涉及到的知识点，主要包括“CSS 字体样式属性、CSS 文本外观属性”。 讲解“CSS 字体样式属性”（1） 、教师和学生互动：浏览网页的时候，我们经常看到一些特殊的字 体效果，比如：控制字体的字号、将字体进行加粗，或者设置字体倾斜等。为了更方便的控制网页中各种各样的字体，CSS 提供了一系列的字体样式属性。（2） 、教师展示 PPT 对“网页中常见的字体效果”进行展示及说明。（3） 、教师分别对 “font-size、font-family、font-weight、font-variant、font-style 及 font 综合设置属性”进行讲解，并进行代码演示。（4） 、

13、教师分别对使用 CSS 设置字体样式时需要注意的问题进行说明。（5） 、学生练习，教师巡视，对疑难问题进行解答。 讲解“CSS 文本外观属性”（1） 、教师和学生互动：使用CSS 不仅可以设置一些特殊的字体效果， 还可以设置一些段落文本的外观显示效果，比如：设置文本颜色、 字间距、行间距、文本装饰效果等。使用 HTML 只能进行简单的控制，但是效果并不理想，为此CSS 提供了一系列的文本外观样式属性。（2） 、教师展示 PPT 对“网页中常见的文本外观效果”进行展示及说明。（3） 、教师分别对“color、letter-spacing、word-spacing、line-height 、 te

14、xt-transform、text-decoration、text-align、text-indent、white-space” 等文本外观属性进行讲解，并进行代码演示。（4） 、教师分别对使用 CSS 设置文本外观时需要注意的问题进行说明。（5） 、学生练习，教师巡视，对疑难问题进行解答。 案例讲解 案例分析分析“专题栏目”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML 标记及应用了哪些CSS 样式。 案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS 样式等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。 阶段小结 小结重点：CSS 字体样式属性、CSS 文本外观属性。 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固“专题栏目”的制作学完知识点后，让学生再制作一次“专题栏目”。以此使学生更熟练地掌握如何使用CSS 对网页中的字体样式及文本外观进行设置。 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。 布置作业