博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客网页设计与制作 (HTML5+CSS3+JavaScript) 教学设计课程名称 : 网页设计与制作(HTML5+CSS3+JavaScript) 授课年级 : 2019 年级授课学期 : 2019 学年第 X 学期教师姓名 : 某某

Size: px

Start display at page:

Download "博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客网页设计与制作 (HTML5+CSS3+JavaScript) 教学设计课程名称 : 网页设计与制作(HTML5+CSS3+JavaScript) 授课年级 : 2019 年级授课学期 : 2019 学年第 X 学期教师姓名 : 某某"

鳞旁公叔
4 years ago
Views:

1 传智播客网页设计与制作 (HTML5+CSS3+JavaScript) 教学设计课程名称 : 网页设计与制作(HTML5+CSS3+JavaScript) 授课年级 : 2019 年级授课学期 : 2019 学年第 X 学期教师姓名 : 某某老师

2 201 年月日课题名称内容分析教学目标重点及措施难点及措施计划第 9 章全新的网页视听技术 12 课时课时在网络飞速发展的今天, 互动互联互通的网页多媒体新生态正在形成声音视频动画已经被越来越广泛的应用在网页设计中比起静态的图片和文字, 音频视频动画可以为用户提供更直观丰富的信息, 为浏览者带来全新的感受本章将对网页中的音频视频动画等视听技术做详细讲解掌握 HTML5 中视频的相关属性, 能够在 HTML5 页面中添加视频文件掌握 HTML5 中音频的相关属性, 能够在 HTML5 页面中添加音频文件理解过渡属性, 能够控制过渡时间动画快慢等常见过渡效果掌握 CSS3 中的变形属性, 能够制作 2D 转换 3D 转换效果掌握 CSS3 中的动画, 能够熟练制作网页中常见的动画效果教学重点 : 使用 <video> 嵌入视频使用 <audio> 嵌入音频 transition 属性 2D 转换 3D 转换 animation 属性措施 : 通过上机操作加强学习和补充案例进行巩固教学难点 : 无措施 : 无教学方式教学采用教师课堂讲授为主, 使用教学 PPT 讲解第一二学时 ( 讲解视频音频嵌入技术概述在 HTML5 中嵌入视频在 HTML5 中嵌入音频等基础知识 ) 复习上节课内容教学过程在讲解本节内容前, 抛出以下问题让学生回答, 以复习上节课内容 1 z-index 属性取值只能是正整数 ( ) 答案 : 错在 CSS 中, 要想调整重叠定位标记的堆叠顺序, 可以对定位标记应用 z-index 层叠等级属性 z-index 属性取值可为正整数负整数和 0, 默认状态下 z-index 属性值是 0, 并且 z-index 属性取值越大, 设置该属性的定位标记在层叠标记中越居上 2 简要描述一下网页模块命名需要遵循的原则 ( ) 答案 : 避免使用中文字符命名 ( 例如 id=" 导航栏 ") 不能以数字开头命名 ( 例如 id="1nav") 不能占用关键字 ( 例如 id="h3") 用最少的字母达到最容易理解的意义说明 : 教师可根据学生对上述问题的回答情况, 对以上问题进行简单讲解或直接进入本学时新内容

视频嵌入方式 (1) 教师展示 PPT 讲解传统音视频的嵌入方式 (2) 学生提问, 教师对疑难问题进行解答讲解使用

3 本学时内容学习分组讨论对新课进行讲解前, 先让学生分组讨论以下问题 : 1 列举你见到过的音视频网站请小组代表对以上问题发表见解教师对上述问题进行解释 : 教师可根据学生的答案进行归纳总结知识点讲解讲解传统音频视频嵌入方式 (1) 教师展示 PPT 讲解传统音视频的嵌入方式 (2) 学生提问, 教师对疑难问题进行解答讲解使用 <video> 嵌入视频 (1) 教师展示 PPT 讲解使用 <video> 嵌入视频文件的技巧, 并通过案例代码做具体演示播放进度条声音全屏

教师对疑难问题进行解答讲解浏览器对音视频文件的兼容性 (1) 教师展示 PPT 讲解浏览器对音视频文件的兼容性, 然后通过案例做具体演示

