2、任务一 制作电子商务网站轮播图动画教案

电子商务网页设计与制作

授课教案

学年 第 学期

______ 学院(部)

课程名称

课内形式

_____ 专业(学部)

电子商务网页设计与制作

理论教学口课内实践口理实一体回习题复习口 考核任课教师

课内：

评价口其他活动口

学习量 安排

调查分析回小组研讨口实践任务回理论探究口 考核课外形式 课外：

评价口汇报展示口其他活动回

序号

值。

授课日期

14

授课班级

月 日

月 日

月 日

月 日

课内教学内容：

项目10：使用JavaScript脚本丰富页面 制作页面父互动画

任务一制作电子商务网站轮播图动画

课程思政设计：

(1) 通过教师讲解JavaScript脚本丰富页面使用的知识，教育引导学生正确认识世界

和中国电子商务发展大势，正确认识时代责任和历史使命。

(2) 通过小组合作讨论，引导学生未来就业创业选择电商领域，实现自我价值和社会 价(3) 引导学生刻苦钻研、善于创新、攻坚克难、努力学习，为中国的科技发展不断努 力奋斗，增强民族自信心和自豪感。

(4) 启发学生思考，开阔学生思维，鼓励学生发表观点看法，引起学生共鸣，从而引 导学生树立正确的职业观和职业道德。

课外学习任务：

(1) 课前：

以小组为单位，讨论电子商务网站轮播图布局结构，分析如何通过使用JavaScript

制作网站中常见的轮播图效果并以PPT的形式记录下来。

(2) 课后：

① 使用JavaScript实现可选择字体大小。

② 使用JavaScript实现图像滑动切换。

1

教学目标：

知识目标

•理解分析网页轮播图的作用；

•

•

了解在HTML文档中使用JavaScript的方法；

掌握使用JavaScript实现可选择字体大小；

JavaScript实现图像滑动切换。 能力目标

•掌握制作电子商务网站首页轮播图；

•掌握使用•

能够了解在HTML文档中使用JavaScript的方法；

JavaScript实现图像滑动切换。

•能够掌握制作电子商务网站首页轮播图；

•能够使用素质目标

•较强的专业知识和技术能力；

•丰富知识结构，提升专业知识；

•自觉履行电子商务网页设计师的各项职责。

课内教学授课地点：

重点难点及解决方法：

教学媒体：微课、PPT课件、网页图片、 相(1) 重点：了解在HTML文档中使用

JavaScript 的方法

关教学视频等。

解决方法：通过课堂练习+启发式教学的方

设备及材料：多媒体计算机、多媒体教学 广法，教师讲解在HTML文档中使用 JavaScript播软件、网页素材图片、 教的方法，引导学生积极思考， 掌握在HTML文档中两种使用JavaScript 的方法；同时学载体源文件等。

通过课堂练习，使学生深入掌 握使用其它资源：与本次课相关的专业技术论文

JavaScript实现可选择字体大小；培 养学电子版。

生的思维能力和分析问题解决问题的 能力。

(2) 难点：制作电子商务网站首页轮播图

解决方法：通过案例演示+启发式教学讲解

的方式，细致讲解制作电子商务网站首页轮

播图。帮助学生加深掌握如何制作电子商务

网站首页轮播图的相关知识。从实用的角度

帮助学生提咼专业知识。

学习效果评价方式：

对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；

对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。

课后小结：

填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“V”。2

课内教学内容及过程

时间

分配

方法

及手段

1.课前调研成果展示与汇报

【课前调研成果展示与汇报】

教师向学生展示电子商务网站轮播图效果图片，使学生能够

掌握使用JavaScript制作网站中常见的轮播图效果。

BQ ■:--ji-^K-^W.

硯■■用

：Fun Rraai"

之・哥1

E^ilviP

宿⑷迪碧

教师注意通过本章之前所学到的知识引导学生，让学生在学

习的过程中有承上启下的感觉，使学生可以更加容量掌握使用

JavaScript制作网站首页轮播图效果的方法和技巧。

卫德育教育卫：引导学生未来就业创业选择电商领域，实现自我

价值和社会价值。

【根据调研结果引出新课】

从分析网页轮播图的作用进行讲解，帮助学生了解在HTML文

