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

《第3章使用CSS专业技术美化网页教学设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

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

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

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

5、跟类名。其最大的优势是可以为元素对象定义单独或相同的样式。lid选择器。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样式表”的三种方式。10（2）、教师分别对“行内式”、“内嵌式”及“链入式”引入CSS样式表进行讲解并通过代码进行演示。（3）

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