任务10 制作校园照片墙页面

教案名称任务十制作校园照片墙页面计划学时4学时知识目标掌握通过transition属性生成过渡动画的方法掌握通过transform属性生成2D和3D变形的方法掌握通过animation属性创建关键帧生成动画的方法素质目标培养学生的团队协作能力引导学生积极探索未知及工匠精神的养成培养学生不畏困难，勇往直前，做社会和国家合格接班人教学重点过渡、2D转换、3D转换、动画教学难点过渡、3D转换、动画教学模式教学做一体化线上+线下混合教学教学活动及主要环节素养提升第1学时（过渡属性）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）过渡属性的作用是什么？为何使用过渡属性？（学生回答，教师对问题进行讲解）=2\*ROMANII.重难点内容讲授：（30分钟）CSS3中，过渡属性主要包括transition-property、transition-duration、transition-timing-function、transition-delay四种属性。transition-property属性（1）教师通过PPT对transition-property属性的概念及作用进行讲解，指出transition-property属性用于指定应用过渡效果的CSS属性的名称。（2）教师transition-property属性的基本语法格式进行讲解，并进行代码演示。（3）教师对transition-property属性的三个常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。transition-property:none|all|property;（4）教师指出应用transition-property属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。二、transition-duration属性（1）教师通过PPT对transition-duration属性的概念及作用进行讲解，指出transition-duration属性用于定义过渡效果花费的时间。（2）教师对transition-duration属性的基本语法格式进行讲解，并进行代码演示。（3）教师指出在设置过渡效果时，必须使用transition-duration属性设置过渡时间，否则不会产生过渡效果。（4）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。三、transition-timing-function属性（1）教师通过PPT对transition-timing-function属性的概念及作用进行讲解，指出transition-timing-function属性规定过渡效果的速度曲线。（2）教师对transition-timing-function属性的基本语法格式进行讲解，并进行代码演示。（3）教师对transition-timing-function属性的常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。（4）教师对比transition-timing-function属性不同属性值的产生过渡效果的速度曲线，并分析其异同。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。四、transition-delay属性（1）教师通过PPT对transition-delay属性的概念及作用进行讲解，指出transition-delay属性规定过渡效果何时开始。（2）教师对transition-delay属性的基本语法格式进行讲解，并进行代码演示。（3）教师对比transition-delay属性设置的过渡效果，并分析说明。（4）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。五、transition属性（1）教师对transition属性的概念进行讲解，指出transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。（2）教师对transition属性的基本语法格式进行讲解，并进行代码演示。（3）教师对使用transition属性设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性进行讲解，并对比分析其优缺点。（4）教师指出应用transition属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。【案例】在项目chapter10中新建一个网页文件，使用transition属性设置图像的过渡效果。（源码参考教材）【案例】在项目chapter10中再新建一个网页文件，使用transition属性定义图片遮罩效果。（源码参考教材）=3\*ROMANIII.课堂小结：（5分钟）教师带领学生对本课时所学知识点进行回顾，使学生更熟练地掌握如何使用transition-property、transition-duration、transition-timing-function、transition-delay属性设置元素的过渡效果。课后作业1：超星学习通平台作业课后作业2：使用学习通平台的教学视频自学任务10中的变形属性。第2学时（变形属性）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）使用transform属性可以实现哪几种变形效果？（学生回答，教师对问题进行讲解）=2\*ROMANII.重难点内容讲授：（30分钟）一、认识transform（1）教师通过PPT对CSS32D变形和3D变形产生的背景进行介绍。（2）教师对CSS3变形能够实现的功能和效果进行概述，并分析其优缺点。（3）教师对transform属性的基本语法进行讲解，并使用代码进行演示。（4）教师指出transform-function函数包括matrix()、translate()、scale()、rotate()和skew()等，并进行简单介绍。（5）学生练习，教师巡视，对疑难问题进行解答。二、2D转换（1）教师指出使用transform属性可以实现2D转换，主要包括：平移、缩放、倾斜和旋转。（2）教师分别对translate()方法、scale()方法、skew()方法、rotate()方法的实现效果及基本语法格式进行讲解，并画出变形效果示意图。（3）教师分别对ranslate()方法、scale()方法、skew()方法、rotate()方法进行讲解，通过案例演示其具体用法和效果，并对比分析其变形效果的异同。（4）教师指出应用transform属性实现平移、缩放、倾斜和旋转时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。三、3D转换（1）教师和学生互动：在上一知识点中，我们已经学习了2D转换，主要包括如何让元素在平面上进行顺时针或逆时针旋转。其实，在3D变形中可以让元素围绕X轴、Y轴、Z轴进行旋转，下面针对CSS3中的rotateX()、rotateY()函数进行具体讲解。（2）教师分别针对rotateX()、rotateY()、rotate3d()函数的基本语法格式及常见参数进行讲解，并就案例进行代码演示。（3）教师对比分析rotateX()、rotateY()、rotate3d()函数转换效果的异同，进行分析说明。（4）教师指出应用rotate3d()函数时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。【案例】在项目chapter10中新建一个网页文件，使用transition属性和transform属性来实现淘宝衣服图片放大效果。（源码参考教材）【案例】在项目chapter10中新建一个网页文件，盒子中放入两张图片，鼠标指针移动到图片上时，实现图片的翻转效果。（源码参考教材）=3\*ROMANIII.课堂小结：（5分钟）对本课时所学知识点进行回顾，使学生更熟练地掌握通过transform属性实现元素的移动、倾斜、缩放、翻转等变形效果。重点是2D转换、3D转换，易错点在于注意区分2D转换和3D转换的不同。课后作业1：超星学习通平台作业课后作业2：使用学习通平台的教学视频自学任务10中的动画属性。第3学时（CSS3动画）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.前课复习：（5分钟）通过以下问题，复习上节课内容在CSS3中，使用transform属性可以实现变形效果。下列选项中，能够实现元素缩放的函数是（）。A、translate（）方法;B、scale()方法;C、skew()方法;D、rotate()方法;答案：B答案解析：scale()方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。元素尺寸的增加或减少，由定义的宽度（X轴）和高度（Y轴）参数控制。=2\*ROMANII.学生讨论：（5分钟）使用动画之前必须先定义关键帧，一个关键帧表示动画过程中的一个状态。在CSS3中，@keyframes规则用于创建动画。那么，同学们讨论下：如何使用@keyframes属性定义动画？（学生回答，教师对问题进行讲解）=3\*ROMANIII.重难点内容讲授：（30分钟）一、@keyframes——定义关键帧在上面的语法格式中，@keyframes属性包含的参数具体含义如下：animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。例如，使用@keyframes属性可以定义一个淡入动画，示例代码如下：@keyframes'appear'{ 0%{opacity:0;}/*动画开始时的状态，完全透明*/ 100%{opacity:1;}/*动画结束时的状态，完全不透明*/}（1）教师和学生互动：使用动画之前必须先定义关键帧，一个关键帧表示动画过程中的一个状态。在CSS3中，@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐变为新样式的动画效果。下面，将对@keyframes属性进行具体讲解。（2）教师通过PPT对@keyframes属性的概念及作用进行讲解，指出@keyframes规则用于创建动画。（3）教师对@keyframes属性的基本语法格式进行讲解，并进行代码演示。（4）教师对@keyframes属性包含的参数含义进行说明，并进行代码演示。（5）教师指出应用@keyframes属性时需要注意的问题，并给予解答。（6）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。二、animation-name（1）教师通过PPT对animation-name属性的概念及作用进行讲解，指出animation-name属性用于定义要应用的动画名称，为@keyframes动画规定名称。（2）教师对animation-name属性的基本语法格式进行讲解，并进行代码演示。（3）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。三、animation-duration（1）教师通过PPT对animation-duration属性的概念及作用进行讲解，指出animation-duration属性用于定义整个动画效果完成所需要的时间。（2）教师对animation-duration属性的基本语法格式进行讲解，并进行代码演示。（3）教师指出应用animation-duration属性时需要注意的问题，并给予解答。（4）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。四、animation-timing-function（1）教师通过PPT对animation-timing-function属性的概念及作用进行讲解，指出animation-timing-function用来规定动画的速度曲线，定义使用哪种方式来执行动画效果。（2）教师对animation-timing-function属性的基本语法格式进行讲解，并进行代码演示。（3）教师对animation-timing-function属性的常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值动画效果的异同。（4）教师指出应用animation-timing-function属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。五、animation-delay（1）教师通过PPT对animation-delay属性的概念及作用进行讲解，指出animation-delay属性用于定义执行动画效果之前延迟的时间，即规定动画什么时候开始。（2）教师对animation-delay属性的基本语法格式进行讲解，并进行代码演示。（3）教师指出应用animation-delay属性时需要注意的问题，并给予解答。（4）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。六、animation-iteration-count（1）教师通过PPT对animation-iteration-count属性的概念及作用进行讲解，指出animation-iteration-count属性用于定义动画的播放次数。（2）教师对animation-iteration-count属性的基本语法格式进行讲解，并进行代码演示。（3）教师对animation-iteration-count属性的常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值动画效果的异同。（4）教师指出应用animation-iteration-count属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。七、animation-direction（1）教师通过PPT对animation-direction属性的概念及作用进行讲解，指出animation-direction属性定义当前动画播放的方向。（2）教师对animation-iteration-count属性的基本语法格式进行讲解，并进行代码演示。（3）教师对animation-direction属性的常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值动画效果的异同。（4）教师指出应用animation-direction属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。八、animation（1）教师对animation属性的概念进行讲解，指出animation属性是一个简写属性，用于在一个属性中设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六个动画属性。（2）教师对animation属性的基本语法格式进行讲解，并进行代码演示。（3）教师对使用animation属性同时设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六个动画属性进行讲解，并对比分析其优缺点。（4）教师指出应用animation属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。Ⅳ.课堂小结：（5分钟）对本课时所学知识点进行回顾，以此使学生更熟练地掌握如何使用animation相关属性定义不同的动画效果。重点是animation属性的用法。难点是注意区分animation相关属性的用法。课后作业1：超星学习通平台作业课后作业2：使用学习通平台的教学视频自学任务10任务实现。第4学时（制作照片墙页面）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.重难点内容讲授：（40分钟）【任务实现】：制作照片墙页面在项目chapter10中再新建一个网页文件，利用过渡和变形等属性实现照片墙效果，文件名为photos.html，在文件中首先添加照片，即搭建页面结构，然后给每张照片添加不一样的动画样式。一、搭建照片墙页面结构在页面中有6张图片，可以使用无序列表<ul>来定义，每张图片放入一个列表项<li>中。打开新创建的文件photos.html，添加照片墙页面结构代码如下。（学生一起操作，实现教学做一体化，加强学生对知识难点的理解。）二、定义照片墙页面CSS样式搭建照片墙页面结构后，使用CSS