HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第11章 CSS3特效和动画.doc

PAGE10

网页设计与制作

授课教案

学年第学期

学院（部）专业（学部）

课程名称

电子商务网页设计与制作

任课教师

课内形式

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

学习量

安排

课内：

课外形式

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

课外：

序号

11

授课日期

月日

月日

月日

月日

授课班级

课内教学内容：

第11章CSS3特效和动画

课外学习任务：

（1）课前：

以小组为单位，讨论CSS3特效和动画相关知识，通过查询了解当前流行的网络相册布局风格并以PPT的形式记录下来。

（2）课后：

=1\*GB3①为元素添加圆角和背景，并设置背景为半透明。

=2\*GB3②使用CSS3中的动画特效，让元素切换7种颜色。

教学目标：

知识目标

掌握圆角、透明度、背景和渐变效果的使用

掌握2D和3D转换、过渡和动画效果的使用

能力目标

能够独立实现多种CSS特效；

能够独立实现多种CSS动画。

素质目标

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

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

掌握CSS特效和动画的使用，理解并应用专业知识。

重点难点及解决方法：

（1）重点：圆角、透明度、背景和渐变效果

解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解圆角、透明度、背景和渐变效果，引导学生积极思考，掌握相应知识；同时通过课堂在线展示，使学生可以更直观的了解在实现CSS特效过程中可能遇到的问题以及解决方法；培养学生的思维能力和分析问题解决问题的能力。

（2）难点：2D和3D转换、过渡和动画效果解决方法：通过代码讲解+在线演示的的方式教学，细致讲解2D和3D转换、过渡和动画效果如何实现。帮助学生掌握2D和3D转换、过渡和动画实现方法和技巧。从实用的角度帮助学生提高专业知识。

课内教学授课地点：

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

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

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

学习效果评价方式：

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

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

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

课后小结：

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

课内教学内容及过程

时间分配

方法

及手段

1.圆角

【设置边框为圆角】

圆角样式的本质是设置元素边框?4?个角的弧度为指定值。设置元素为圆角时需要使用CSS的border-radius属性，其语法格式如下。

border-radius:数值;

其中，数值可以为px、%、em等形式的。该数值会决定元素边框的圆角弧度。该值越大，边框的圆角越接近圆。当该值大于等于元素的宽度或高度的一半时，元素会显示为圆。

【设置每个圆角为指定值】

使用border-radius属性设置元素为圆角时还可以分别指定边框的每个圆角值，其语法格式如下。

border-radius:数值1数值2数值3数值4;

其中，数值的个数可以实现不同的效果，具体如下所示。

4个值：第一个值设置左上角的圆角，第二个值设置右上角的圆角，第三个值设置右下角的圆角，第四个值设置左下角的圆角。

3个值：第一个值设置左上角的圆角，第二个值设置右上角和左下角的圆角，第三个值设置右下角的圆角。

2个值：第一个值设置左上角与右下角的圆角，第二个值设置右上角与左下角的圆角。

2.透明度

在网页设计中，合理地使用透明度属性可以提升网页布局的细节表现力，增添层次感。通过调整透明度还可以提升文字对比度，以使用户在阅读网页内容时更轻松、用户体验更好。调整图片的透明效果还可以实现更多美感和艺术性的交互效果，让网页的焦点更加引人注目。

设置元素的透明度可以使用opacity属性实现，其语法格式如下。

opacity:属性值;

其中，属性值的取值范围为0.0到1.0。属性值越低，透明度越高。

3.背景

背景可以用来衬托主体，突出主体的特点和魅力。在网页设计时网页背景颜色或者背景图像的挑选十分重要。合适的背景图像可以增强氛围感，让用户在浏览网页时更有代入感。例如，售卖登山用具的商店所选择的背景图像大多是陡峭的大山，让用户在浏览登山用具时，能很好地联想到自己要征服的山峰，从而产生更强的代入感和对商品的兴趣。

从HTML4.01标准开始废除了标签中关于设置背景的相关属性，因此，在设置元素的背景时需要通过CSS样式实现。在CS