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

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

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

电子商务网页设计与制作微课版配套教案项目五1知识链接10页

电子商务网页设计与制作

授课教案

学年第学期

学院（部）专业（学部）

课程名称

电子商务网页设计与制作

任课教师

课内形式

理论教学□课内实践□理实一体习题复习□考核评价□其他活动□

学习量

安排

课内：

课外形式

调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动

课外：

序号

14

授课日期

月日

月日

月日

月日

授课班级

课内教学内容：

项目5：

使用CSS控制列表样式——制作商品列表页面

知识链接

课程思政设计：

（1）在系统讲解专业知识的过程中注重专业知识的价值引领作用，同时必须具备正确的道德认知和良好的道德情操。

（2）通过小组合作探讨，培养学生团结协作的工作作风，掌握制作商品列表页面，培养学生的自学能力。

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

（4）适当地引导学生遵守电子合同法、电子签名法、电子商务法等相关法律，增强法律意识和法律素养，坚定中国特色社会主义法治信念，积极维护电子商务活动安全。

课外学习任务：

（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．无序列表

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

无序列表使用一组

…
标签，标签中嵌套有多组
• …
，其中每一组均为一条列表。

代码如下。

doctypehtml>

--无序列表-->

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

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

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

• 质检大楼启用，空气净化器顺利下线
• 万户业主集体关灯响应“幸福蓝光低碳行”
• 幸运礼包珍宝任君选