（中职）网店装修（第二版）学习情境五 教案.doc

《（中职）网店装修（第二版）学习情境五 教案.doc》由会员分享，可在线阅读，更多相关《（中职）网店装修（第二版）学习情境五 教案.doc（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、（中职）网店装修（第二版）学习情境五 教案任务一 店铺首页策划一 一、教学目标1、知识目标（1）了解店铺首页装修的基础理论知识。（2）掌握店铺首页装修的创作方法。2、技能目标（1）能正确理解首页的作用。（2）能熟悉首页每个模块的制作方法3、情感目标（1）培养学生美感审美的能力，美的情操。（2）培养学生积极思考、大胆探索的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。教学重点：1、电脑端

2、首页的规范。 2、首页的主要模块。教学难点：1、首页的组成模块。 2、首页的布局。三、教学过程设计教学步骤教师活动学生活动设计意图1、创设情景引入课题思考什么是首页？首页的作用？看展示的首页，思考问题。引出首页装修的重要性。2、新课讲解一、一个正常营业的店铺首页主要由店招、导航、海报、产品分类、客服旺旺、产品展示、店铺页尾、店铺背景以及满返、满减、红包、购物券等营销模块。店铺首页的标准布局图：二、首页布局内容解析1、店招顾名思义是店铺的招牌，店招的尺寸为950*150PX含自定义导航部分，950*120PX其导航为系统自带。店招一般展示的内容是店铺的名称、 logo标志、口号等，详细一些的也可

3、以展示1-2款主推的产品，还有领取优惠券的设计，收藏店铺的图标。店招是店铺上唯一各个页面都能展示出现的模块，所以一些重点推广信息可以设计在店招上。2、导航条导航条可分为淘宝系统自带和自定义导航条设计，主要功能是可以快速链接到相应的指定页面。一般内容为所有分类、首页等，丰富一些的有会员制度、购物须知、品牌故事等等，具体可根据自己店铺内容而定。3、全屏海报或轮播海报全屏海报主要用于店铺重大公告、折扣优惠、主打产品推荐，让客户一进入首页就能看到店铺的重点，一般全屏海报尺寸 1920*600PX（建议高度在400-600PX间较好）。轮播海报主要用于推广产品的促销内容，可以做成促销海报吸引买家。尺寸为

4、950*500PX（建议高度在400-500PX间较好）。4、产品分类产品分类方便买家根据自己的需求在店铺快速找到想要的产品。分类主要可按价格分类，产品功能分类，产品属性分类等。本模块尺寸可根据自己店铺规划大小来定义。5、 活动促销区将店铺的促销活动，显示在店铺首页，可提升店铺的转化率。在旺铺的基础模块中，可供使用的促销工具有：满返、红包、优惠券、满减、满赠。以上营销服务，可起到主动营销买家，提升回头客的效果。我们所说的设计，是通过平面图片的设计展示在店铺的首页，让买家一目了然的看到。设计尺寸950*200PX内。6、商品展示区是指产品通过平面图片展示设计，更能突出产品的性价比，更能融化到店铺

5、的风格里，极大提生产品的视觉展示效果（此非淘宝系统宝贝推荐的豆腐块式的产品展示）。本模块尺寸可根据自己店铺规划大小来定义。7、店铺页尾主要展示的内容如关于快递包装物流，关于售后等，尺寸950*300PX内8、店铺背景一个店铺的风格确立，店铺的背景占据了大部分，背景主要设计的内容店铺的背景图片，店铺手机二维码或店铺一些重要的折扣信息都可以加入到店铺背景上。三、店铺首页案例展示案例：小熊电器官方旗舰店（见图5-2），以简约大气的风格凸显产品多样、高档，排版布局合理紧凑，无需过多的文字修饰，凸显高端家电品质。了解电脑端首页的布局能熟悉首页主要由哪些模块构成，每个模块的内容可为哪些？让学生先行了解电脑

6、端首页的基本知识让学生对首页的整体布局有系统的了解，便于后面的策划4、学生实训任务名称为店铺首页进行模块策划任务要求根据本任务学习的知识，进行小家电店铺首页各模块进行策划。使用Excel工具，进行模块策划。制作规范首页各模块策完整，能反馈出各区域的主要涉及要点，以文字及图片的形式进行表达。首页宽：1920像素，核心内容需要放置在页面中心950像素内。产品资料店招主推商品2个：网红轻食早餐机、智能加湿器海报商品1个：旋钮式破壁机店长推荐商品 5个：大容量空气炸锅、紫外线消毒柜、轻食三明治机、双盖炖煮养生壶、多功能电煮锅新品4个：迷你电烤箱、萌潮养生壶、双层电饭盒、便携榨汁杯店铺资料店名：“小熊电

