网页基础与制作 7

第1章PHP开篇PAGE16《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第8章全新的网页视听技术计划课时8课时教学引入在网络飞速发展的今天，互动、互联、互通的网页多媒体新生态正在形成。声音、视频、动画已经被越来越广泛地应用在网页设计中。比起静态的图片和文字，音频、视频、动画可以为用户提供更直观、丰富的信息，为浏览者带来全新的感受。本章将对网页中的音频、视频、动画等视听技术进行详细讲解。教学目标使学生掌握页面的音频和视频嵌入技术，能够描述HTML5中嵌入音频和视频的标签和属性使学生理解CSS3中的过渡属性，能够说出不同过渡属性的含义使学生掌握CSS3中的变形属性，能够归纳2D变形和3D变形的效果使学生掌握CSS3中的动画，能够归纳制作动画的常用属性使学生掌握<video>标签和<audio>标签的使用方法，能够在网页中定义视频和音频使学生掌握过渡属性的使用方法，能够实现元素的平滑过渡效果使学生掌握变形属性的使用方法，能够实现元素的平移、缩放、倾斜和旋转等效果使学生掌握动画属性的使用方法，能够实现丰富的动画效果教学重点使用<video>嵌入视频使用<audio>嵌入音频transition-property属性transition-duration属性transition属性2D变形@keyframesanimation-name属性animation-duration属性animation-iteration-count属性教学难点2D变形3D变形教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（传统音频、视频嵌入方式，使用<video>嵌入视频，使用<audio>嵌入音频，浏览器对音视频文件的兼容性，控制视频的宽高）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在网页中嵌入音频和视频可以让网页提供更直观、丰富的信息。本节课将对网页中视频和音频的嵌入进行讲解。三、新课讲解知识点1-传统音频、视频嵌入方式教师通过PPT的方式讲解传统音频、视频嵌入方式。FlashPlayer插件的作用HTML5中音频、视频的嵌入方式知识点2-使用<video>嵌入视频教师通过PPT结合实际操作的方式讲解使用<video>嵌入视频。<video>标签的作用<video>标签的语法格式通过案例演示嵌入视频的方法video元素常见属性不同浏览器的视频播放效果知识点3-使用<audio>嵌入音频教师通过PPT结合实际操作的方式讲解使用<audio>嵌入音频。<audio>标签的作用<audio>标签的语法格式通过案例演示嵌入音频的方法audio元素常见属性知识点4-浏览器对音视频文件的兼容性教师通过PPT的方式讲解浏览器对音视频文件的兼容性。视频和音频的格式source元素的作用运用source元素添加音频的基本格式演示source元素的使用。知识点5-控制视频的宽高教师通过PPT结合实际操作的方式讲解控制视频的宽高。width属性和height属性的作用演示如何设置视频文件的宽度和高度四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（transition-property属性、transition-duration属性、transition-timing-function属性、transition-delay属性、transition属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在网页设计中，过渡效果可以让元素从一种状态慢慢转换到另一种状态，如渐显、渐隐、动画的加快减慢等。想要让元素实现过渡效果，就需要为元素设置过渡属性，在CSS3中提供了transition-property、transition-duration、transition-timing-function、transition-delay等多种过渡属性，本节课将分别对这些过渡属性进行详细讲解。三、新课讲解知识点1-transition-property属性教师通过PPT结合实际操作的方式讲解transition-property属性。transition-property属性的作用transition-property属性的取值通过案例演示transition-property属性的用法知识点2-transition-duration属性教师通过PPT结合实际操作的方式讲解transition-duration属性。transition-duration属性的作用transition-duration属性的语法格式知识点3-transition-timing-function属性教师通过PPT结合实际操作的方式讲解transition-timing-function属性。transition-timing-function属性的作用transition-timing-function属性的语法格式transition-timing-function属性的取值通过案例演示transition-timing-function属性的用法知识点4-transition-delay属性教师通过PPT结合实际操作的方式讲解transition-delay属性。transition-delay属性的作用transition-delay属性的语法格式知识点5-transition属性教师通过PPT结合实际操作的方式讲解transition属性。transition属性的作用transition属性的语法格式四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（2D变形）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课2D变形也称平面变形，是指在视觉平面内的变化。2D变形主要包括四种变形效果，分别是平移、缩放、倾斜和旋转。本节课将对2D变形进行讲解。三、新课讲解知识点-2D变形教师通过PPT结合实际操作的方式讲解2D变形。平移缩放倾斜旋转更改变换的基点四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（3D变形）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课2D变形是元素在X轴和Y轴的变化，而3D变形是元素围绕X轴、Y轴、Z轴的变化。相比于平面化2D变形，3D变形更注重空间位置的变化。本节课将对网页中一些常用的3D变形效果做具体介绍。三、新课讲解知识点-3D变形教师通过PPT结合实际操作的方式讲解3D变形。围绕X轴旋转围绕Y轴旋转3D旋转perspective属性通过综合案例演示3D变形属性和方法的使用四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五、六课时（@keyframes、animation-name属性、animation-duration属性、animation-timing-function属性、animation-delay属性、animation-iteration-count属性、animation-direction属性、animation属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在CSS3中，过渡效果只能定义元素过程动画，并不能对过程中的某一环节进行控制。为了实现更加丰富的动画效果，CSS3提供了animation属性。使用animation属性可以定义复杂的动画效果。本节课将详细讲解使用animation属性设置动画的技巧。三、新课讲解知识点1-@keyframes教师通过PPT结合实际操作的方式讲解@keyframes。@keyframes的作用@keyframes规则的语法格式@keyframes规则包含的参数@keyframes规则的示例代码知识点2-animation-name属性教师通过PPT结合实际操作的方式讲解animation-name属性。animation-name属性的作用animation-name属性的语法格式知识点3-animation-duration属性教师通过PPT结合实际操作的方式讲解animation-duration属性。animation-duration属性的作用animation-duration属性的语法格式通过案例演示animation-name及animation-duration属性的用法知识点4-animation-timing-function属性教师通过PPT结合实际操作的方式讲解animation-timing-function属性。animation-timing-function属性的作用animation-timing-function属性的语法格式animation-timing-function的常用属性值知识点5-animation-delay属性教师通过PPT结合实际操作的方式讲解animation-delay属性。animation-delay属性的作用animation-delay属性的语法格式animation-delay属性的示例代码知识点6-animation-iteration-count属性教师通过PPT结合实际操作的方式讲解animation-iteration-count属性。animation-iteration-count属性的作用animation-iteration-count属性的语法格式animation-iteration-count属性的示例代码知识点7-animation-direction属性教师通过PPT结合实际操作的方式讲解animation-direction属性。animation-direction属性的作用animation-direction属性的语法格式通过案例演示animation-direction属性的用法。知识点8-animation属性教师通过PPT结合实际操作的方式讲解animation属性。animation属性的作用animation属性的语法格式animation属性的示例代码四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第七课时（阶段案例：制作音乐播放界面）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课为了加深大家对网页多媒体的理解和运用，本节课将通过案例的形式分步骤制作一个音乐播放界面。三、新课讲解知识点-阶段案例：制作音乐播放界面教师通过PPT结合实