HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第7章 认识CSS.doc

PAGE13

网页设计与制作

授课教案

学年第学期

学院（部）专业（学部）

课程名称

电子商务网页设计与制作

任课教师

课内形式

理论教学□课内实践□理实一体?习题复习□考核评价□其他活动□

学习量

安排

课内：

课外形式

调查分析?小组研讨□实践任务?理论探究□考核评价□汇报展示□其他活动?

课外：

序号

7

授课日期

月日

月日

月日

月日

授课班级

课内教学内容：

第7章认识CSS

课外学习任务：

（1）课前：

以小组为单位，讨论如何使用CSS实现对网页元素样式的设置并以PPT的形式记录下来。

（2）课后：

=1\*GB3①通过CSS内部样式表和ID选择器为网页中的文字添加样式。

=2\*GB3②为网页添加CSS外部样式表，并使用类选择器为网页中的表格添加样式。

=3\*GB3③通过CSS伪类改变超链接的样式。

教学目标：

知识目标

掌握CSS样式表的设置方法。

掌握选择器。

掌握伪类和伪元素。

掌握CSS优先级。

掌握CSS中的单位。

能力目标

能够掌握CSS的使用方法；

能够通过CSS对网页元素添加样式。

素质目标

较强的专业知识和自学能力；

丰富知识结构，提升专业知识；

掌握使用CSS对文档元素的操作能力，理解并应用专业知识。

重点难点及解决方法：

（1）重点：使用CSS为元素添加样式

解决方法：通过知识点讲解+课堂示例相结合的方法，教师讲解使用CSS对文档元素添加样式，引导学生积极思考，掌握相应知识；同时通过课堂示例展示，使学生可以掌握CSS的使用方法；培养学生的思维能力和分析问题解决问题的能力。

（2）难点：伪类和伪元素

解决方法：通过案例解析+启发式教学讲解的方式，细致讲解使用伪类和伪元素对元素的操作。帮助学生掌握伪类和伪元素对元素的操作方法和技巧。从实用的角度帮助学生提高专业知识。

课内教学授课地点：

教学媒体：微课、PPT课件、网页图片、相关教学视频等。

设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。

其它资源：与本次课相关的专业技术论文电子版。

学习效果评价方式：

对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；

对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。

课后小结：

填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。

课内教学内容及过程

时间分配

方法

及手段

1.CSS简介

层叠样式表（CSS）也可称为级联样式表，就是平常所说的“样式表”。它是一种简单、灵活、易学的样式设计工具，可以定义网页元素的各种属性变化，如文字背景、字形等。CSS样式的属性是在HTML元素中体现的，并不是单独显示在浏览器中。它可以定义在HTML文件的标签里，也可以通过外部文件链接到页面中。如果附加在外部文件中，一个样式表可以作用到多个页面中，具有更好的易用性和扩展性。

CSS样式表可以使用HTML标签或命名归纳的方法来定义。除了可以控制传统的文本属性外，还可以控制一些特别的HTML元素属性，如鼠标指针、图片效果等。一般来说，可以使用CSS样式表进行如下操作。

灵活控制网页中文字的字体、颜色、大小、间距等样式，弥补HTML文字单一的不足。

可随意设置文本块的行高、缩进，并可以为其加入三维效果的边框。

能够更方便地为任何网页元素设置不同的背景颜色和背景图片。

精确控制网页元素的位置，以进行精确的排版定位。

可为网页中的元素设置各种过滤器，从而产生诸如阴影、辉光、模糊和透明等效果。

可以与脚本语言相结合，使网页中的元素产生各种动态效果。

2.CSS样式表的设置方法

【内联样式表】

写在标签内的样式称为内联样式。在标签内编写的样式所能影响的范围最小，仅仅影响该标签内的文字，另一个标签内的文字将无法显示该标签定义的样式。设置内联样式的语法格式如下。

标签名style=样式属性1:属性值1;样式属性2:属性值2;…

【内部样式表】

在标签内设置样式，可以影响该标签内的文字，但其影响范围太小。如果HTML文件中有多个相同样式的标签，使用内联样式就要每个标签都设置一次，不能体现出CSS的强大功能。

在HTML文件中使用style标签可以设置影响整个文档的样式，这种使用style标签来定义样式的方式称为内部样式。其语法格式如下。

styletype=text/css

选择器1{样式属性:属性值;样式属性:属性值;…}

选择器2{样式属性:属性值;样式属性:属性值;…