7、器”小家电专卖店店标：自己设计，突出店名、主营类目，色彩搭配合理。店铺口号：健康生活每一天。优惠券：买满199减10元、买满380减20元、买满750减40元促销活动：秋季滋补产品特价优惠。根据上面的知识点，完成小家电首页策划书的撰写。（没有弄清楚的地方可参看微课）通过此任务的完成，懂得如何撰写首页策划书5、课后小结本节课要掌握的重点：1、 店铺首页布局2、店铺首页模块明白本节课自己要掌握的知识点18任务二 店标设计 一、教学目标1、知识目标（1）店标的定义、作用。（2）店标的和规格尺寸。2、技能目标（1）根据店标的规格尺寸和类型设计店铺店标。3、情感目标（1）培养学生美感审美的能力，美的情操

8、。（2）培养学生积极思考、大胆探索的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。教学重点：1、店标规格尺寸。教学难点：1、根据店标的规格尺寸和类型设计店铺店招。 三、教学过程设计教学步骤教师活动学生活动设计意图1、创设情景引入课题常见的店标有哪些？思考为什么你们都能记住它？思考回答问题强化店标设计很重要2、新课讲解一、店标的定义及作用1、店标的定义店铺的标志，是指网店中起到识别和推广

9、店铺作用的图案，通过店标可以让消费者记住店铺主体和品牌文化，是店铺标识的图形记号。一个网店的店标可作为一个店铺的形象参考，给人的感觉是最直观的。可以代表着你店铺的风格，店主的品位，产品的特性，也可起到宣传的作用。2、店标的作用网店店标是公众识别网店的指示器。店标是一种“视觉语言”。它通过一定的图案、颜色来向消费者传输商店信息，以达到识别商店、促进销售的目的。二、店标要求1、文件格式GIF、JPG、JPEG、PNG2、文件大小80K以内3、建议尺寸80PX*80PX三、店标设计的步骤（1）提取店名关键字，取得关键字的首字母。（2）抽象选择可替代该行业的图案。（3）将字母和图案结合，完成标志的设计

10、。聆听讲解，店标的定义、作用、规格及分类。提升自主学习和专注听讲的能力。4、学生实训发布实训任务：为小家电店铺设计店标。参考网上电器店标，用Photoshop制作店铺店标。利用所学知识，分析任务，讲练结合，学以致用5、课后小结本节课要掌握的重点：1、店标的定义2、店标的作用3、店标要求4、店标设计的步骤明白本节课自己要掌握的知识点任务三 店招设计 一、教学目标1、知识目标（1）店招的定义、作用。（2）店招的和规格尺寸。2、技能目标（1）根据店招的规格尺寸和类型设计店铺店标。3、情感目标（1）培养学生美感审美的能力，美的情操。（2）培养学生积极思考、大胆探索的能力。（3）培养学生自主学习、协助学

11、习的能力。二、教学内容分析网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。教学重点：1、店招规格尺寸。教学难点：1、根据店招的规格尺寸和类型设计店铺店招。 三、教学过程设计教学步骤教师活动学生活动设计意图1、创设情景引入课题常见的店标有哪些？思考为什么你们都能记住它？思考回答问题强化店标设计很重要2、新课讲解一、店招的定义及作用1、店招的定义店招就是商店的招牌，有的地方叫“招子”。古人称为“幌子”、“望子”。近年来随着网络交易平台的发展，店招也延伸

12、到网店中，即虚拟店铺的招牌。网店的招牌相当于传统商铺的“门头”一样，具有同样的含义。2、店招的作用（1）店招可以表明商店所售物品或服务项目的标志；（2）可以传递商店的经营理念以及品牌优势等；（3）可以展示出店铺的优势产品及服务。二、店招的大小店招尺寸990/950x120PX，C店和商城的店招尺寸是有区别的，如图所示：三、店招的分类以店招的主要功能进行分类的话，店招主要分为下面三大类：1、以品牌宣传为目的的店招这类店招首先要考虑的内容是店铺名、店铺logo、店铺口号因为这是品牌宣传的最基本的内容；其次是关注按钮、关注人数、收藏按钮、店铺资质，可以侧面反映店铺实力；再次是搜索框、第二导航条等方便

