admin 管理员组文章数量: 887239
2023年12月18日发(作者：lua脚本网络验证)
电子商务网页设计与制作
授 课 教 案 学年 第 学期
学院 （部） 专业（学部）
课程名称
课内形式
课外形式
序号
电子商务网页设计与制作
理论教学□ 课内实践□ 理实一体 习题复习□
考核评价□ 其他活动□
调查分析 小组研讨□ 实践任务 理论探究□
考核评价□ 汇报展示□ 其他活动
任课教师
学习量
安排
月 日
课内：
课外：
月 日
授课日期
14
授课班级
月 日
月 日
课内教学内容：
项目7：在页面中使用多媒体——制作视频播放页面
知识链接
课程思政设计：
（1）在系统讲解专业知识的过程中注重专业知识的价值引领作用，同时必须具备正确的道德认知和良好的道德情操。
（2）通过小组合作探讨，培养学生团结协作的工作作风，掌握制作视频播放页面，培养学生的专业能力。
（3）引导学生成为创新型、复合型电子商务高级专业人才。
（4）引导学生热爱专业、热爱科学、热爱学习、热爱国家，培养学生良好的思想道德素质和健全的人格，促进学生的健康成长。
课外学习任务：
（1）课前：
以小组为单位，探讨如何打造具有说服力的商品页面，使学生在课前充分理解商品页面是对用户影响最大的一个页面。同时了解如何制作视频播放页面。
（2）课后：
①分析如果想要提高网站的转化率并降低退货的概率，电子商务网站需要给用户提供哪些方面的信息。
②分析制作视频播放页面布局。
1
教学目标：
知识目标
熟悉如何打造具有说服力的商品页面；
了解电子商务网站中多媒体视频的使用；
掌握使用
掌握HTML5中多媒体的应用。
能力目标
熟悉电子商务网站中多媒体视频的使用；
能够掌握使用
能够HTML5中多媒体的应用。
素质目标
在掌握制作视频播放页面的基础上，理解并应用专业知识；
丰富知识结构，提升专业技能；
自觉履行电子商务网页设计师的各项职责。
重点难点及解决方法： 课内教学授课地点：
（1）重点：使用
关教学视频等。
解决方法：采用“视频教学法+启发式教学法”，为学生讲解如何使用
中各属性的说明；以及使用
识以及学习能力。
（2）难点：HTML5中多媒体的应用。
解决方法：通过“视频教学法+讨论式教学法”，为学生讲解HTML5中多媒体的应用；帮助学生掌握相关的脚本代码和使用方法，使学生可以深入掌握HTML5中多媒体的应用方法。
学习效果评价方式：
对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；
对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；
对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。
课后小结：
填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2. 授课形式在相应的选项打“√”。
2
课内教学内容及过程
1. 课前调研成果展示与汇报
【课前调研成果展示与汇报】
教师向学生展示视频播放页效果图片，使学生熟悉在网页中插入音频和视频的方法和技巧。
时间分配
方法
及手段
教师注意讲解使用HTML5插入多媒体的方法和技巧，帮助学生了解商品页面是对用户影响最大的一个页面，可以直接影响商品的转化率。
德育教育：培育学生独立思考以及专业能力。
【根据调研结果引出新课】
在讲解如何打造具有说服力的商品页面时时，同时引出电子商务网站中多媒体视频的使用。通过视频演示讲解如何使用
德育教育：引导学生成为创新型、复合型电子商务高级专业人才。
2. 布置任务
【分析如何打造具有说服力的商品页面】
❖ 选择合适的图像
电子商务网站页面中有很多图像，在设计时不要忽视了图像的重要性，它能够为用户带来更丰富和更具感情色彩的体验。设计师需要在商品页面上测试不同类型图像对转化率的影响。
3
❖ 突出重点的设计
用户在访问商品详情页时，具有说服力的信息能够让用户快速掌握商品的价值，因此，将商品的重点内容突出显示是获得高转化率的窍门。
❖ 图文并茂的点评页面
消费者评分和点评的作用不可小觑，它们也是所有商业引导策略的重要组成部分，让用户查看商品的评分并提供查看点评的链接是非常有必要的。
❖ 简化图像切换方式
鼓励用户浏览商品图像，并确保用户在刚开始查看商品详情页面的时候就能够迅速掌握切换图像的方法。这一点看似微不足道，实际上却十分重要。在用户行为测试中很多网站都会使用简单的切换图像功能，因为用户往往会好奇刚才一闪而过的是什么，从而进行查看。
4
❖ 重复卖点
找出用户在预订过程中重点浏览的主要页面，列出最能令目标用户产生共鸣的独特卖点，查看在何时通过怎样的方式来将这些信息传达给用户的，然后通过多种方法使这些信息反复出现在不同的位置，以刺激购买。
❖ 推荐用户浏览相关内容
用户浏览商品详情页时通常有两种结果，一种是直接购买，另一种则是离开。为了避免用户对商品不满意而离开，通常会在页面中看到一个相似商品的版块。
3. 任务分析
【电子商务网站中多媒体视频的使用】
❖ 个性化产品调研；
❖ 指南视频；
❖ 挑选建议视频；
❖ 产品分类信息视频；
❖ 产品介绍视频；
❖ 产品描述视频。
5
4.知识准备（教学难点）
【使用
通过
1．使用
使用
使用
（1）src：该属性用于设置所需要嵌入的音频文件的路径和名称。
（2）width：该属性用于设置所嵌入的音频播放控件的宽度。
（3）height：该属性用于设置所嵌入的音频播放控件的高度。
（4）autostart：该属性用于设置音频文件是否自动播放。该属性的属性值有两个：一个是true，表示自播放；另一个是false，表示不自动播放。
（5）loop：该属性用于设置音频文件是否循环播放。该属性的属性值有两个：一个是true，表示音频文件将无限次地循环播放；另一个是false，表示音频文件只播放一次。
2．使用
在网页中可以嵌入许多格式的视频文件，例如WMV和AVI等格式的视频文件。在网页中嵌入视频可以在网页上显示播放器外观，其中包括播放、暂停、停止和音量控制等按钮。
使用
从嵌入视频的语法可以看出，在网页中嵌入视频与在网页中嵌入音频的方法非常相似，都是使用
5.任务实施（教学重点）
【HTML5中多媒体的应用】
为了能够更加方便地在网页页面中嵌入音频和视频文件，在HTML 5中新增了
1．在线多媒体的发展
早在2000年，在线视频都是借助第三方工具实现的，如6
RealPlayer和QuickTime等，但它们存在隐私保护问题和兼容性问题。例如上一节中所介绍的
随着Flash动画的兴起，可以通过Flash的方式在网页中嵌入音频和视频进行播放，这种方式与本地操作系统中所安装的播放器无关，能够获得统一的播放外观效果，但是其缺点是代码较长，最重要的是需要安装Flash插件，并非所有浏览器都拥有同样的插件。
在HTML 5中，嵌入音频和视频不但不需要安装其他插件，而且实现起来还很简单。插放一个视频只需要一行代码，如：
可见，在HTML 5中省去了许多不必要的信息。
在HTML 5中实现多媒体应用，不需要知道数据的类型，因为标签已经指明；也不需要设置版本信息，因为不涉及这方面的信息；可以由CSS来控制尺寸，因为它们是页面元素。这些原生的优势，是其他任何第三方插件都无法企及的。
2．检查浏览器是否支持
检查浏览器是否支持
var support = !!Element("audio").canPlayType;
这段脚本代码会动态创建audio元素，然后检查canPlayType()函数是否存在。通过执行两次逻辑非运算符“!”，将其结果转换成布尔值，就可以确定音频对象是否创建成功。同样，video元素也可以这样去检查。
思想、素质教育： 贯穿学生实践过程中
（1）引导学生热爱专业、热爱科学、热爱学习；
（2）培养学生的社会责任感和良好的社会道德习惯；
（3）引导学生成为创新型、复合型电子商务高级专业人才。
6、技能提升
【讨论如何使用HTML5中的
以小组为单位，学生讨论如何使用HTML5中的
思想、素质教育：贯穿学生实践过程中
（1）通过讨论相关知识，使学生加深掌握所学知识，培养学生学习技巧；
（2）引导学生热爱专业、热爱学习；促使学生健康发展；
7
（3）引导学生积极投身科技事业的发展，为实现科技强国目标贡献力量。
【展示汇报】
随机抽选1~3个小组进行展示汇报。
7.教学评价
【组织阶段考核与学生自评互评、展示考核结果】
本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。
展示本次课《职业素养评价表》，组织学生自评、互评。
8．小结与作业（课外学习）
小结：
本节课在教师的带领下，学生们从课前调研到课程实施，通过教师讲解、课堂互动等环节充分学习了如何打造具有说服力的商品页面以及电子商务网站中多媒体视频的使用，全面细致的学习了使用
作业：
学生课后可通过网络查找关于HTML5中多媒体应用的相关信息，开拓视野并加深理解。
9.板书设计
制作视频播放页面
知识链接
一、分析任务：打造具有说服力的商品页面/
电子商务网站中多媒体视频的使用
二、知识准备：使用
三、任务实施：HTML5中多媒体的应用
四、技能提升：如何使用HTML5中的
五、教学评价
六、小结、作业
8
课外学习任务及学习指导
课前：
【教师布置调研任务】
调研主题：《探讨如何打造具有说服力的商品页面》
要求：以小组为单位，探讨如何打造具有说服力的商品页面，制作汇报PPT（至少罗列3种特点，列出为什么要具备此特点；制作PPT不得少于5页，图文并茂），提交到“微信群”。
【学生调研，教师线上指导】
学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。
【教师对各组调研成果进行评价】
教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。
课后：
【学生分析想要提高网站的转化率并降低退货的概率，电子商务网站需要给用户提供哪些方面的信息】
小组成员团结协作，共同分析想要提高网站的转化率并降低退货的概率，电子商务网站需要给用户提供哪些方面的信息。在此过程中，教师使用“微信群”对学生进行指导。
【学生分析制作视频播放页面布局结构】
根据本节课的学习内容，学生分析制作视频播放页面布局结构。通过此次分析，加深学生掌握在页面中使用多媒体。教师使用“微信群”对学生进行指导。
教师设置“制作视频播放页面布局结构”主题讨论题目，学生均可参与讨论，分享心得。
填表说明：1. 本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等；3. 教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。
9
任务一 制作商品列表索引导航
课程名称
课内形式
课外形式
序号
电子商务网页设计与制作
理论教学□ 课内实践□ 理实一体 习题复习□
考核评价□ 其他活动□
调查分析 小组研讨□ 实践任务 理论探究□
考核评价□ 汇报展示□ 其他活动
任课教师
学习量
安排
月 日
课内：
课外：
月 日
授课日期
14
授课班级
月 日
月 日
课内教学内容：
项目7：在页面中使用多媒体——制作视频播放页面
任务一 制作商品列表索引导航
课程思政设计：
（1）通过教师讲解在页面中使用多媒体的知识，教育引导学生正确认识世界和中国电子商务发展大势，正确认识时代责任和历史使命。
（2）通过小组合作讨论，引导学生未来就业创业选择电商领域，实现自我价值和社会价值。
（3）使学生深刻认识国家坚持依法治国的决心，坚信中国特色社会主义法治体系优越性，引导学生自觉遵守法律法规，维护司法公平正义。
（4）启发学生思考，开阔学生思维，鼓励学生发表观点看法，引起学生共鸣，从而引导学生树立正确的职业观和职业道德。
课外学习任务：
（1）课前：
以小组为单位，讨论视频播放页面布局结构，分析如何通过使用HTML5视频标签引入视频文件向用户展示产品内容；并以PPT的形式记录下来。
（2）课后：
① 制作在网页中嵌入音频。
② 制作在网页中嵌入视频。
10
教学目标：
知识目标
了解视频播放页页面结构；
掌握在页面中嵌入音频；
掌握在页面中嵌入视频；
掌握制作视频播放页面；
掌握制作在网页中嵌入视频。
能力目标
能够熟悉视频播放页页面结构；
能够掌握在页面中嵌入音频和视频；
能够制作视频播放页面。
素质目标
较强的专业知识和技术能力；
丰富知识结构， 提升专业知识；
自觉履行电子商务网页设计师的各项职责。
重点难点及解决方法： 课内教学授课地点：
（1）重点：在页面中嵌入音频或视频
教学媒体：微课、PPT课件、网页图片、相解决方法：通过课堂练习+启发式教学的方关教学视频等。
法，教师讲解在页面中嵌入音频或视频，引导学生积极思考，掌握代码和使用方法；同设备及材料：多媒体计算机、多媒体教学时通过课堂练习，使学生深入掌握相关知广播软件、网页素材图片、教识；培养学生的思维能力和分析问题解决问学载体源文件等。
题的能力。
其它资源：与本次课相关的专业技术论文（2）难点：制作视频播放页面
解决方法：通过案例演示+启发式教学讲解电子版。
的方式，细致讲解制作视频播放页面。帮助学生加深掌握如何制作视频播放页面的相关知识。从实用的角度帮助学生提高专业知识。
学习效果评价方式：
对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；
对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；
对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。
课后小结：
填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2. 授课形式在相应的选项打“√”。
11
课内教学内容及过程
1. 课前调研成果展示与汇报
【课前调研成果展示与汇报】
教师向学生展示商品列表索引导航效果图片，使学生了解本节课所需要掌握的知识。
时间分配
方法
及手段
教师注意通过本章之前所学到的知识引导学生，让学生在学习的过程中有承上启下的感觉，使学生可以更加容量掌握在页面中使用多媒体的方法。
德育教育：引导学生未来就业创业选择电商领域，实现自我价值和社会价值。
【根据调研结果引出新课】
从视频播放页页面结构进行讲解，帮助学生熟悉掌握在页面中嵌入音频或视频。同时，通过课堂练习使学生可以制作在网页中嵌入音频以及在网页中嵌入视频。通过本节课的学习使学生可以学会如何在网页中嵌入音频和视频。
德育教育：引导学生掌握专业知识和提高专业技能。
2.布置任务
【教师展示教学载体，创设学习情境】
视频播放页中依次插入6个Div，并使用id样式和类样式分别控制页面中的文本和图像，使用
12
3.任务分析
【分析视频播放页布局的结构】
教师讲解视频播放页的布局结构，帮助学生在掌握制作视频页布局结构的同时，可以掌握通过使用HTML5视频标签引入视频文件向用户展示产品内容。
4.知识准备（教学难点）
【在页面中嵌入音频或视频】
虽然网络上有许多格式的音频文件，但HTML标签所支持的音频格式并不是很多，并且不同的浏览器支持的格式也不相同。HTML 5针对这种情况，新增了
目前，HTML 5新增的
视频标签的出现无疑是HTML 5的一大亮点，但是旧的浏览器不支持HTML 5 Video，并且，涉及视频文件的格式问题，Firefox、Safari和Chrome的支持方式并不相同。所以，在现阶段要想使用HTML 5的视频功能，浏览器兼容性是一个不得不考虑的问题。
目前，HTML 5新增的
使用HTML标签可以轻松地在页面中嵌入音频和视频，接下13
来逐一进行讲解。
1．在页面中嵌入音频
在网页中使用HTML 5中的
你的浏览器不支持audio元素
通过这种方法可以将音频文件嵌入到网页中，如果浏览器不支持HTML 5的
2．在页面中嵌入视频
在网页中可以使用HTML 5新增的
你的浏览器不支持video元素
通过这种方法即可把视频添加到网页中，浏览器不兼容时，显示文本“你的浏览器不支持video元素”。
【知识点学习情况检测，教学策略调整】
教师通过课堂提问，了解学生对知识的掌握情况，对共同的错误点或存在的问题，进一步有针对性地讲解。
【学生实践，加深在页面中嵌入音频或视频的掌握】
通过向学生讲解在页面中嵌入音频或视频的相关知识，使学生掌握其代码和使用方法。
【通过课堂练习，使学生加深掌握在页面中嵌入音频或视频】
❖ 练一练—在页面中嵌入音频
❖ 练一练—在页面中嵌入视频
5.任务实施（教学重点）
【制作视频播放页面】
01 新建一个HTML文件，使用项目四的制作方法制作页面导航，完成效果如图所示。在crumbs后插入一个id为main-bg的Div，并在中创建如图所示的样式。
14
02 在main-bg中插入一个Div，并在中创建如图所示的样式。将该样式指定给新插入的Div。
03 继续插入一个Div，并创建对应的样式，应用效果如图所示。
04 在页面中输入文本内容，并分别指定样式，源代码如图所示。
05 创建类样式。在video-title-left后面插入一个Div，并应用刚创建的类样式，源代码如图所示。
06 完成页面效果如图所示。
07 继续在video-title-right后插入Div，创建并应用样式，源代码如图所示。
08 在源代码中添加
15
09 在v-show-left后插入一个Div，并创建v-show-right类样式，源代码如图所示。
10 在源代码中输入项目列文本。分别创建dl、dt和dd样式。
11 应用样式后的页面效果如图所示。
思想、素质教育： 贯穿学生实践过程中
（1）培养学生的专业知识和技能能力；
（2）引导学生未来就业创业选择电商领域，实现自我价值和社会价值，用自己的聪明才智为中国的电商事业发展贡献力量。
（3）使学生在学习专业知识的同时，也能了解党和国家发展的战略思想，进一步增强对中国特色社会主义的信心。
16
6、技能提升
【学生学会如何在网页中嵌入视频】
以小组为单位，学生学会在网页中嵌入视频，教师通过之前所讲的案例制作，使学生掌握通过使用
思想、素质教育：贯穿学生实践过程中
（1）通过掌握制作视频播放页面的制作，培养学生的创新精神和专业能力；
（2）提高知识和能力和自学能力；
（3）启发学生思考，开阔学生思维，鼓励学生发表观点看法，引起学生共鸣，从而引导学生树立正确的职业观和职业道德。
【展示汇报】
随机抽选1~3个小组进行展示汇报。
7.教学评价
【组织阶段考核与学生自评互评、展示考核结果】
本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。
展示本次课《职业素养评价表》，组织学生自评、互评。
8．小结与作业（课外学习）
小结：
本节课在教师的带领下，学生们从课前调研到课程实施，通过教师讲解、课堂互动等环节充分学习了如何提高页面用户体验，与理论知识相结合，帮助学生掌握从了解视频播放页页面结构到制作视频播放页的相关知识，做到知己知彼，有的放矢。为17
后面课程中学生独立完成网页设计工作铺平道路。
作业：
学生课后可通过网络查看如何更好地在页面中嵌入音频或视频，开拓视野的同时并加深理解。
9.板书设计
制作视频播放页面
任务一 制作商品列表索引导航
七、分析任务：视频播放页页面结构
八、知识准备：在页面中嵌入音频或视频
九、任务实施：制作视频播放页面
十、技能提升：制作在网页中嵌入视频
十一、 教学评价
十二、 小结、作业
18
课外学习任务及学习指导
课前：
【教师布置调研任务】
调研主题：《讨论视频播放页面布局结构》
要求：以小组为单位，讨论视频播放页面布局结构，分析如何通过使用HTML5视频标签引入视频文件向用户展示产品内容，制作汇报PPT（罗列出视频播放页中需要依次插入几个“Div”，以及如何使用在页面中添加视频；PPT不得少于5页，图文并茂），提交到“微信群”。
【学生调研，教师线上指导】
学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。
【教师对各组调研成果进行评价】
教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。
课后：
【学生制作在网页中嵌入音频】
小组成员团结协作，练习制作在网页中嵌入音频。使学生掌握制作视频播放页面的方法和技能。教师使用“微信群”对学生进行指导。
【学生制作在网页中嵌入视频】
学生通过之前所学的知识，制作在网页中嵌入视频，使学生掌握制作在网页中嵌入视频的方法和技能。教师使用“微信群”对学生进行。
教师设置“制作视频播放页详情部分”主题讨论题目，学生均可参与讨论，分享心得。
填表说明：1. 本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等；3. 教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。
任务二 制作视频播放页详情部分
课程名称
课内形式
电子商务网页设计与制作
理论教学□ 课内实践□ 理实一体 习题复习□
考核评价□ 其他活动□
19
任课教师
学习量
安排
课内：
课外形式
序号
调查分析 小组研讨□ 实践任务 理论探究□
考核评价□ 汇报展示□ 其他活动
课外：
月 日
月 日
授课日期
14
授课班级
月 日
月 日
课内教学内容：
项目7：在页面中使用多媒体——制作视频播放页面
任务二 制作视频播放页详情部分
课程思政设计：
（1）通过教师讲解制作视频播放页面的知识，教育引导学生正确认识世界和中国电子商务发展大势，正确认识时代责任以及历史使命。
（2）通过小组合作讨论，引导学生未来就业创业选择电商领域，实现自我价值和社会价值。
（3）要求学生在掌握专业知识和提高专业技能的同时，必须具备正确的道德认知和良好的道德情操。
（4）引导学生刻苦钻研、善于创新、攻坚克难、努力学习，为中国的科技发展不断努力奋斗，增强民族自信心和自豪感。
课外学习任务：
（1）课前：
以小组为单位，分析如何制作视频播放页详情部分，讨论制作视频播放页商品详情部分的布局结构；分析在页面中一共包含几个“Div”并以PPT的形式记录下来。
（2）课后：
①完成实现网页中视频的播放与暂停。
②使用
20
教学目标：
知识目标
熟悉使用
掌握使用
掌握实现网页中视频的快进控制；
掌握制作商品详情页底部；
掌握实现网页中视频的播放与暂停。
能力目标
能够使用
能够掌握制作商品详情页底部；
能够掌握实现网页中视频的播放与暂停。
素质目标
较强的专业知识和自学能力；
丰富知识结构， 提升专业知识；
在掌握制作视频播放页面的基础上，理解并应用专业知识。
重点难点及解决方法： 课内教学授课地点：
（1）重点：
教学媒体：微课、PPT课件、网页图片、相解决方法：通过课堂练习+视频式教学的方关教学视频等。
法，教师讲解
思维能力和分析问题解决问题的能力。
其它资源：与本次课相关的专业技术论文（2）难点：制作商品详情页底部
解决方法：通过案例演示+启发式教学讲解电子版。
的方式，细致讲解商品详情页底部的制作。帮助学生掌握制作视频播放页面的方法和技巧。从实用的角度帮助学生提高专业知识。
学习效果评价方式：
对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；
对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；
对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。
课后小结：
填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2. 授课形式在相应的选项打“√”。
21
课内教学内容及过程
1. 课前调研成果展示与汇报
【课前调研成果展示与汇报】
教师向学生展示商品详情页底部效果的图片，使学生了解本节课所要学习的知识。
时间分配
方法
及手段
教师注意通过本章之前所学到的知识引导学生，让学生在学习的过程中有承上启下的感觉，使学生可以更加快速掌握在页面中使用多媒体的方法和技巧。
德育教育：引导学生掌握专业知识和提高专业技能。
【根据调研结果引出新课】
从使用
德育教育：引导学生刻苦钻研、善于创新、攻坚克难、努力学习，为中国的科技发展不断努力奋斗，增强民族自信心和自豪感。
2.布置任务
【教师展示教学载体，创设学习情境】
由于各种浏览器对音频和视频的编解码器的支持不一样，为了能够在不同浏览器中都能正常显示音频和视频效果，需要提供多种不同格式的音频和视频文件。这就需要使用
22
你的浏览器不支持audio元素
或
以上代码中，使用source元素代替了
（1）src：用于指定媒体文件的URL地址，可以是相对路径地址，也可以是绝对路径地址。
（2）type：用于指定媒体文件的类型，属性值为媒体文件的MIME类型，该属性值还可以通过codes参数指定编码格式。为了提高执行效率，定义详细的type属性是非常必要的。
3.任务分析
【分析视频播放页商品详情部分的布局结构】
教师讲解播放页商品详情部分的页面结构，使学生可以掌握通过使用类样式完成对页面中文本的美化操作。
4.知识准备（教学难点）
【
1．元素的标签属性
23
2．元素的接口属性
除了标签属性外，
24
3．标签的接口方法
【知识点学习情况检测，教学策略调整】
教师通过课堂提问，了解学生对知识的掌握情况，对共同的错误点或存在的问题，进一步有针对性地讲解。
【学生实践，加深对
通过向学生讲解
握使用其用来控制页面中音频和视频的效果，为后续的学习做好铺垫。
【通过课堂练习，进一步加深学生掌握
❖ 练一练—实现网页中视频的快进控制
5.任务实施（教学重点）
【制作商品详情页底部】
01 执行“文件”→“打开”命令，将7.2.3小节的文件打开。在源代码视图中，将光标移动到标签后面，插入一个Div，创建并应用如图所示的样式。在Div中输入文本和插入图像后，效果如图所示。
02 在中创建如图所示的类样式。页面效果如图所示。
03 在图像后面插入一个Div，并应用在中创建如图所示的样式。继续在该Div后插入一个Div，创建并应用如图所示的样式。
04 在Div中输入文本内容，页面显示效果如图所示。在源代码中为文本添加
标签。
26
05 在中创建如图所示的样式，页面效果如图所示。
06 使用相同的方式，继续制作页面其他内容。执行“文件”→“保存”命令，将文件保存为，完成页面的制作。页面预览效果如图所示。
思想、素质教育： 贯穿学生实践过程中
（1）培养学生的专业知识和技能能力；
（2）引导学生树立正确的职业观和职业道德；
（3）引导学生未来就业创业选择电商领域，实现自我价值。
6、技能提升
【学生学会实现网页中视频的播放与暂停】
以小组为单位，学生学会实现网页中视频的播放与暂停，教师通过之前所讲的案例制作，使学生掌握使用HTML5视频的标签属性实现对视频的播放与暂停控制。
思想、素质教育：贯穿学生实践过程中
（1）通过掌握制作视频播放页面，培养学生的创新精神和学习能力；
（2）提高知识能力和专业能力；
27
（3）适当地引导学生遵守电子合同法、电子签名法、电子商务法等相关法律，增强法律意识和法律素养，坚定中国特色社会主义法治信念，积极维护电子商务活动安全。
【展示汇报】
随机抽选1~3个小组进行展示汇报。
7.教学评价
【组织阶段考核与学生自评互评、展示考核结果】
本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。
展示本次课《职业素养评价表》，组织学生自评、互评。
8．小结与作业（课外学习）
小结：
本节课在教师的带领下，学生们从课前调研到课程实施，通过教师讲解、课堂互动等环节充分学习了如何提高页面用户体验，与理论知识相结合，帮助学生掌握使用
作业：
学生课后可通过网络查看
9.板书设计
制作视频播放页面
任务二 制作视频播放页面
十三、 分析任务：使用
十四、 知识准备：
十五、 任务实施：制作商品详情页底部
十六、 技能提升：实现网页中视频的播放与暂停
十七、 教学评价
十八、 小结、作业
28
课外学习任务及学习指导
课前：
【教师布置调研任务】
调研主题：《分析如何制作视频播放页详情部分》
要求：以小组为单位，分析如何制作视频播放页详情部分，讨论制作视频播放页商品详情部分的布局结构；分析在页面中一共包含几个“Div”，同时制作汇报PPT（PPT不得不于5页，图文并茂），提交到“微信群”。
【学生调研，教师线上指导】
学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。
【教师对各组调研成果进行评价】
教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。
课后：
【学生完成实现网页中视频的播放与暂停】
小组成员团结协作，使用HTML5视频的标签属性实现对视频的播放和暂停控制，深刻理解
【学生使用
学生通过之前所学的知识，使用
教师设置“使用
填表说明：1. 本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等；3. 教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。
29
版权声明：本文标题：在页面中使用多媒体——制作视频播放页面 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1702838165h432777.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论