资源简介

任务一 设置店铺主页
教学 课题 活动一 设置店铺主页
课题 类型 实操 课时 安排 4 上课 时间
教 学 目 标 了解微商城的装修方法； 了解店铺Logo设计和店铺装修原则； 能完成有赞商城店铺主页的设置
教学 重点 店铺Logo的设计 教学 难点 Logo的设计要求及方法
辅助 资源 课件、PS、有赞平台、多媒体、实训室
复习引入 Logo设计的要点； 设计Logo的方法。
教学 手段 教学过程 师生活动设计
课件 讨论 课件 讨论 课件 讨论 课件 举例 1.活动背景 店铺Logo是一家店铺非常重要的文化标志。设计制作优秀的Logo，可帮助顾客记住你的店铺。因此，Logo要醒目而又符合店铺的经营风格。晓欣打算用自己比较熟悉的平面处理软件Photoshop来完成这个任务。 2．活动的实施 （1）打开Photoshop软件，新建一个长、宽各200像素，分辨率为72像素/英寸，RGB模式，背景为白色的文档。 (2)新建一个图层1，选用椭圆形选框工具，同时按住Shift键，绘制出一个正圆，填充颜色为“#1a9efb”。 （3）新建一个图层2，用钢笔工具描绘出的路径，填充颜色为“#1a9efb”。 (4)按住“Ctrl”键，同时用鼠标选中图层1和图层2，使用快捷键“Ctrl+E”合并两个图层。合并图层后的效果。 (5)使用快捷键“Ctrl+J”复制图层2得到图层2的副本。用鼠标在图层面板中选中“图层2副本”，使用快捷键“Ctrl+T”调出变形工具，单击右键选择“垂直翻转”，然后根据需要调整“图层2副本中图形”的大小，并放到的适当的位置。 (6)新建一个图层3，用椭圆形选区工具绘制一个圆，在图层面板中选中图层3，再按快捷键“Ctrl+J”复制图层3得到图层3的副本。将绘制的两个小圆放到合适的位置，再用矩形选框工具选出一个矩形，调整大小后，将图形摆放在适当的位置，绘制出卡通Logo的一对眼睛。 (7)采用文字工具，在绘制好的图标下方输入“智渊商城”，点击保存，店标就做好了，效果如图所示。 （8）登录有赞商城，单击“店铺”页面，再单击“小猪的图片”。 (9)弹出的页面，单击店铺Logo旁边的“修改”按钮，出现图片上传界面，将前面设计的Logo图片上传即可。 （10）上传成功后，就可以看到店铺Logo了。 3.活动小结 由于本店的经营产品是食品类，并且面向20岁左右的学生群体，所以店标设计以萌宠的卡通造型结合文字，非常简约，让顾客很容易通过店标记住店铺。团队一致认为这个店标设计符合大家共同的想法。 阅读知识窗： 店标的介绍 实训操作： 根据提示步骤，完成智渊商城logo的模仿制作 实训操作：根据提示步骤，完成店标的上传
作业 布置 填写提交实训报告和实训表格 课后作业：为小组的店铺设计一个合适的logo
教学 后记
教学 课题 活动二 设置微页面
课题 类型 实操 课时 安排 4 上课 时间
教 学 目 标 1.了解食品类店铺的装修风格。 2.掌握店铺页面的创建及设置。
教学 重点 创建店铺的微页面 教学 难点 店铺的装修风格设置
辅助 资源 课件、PS、有赞平台、多媒体 实训室
复习引入 店铺微页面的作用； 店铺装修风格的设置。
教学 手段 教学过程 备注
课件 举例 讨论 1．活动背景 店铺主页即店铺首页，是店铺的门面。店铺主页的内容要有吸引力，比如，上新、优惠活动等；结构要清晰，首页导航设置有利于用户快速找到自己想要买的商品。 2．活动实施 （1）本次活动借助店铺已有的模块框架，对店铺的主页进行修改。单击“店铺”页面，单击左侧“微页面/杂志”，在显示的“新建微页面区域”单击“店铺主页”中的“编辑”按钮。 (2)在页面名称中输入“店铺主页”，在页面描述中输入“戳戳戳，查看智渊商城的新品！”单击分类旁边的“新建”按钮。 (3)在弹出的“微页面分类”页面中，设置分类名为“店铺主页”，根据需要调整“第一优先级”“第二优先级”和“显示方式”等。确定后单击“保存”即可。 (4)返回店铺主页设置界面。单击分类旁边的“刷新”按钮，显示刚才建立的“店铺主页”页面分类，选择图中所示的“店铺主页”。 （5）在背景颜色旁边单击“重置”按钮，弹出颜色选择框，选择的颜色块。 （6）单击图中1区域，向右弹出页面，单击背景图片旁边的“修改”按钮。 （7）在弹出的背景上传页面中单击“新图片”，上传素材库中提供的店招背景图片，单击“确定上传”按钮。 （8）添加了背景后的店铺主页效果。也可以采用步骤5中的方法对该区域的背景颜色进行设置。如果没有设置店铺的Logo，也可以在图中所示的店铺Logo处进行设置和修改。 （9）单击图中的公告区域，即可在右侧区域输入公告内容，如“该店铺主页是智渊商城的测试页，请勿下单！”。 （10）模板中的功能块可以根据需要随意添加和删除，也可以添加一个商品分组。 (11)添加了商品分组1的模板，商品分组的内容已经在项目2中设置好了。此时，只需要单击右侧的“添加商品分组”按钮即可。 （12）弹出商品分组页面，这是之前设置过的分组，根据需要选取需要在主页展示的分组。 （13）选取了这些分组，确定后即可显示商品分组，此时图片还不能显示。 （14）单击“预览”或“上架”按钮，最终完成店铺主页。 3.活动小结 因篇幅问题，店铺主页中店招部分的背景图片由素材库提供。我们也可以利用商城自带的背景，也可以根据产品特点自己设计个性化的背景，打造有吸引力的店铺主页。 好的店铺门面可以吸引用户浏览的兴趣，快速地找到自己想要买的商品，给用户带来良好的购物体验，最终实现高的转化率。 阅读知识窗：微页面的介绍 讨论：食品杂货铺适合选用哪种风格的装修？ 实训：按照提示完成店铺微页面的设计
作业 布置 填写提交实训报告和实训表格 完成合作实训任务
教学 后记
任务二 设置会员主页及店铺导航
教学 课题 活动一 设置会员主页
课题 类型 实操 课时 安排 4 上课 时间
教 学 目 标 1．如何进入会员主页； 2．会员主页设置方法。
教学 重点 设置会员主页 教学 难点 会员主页的功能设置
辅助 资源 课件、有赞平台、多媒体、实训室、网络
复习 引入 学会从客户体验角度思考问题； 培养耐心严谨的工作态度；
教学 手段 教学过程 备注
课件 展示 讨论 课件 展示 实作 课件 展示 课件 展示 实作 1．活动背景 会员主页类似买家中心，所有的积分、等级和订单详情都可以在此处查看。同时，我们还可以借助会员主页自主添加的内容模块，将一些促销信息和推广商品通过会员主页推送出来。 2．活动实施 （1）登录有赞商城，单击 “店铺”按钮，选择“会员主页”，即可弹出会员主页的设置页面。 (2)在“页面名称”中设置页面的名称。然后单击“背景图”旁边的“修改背景图”，即可弹出的修改背景图页面，上传素材库中的“会员主页背景”图，根据需要可以勾选是否显示等级和积分，显示效果。 小提示： 我们可以选择“用过的图片”，图片库里也提供一些的图片，也可以通过网络地址链接到网络图片。一般我们采用上传自主设计的“会员背景图”，图片大小以640*320像素为宜。 （3）会员主页的模板中包含了订单、收到的礼物、优惠券和优惠码等功能，它也和微页面一样，还有许多可以自主设置的“添加内容”。添加的内容可以作为会员主页的关联营销。我们给这个会员主页添加“商品”的内容。 （4）单击“商品”按钮，弹出添加商品页面，单击“选择商品”旁边的“+”即可添加第一个商品。 （5）在弹出的窗口中可以“新建商品”，在这里选择“已上架的商品”，选择需要在会员主页中推广的产品，单击“选取”按钮即可。 （6）采用同样的方法继续添加两个商品，然后在“列表样式”中对关联营销的产品进行适当设置，这里设置了“一大两小”“极简样式”“显示商品名”“显示价格”。 (7)设置完成后，就可以在电脑端和手机端分别查看会员主页效果。就是在手机上预览的会员主页效果。 3.活动小结 此案例中，我们添加了“商品”作为关联营销。会员主页的自主添加内容和微页面一样，我们还可以添加商品列表、图片广告、图片导航和关联链接等，可以根据需要进行适当添加，但也忌添加内容过多。会员主页也要讲究简洁，方便用户使用。 阅读知识窗：了解会员主页 小组实训：按照提示步骤，完成主页制作 活动设计：设计个性化的个人主页
作业 布置 填写提交实训报告和实训表格 预习作业：店铺导航
教学 后记
教学 课题 活动二 设置店铺导航
课题 类型 实操 课时 安排 2 上课 时间
教 学 目 标 1．掌握店铺的装修方法； 2．会在商城中设置店铺导航。
教学 重点 掌握店铺的装修方法； 教学 难点 店铺导航的设计
辅助 资源 课件、有赞平台、多媒体、实训室、网络
复习 引入 ①、网店导航的作用； ②、店铺模版的使用。
教学 手段 教学过程 备注
课件 展示 讨论 课件 展示 实作 课件 展示 课件 展示 实作 1．活动背景 只要精心设置好网站导航，它就可以让店铺的各个页面串联起来，方便买家在栏目间快速切换，引导买家前往您期望的页面。 2．活动实施 （1）登录有赞商城，单击 “店铺”按钮，选择“店铺导航”，即可弹出店铺导航的设置页面。单击“未启用”按钮启用店铺导航，然后单击“修改模板”按钮。 (2)店铺导航提供5种模板，可以根据需要进行选择。在这里，我们选择图中的第二个模板“APP导航模板”。 (3)修改模板。单击 “修改模板”按钮，即可对模板的颜色、图标按钮等根据需要进行修改。 （4）设置导航链接页面。单击“选择链接页面”，在下拉菜单中为每个图标按钮设置导航链接。“首页”链接的页面是“店铺主页”，“新品推荐”链接的是“商品及分类”，“活动”链接的是“调查活动页”。 (5)添加导航。如果模板中提供的图标不能满足需要，我们可以通过添加导航来实现。单击“添加导航”按钮。 (6)弹出新的一组导航按钮模板。单击“选择”按钮，即可在图标库中选择图标进行添加。 (7)我们添加了一个头像按钮的图标，并设置链接页面为“会员主页”，设置完成后单击“保存”按钮。 （8）预览效果。这是用手机登录智渊网络超市，看到的店铺导航效果。 3.活动小结 店铺导航起着引导顾客浏览店铺的效果。设置店铺导航，一方面需要有清晰的逻辑，确保每个按钮都能展现最希望顾客看到的信息页；另一方面，也要考虑顾客的使用习惯，导航按钮要能清晰指示，避免产生混淆意思。同时，设置店铺还需要耐心细致的工作态度。 项目总结 本项目是店铺经营的第三个环节：装修微商店铺。通过本项目的学习，智渊网络超市的团队成员们了解到，主要从两个方面来装修微商店铺：一方面是从卖家的角度来展示商城，以店铺的Logo、主页设置为主，展示商城文化特色；另一方面，要从买家的角度来展示。会员主页是顾客登录的页面，是用户中心，店铺导航主页引导顾客浏览店铺。在装修中，除了要考虑平面设计中的色彩、布局，还需要考虑从用户体验的角度设置店铺的内容、导航、关联销售等，这些内容和技巧在实际工作中也可以融会贯通，为创业中的店铺装修服务。 实训活动： 按照提示步骤，完成店铺导航制作
作业 布置 填写提交实训报告和实训表格 完成合作实训任务
教学 后记
任务三 制作公共广告
教学 课题 活动 制作公共广告
课题 类型 实操 课时 安排 4 上课 时间
教 学 目 标 1．了解公共广告的作用； 2．能够制作公共广告。
教学 重点 设置公共广告 教学 难点 公共广告的功能设置
辅助 资源 课件、有赞平台、多媒体、实训室、网络
复习 引入 学会从客户体验角度思考问题； 广告设计的基本原则；
教学 手段 教学过程 备注
课件 展示 讨论 课件 展示 实作 课件 展示 课件 展示 实作 1．活动背景 通过大家的共同努力,智渊网络超市的团队成员完成了商城主页、会员主页和店铺导航的制作。大家对有赞商城组件化的设计赞不绝口,有了众多内置组件的帮助,不需要很专业的网页知识也可以轻松搭建一个美观的微商城了。许总监和老师们也对大家的作品表示非常满意。 在制作广告时,晓欣发现当需要同时给多个页面添加相同的广告时,工作量变大,而且广告的内容需要经常修改,维护起来也很不方便。 有没有什么办法可以解决上面的问题呢 他们找到了许总监,许总监提醒大家:“你们去试试微商城里的公共广告模块吧”。 2．活动实施 （1）登录有赞商城,单击“店铺”按钮,选择“公共广告”,即可打开公共广告的设置页面,单击“关闭”开关,即可开启公共广告功能。 (2)在设置界面中,根据需要选择公共广告的展示位置和出现的页面。在这里选择了“页面底部”,出现的页面全部选中。也就是说制作的公共广告会在所有的页面底部进行展示。 （3）在设置页面中,找到“图片广告”组件和“进入店铺”组件,分别添加到公共广告中。 （4）单击“图片广告”区域,打开“图片广告”设置面板。“选择模板”设置为轮播海报,“填充方式”设置为“留白”,单击下方的“添加一个背景图”虚框,弹出图片选择界面,选择之前上传的背景图片。 （5）添加好背景图片后,将鼠标移动到“链接”属性处,在弹出的选项中,选择“全部商品”。 （6）保存之后,分别访问“会员主页”和“商品页”等页面,发现在这些页面的最下方,都出现了公共广告。 3.活动小结 此案例中,我们给智渊商城设置了一个公共广告。公共广告可以同时在多个页面上显示,便于维护,大大节省了我们发布广告的时间,也避免了广告版本不统一的问题,是我们维护商城的好帮手!。 阅读知识窗：了解公共广告 讨论：公共广告与普通广告的区别 小组实训：按照提示步骤，完成主页制作 活动设计：设计个性化的个人主页
作业 布置 填写提交实训报告和实训表格 完成合作实训
教学 后记
任务三 开通及装修小程序
教学 课题 活动一 开通小程序
课题 类型 实操 课时 安排 2 上课 时间
教 学 目 标 1．了解小程序的作用； 2．能够完成有赞商城小程序开通。
教学 重点 开通小程序 教学 难点 小程序的注册和授权
辅助 资源 课件、有赞平台、多媒体、实训室、网络
复习 引入 学会从客户体验角度思考问题； 培养耐心严谨的工作态度；
教学 手段 教学过程 备注
课件 展示 讨论 课件 展示 实作 课件 展示 课件 展示 实作 1．活动背景 桔子非常关注移动电子商务的新工具的使用,他了解到:小程序是一种全新的连接用户与服务的方式,体验比网页好,比下载APP便捷。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。它实现了应用“触手可及”的梦想——用户扫一扫或搜一下即可打开应用。通过制作微商城小程序可以让客户非常方便地访问微商城,改善客户体验,增强客户黏性,有效地提升商城的品牌形象。 2．活动实施 1、登录有赞商城，在店铺后台单击“店铺”，我们发现有赞支持微信、支付宝、百度、QQ等多种小程序的授权使用。我们以最常用的微信小程序为例，进行小程序的开通与授权。 2、如果还没有在微信公众平台注册小程序账号的商家，直接单击图中的“快速注册”，先进行微信小程序注册；已在微信公众平台注册小程序账号，已有小程序账号的商家，单击图中的“授权微信小程序”，进行一键授权有赞生成您的店铺小程序。 小提示 登录微信公众后台，选择微信小程序进行注册。注意：在微信端完成注册、认证、设置小程序信息，主体是“个人”的小程序，不能进行小程序认证，注册时请勿选择”个人”。 3、授权微信小程序。如果已经注微信小程序， “授权微信小程序”，显示授权及发布小程序界面，单击“授权”，进入授权流程，首先使用微信小程序管理员帐号扫码进行授权，授权过程中请勾选所有权限以确保小程序功能完整性，然后设置小程序的支付方式，所有准备完成后，提交审核并发布小程序。 3.活动小结 此活动中,我们给智渊商城开通了小程序。小程序是一种全新的连接用户与服务的方式，体验比网页好，比下载APP便捷。有了小程序，智渊商城可以在微信内被便捷地获取和传播。买家也可以便捷地访问商城，获取服务，无需安装或下载即可使用。。 阅读知识窗：如何拥有自己的小程序 小组实训：按照提示步骤，完成小程序的注册 实训活动：按照提示步骤，完成小程序的授权
作业 布置 填写提交实训报告和实训表格 预习作业：寻找适合商城的小程序设计装修风格
教学 后记
教学 课题 活动二 装修小程序
课题 类型 实操 课时 安排 2 上课 时间
教 学 目 标 1．了解小程序的使用方法； 2．能够完成有赞商城小程序装修。
教学 重点 掌握小程序的装修方法； 教学 难点 微页面的设计
辅助 资源 课件、有赞平台、多媒体、实训室、网络
复习 引入 ①、小程序的作用； ②、微页面的设计。
教学 手段 教学过程 备注
课件 展示 讨论 课件 展示 实作 课件 展示 课件 展示 实作 1．活动背景 小程序的装修和商城主页的装修都是使用微页面制作而成,晓欣和桔子决定:可以分别给小程序和商城主页单独制作不同的微页面,也可以使用同一个微页面。 2．活动实施 (1)登录有赞商城,单击“店铺”按钮,选择“小程序装修”,即可打开小程序装修的设置页面。单击“设置小程序主页”按钮。 (2)在新打开的“微页面”中,可以看到之前制作的店铺主页,单击右侧“设为主页”链接,在弹出的窗口中选择“小程序主页”,即可将该微页面设置为“小程序主页”。 (3)也可以单独给小程序设置一个微页面。单击“新建微页面”按钮,在弹出的对话框中,单击“基础模板”,选择一个自己喜欢的模板,。 (4)单击“立即应用”之后,即可打开编辑页面。 (5)按照前面的方法,对微页面进行编辑,预览无误后保存即可。将其设置为小程序主页。 (6)通过扫描二维码的方式,访问小程序主页,得到最终的效果。 3.活动小结 此活动中,我们给小程序设置了单独的微页面。一般情况下,小程序主页和店铺主页使用同一个微页面即可。如果店铺做促销活动,可以单独给小程序设置一个微页面。利用好小程序,可以大大提高店铺的品牌形象哦! 项目总结 本项目是店铺经营的第三个环节——装修微商店铺。通过本项目的学习,智渊网络超市的团队成员了解到,主要从两个方面来装修微商店铺:一方面,从卖家的角度来展示商城,以店铺的Logo、主页设置为主,展示商城文化特色;另一方面,要从买家的角度来展示。会员主页是顾客登录的页面,是用户中心,店铺导航主页引导顾客浏览店铺。同时,他们还掌握了公共广告和自定义页面模块的开发方法。通过这两个功能可以大大提高商城页面制作和维护的效率。在小程序装修环节,了解了小程序的作用以及如何装修小程序。在装修中,除了要考虑平面设计中的色彩、布局,还需要考虑从用户体验的角度设置店铺的内容、导航、关联销售等,这些内容和技巧在实际工作中也可以融会贯通,为创业中的店铺装修服务。 小组实训：按照提示步骤，完成小程序的装修 拓展实训：根据自己的店铺，个性化进行装修小程序
作业 布置 填写提交实训报告和实训表格 完成合作实训任务
教学 后记

展开更多......

收起↑