电子商务网页设计与制作
授课教案
学年第学期
学院（部）专业（学部）
填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2. 授课形式在相应的选项打“√”。
课内教学内容及过程时间
分配
方法
及手段1. 课前调研成果展示与汇报
【课前调研成果展示与汇报】
教师向学生展示电子商务网站轮播图效果图片，使学生能够
掌握使用JavaScript制作网站中常见的轮播图效果。
教师注意通过本章之前所学到的知识引导学生，让学生在学
习的过程中有承上启下的感觉，使学生可以更加容量掌握使用
JavaScript制作网站首页轮播图效果的方法和技巧。
德育教育 ：引导学生未来就业创业选择电商领域，实现自我
价值和社会价值。
【根据调研结果引出新课】
从分析网页轮播图的作用进行讲解，帮助学生了解在HTML文
档中使用JavaScript的方法。同时，通过课堂练习使学生可以
使用JavaScript实现可选择字体大小以及制作电子商务网站首
页轮播图。同时通过本节课的学习使学生可以学会使用
JavaScript实现图像滑动切换。
德育教育 ：引导学生掌握专业知识和提高专业技能。
2.布置任务
【教师展示教学载体，创设学习情境】
网页设计与平面设计最大的不同是要在平衡“视觉传达”与
“信息传递”的同时，还加上了独有的“交互动态体验”。轮播
图可以随机乱序显示，页面每次刷新后显示的第一张图可能都不
一样。图的切换时间是可控的，一般在眼睛对热点的读取时间内
（3～4s）完成切换，在丰富页面体验、信息传播、视觉传达这
三方面追求平衡点。本任务将使用JavaScript制作网站首页轮播图效果。轮播图布局结构如图所示。
3.任务分析
【分析电子商务网站首页轮播图的布局结构】
教师讲解电子商务网站首页轮播图的布局结构，帮助学生在掌握制作电子商务网站首页轮播图的布局结构，可以了解滚动式的轮播图能够将页面立体化并在有限的面积上呈现更多信息。
4.知识准备（教学难点）
【了解在HTML文档中使用JavaScript的方法】
在HTML文档中有两种使用JavaScript的方法，一种是使用<script>标签将JavaScript程序代码嵌入到HTML文档中，另一种方法是将JavaScript文件单独保存为一个.js文件，在HTML 文档中链接外部的JavaScript文件。
1．嵌入JavaScript代码
如果要在HTML文件中嵌入JavaScript代码，需要在<head>与<head>标签之间嵌入一个<script>标签。嵌入JavaScript代码的格式如下。
<script language="javascript">
Javascript脚本代码部分
</script>
该代码表示在HTML文档中嵌入一段脚本程序，脚本程序语言为JavaScript，在<script>与</script>标签之间的为脚本程序代码。
2．链接外部JavaScript文件
如果要链接外部的JavaScript文件，需要将JavaScript脚本程序保存为外部的一个独立文件，然后在HTML页面中使用<script>标签将外部的JavaScript文件链接到HTML页面中。链接外部JavaScript文件的格式如下。
<script src="****.js"></script>
【知识点学习情况检测，教学策略调整】
教师通过课堂提问，了解学生对知识的掌握情况，对共同的
错误点或存在的问题，进一步有针对性地讲解。
【学生实践，加深在HTML文档中使用JavaScript方法的掌握】通过向学生讲解在HTML文档中使用JavaScript的方法，使学生掌握具体的使用方法。
【通过课堂练习，使学生加深掌握在HTML文档中使用JavaScript的方法】
❖练一练—使用JavaScript实现可选择字体大小
5.任务实施（教学重点）
【制作电子商务网站首页轮播图】
01  执行“文件”→“打开”命令，将“项目九/index.html”文件打开，页面效果如图所示。在源代码中到id为banner的Div，将其里面的图像删除。
02  在id为banner的Div中插入两个Div，源代码如图所示。继续插入一个id为focus的Div，并在其内继续创建列表，并插入图像素材，添加超链接，源代码如图所示。
03  切换到style.css中，分别创建如图所示的样式。
js实现轮播图最简代码
04  继续创建如图所示的样式。并在源代码中添加样式，源代码效果如图所示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。