（中职）Web前端设计基础 项目四-1电子教案.docx

《（中职）Web前端设计基础 项目四-1电子教案.docx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目四-1电子教案.docx（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、（中职）Web 前端设计基础 项目四-1 电子教案教学课题教学课题项目 4 网页中的多媒体4.1 项目描述、4.2 知识准备授课班级授课班级授课时间授课时间教学目标教学目标知识目标知识目标1.掌握在网页中插入超链接的方法；2.掌握在网页中制作音频和视频播放器的方法；3.掌握 CSS 属性的设置。能力目标能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析学情分析通过前面知识的学习，已经掌握了代码编辑工具的使用，掌握了 HTML的基本结构、图文混排的

2、方法以及网页中表格的制作方法。HTML 5 中新增加了音频和视频标签，在本项目中学习创建超链接和制作音频、视频播放器。教学重点教学重点1.创建超链接、锚点链接和热点链接；2.插入音视频文件的方法；3.制作音乐和视频播放器；4.CSS 属性设置。教学难点教学难点1.创建热点链接；2.制作音乐和视频播放器；3.CSS 属性设置。教学方法教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学过程教学环节教学环节教学内容教学内容师生活动师生活动新课导入给学生展示一个网页页面，通过页面中的超链接、音视频等多媒体，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技能学习一、建立超链接一、建

3、立超链接1.URL 概念概念URL 为 Uniform Resource Locator 的缩写，翻译为“统一资源定位器”，它是从互联网上得到资源位置和访问方法的一种表示，互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。2.超链接标签超链接标签在 HTML 5 中建立超链接使用的标签为。超链接的基本结构如下：超链接文字【例 4-1】target 属性值_blank 实例，代码如下所示。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目四-1 电子教案tar

4、get 属性_blank 实例新窗口打开百度在浏览器中预览效果如图所示。单击超链接后如图 4-2 所示。3.创建锚点链接创建锚点链接所谓锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。【例 4-2】锚点链接实例，代码如下所示。12345锚点链接实例678WEB 前端设计教程目录910项目一11项目二12项目三13项目四教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目四-1 电子教案14项目五15项目六16项目七17项目八1819项目一20本项目讲解的内容是.21项目二22本项目讲解的内

5、容是.23项目三24本项目讲解的内容是.25项目四26本项目讲解的内容是.27项目五28本项目讲解的内容是.29项目六30本项目讲解的内容是.31项目七32本项目讲解的内容是.33项目八34本项目讲解的内容是.3536在浏览器中预览效果如图所示。4.创建热点区域创建热点区域在浏览网页时，当单击某图片的不同区域就会链接到不同的目标页面，这就是图片的热点区域。在HTML 5 中可以为图片创建三种类型的热点区域：矩形、圆形和多边形。创建热点区域使用和标签，其结构如下：教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计

6、基础 项目四-1 电子教案【例 4-3】创建热点区域实例，代码如下所示。12345热点区域实例6789101112131415在浏览器中预览效果如图所示。（中职）Web 前端设计基础 项目四-1 电子教案二、添加音频文件二、添加音频文件1.概述概述audio 标签主要是定义播放声音文件和音频流的标准。它支持 Ogg、MP3 和 WAV 三种音频格式。在 HTML 5 中播放音频，结构如下：2.在网页中添加音频文件在网页中添加音频文件在网页中添加音频文件时，根据自己的需求可以添加不同类型的音频文件，如添加自动播放的音频文件、添加带有控件的音频文件、添加循环播放的音频文件和添加预播放的音频文件。【

7、例 4-4】在网页中添加音频文件实例，代码如下所示。12345网页中添加音频文件678自动播放的音频文件910带有控件的音频文件1112循环播放的音频文件1314（中职）Web 前端设计基础 项目四-1 电子教案15上面第8-13行代码可以根据HTML 5允许部分属性值的属性省略的新规定，可以简写为如下代码：8自动播放的音频文件910带有控件的音频文件1112循环播放的音频文件13在浏览器中预览效果如图所示。【例 4-5】在网页中添加预播放的音频文件实例，代码如下所示。12345添加预播放的音频文件678添加预播放的音频文件91011在浏览器中预览效果如图所示。（中职）Web 前端设计基础 项