档中使用JavaScript的方法。同时，通过课堂练习使学生可以 使用JavaScript实现可选择字体大小以及制作电子商务网站首 页轮播图。同时通过本节课的学习使学生可以学会使用 JavaScript实现图像滑动切换。

卫德育教育卫：弓|导学生掌握专业知识和提高专业技能。

2.布置任务

【教师展示教学载体，创设学习情境】

网页设计与平面设计最大的不同是要在平衡“视觉传达”与

“信息传递”的同时，还加上了独有的“交互动态体验”。轮播

图可以随机乱序显示，页面每次刷新后显示的第一张图可能都不

一样。图的切换时间是可控的，一般在眼睛对热点的读取时间内

（3〜4s）完成切换，在丰富页面体验、信息传播、视觉传达这 三方面追求平衡点。本任务将使用JavaScript制作网站首页轮播 图3

效果。轮播图布局结构如图所示。

:|..I

3•任务分析

【分析电子商务网站首页轮播图的布局结构】

教师讲解电子商务网站首页轮播图的布局结构，帮助学生在

掌握制作电子商务网站首页轮播图的布局结构，可以了解滚动式

的轮播图能够将页面立体化并在有限的面积上呈现更多信息。

4•知识准备（教学难点）

【了解在HTML文档中使用JavaScript的方法】

在HTML文档中有两种使用JavaScript的方法，一种是使用

〈script>标签将JavaScript程序代码嵌入到HTML文档中，另一

种方法是将JavaScript文件单独保存为一个.js文件，在HTML 文档中链接外部的JavaScript文件。

1.嵌入JavaScript代码

如果要在HTML文件中嵌入JavaScript代码，需要在 与标签之间嵌入一个〈script>标签。嵌入JavaScript代 码的格式如下。

该代码表示在HTML文档中嵌入一段脚本程序，脚本程序语言

为JavaScript，在〈script>与〈/script>标签之间的为脚本程序 代码。

2

•链接外部JavaScript文件

如果要链接外部的JavaScript文件，需要将JavaScript脚 本程序保存为外部的一个独立文件，然后在HTML页面中使用

【知识点学习情况检测，教学策略调整】

教师通过课堂提问，了解学生对知识的掌握情况，对共同的 错误点或存在的问题，进一步有针对性地讲解。

4

【学生实践,加深在HTML文档中使用JavaScript方法的掌握】

通过向学生讲解在HTML文档中使用JavaScript的方法， 使学生掌握具体的使用方法。

【通过课堂练习，使学生加深掌握在HTML文档中使用

JavaScript的方法】

练一练一使用JavaScript实现可选择字体大小

5•任务实施（教学重点）

【制作电子商务网站首页轮播图】

01执行“文件”一“打开”命令，将“项目九/index.h tml”

文件打开，页面效果如图所示。在源代码中找到id为banner的

Div，将其里面的图像删除。

T

nil；

ediv

Jid=llbaniner,'>

02在id为banner的Div中插入两个Div,源代码如图所示。 继续插入一个id为focus的Div，并在其内继续创建列表，并插 入图像素材，添加超链接，源代码如图所示。

03切换到中，分别创建如图所示的样式。

Hfocua { widtht

丄OODpx；

^feews 11

邛3说

hsrijgtrt： 35Apx； ov-c-rfI

display: biocK]

t hi ddcin: [pos il l on

E

widtlu

h&igl-it c &&pstj

«focus dl {

pos-it-ionl: absolute

J

丄O00pX； height

Isfti 0； battnnt D； li»ic-hi?-«ght 1 Sflpx j;

rtcKt-aliHnSlc^t：| fwfprdly：號烘35； fc^t-size; 2=3[px]

bold;

；

color: JFFFj

posiiiont ahsolutej

padd~i ng t Opjf 2^px * lbaclkgrDiindir5&j(9?0?fl/5.5)； f i Iter r

pirogid :DKLnageTrainsf orm•■阿i t rosof t

rE；radient I； Gr-ad-isntT-ype = 5

f^-fa-CUIS 11 [

= " j-epdCclors-tr

floati Left; wide lit

丄&00pX3

=5>

heights 353px] overflc*!

hidden] pos-itnont

relative；

04继续创建如图所示的样式。并在源代码中添加样式，源 代码效果如图所示。

5

05 在标签中将准备好的两个JavaScript文 件链接进来，源代码如图所示。

无际題文裆4/tit

n5tyle/style * css11 rel=11 style5heet11 type=Mte} Ocript type="text/jav^script1'