4 (2) 学生根据教师讲解进行练习 (3) 学生提问, 教师对疑难问题进行解答讲解使用 <audio> 嵌入音频 (1) 教师展示 PPT 讲解使用 <audio> 嵌入音频, 然后通过一个案例做具体演示播放进度条声音 (2) 学生根据教师讲解进行练习 (3) 学生提问, 教师对疑难问题进行解答讲解浏览器对音视频文件的兼容性 (1) 教师展示 PPT 讲解浏览器对音视频文件的兼容性, 然后通过案例做具体演示 (2) 学生提问, 教师对疑难问题进行解答讲解控制视频的宽高 (1) 教师展示 PPT 讲解 CSS 控制视频宽高的相关技巧, 然后通过案例做具体演示

(2) 学生根据教师讲解进行练习 (3) 学生提问, 教师对疑难问题进行解答阶段小结小结重点 : 使用 <video> 嵌入视频使用 <audio> 嵌入音频易错点 : 无答疑教师询问学生对于知识点还有什么不理解的地方针对学生不理解的知识点给予解释布置作业完成教材基础操练中相关题目, 或教师安排的复习任务针对易错题目教师下节课进行讲解预习第 9.

5 (2) 学生根据教师讲解进行练习 (3) 学生提问, 教师对疑难问题进行解答阶段小结小结重点 : 使用 <video> 嵌入视频使用 <audio> 嵌入音频易错点 : 无答疑教师询问学生对于知识点还有什么不理解的地方针对学生不理解的知识点给予解释布置作业完成教材基础操练中相关题目, 或教师安排的复习任务针对易错题目教师下节课进行讲解预习第 9.2 节过渡第三四课时 ( 讲解 transition-property transition-duration transition-timing-function transition-delay transition 属性 ) 复习上节课内容在讲解本节内容前, 抛出以下问题让学生回答, 以复习上节课内容 1 运用 HTML5 的 video 和 audio 标签可以在页面中嵌入视频或音频文件那么, 在 HTML5 中, 常见的视频格式有哪些?( ) A Ogg B MPEG 4 C WebM D avi 答案 :ABC 视频格式包含视频编码音频编码和容器格式在 HTML5 中嵌入的视频格式主要包括 Ogg MPEG 4 WebM 等, 具体介绍如下 Ogg: 指带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG 4: 指带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM: 指带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

说明 : 教师可根据学生对上述问题的回答情况, 对以上问题进行简单讲解或直接进入本课时新内容的学习本课时内容学习知识点讲解讲解 transition-property 属性 (1) 教师通过 PPT 对 transition-property 属性的概念及作用进行讲解, 指出 transition-property 属性用于指定应用过渡效果的 CSS 属性的名称 (2) 教师对

教师通过 PPT 对 transition-duration 属性的概念及作用进行讲解, 指出 transition-duration 属性用于定义过渡效果花费的时间 (2) 教师对 transition-duration 属性的基本语法格式进行讲解, 并进行代码演示 (3) 教师指出在设置过渡效果时, 必须使用 transition-duration 属性设置过渡时间,

6 说明 : 教师可根据学生对上述问题的回答情况, 对以上问题进行简单讲解或直接进入本课时新内容的学习本课时内容学习知识点讲解讲解 transition-property 属性 (1) 教师通过 PPT 对 transition-property 属性的概念及作用进行讲解, 指出 transition-property 属性用于指定应用过渡效果的 CSS 属性的名称 (2) 教师对 transition-property 属性的基本语法格式进行讲解, 并进行代码演示 (3) 教师对 transition-property 属性的三个常用属性值进行讲解, 演示其具体用法和效果, 通过对比分析不同属性值的异同 (4) 教师指出应用 transition-property 属性时需要注意的问题, 并给予解答讲解 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 属性不同属性值的产生过渡效果的速度曲线, 并分析其异同讲解 transition-delay 属性 (1) 教师通过 PPT 对 transition-delay 属性的概念及作用进行讲解, 指出 transition-delay 属性规定过渡效果何时开始 (2) 教师对 transition-delay 属性