8、目四-1 电子教案三、三、添加视频文件添加视频文件1.标签概述标签概述标签定义了播放视频文件或视频流的标准，它支持三种视频格式，分别为 Ogg、MPEG4 和 WebM。在 HTML5 网页中播放视频，结构如下：2.在网页中添加视频文件在网页中添加视频文件在网页中添加视频文件时，根据自己的需求可以添加不同类型的视频文件，如添加自动播放的视频文件、添加带有控件的视频文件、添加循环播放的视频文件和添加预播放的视频文件，另外还可以设置视频文件的高度和宽度。【例 4-6】在网页中添加视频文件实例，代码如下所示。12345网页中添加视频文件678自动播放的视频文件910带有控件的视频文件1112循环播放

9、的视频文件131415在浏览器中预览效果如图所示。（中职）Web 前端设计基础 项目四-1 电子教案【例 4-7】在网页中添加预播放的视频文件实例，代码如下所示。12345添加预播放的视频文件678添加预播放的视频文件91011在浏览器中预览效果如图所示。3.设置视频文件的高度和宽度设置视频文件的高度和宽度使用 width 和 height 属性可以设置视频文件的显示宽度和高度，单位为像素。【例 4-8】设置视频文件的高度和宽度实例，代码如下所（中职）Web 前端设计基础 项目四-1 电子教案示。12345设置视频文件的高度和宽度678设置视频文件的高度和宽度9101112在浏览器中预览效果如

10、图所示。知识归纳本节课学习了在网页中添加超链接、音频、视频和控制音视频对象的属性和方法，掌握了、等标签的使用方法。标签或属性标签或属性格式或用法格式或用法说明说明标签超链接文字超链接标签href 属性表示链接地址，链接地址所指向的链接类型包括图片文件、网站地址、FTP 地址、电子邮件等标签属性target 属性控制浏览器窗口的打开方式，target 属性值有四个：_self、_blank、_top、_parent 标 签和 标签创建热点区域标签name 属性为区域命名，设置值必须与标签的 usemap 属性值相同创建热点区域教师讲授，学生归纳总结，并作适当的笔记。（中职）Web 前端设计基础

11、项目四-1 电子教案属性usemap 属性建立图片热点区域时，必须插入图片且为图片增加usemap 属性，属性值必须以“#”开头，加上名称shape 属性rect（矩形）circle（圆形）poly（多边形）coords 属性coords=x1,y1,x2,y2coords=x,y,rcoords=x1,y1,x2,y2,x3,y3标签 添加音频标签src 属性定义要播放的音频地址标签的常见属性controls 属性提供添加播放、暂停和音量控件的属性autoplay 属性出现该属性，音频在就绪后马上播放loop 属性出现该属性，每当音频结束时重新开始播放preload 属性出现该属性，音频在页

12、面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。preload 属性值有三种：auto、meta、none标签添加视频标签src 属性定义要播放的视频地址标签的常见属性controls 属性提供添加播放、暂停和音量控件的属性autoplay 属性出现该属性，视频在就绪后马上播放height 属性设置视频播放器的高度width 属性设置视频播放器的宽度loop 属性出现该属性，媒介文件完成播放后再次开始播放preload 属性出现该属性，视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。preload 属性值有三种：auto、meta、nonem

13、uted 属性设置视频的音频输出应该被静音poster 属性设置视频下载时显示的图像，或在用户点击播放按钮前显示的图像课后作业一、选择题1.下列_标签与超链接相关。ArefBlinkCaDtop2.下列_为正确的超链接标签。A B CD3.如果想在单击超链接后将目标网页在新窗口打开，_是正确的。Atarget=“_blank”Btarget=“_parent”Ctarget=“_self”Btarget=“_top”4.在网页中添加视频文件的标签是_AaudioBvideoCimgDtable二、上机实训上机完成例 4-1 和例 4-8 的实例操作。学生上机完成任务并提交，进行分组互评。教学反思教学反思（中职）Web 前端设计基础 项目四-1 电子教案（中职）Web 前端设计基础 项目四-1 电子教案感谢您的支持与使用感谢您的支持与使用如果内容侵权请联系删除如果内容侵权请联系删除仅供教学交流使用仅供教学交流使用