13、用户体验的内容。2、以活动促销为目的的店招这类店铺的特点是店铺活动、流量集中增加，有别于店铺正常运营。所以店招首要考虑的因素是活动信息/时间/倒计时、优惠券、促销产品等活动或者促销信息；其次是搜索框、旺旺、第二导航条等方便用户体验的内容；再次才是店铺名、店铺logo、店铺口号等品牌宣传为主的内容。3、以产品推广为目的的店招表现突出、对店铺有贡献。店铺特点是有主推产品、想要主推一款或几款产品。在店招上，这类店铺要主打促销产品、促销信息、优惠券、活动信息等促销信息；其次是店铺名、店铺logo、店铺口号等品牌宣传为主的内容；再次是搜索框、第二导航条等方便用户体验的内容。四、制作店招要注意的事项1、首

14、先视觉重点不宜过多，有1-2个就够了，太多了导致店招没有核心。2、其次根据店铺现阶段的情况来分析，如果现阶段是做大促，可以着重突出促销信息，但是品牌性也不能忽略，反之则刚好相反。3、店招一定要凸显品牌的特性，让客户很容易就清楚你是卖什么的，包括风格，品牌文化等等。这些元素需要我们对自己的品牌有一定的理解之后，方可以应用至店招中，避免对自己的品牌定位出现偏差。4、颜色不要复杂，颜色一定要保持整洁性，不要使用过多的颜色，店铺本来需要表达的信息量就不大，不需要把店招作得太花哨，给买家造成视觉疲劳很可能就会流失了客户的关注度，尽量只使用1-3种颜色，减少使用过于刺激的颜色。聆听讲解，听取老师讲解，正确

15、回答出店招包含的元素。以学习者为中心，突出学生主体地位 ，教师的引导。4、学生实训发布实训任务：为小家电店铺设计店招。参考网上电器店招，用Photoshop制作店铺店招。利用所学知识，分析任务，讲练结合，学以致用5、课后小结本节课要掌握的重点：1、店招的定义及作用2、店招的大小3、店招的分类4、制作店招要注意的事项明白本节课自己要掌握的知识点任务四 海报设计 一、教学目标1、知识目标（1）海报的大小。（2）海报的类型。2、技能目标（1）海报设计共同标准。（2）海报整体构图。3、情感目标（1）培养学生美感审美的能力，美的情操。（2）培养学生积极思考、大胆探索的能力。（3）培养学生自主学习、协助学

16、习的能力。二、教学内容分析网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。教学重点：1、海报整体构图。教学难点：1、海报设计共同标准。 三、教学过程设计教学步骤教师活动学生活动设计意图1、创设情景引入课题对比两个店铺，思考哪一个流量会更多？思考回答问题强化全屏海报很重要2、新课讲解一、海报的大小全屏海报尺寸： 宽 1920px 中间部分 950px(C店) 990px（天猫） 高 400-540px二、海报的类型1、产品型海报 主要展现产品卖点的海

17、报2、促销型海报 主要展现促销信息的海报三、海报设计共同标准1、主题突出2、目标明确3、形式美观四、海报整体构图1、左图右字型（左右构图）2、右图左字型（左右构图）3、两边图中间字型（居中构图）聆听讲解，听取老师讲解，正确回答出海报的尺寸、类型。以学习者为中心，突出学生主体地位 ，教师的引导。4、学生实训发布实训任务：为小家电店铺设计全屏海报。参考网上电器全屏海报，用Photoshop制作店铺店招。利用所学知识，分析任务，讲练结合，学以致用5、课后小结本节课要掌握的重点：1、海报的大小2、海报的类型3、海报设计共同标准4、海报整体构图明白本节课自己要掌握的知识点任务五 促销区设计 一、教学目标

18、1、知识目标（1）促销区的类型。（2）促销区设计要点。2、技能目标（1）促销区设计四步骤3、情感目标（1）培养学生美感审美的能力，美的情操。（2）培养学生积极思考、大胆探索的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。教学重点：1、促销区设计要点。教学难点：1、促销区设计四步骤。 三、教学过程设计教学步骤教师活动学生活动设计意图1、创设情景引入课题思考优惠券的好处？思考回答问题强化促

