使用CSS技术美化网教学设计样稿.doc

《HTML+CSS+JavaScript网页制作案例教程》
教学设计
课程名称： HTML+CSS+JavaScript网页制作案例教程
讲课年级： 级
讲课学期： 第二学期
老师姓名： 某某老师
201 年 月 日
课题名称
第3章 使用CSS技术美化网页
计划课时
8课时
内容分析
使用HTML制作网页时，能够使用标识属性对网页进行修饰，不过这种方法存在很大局限和不足，比如维护困难、不利于代码阅读等。假如期望网页美观、大方，而且升级轻松、维护方便，就需要使用CSS，实现结构和表现分离。本章将对CSS基础语法、引入方法、选择器、高级特征及常见文本样式设置进行具体讲解。
教学目标
掌握CSS样式规则，能够书写规范CSS样式代码；
掌握CSS字体样式及文本外观属性，能够控制页面中文本样式；
掌握CSS复合选择器，能够快捷选择页面中元素；
了解CSS层叠性、继承性和优先级，学会高效控制网页元素；
关键及方法
教学关键：CSS基础选择器、CSS复合选择器、CSS层叠性和继承性、CSS优先级。
方法：经过上机操作加强学****和补充案例进行巩固。
难点及方法
教学难点： CSS层叠性和继承性、CSS优先级。
方法：经过上机操作加强学****和补充案例进行巩固。
教学方法
教学采取老师课堂讲授为主，使用教学PPT讲解。
教
学
过
程
第一课时
（制作“文字Logo”，讲解CSS样式规则、引入CSS样式表、CSS基础选择器）
复****上节课内容
在讲解本节内容前，抛出以下问题让学生回复，以复****第二章“从零开始构建HTML页面”相关知识。
经过上一章学****我们知道：HTML文档基础格式中，有一个关键标识——<!DOCTYPE>标识。请简明描述什么是“<!DOCTYPE>标识”及其使用方法？
答案：
<!DOCTYPE> 标识在文档最前面，用于向浏览器说明目前文档使用哪种 HTML 或 XHTML 标准规范。
在文档开头处使用<!DOCTYPE>标识为全部XHTML文档指定XHTML版本和类型，只有这么浏览器才能将该网页作为有效XHTML文档，并按指定文档类型进行解析。
说明：老师可依据学生对上述问题回复情况，对以上问题进行简单讲解或直接进入本课时新内容学****br/>本课时内容学****br/>分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
假如把一个网页看成一个人话，XHTML就相当于人骨架，是结构； CSS相当于人衣服，是表现。那么怎样使用CSS去修饰页面呢？其实，给网页应用样式
首先需要使用CSS中选择器。那么，CSS基础选择器关键有哪些？又有哪些不一样呢？
请小组代表对以上问题发表见解。
老师对上述问题进行解释：
CSS基础选择器关键包含四种，具体以下：
标识选择器。标识选择器是指用HTML标识名称作为选择器。用标识选择器定义样式对页面中该类型全部标识全部有效。
类选择器。类选择器使用“.”进行标识，后面紧跟类名。其最大优势是能够为元素对象定义单独或相同样式。
id选择器。id选择器使用“#”进行标识，后面紧跟id名。元素id值是唯一，只能对应于文档中某一个具体元素。
通配符