电子商务网页设计与制作微课版配套教案 项目五1知识链接10页Word文件下载.docx

电子商务网页设计与制作微课版配套教案 项目五1知识链接10页Word文件下载.docx

《电子商务网页设计与制作微课版配套教案 项目五1知识链接10页Word文件下载.docx》由会员分享，可在线阅读，更多相关《电子商务网页设计与制作微课版配套教案 项目五1知识链接10页Word文件下载.docx（18页珍藏版）》请在冰豆网上搜索。

课外学习任务：

（1）课前：

以小组为单位，探讨电子商务网站商品列表页布局，使学生在课前充分理解商品列表页面是电子商务网站中最为重要的页面，同时了解电子商务网站商品列表页常见的表现形式。

（2）课后：

①分析商品列表页的设计要点有哪些。

②分析列表的类型以及使用方法。

教学目标：

知识目标

●熟悉电子商务网页设计常用商品列表页布局；

●了解商品列表页的设计要点；

●掌握网页中的列表控制；

●掌握列表的类型及使用。

能力目标

●能够网页中的列表控制；

●能够列表的类型及使用。

素质目标

●在掌握制作商品列表页面的基础上，理解并应用专业知识；

●丰富知识结构，提升专业技能；

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

重点难点及解决方法：

（1）重点：

网页中的列表控制。

解决方法：

采用“视频教学法+启发式教学法”，为学生讲解网页中的列表控制，让学生理解列表形式在电子商务网站设计中的重要性，从而使学生深刻掌握网页中的列表控制，同时培养学生的专业知识以及学习能力。

（2）难点：

列表的类型及使用。

通过“视频教学法+讨论式教学法”，为学生播放列表类型及使用的相关知识，帮助学生掌握列表的各种类型以及相关的使用方法，使学生可以深入掌握列表的使用方法。

课内教学授课地点：

教学媒体：

微课、PPT课件、网页图片、相关教学视频等。

设备及材料：

多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。

其它资源：

与本次课相关的专业技术论文电子版。

学习效果评价方式：

对理论知识学习效果评价：

采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

对技能的评价：

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

对职业素养的评价：

采用学生自评、小组内评价和教师评价相结合的方式。

课后小结：

填表说明：

1.序号，指该课程授课的顺序号，应与授课计划一致；

2.授课形式在相应的选项打“√”。

课内教学内容及过程

时间分配

方法

及手段

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

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

教师向学生展示商品列表页面效果图片，使学生了解通过CSS控制列表样式，实现整齐直观的显示效果；

同时掌握使用CSS控制列表样式的方法与技巧。

教师注意讲解通过列表元素的应用形式，帮助学生了解通过运用CSS控制列表样式的重要性。

德育教育：

培育学生独立思考以及专业能力；

同时可以具备认真聆听的能力。

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

在讲解电子商务网站常用商品列表页布局时，同时引出商品列表页的设计要点。

通过视频演示讲解网页中的列表控制以及列表的类型及使用，使学生理解列表形式在电子商务网站设计中的重要性，同时加深掌握各类列表的使用方法，为后续的学习打好基础。

引导学生成为创新型、复合型电子商务高级专业人才。

2.布置任务

【分析电子商务网站常用商品列表页布局】

v行列排列

如果商品的种类数量多且繁杂，规规整整的行列排列方式更利于用户找到浏览规律。

正因为商品列表页相对于其他页面来说显得有些拥挤，因此设计师更应该以在限制的区域范围内展现最有用的信息为宗旨来设计页面。

v瀑布流

瀑布流的形式更多地用在流行时尚领域的电子商务网站，页面布局结构效果如图所示。

v特别款突出

特别款突出的方式可以用于一些节日活动的宣传促销，页面布局结构效果如图所示。

作为电子商务网站春节促销活动的一部分，居家优品栏目的页面设计就应用了特别款突出的布局方式。

将重点促销内容以较大幅面展示，以与其他内容有所区分，既丰富了页面的视觉效果，又便于用户快速找到感兴趣的商品。

3.任务分析

【分析商品列表页设计要点】

v始终指引用户

v设置推荐，促进消费

v杜绝死角

v特色商品激发购物欲

v合理安排促销活动

v减少操作步骤

v从众效应

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

【网页中的列表控制】

列表形式在电子商务网站设计中占有很大比重，它可以让信息的显示非常整齐、直观，便于用户理解与点击。

从出现网页开始到现在，列表元素一直是页面中非常重要的应用形式。

在早期的表格式网页布局中，列表大多用于表格设计，第一个表格是由多行多列的表格来完成的。

当列表头部是图像时，需要在原有基础上加一列单元格，用来插入图像，这样就增加了很多列表元素的代码，不便于设计者读取。

CSS布局中的列表提倡使用HTML中自带的ul和ol标签。

这些标签在早期的HTML版本中就已经存在，由于当时CSS没有非常强大的样式控制，因此被设计者放弃使用，改为使用表格来控制。

从CSS2.0开始，ul和ol在CSS中拥有了较多的样式属性，完全可以用来制作列表。

使用CSS来制作列表，还可以减少页面的代码数量，如图所示。

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

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

【学生实践，加深理解网页中的列表控制】