19、销区设计很重要2、新课讲解一、常见的网店促销区1、优惠券2、促销活动：折扣活动、会员活动、抽奖活动、满赠活动二、促销区设计要点（1）促销活动,罗列清晰（2）区域划分,明确独立（3）核心内容,突出显示（4）颜色鲜艳,吸引眼球三、促销区设计四步骤（1）梳理优惠规则：时间、优惠价格（2）确定元素组合形式：中英文、数字（3）确定构图和配色：上下/左右构图、主辅色调（4）选合适平台和软件：ps工具、智能工具聆听讲解，听取老师讲解，正确回答出促销区类型、促销区设计要点等。以学习者为中心，突出学生主体地位 ，教师的引导。4、学生实训发布实训任务：为小家电店铺设计促销区。参考网上电器促销区，用Photosho

20、p制作店铺店招。利用所学知识，分析任务，讲练结合，学以致用5、课后小结本节课要掌握的重点：1、常见的网店促销区2、促销区设计要点3、促销区设计四步骤明白本节课自己要掌握的知识点任务六 产品分类导航设计 一、教学目标1、知识目标（1）产品分类导航的定义及作用。（2）产品的分类标准。2、技能目标（1）产品分类导航的种类。3、情感目标（1）培养学生美感审美的能力，美的情操。（2）培养学生积极思考、大胆探索的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。美观的店铺装修会给客户好的第一

21、印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。教学重点：1、产品的分类标准。教学难点：1、分类导航的设计。 三、教学过程设计教学步骤教师活动学生活动设计意图1、创设情景引入课题对比两个导航，思考哪一个点击量会更多？思考回答问题强化分类导航很重要2、新课讲解一、产品分类导航的定义及作用定义：淘宝店铺的分类导航是指引顾客更快找到自己购买物品位置的指向灯，相当于超市中标明各类商品位置的指示牌，其重要性不言而喻。作用：1、引导顾客快速的找到所需要购买的商品，起到了路径的作用。2、还可以提高顾客在店铺里的访问深度，增加浏览流量。 3、有助于顾客对整个店铺的商品全面了解，提高客单价。二、产

22、品的分类标准1、按商品类目2、按商品价位3、按商品上架时间4、按店铺促销活动三、产品分类导航的种类1、店招导航2、页中分类导航3、左侧分类导航4、页尾导航聆听讲解，听取老师讲解，正确回答出促销区类型、促销区设计要点等。以学习者为中心，突出学生主体地位 ，教师的引导。4、学生实训发布实训任务：为小家电店铺设计分类导航。参考网上分类导航，用Photoshop制作店铺店招。利用所学知识，分析任务，讲练结合，学以致用5、课后小结本节课要掌握的重点：1、产品分类导航的定义及作用2、产品的分类标准3、产品分类导航的种类明白本节课自己要掌握的知识点任务七 商品陈列区设计 一、教学目标1、知识目标（1）商品陈

23、列区定义。（2）传统超市和电商商品陈列对比。2、技能目标（1）如何进行商品陈列。3、情感目标（1）培养学生美感审美的能力，美的情操。（2）培养学生积极思考、大胆探索的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。教学重点：1、商品陈列区定义。教学难点：1、如何进行商品陈列。 三、教学过程设计教学步骤教师活动学生活动设计意图1、创设情景引入课题对比两个导航，思考哪一个点击量会更多？思考回

24、答问题强化分类导航很重要2、新课讲解一、商品陈列区定义将产品按销售者的经营思想及要求，有规律地摆设、展示、以方便顾客购买，提高销售效率的重要的宣传手段，是销售产业广告的主要形式。二、传统超市和电商商品陈列对比超市商品陈列电商商品陈列位置内容位置内容入口处吸引顾客进店，配置主题型季节促销区（特别是标准超市）首屏焦点海报电商主题大促主题区放在卖场深处，吸引顾客向卖场纵深分类商品陈列区电商引导性标识端架区高毛利商品，低价优质商品，强化价格形象，激发购买欲望大促商品陈列区电商新热促暴点排面促销区活化陈列，吸引顾客向货架深处行进首页商品分类列表电商分类运营手段特殊陈列包柱子海报宣传首页背景设置电商特别主