src=l'js/jqnery-lB9

R1 n»j>

-i-1fi|1

七己笈社/

j avsscri pt src = j s/focus

亠

j s' >

06执行“文件”一“保存”命令，将页面保存，同时将CSS

文件保存，按键盘上的F12键测试页面，页面效果如图所示。

卫思想、素质教育卫:贯穿学生实践过程中

(1) 培养学生的专业知识和技能能力；

(2) 弓|导学生成为创新型、复合型电子商务高级专业人才。

(3) 引导学生刻苦钻研、善于创新、攻坚克难、努力学习，为 中国的科技发展不断努力奋斗，增强民族自信心和自豪感。

6、技能提升

【学生学会使用JavaScript实现图像滑动切换】

以小组为单位，学生学会使用JavaScript实现图像滑动切

换，教师通过之前所讲的案例 制作，使学生掌握通过使用

JavaScript脚本实现网页中图像滑动切换的效果。6

卫思想、素质教育卫：贯穿学生实践过程中

(1) 通过掌握制作电子商务网站首页轮播图的制作，培养学生 的创新精神和专业能力；

(2) 提高知识和能力和自学能力；

(3) 弓|导学生成为创新型、复合型电子商务高级专业人才。

【展示汇报】

随机抽选1~3个小组进行展示汇报。

7.教学评价

【组织阶段考核与学生自评互评、展示考核结果】

本次课的考核注重过程评价：课上考核包括专业能力与职业 素养两方面。

展示本次课《职业素养评价表》组织学生自评、互评。

8 •小结与作业(课外学习)

小结：

本节课在教师的带领下，学生们从课前调研到课程实施，通 过教师讲解、课堂互动等环节充分学习了如何提高页面用户体 验，与理论知识相结合，帮助学生掌握从分析网页轮播图的作用 到制作电子商务网站首页轮播图的相关知识，做到知己知彼，有 的放矢。为后面课程中学生独立完成网页设计工作铺平道路。

作业：

学生课后可通过网络查看如何更好地使用JavaScript脚本 丰富页面，开拓视野的同时并加深理解。

7

9.板书设计

制作页面交互动画

任务一制作电子商务网站轮播图动画

一、 分析任务：分析网页轮播图的作用

二、 知识准备：了解在HTML文档中使用JavaScript的方法

二、 任务实施：使用JavaScript实现弹出贝面

四、 技能提升：使用JavaScript制作动态网站相册

五、 教学评价

六、 小结、作业

课外学习任务及学习指导

课前：

【教师布置调研任务】

调研主题：《讨论电子商务网站首页轮播图布局结构》

要求：以小组为单位，讨论电子商务网站首页轮播图的布局结构，分析如何通过 使用JavaScript完成电子商务网站首页轮播图的制作。制作汇报PPT （罗列出网页设 计与平面设计有哪些不冋并且需要在哪三方面追求平衡点，以及如何使用JavaScript 脚本丰富页面；PPT不得少于6页，图文并茂），提交到“微信群”。

【学生调研，教师线上指导】

学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【 教师对各组调研成果进行评价】

教师查阅学生调研结果PPT,对每个小组的PPT进行评价，记录评价成绩，并 挑选出优秀作品。

课后：

【学生使用JavaScript实现可选择字体大小】

小组成贝团结协作，练习使用JavaScript实现可选择字体大小；使学生掌握在

HTML文档中使用JavaScript的方法。教师使用“微信群”对学生进行指导。

【学生使用JavaScript实现图像滑动切换】

学生通过之前所学的知识，完成使用JavaScript实现图像滑动切换，使学生掌握 使用JavaScript脚本实现网页中图像滑动切换的效果。教师使用“微信群”对学生进 行。

教师设置“制作电子商务网站弹出页面”主题讨论题目，学生均可参与讨论，分 享心得。

填表说明：1. 本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等

3. 教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。

8