通过向学生展示相关课件视频，使学生加深掌握使用CSS制作列表的相关知识。

【通过视频，使学生加深掌握使用CSS制作列表】

通过向学生展示相关课件视频，使学生加深掌握网页中的列表控制，为后续的学习做好铺垫。

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

【列表的类型及应用】

1．无序列表<

ul>

无序列表用于将一组相关的列表项目排列在一起，列表中的项目没有特别的先后顺序。

无序列表使用一组<

…<

/ul>

标签，标签中嵌套有多组<

li>

/li>

，其中每一组均为一条列表。

代码如下。

<

!

doctypehtml>

html>

head>

metacharset="

utf-8"

>

title>

无序列表<

/title>

style>

<

--内嵌样式-->

*{<

--通配符-->

margin:

0px;

padding:

border:

}

#box{<

--ID样式-->

width:

338px;

height:

170px;

background-image:

url（images/7102.jpg）;

background-repeat:

no-repeat;

15px;

padding-top:

25px;

font-size:

12px;

font-family:

"

宋体"

;

#boxli{<

--定义box层中的li标签-->

300px;

20px;

5px0px0px25px;

float:

left;

/style>

/head>

body>

divid="

box"

--无序列表-->

快来参加斑马奔腾少年挑战赛！

公司入选“中华慈善奖”特此声明！

今天，你会关灯一小时吗？

质检大楼启用，空气净化器顺利下线<

万户业主集体关灯响应“幸福蓝光低碳行”<

幸运礼包珍宝任君选<

/div>

/body>

/html>

下图所示为无序列表的预览效果。

2．有序列表<

ol>

有序列表与无序列表相反，列表的每一个元素都有序列，从上至下可以为数字、字母等不同形式。

有序列表使用一组<

/ol>

标签，标签中嵌套有多组<

标签，其中的每一组均为一条列表，代码如下。

#boxli{

5px0px0px30px;

--有序列表-->

今天，你会关灯一小时吗？

下图所示为有序列表的预览效果。

3．定义列表<

dl>

定义列表是一种特殊的列表形式，dl标签是成对出现的，以<

开始，<

/dl>

结束。

列表中每个元素的标题使用<

dt>

definitionterm<

/dt>

，后面跟<

dd>

definitiondescription<

/dd>

用于描述列表中元素的内容。

#box{

40px;

#boxdt{

230px;

margin-top:

5px;

margin-left:

10px

#boxdd{

10px;

text-align:

center;

10.3.11<

10.3.21<

10.4.1<

10.4.11<

下图所示为定义列表的预览效果。

思想、素质教育：

贯穿学生实践过程中

（1）培养学生在规定时间内完成特定任务的时间观念意识；

（2）培养学生的社会责任感和良好的社会道德习惯；

6、技能提升

【讨论3种列表类型】

以小组为单位，学生讨论3种列表类型，使学生加深理解之前所讲知识，同时加深掌握3种列表类型的使用方法。

贯穿学生实践过程中

（1）通过讨论相关知识，使学生加深掌握所学知识，培养学生学习技巧；

（2）引导学生热爱专业、热爱学习；

促使学生健康发展；

（3）引导学生自觉遵守法律法规，维护司法公平正义。

【展示汇报】

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

7.教学评价

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

本次课的考核注重过程评价：

课上考核包括专业能力与职业素养两方面。

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

8．小结与作业（课外学习）

小结：

本节课在教师的带领下，学生们从课前调研到课程实施，通过教师讲解、课堂互动等环节充分学习了电子商务网站常用商品列表页布局，又通过视频课件与理论知识相结合，全面细致的学习了网页中的列表控制以及列表的类型及使用；

使学生加深掌握了如何使用CSS控制列表样式。

作业：

学生课后可通过网络查找关于如何更好使用CSS控制列表样式的相关信息，开拓视野并加深理解。

9.板书设计

制作商品列表页面

一、分析任务：

电子商务网站常用商品列表页布局/

商品列表页设计要点

二、知识准备：

网页中的列表控制

三、任务实施：

列表的类型及使用

四、技能提升：

3种列表类型

五、教学评价

六、小结、作业

课外学习任务及学习指导

课前：

【教师布置调研任务】

调研主题：

《探讨电子商务网站商品列表页布局》

要求：

以小组为单位，探讨电子商务网站商品列表页布局，制作汇报PPT（至少罗列2种列表页布局，梳理其布局结构的特点；

制作PPT不得少于5页，图文并茂），提交到“微信群”。

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

学生采用线上调研的方式，开展调研。

教师使用“微信群”对学生进行指导。

【教师对各组调研成果进行评价】

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

课后：

【学生分析商品列表页的设计要点有哪些】

小组成员团结协作，共同分析商品列表页的设计有哪些要点；

同时讨论需要注意这些要点的原因。

在此过程中，教师使用“微信群”对学生进行指导。

【学生分析列表的类型以及使用方法】

根据本节课的学习内容，学生分析列表的类型有哪些，以及各类型列表的使用方法。

通过此次分析，加深学生掌握使用CSS制作列表的各类方法。

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

1.本页可续页；

2.教学方法如：

项目教学、案例分析、分组讨论、角色扮演、启发引导等；

3.教学手段如：

课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。