项目二任务二 设计店铺布局（教案）-《店铺运营》（高教版2025-教学改革成果教材）同步精品课堂

《店铺运营》（高教版2025-中高职一体化课程改革成果教材） 项目二 店铺首页装修 课 题 任务二 设计店铺布局 课 型 新授课 课 时 4课时 授课班级 授课时间 授课教师 教材分析 本次授课内容选自高等教育出版社《店铺运营》项目二店铺首页装修任务二《设计店铺布局》。该教材将店铺运营岗位的典型工作任务转化为教学项目，从工作过程为导向设计实践活动，使学习实践过程与实际工作流程保持一致，按照“确定页面结构-规划页面布局-搭建页面框架”的工作流程，将店铺首页结构、店铺常用模块、常见的首页布局形式等知识点嵌入实践过程，做学一体化，真正掌握店铺运营的核心能力，为学生后续的店铺运营学习打下坚实的基础。 学情分析 本课面向中职一年级学生，对动手操作、实践性强的任务兴趣浓厚，在小组活动中能够进行基本的分工与合作，具备基本的信息技术操作能力，如使用搜索引擎、办公软件等。通过项目二任务一定位店铺风格的学习，学生对店铺风格的含义与类型，影响店铺风格的因素等都有了一定的了解，为本次任务的开展打下了一个很好的基础。 学习目标 · 知识目标： · 了解店铺页面常用的模块； · 理解店铺首页结构； · 理解常见的店铺首页布局形式。 · 能力目标： · 能结合店铺风格对店铺页面进行合理布局设计； · 能基于店铺需要选择合适的模块。 · 素养目标： · 激发勇于创新、坚韧不拔的创业精神，培养团队合作精神。 学习重难点 · 教学重点： · 常见的店铺首页布局形式、店铺首页结构。 · 教学难点: · 根据店铺风格和商品特点，为店铺设计一个合理的布局形式，并添加相应的模块。 教学方法 讲授法、情境创设法、任务驱动法、自主学习法、小组讨论法。 课前准备 · 教师准备：教学PPT、计时器； · 学生准备：预习教材项目二任务二内容。 教学媒体 多媒体教室、电脑、投影仪 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 情境导入 问题思考 一、情境导入 小张帮助“粽香馆”明确了店铺的装修风格，并完成了与风格匹配的模板配色和店铺背景的设置，接下来要对店铺页面的各个模块进行整体的布局规划设计。 二、思考：店铺页面布局要有条理，以便于消费者浏览商品，设计店铺页面布局要做好哪些准备？ 仔细了解情境，了解店铺现有基本信息，并思考、讨论、回答，在设计店铺页面布局时，需要做哪些开店前准备工作，并确定本堂课任务。 通过情境创设，引导学生从实际角度思考，完成店铺首页布局设计要完成哪些准备工作，让学生对设计店铺布局工作有个初步认知，为之后顺利完成店铺首页布局做好充分准备。 活动二： 实例分析 知识具象 一、实例分析 某店铺运营专员接到一家茶叶销售公司淘宝店铺装修设计的外包项目，该茶叶销售公司是一家私营企业，主要从事茶叶商品的代销、批发等工作。该公司新开设了一家淘宝店铺，商品销量并不理想，希望通过店铺装修，提升商品销量。了解公司情况后， 店铺运营专员选择了POP 店铺布局形式，对店铺首页中的店铺招牌（简称店招）、图片轮播、导 航、商品推荐、购物券等主要模块进行了新的布局规划。新的店铺首页干净大气，分类清晰，视觉冲击力较强，为消费者提供了更好的购物体验， 店铺的商品销量获得了大幅提升。 思考： （1）实例中，该店铺运营专员选择了POP 布局形式，这种布局形式的变化给你带来怎样的感受? （2）除了实例中提到的POP 布局形式，借助互联网检索相关信息，还有哪些常见的店铺首页布局形式? 请学生回答问题，并总结分析常见的店铺首页布局形式及其特点。 知识点：“T”结构布局，“口”型布局，对称对比布局，POP布局。 1. 认真阅读实例，之后以小组为单位进行讨论两个问题。再派代表回答问题。 2. 掌握教师提出的4种首页布局形式，并了解其特点。 通过相关实例分析，让学生从实例感受POP这种布局形式的特点，从而加深对这种布局形式的理解，为之后本课任务开展做好准备。 活动三： 实践活动 合作探究 1、 确定页面结构 淘宝店铺首页结构从上到下一般分为：页头、页中和页尾三个组成部分。 1. 大屏幕展示店铺首页结构的三个组成部分，并结合店铺后台直观展示店铺首页的组成。 知识点：页头、页中和页尾。 页头是店铺宣传的重要区域，它展示在页面顶部，默认由店铺招牌和导航两个模块。 页中是首页的主体部分，由若干布局单元组成。通常，该区域有图片轮播、客服中心、商品推荐、商品排行、个性分类、自定义区等。 页尾是与页头相呼应的模块，页尾对店铺的形象展示、店内分流起到了很大的作用。页尾一般只能放置一个自定义区模块。 2.发布任务：请在淘宝网食品类目店铺中搜索选择3家店铺，完成店铺首页布局分析，填入表中。 3.请学生在极域里提交表格，然后对学生填写的表格进行分析，尤其是一些共性的错误，比如把客服中心归在了页头包含的模块里，进行重点讲解。 4.请学生再次填写上表，填写完成后提交。 5.大屏幕展示店铺首页常用模块：基础模块和设计师模块。 6.发布任务：请学生仔细观察以下几张图片，并判断这几张图片各展示了什么模块。 7. 发布任务：比较以下两个模块，并之处这两个模块的不同之处。 2、 搭建页面框架 1.发布任务：在页面布局的操作过程中，添加不同的模块有不同的尺寸要求。请你在添加模块时，了解不同模块的尺寸要求（以智能版淘宝旺铺为例），并完成下列表格。 2.发布任务：请根据自己组内店铺商品特点，完成自己组内店铺首页的布局设计，要求首页必须包含店铺招牌、图片轮播、商品推荐这三个模块，其他模块根据需要自行添加。 1. 在淘宝网食品类目店铺中搜索选择3家店铺，完成店铺首页布局分析，完成表格填写并提交。 2. 教师讲解后，找出自己表格中的错误之处，进行修改，再次上交表格。 3. 根据教师给出的图片，判断其所属模块。 4. 仔细观察教师给出的模块，指出这两各模块的不同之处。 5. 完成关于店铺模块规格的表格填写。 6. 分小组完成店铺首页的布局设计，并派代表上台分享自己小组的店铺首页及设计思路。 通过学做合一的方式，让学生通过对真实店铺首页的分析，使学生对店铺首页布局形式、店铺首页结构及店铺首页模块等枯燥的知识有一个直观的认识；而且通过一个任务式的表格填写，可以帮助学生构建这节课的整体知识体系；最后通过一个修改的环节，可以帮助他们更好地掌握这节课的知识点。 通过对真实模块图片的分析，能帮助学生更好地理解各个模块的特点；同时通过对类似模块的对比分析，可以明确相类似的模块的区别，以便在店铺中更好地应用这些模块。 通过对店铺模块规格的表格填写，可以帮助学生更好地掌握各个模块的规格。 通过分组进行店铺首页的布局设计，不仅可以让学生了解店铺首页布局设计的步骤，还可以加强他们的团队合作精神，增加团队凝聚力。 课堂练习 知识巩固  1. 以一张精美图片作为页面的设计中心，常用于时尚品牌和大促期，这是哪一种首页布局形式？ A.T结构布局 B.口型布局 C.对称对比布局 D.POP布局 答案：D 2.下列哪种首页布局的优点是视觉冲击力强，缺点是将两部分有机结合比较困难？ A.T结构布局 B.口型布局 C.对称对比布局 D.POP布局 答案：C 3. 店铺页面布局中用得十分广泛的一种布局形式是哪一种？ A.T结构布局 B.口型布局 C.对称对比布局 D.POP布局 答案：A 4. 页头部分设计的重点是哪一个模块？ A.店铺标志 B.轮播海报 C.店铺招牌 D.导航 答案：C 5. 以下哪部分是首页的主体部分，由若干布局单元组成？ A.页头 B.页中 C.页尾 D.页眉 答案：B 6. 以下哪个模块不能添加在页中区域？ A.店铺招牌 B.图片轮播 C.商品推荐 D.客服中心 答案：A 7. 正常情况下，通栏规格为宽度是多少像素？ A.190 B.750 C.950 D.1050 答案：C 8.以下哪个模块可以展示店铺中最近30天的商品销售量和收藏量排行榜？ A.图片轮播 B.商品搜索 C.商品推荐 D.商品排行 答案：D 9. 以下哪个模块属于设计师模块？ A.图片轮播 B.特价专区 C.商品推荐 D.商品排行 答案：B 10.以下哪个模块能充分地展示排行榜上宝贝的主图效果？ A.商品排行 B.商品排行榜（个性化） C.特价专区 D.商品推荐 答案：B 学生思考屏幕上的课堂练习题 通过课堂练习，巩固知识点。 课堂小结 通过大屏幕梳理知识： （1）店铺首页的布局形式; （2）店铺首页结构； （3）店铺首页常用模块。 作业布置 1.梳理本任务知识点，绘制思维导图，巩固知识。 2.通过上网搜索，了解不同模块的尺寸要求。 板书设计 1、店铺首页的布局形式; 2、店铺首页结构； 3、店铺首页常用模块。 教学反思 本节课通过系列互动活动，有效激发了学生兴趣，化解了理论知识的枯燥感。未来可考虑引入人工智能辅助学生决策，进一步提升课堂的科技感与实战性。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $