任务9 制作学院风景墙

教案名称任务九制作学院风景墙计划学时4学时知识目标掌握通过transition属性生成过渡动画的方法掌握通过transform属性生成2D变形的方法能力目标能够控制过渡时间、动画快慢等常见过渡效果掌握CSS3中的变形属性，能够制作2D转换效果素质目标培养学生的团队协作能力引导学生积极探索未知培养学生不畏困难，勇往直前的精神，做社会和国家合格接班人教学重点过渡、2D转换教学难点2D转换教学模式教学做一体化线上+线下混合教学教学活动及主要环节思政元素切入点第1学时（过渡属性）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（5分钟）传统的Web设计中，当网页中需要显示动画或特效时，需要使用JavaScript脚本或者Flash来实现。CSS3提供了强大的过渡属性，它可以在不使用Flash动画或者JavaScript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果，例如渐显、渐弱、动画快慢等。那么，在CSS3中，过渡属性主要包括哪些呢？（学生回答，教师对问题进行讲解）CSS3中，过渡属性主要包括transition-property、transition-duration、transition-timing-function、transition-delay四种。transition-property属性用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。\o"CSS3transition-duration属性"transition-duration属性用于定义过渡效果花费的时间。transition-timing-function属性规定过渡效果的速度曲线。transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。=2\*ROMANII.重难点内容讲授：（40分钟）transition-property属性（1）教师通过PPT对transition-property属性的概念及作用进行讲解，指出transition-property属性用于指定应用过渡效果的CSS属性的名称。（2）教师transition-property属性的基本语法格式进行讲解，并进行代码演示。（3）教师对transition-property属性的三个常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。transition-property:none|all|property;（4）教师指出应用transition-property属性时需要注意的问题，并给予解答。二、transition-duration属性（1）教师通过PPT对transition-duration属性的概念及作用进行讲解，指出transition-duration属性用于定义过渡效果花费的时间。（2）教师对transition-duration属性的基本语法格式进行讲解，并进行代码演示。（3）教师指出在设置过渡效果时，必须使用transition-duration属性设置过渡时间，否则不会产生过渡效果。三、transition-timing-function属性（1）教师通过PPT对transition-timing-function属性的概念及作用进行讲解，指出transition-timing-function属性规定过渡效果的速度曲线。（2）教师对transition-timing-function属性的基本语法格式进行讲解，并进行代码演示。（3）教师对transition-timing-function属性的常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。（4）教师对比transition-timing-function属性不同属性值的产生过渡效果的速度曲线，并分析其异同。四、transition-delay属性（1）教师通过PPT对transition-delay属性的概念及作用进行讲解，指出transition-delay属性规定过渡效果何时开始。（2）教师对transition-delay属性的基本语法格式进行讲解，并进行代码演示。（3）教师对比transition-delay属性设置的过渡效果，并分析说明。五、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属性时需要注意的问题，并给予解答。学生一起操作，实现教学做一体化，加强学生对知识难点的理解。例9-1使用transition的子属性设置过渡效果主要代码：transition-property:background; /*设置应用过渡效果的属性*/transition-duration:0.5s; /*过渡效果花费的时间*/transition-timing-function:ease-in-out; /*过渡效果*/transition-delay:0s; /*过渡效果的延迟时间*/也可以综合设置：transition:background0.5sease-in-out;/*综合设置过渡效果，最后一个值为0，可以省略*/例9-2在项目chapter09中新建一个网页文件，使用transition属性设置块元素的多种过渡效果主要代码：transition:all1sease-in;/*设置应用过渡效果的是所有属性，花费的时间为1s，过渡效果是慢速开始、逐渐加快的*/例9-3在项目chapter9中新建一个网页文件，使用transition属性设置图像的过渡效果。（源码参考教材）例9-4在项目chapter9中再新建一个网页文件，使用transition属性定义图片遮罩效果。（源码参考教材）第2学时（变形属性）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（5分钟）在CSS3之前，如果需要为页面设置变形效果，需要依赖于图片、Flash或JavaScript才能完成。CSS3出现后，通过transform属性就可以实现变形效果。那么，请同学们讨论：使用transform属性可以实现哪几种变形效果？（学生回答，教师对问题进行讲解）答案：在CSS3中，使用transform属性可以实现变形效果，主要包括4种变形效果，分别是：平移、缩放、倾斜和旋转。使用translate()方法能够重新定义元素的坐标，实现平移的效果。使用scale()方法用于缩放元素大小。使用skew()方法能够让元素倾斜显示。使用rotate()方法能够旋转指定的元素对象，主要在二维空间内进行操作。=2\*ROMANII.重难点内容讲授：（35分钟）一、认识transform（1）translate(x,y)——平移translate(x,y)函数用于重新定义元素的坐标。例9-5使用translate(x,y)函数定义平移效果。transform:translate(100px,30px);/*设置水平向右移动100px，垂直向下移动30px*/学生练习，教师巡视，对疑难问题进行解答。（2）scale(x,y)——缩放scale(x,y)函数用于设置元素的缩放效果。transform:scale(2,1.2); /*设置宽度放大2倍，高度放大1.2倍*/transform:scale(0.5); /*宽度和高度均缩小为原来的一半*/（3）skew(x,y)——倾斜skew(x,y)函数用于设置元素的倾斜效果。（4）rotate(angle)——旋转rotate(angle)函数用于设置元素的旋转效果。例9-7使用rotate(angle)函数定义旋转效果。transform:rotate(45deg); /*顺时针旋转45°*/二、2D转换（1）教师指出使用transform属性可以实现2D转换，主要包括：平移、缩放、倾斜和旋转。（2）教师分别对translate()方法、scale()方法、skew()方法、rotate()方法的实现效果及基本语法格式进行讲解，并画出变形效果示意图。（3）教师分别对ranslate()方法、scale()方法、skew()方法、rotate()方法进行讲解，通过案例演示其具体用法和效果，并对比分析其变形效果的异同。（4）教师指出应用transform属性实现平移、缩放、倾斜和旋转时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。例9-8在项目chapter9中新建一个网页文件，使用transition属性和transform属性来实现淘宝衣服图片放大效果。（源码参考教材）=3\*ROMANIII.课堂小结：（5分钟）教师带领学生对本课时所学知识点进行回顾，使学生更熟练地掌握如何使用transition-property、transition-duration、transition-timing-function、transition-delay属性设置元素的过渡效果。对本课时所学知识点进行回顾，使学生更熟练地掌握通过transform属性实现元素的移动、倾斜、缩放、翻转等变形效果。重点是2D转换。课后作业1：超星学习通平台作业课后作业2：使用学习通平台的教学视频自学任务10中的任务实现。第3、4学时（任务实现：制作学院风景墙）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.重难点内容讲授：（85分钟）【任务实现】：制作照片墙页面在项目chapter9中再新建一个网页文件，利用过渡和变形等属性实现照片墙效果，文件名为photos.html，在文件中首先添加照片，即搭建页面结构，然后给每张照片添加不一样的动画样式。一、搭建照片墙页面结构在页面中有6张图片，可以使用无序列表<ul>来定义，每张图片放入一个列表项<li>中。打开新创建的文件photos.html，添加照片墙页面结构代码如下。（学生一起操作，实现教学做一体化，加强学生对知识难点的理解。）此时浏览网页效果，如下图。二、定义照片墙页面CSS样式搭建照片墙页面结构后，使用CSS内部样式表设置各元素样式，将该部分代码放入<head>和</head>标记之间，代码如下。浏览网页，当鼠标指针移动到照片上时，呈现相应的动画效果。任务完成。说明：在操作演示时教师可适时停下来，让学生自行尝试。小组成员之间协作讨论，教师巡视，对疑难问题进行解答。=2\*ROMANII.课堂小结：（5分钟）照片墙页面，重点在利用过渡属性、变形属性制作过渡、变形等动画效果，掌握transition属性、transform属性的使用方法，是完成本任务的关键。课后作业1：超星学习通平台作业课后作业2：借助超星学习平台的教学视频进行线下自学。分小组讨论过程中，培养学生团队合作，共同探讨的协作意识，培养同学们良好的沟通能力，为以后进入工作岗位打下良好的基础。过渡属性的应用比较繁琐有一点难度，引导学生面对困难和琐碎的知识点，要更有耐心去学习，要有踏实勤奋的钻研精神。通过案例实现，引导学生在“学中做”、“做中学”，把基础知识的学习和基本技能的掌握有机地结合在一起，从具体操作中培养应用能力。分组讨论培养同学们的团队协作意识，良好的沟通能力。对于难度稍高的任务，学生在实训过程中一定会碰到困难，鼓励引导学生不要气馁，面对困难更要迎难而上。学习的过程并不是照着老师的操作照猫