25、题装饰渲染气氛三、商品陈列的重要性陈列是零售业的一个重要环节，有规矩摆设、展示商品，以便顾客购买。同时不仅美化购物环境，还可以刺激销售，提高商品销量。可以说，陈列直接影响着销售量。四、如何进行商品陈列电商行业，消费者浏览习惯都是从上到下，从左到右。陈列原则有：1、重点突出2、整齐统一3、色彩对比4、关联有序聆听讲解，听取老师讲解，正确回答出促销区类型、促销区设计要点等。以学习者为中心，突出学生主体地位 ，教师的引导。4、学生实训发布实训任务：为小家电店铺设计商品陈列区。参考网上商品陈列区，用Photoshop制作店铺店招。利用所学知识，分析任务，讲练结合，学以致用5、课后小结本节课要掌握的重点

26、：1、商品陈列区定义2、传统超市和电商商品陈列对比3、商品陈列的重要性4、如何进行商品陈列明白本节课自己要掌握的知识点任务八 电脑端首页上传 一、教学目标1、知识目标（1）掌握电脑端首页的上传方法。（2）掌握网店首页包含的模块。2、技能目标（1）能上传电脑端首页。（2）模块装修。3、情感目标（1）培养学生美感审美的能力，美的情操。（2）培养学生积极思考、大胆探索的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析无线购物时代，手机端详情是美工的一个重要内容，手机端详情页的设计是否真实有吸引力，是决定买单下单的一个重要因素，所以这是美工的一个重内容。教学重点：1、电脑端首页上传方法。

27、教学难点：1、使用DW上传店招的方法三、教学过程设计教学步骤教师活动学生活动设计意图1、创设情景引入课题图片热点链接和切片链接有什么不同？思考回答问题。先思考，提出问题，可通过后面的课程重点讲解。2、新课讲解一、首页上传方法1、模块上传使用智能版旺铺的装修模块，完成首页中的对应模块的上传，在上传过程中，需要分别完成各模块图片的设计。2、代码上传 将首页设计为一张完整的图片，利用PS软件进行切片，保存为HTML网页文件，并DW软件修改图片目标链接，可通过添加全屏代码实现全屏首页的整体上传。3、第三方工具上传 可使用一些第三方工具，智能化的完成首页的上传。目前比较受欢迎的有“稿定设计”等工具，这些

28、工具更新频率较快，可关注最新的第三方工具。 二、网店首页包含的模块： 淘宝旺铺的智能版包括了基础模块和设计师模块两大类。1、 基础模块可以分为以下几类：店铺招牌宝贝推荐类：宝贝推荐、宝贝排行、自定义区分类导航类：默认分类、个性分类、悬浮导航、宝贝搜索图片展示类：图片轮播、全屏宽图、全屏轮播营销类：满返、红包、购物券、满减其他类：友情链接、客服中心、生意参谋、无线二维码、充值中心、公益广告、小黄条2、 设计师模块（1） 特价专区（2） 宝贝排行（3） 宝贝分类3、三、模块装修1、店招使用“店铺招牌”模块来完成。2、导航条默认情况下，店铺提供高30PX的导航条，如果想设计的更加精美，可与店招设计在

29、一起，发挥设计水平的空间会更大一些。3、全屏海报 需要使用“全屏宽图”模块完成。4、产品促销轮播海报 需要使用到“图片轮播”模块完成。5、优惠券优惠劵可使用“购物券”模块来完成。6、活动区 需要使用到基础模块中的“营销类”模块完成。7、产品展示区 默认的主图展示，可通过“宝贝推荐”完成，但自定义的主图展示则需要使用“自定义区”模块完成。四、使用DW上传店招的方法：使用DW热点工具，完成店铺页头部分的上传能熟悉电脑端首页上传的三种方法。让学生理解电脑端首页上传的三种方法。4、学生实训发布实训任务：把上节课制作的电脑端首页进行切片并使用三种方法中的一种进行上传。根据上面的知识点，完成电脑端首页上传。通过此任务的完成，懂得如何上传电脑端首页。5、课后小结本节课要掌握的重点：1、 首页上传方法2、 网店首页包含的模块3、 模块装修4、 使用DW上传店招的方法明白本节课自己要掌握的知识点感谢您的支持与使用如果内容侵权请联系删除仅供教学交流使用22