7 (4) 教师对比 transition-timing-function 属性不同属性值的产生过渡效果的速度曲线, 并分析其异同讲解 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 属性时需要注意的问题, 并给予解答阶段小结小结重点 :transition 属性答疑教师询问学生对于知识点还有什么不理解的地方针对学生不理解的知识点给与解释布置作业完成教材基础操练中相关题目, 或教师安排的复习任务针对易错题目教师下节课进行讲解预习第 9.3 节变形复习上节课内容第五六课时 ( 讲解 2D 变形 3D 变形 ) 在讲解本节内容前, 抛出以下问题让学生回答, 以复习上节课内容

8 1 如何使用 transition 复合属性同时设置元素的四个过渡属性呢? 请同学们进行讨论并举例说明请小组代表对以上问题发表见解教师对上述问题进行解释 : transition 属性是一个复合属性, 用于在一个属性中设置 transition-property transition-duration transition-timing-function transition-delay 四个过渡属性其基本语法格式如下 : transition:property duration timing-function delay; 在使用 transition 属性设置多个过渡效果时, 它的各个参数必须按照顺序进行定义, 不能颠倒例如, 下面设置元素的四个过渡属性 : transition-property:border-radius; transition-duration:5s; transition-timing-function:ease-in-out; transition-delay:2s; 可以直接通过如下代码实现 : transition:border-radius 5s ease-in-out 2s; 说明 : 教师可根据学生对上述问题的回答情况, 对以上问题进行简单讲解或直接进入本课时新内容的学习本课时内容学习知识点讲解讲解 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) 学生练习, 教师巡视, 对疑难问题进行解答

9 阶段小结小结重点 :2D 转换 3D 转换易错点 : 注意区分 2D 转换和 3D 转换的不同答疑教师询问学生对于知识点还有什么不理解的地方针对学生不理解的知识点给与解释布置作业完成教材基础操练中相关题目, 或教师安排的复习任务针对易错题目教师下节课进行讲解预习第 9.4 节动画第七八课时 ( animation 相关属性 ) 复习上节课内容在讲解本节内容前, 抛出以下问题让学生回答, 以复习上节课内容 1 在 CSS3 中, 使用 transform 属性可以实现变形效果下列选项中, 能够实现元素缩放的函数是 ( ) A translate() 方法 ; B scale() 方法 ; C skew() 方法 ; D rotate() 方法 ; 答案 :B 答案解析 : scale() 方法用于缩放元素大小, 该函数包含两个参数值, 分别用来定义宽度和高度的缩放比例元素尺寸的增加或减少, 由定义的宽度 (X 轴 ) 和高度 (Y 轴 ) 参数控制其基本语法格式如下 : transform:scale(x-axis,y-axis); 在上述语法中,x-axis 和 y-axis 参数值可以是正数负数和小数正数值表示基于指定的宽度和高度放大元素负数值不会缩小元素, 而是翻转元素 ( 如文字被反转 ), 然后再缩放元素说明 : 教师可根据学生对上述问题的回答情况, 对以上问题进行简单讲解或直接进入本课时新内容的学习本课时内容学习知识点讲解 (1) 教师和学生互动 : 使用动画之前必须先定义关键帧, 一个关键帧表示动画过程中的一个状态在 CSS3 中,@keyframes 规则用于创建动画中规定某项 CSS 样式, 就能创建由当前样式逐渐变为新样式的动画效果下面, 属性进行具体讲解 (2) 教师通过 PPT 属性的概念及作用进行讲解, 规则用于创建动画 (3) 属性的基本语法格式进行讲解, 并进行代码

10 演示 (4) 属性包含的参数含义进行说明, 并进行代码演示 (5) 属性时需要注意的问题, 并给予解答 (6) 学生练习, 教师巡视, 对疑难问题进行解答讲解 animation-name 属性 (1) 教师通过 PPT 对 animation-name 属性的概念及作用进行讲解, 指出 animation-name 属性用于定义要应用的动画名称, 动画规定名称 (2) 教师对 animation-name 属性的基本语法格式进行讲解, 并进行代码演示 (3) 教师对 animation-name 属性常用属性值进行讲解, 演示其具体用法和效果, 通过对比分析不同属性值的异同 (4) 学生练习, 教师巡视, 对疑难问题进行解答讲解 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 属性时需要注意的问题, 并给予解答讲解 animation-delay 属性 (1) 教师通过 PPT 对 animation-delay 属性的概念及作用进行讲解, 指出 animation-delay 属性用于定义执行动画效果之前延迟的时间, 即规定动画什么时候开始 (2) 教师对 animation-delay 属性的基本语法格式进行讲解, 并进行代码演示 (3) 教师指出应用 animation-delay 属性时需要注意的问题, 并给予解答 (4) 学生练习, 教师巡视, 对疑难问题进行解答

