第9课网页文本、图像与多媒体( 三 ）（教案）《网页设计与制作案例教程（第2版）》（航空工业出版社）

课题 网页文本、图像与多媒体( 三 ） 课时 2课时（90 min） 教学目标 知识技能目标： （1）熟悉多媒体标签的基础知识 （2）能够使用Dreamweaver CC为网页添加多媒体文件并设置样式 思政育人目标： （1）掌握使用Dreamweaver CC丰富网页内容的方法，提升工作能力 （2）通过学习文本、图像及多媒体元素的使用方法，明白各种事物都有其独特的功能性 教学重难点 教学重点：多媒体标签的基础知识 教学难点：在网页中插入视频 教学方法 情景模拟法、问答法、讨论法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（5 min）→传授新知（23min）→小组互助（15 min） 第2节课：任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解在Dreamweaver CC中如何添加视频和音频 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （5 min） · 【教师】提出以下问题： 使用Dreamweaver CC如何在网页中插入音频？ · 【学生】思考、举手发言 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容 传授新知 （23 min） · 【教师】通过学生的发言，引入新的知识点，介绍在网页中添加音频和视频，并对步骤进行分析 一、插入HTML5 Audio 【教师】演示利用Dreamweaver CC添加HTML5 Audio的步骤，帮助学习理解 在HTML5中使用<audio>标签标记音频文件，使用Dreamweaver CC插入音频文件时可在“插入”面板中单击“HTML5 Audio”按钮，网页文档中即插入了一个音频标签，网页中嵌入一个音频占位符。 此时的标签中并没有音频文件，需要使用<audio>标签的“属性”面板进行添加。打开<audio>标签的“属性”面板后，单击“源”文本框后的“浏览”按钮 ，打开“选择音频”对话框，选择音频文件后单击“确定”按钮，即可插入音频文件。 （详见教材） 【教师】利用多媒体辅助讲解<audio>标签的“属性”面板 （1）ID：用于设置HTML 5音频的标题。 （2）源：用于设置HTML 5音频源文件。 （3）Controls：选中该属性，表示显示音频播放控件。 （4）Autoplay：选中该属性，则音频在加载完成后自动播放。 （5）Loop：选中该属性，则音频将循环播放。 （6）MUTED：选中该属性，表示将音频设置为静音。 (详见教材) 二、插入HTML5 Video 【教师】演示使用Dreamweaver CC插入视频文件的方法 在HTML5中使用<video>标签标记视频文件，使用Dreamweaver CC插入视频文件的方法与插入音频文件的方法类似，在“插入”面板中单击“HTML5 Video”按钮 并进行设置即可。 （详见教材） 【学生】观察、记录、理解 【教师】展示Dreamweaver CC设置视频文件的界面，辅助学习理解 <video>标签的“属性”面板具有“W”与“H”两个属性，它们分别用于设置视频文件的宽度与高度。 （详见教材） · 【学生】聆听、思考、记忆 通过讲解，让学生了解如何使用Dreamweaver CC添加音频和视频 小组互助 （15 min） · 【教师】组织学生以小组为单位，利用Dreamweaver CC将ogg、mp4、avi、WebM格式的视频文件插入到网页中 · 【学生】聆听、思考、上机操作，由组内最先完成操作的学生帮助其他学生完成操作 · 【教师】进行巡视，解答学生的问题 以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识点 第二节课 任务实施 （25 min） · 【教师】演示使用Dreamweaver CC在“传承经典网”主页中插入视频的操作，并对其进行分析 一、任务实施 （1）继续在任务二任务实施创建的文档中操作，或用本书配套素材“项目四”→“任务三”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件。 （2）打开index.html网页文档，将插入点置于<main>→<div class="sheet_1">→<div class=