11 讲解 animation-iteration-count 属性 (1) 教师通过 PPT 对 animation-iteration-count 属性的概念及作用进行讲解, 指出 animation-iteration-count 属性用于定义动画的播放次数 (2) 教师对 animation-iteration-count 属性的基本语法格式进行讲解, 并进行代码演示 (3) 教师对 animation-iteration-count 属性的常用属性值进行讲解, 演示其具体用法和效果, 通过对比分析不同属性值动画效果的异同 (4) 教师指出应用 animation-iteration-count 属性时需要注意的问题, 并给予解答讲解 animation-direction 属性 (1) 教师通过 PPT 对 animation-direction 属性的概念及作用进行讲解, 指出 animation-direction 属性定义当前动画播放的方向 (2) 教师对 animation-iteration-count 属性的基本语法格式进行讲解, 并进行代码演示 (3) 教师对 animation-direction 属性的常用属性值进行讲解, 演示其具体用法和效果, 通过对比分析不同属性值动画效果的异同 (4) 教师指出应用 animation-direction 属性时需要注意的问题, 并给予解答讲解 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 属性时需要注意的问题, 并给予解答阶段小结小结重点 :animation 属性易错点 : 无答疑教师询问学生对于知识点还有什么不理解的地方针对学生不理解的知识点给与解释布置作业完成教材基础操练中相关题目, 或教师安排的复习任务针对易

12 错题目教师下节课进行讲解复习第 9 章全新的网页视听技术第九 ~ 十二课时 ( 讲解阶段案例制作工作日天气预报 ) 1 总结本章内容 2 通过题库发放相关测试题, 检查学生对知识的掌握情况上机练习主要针对本章中需要重点掌握的知识点, 以及容易出错的内容进行练习, 通过上机练习可以考察同学对知识点的掌握情况上机一 :( 考察知识点使用 <video> 嵌入视频 ) 类型样式自拟, 制作一个嵌入视频的网站页面上机二 :( 考察知识点使用 <audio> 嵌入音频 ) 类型样式自拟, 制作一个嵌入音频的网站页面上机三 :( 考察知识点 3d 变形 ) 类型样式自拟, 制作一个纸牌翻转 ( 水平翻转或垂直翻转 ) 的效果 ( 作品点评 ) 教师对学生的提交的上机测试作品进行点评, 指出代码中容易出现 bug 的地方, 并给与解答布置作业预习 10.1 节 CSS 精灵技术教学后记

博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客 HTML5+CSS3 网站设计基础教程教学设计课程名称 : HTML5+CSS3 网站设计基础教程授课年级 : 2016 年级授课学期 : 2016 学年第一学期教师姓名 : 某某老师 1

博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客 HTML5+CSS3 网站设计基础教程教学设计课程名称 : HTML5+CSS3 网站设计基础教程授课年级 : 2016 年级授课学期 : 2016 学年第一学期教师姓名 : 某某老师 1 传智播客 HTML5+CSS3 网站设计基础教程教学设计课程名称 : HTML5+CSS3 网站设计基础教程授课年级 : 2016 年级授课学期 : 2016 学年第一学期教师姓名 : 某某老师 1 201 年月日课题名称内容分析教学目标重点及措施难点及措施计划第 2 章 HTML5 页面元素及属性 6 课时课时 HTML5 中引入了很多新的标记元素和属性, 这是 HTML5 的一大亮点,

博学谷 让 IT 教学更简单, 让 IT 学习更有效 传智播客 网页设计与制作 (HTML5+CSS3+JavaScript) 教学设计 课程名称 : 网页设计与制作(HTML5+CSS3+JavaScript) 授课年级 : 2019 年级授课学期 : 2019 学年第 X 学期教师姓名 : 某某

博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客网页设计与制作 (HTML5+CSS3+JavaScript) 教学设计课程名称 : 网页设计与制作(HTML5+CSS3+JavaScript) 授课年级 : 2019 年级授课学期 : 2019 学年第 X 学期教师姓名 : 某某