学习单元十—实训—付费版店铺整页装修设计

1、实训五付费版整页装修设计1.实训时间：2.实训要求：要求学生围绕特定的主题实施店铺整页装修设计实践活动。通过对各类型店铺装修模板进行设计、设置等的实施，使其掌握店铺整页装修设计的核心要点及方法。从而使学生掌握各类型店铺整页装修设计的方法和技巧。3.教学方法：示范讲解、学生操作、纠正指导、问题总结4.实训准备（1）教学设备：装有博星卓越网上商城软件的I3、2G配置以上的计算机1台；博星卓越网上商城系统1套。（2）实训场地：理实一体化实训室5.学生实训（1）淘宝付费模板装修设计淘宝付费版的模板在装修时，更多的是需要结合企业产品、营销目标、受众人群等因素考虑进行模板的调整及二次设计，对于网店美工而言

2、，其节约成本而且便于管理和修改。1）付费模板的调整轮播图片调整步骤一：点击自定义区域的编辑，如图4-1所示：图4-1步骤二：进入到编辑页面，点击编辑元素，根据需求进行修改，如图4-2所示：图4-2调整单个广告展示图和文字广告步骤一：点击广告展示图模块，根据自身要求，双击图片就会弹出编辑框，写上想要编辑的话可以了,如图4-3所示：图4-3修改旺旺链接和收藏链接步骤一：打开图4-4步骤二：把复制的图标覆盖粘贴或者粘贴到你想放到的地方，如图4-5所示：图4-5修改收藏链接步骤一：选择属性，复制属性里面的链接地址，如图4-6所示：图4-6步骤二：双击点击收藏处，会弹出图片设置，在链接地址里面填入刚才复

3、制的地址，修改保存即可，如图4-7所示：图4-7模板左侧自定义区域修改步骤一：点击左侧自定义区的右上角“编辑”，如图4-8所示：图4-8步骤二：根据需求修改编辑后保存即可，如图4-9所示：图4-92）焦点图片设计步骤一：在进行焦点图片设计时，要注重字体的设计，字体传达要清晰易辨认禁止使用微软雅黑等未授权字体尽量少使用英文，且拼写一定要正确，尽量避免对字体的变化，倾斜、拉伸、变形等。步骤二：图片要素设计要注意，严格按照TMS标准下，从视觉上控制JPG产生的噪点和层次感的丧失。素材图片应该以真人实景为主。除特殊需求否则不推荐卡通效果类素材。并且当素材设计到大小调整或图片比重调整时，需按照1：1的长

4、宽比进行缩放或修改。含人物，风景等易辨识内容时，严禁压扁或拉长素材内容。步骤三：最后图片的设计要具有传承性。（4）其他区域的设计对于其他区域的装修和设计，更多的是需要考虑和店铺整体页面的统一性、协调性，从而使的店铺装修的效果更加凸显。1）750快速分类导航步骤一：进入店铺专修页面，编辑导航，如图4-10所示：图4-10步骤二：添加宝贝分类导航项，如图4-11、4-12所示：图4-11图4-12步骤三：进行自定义页面的设置，页面的类型要选择自定义页才会显示在导航条上，列表页模板和详情页模板不会显示在导航条上，如图4-13所示：图4-13步骤四：然后，进入高级页面设置，选择自定义内容，如图4-14

5、所示：图4-14步骤五：添加自定义链接导航项，其中链接型导航项的链接地址只能是淘宝内部地址，如图4-15所示：图4-15步骤六：添加链接，添加完成后，保存。那分类类导航项即设置完毕了，如图4-16所示：图4-162）190收藏步骤一：如果需要单独添加一个收藏本店按钮，那么新建一个自定义模块，插入淘宝收藏本店图片，如果是那种淘宝模板里包含了淘宝收藏本店按钮，只需安装那个模板代码。鼠标左键单击“收藏本店”按钮，然后单击弹窗小窗口里的“编辑”按钮。图4-17步骤二：在“链接网址”栏黏贴自身的“淘宝收藏本店链接地址”， 黏贴完后，单击“确定”就可以了，如图4-18所示：图4-183）自定义栏目步骤一：

6、首先确定：进入卖家中心后台的“店铺装修”，添加左侧栏自定义区 点击左侧栏最下方，如图4-19所示：图4-19步骤二：在弹出的窗口中 添加“自定义内容区”，促销栏添加自定义区 是在店铺装修后台尾部点击“在此处添加新模块”，如图4-20所示：图4-20步骤三：添加完成之后点击编辑，进入编辑页面把设计好的代码放入编辑框内，点击保存即可。如图4-21所示：图4-214）不规则商品展示步骤一：将不同尺寸的商品图集中展示在一个模块中，可以让模块整体结构更显独特效果。步骤二：充分考虑左右结合法、相对固定的位置、系列产品纵向陈列和充分利用黄金站位。5）客服中心步骤一：登陆淘宝“我是卖家”后台，点击“店铺装修”

7、，在装修页面左侧栏找到“在此处添加新模块”，如图4-22所示：图4-22步骤二：在跳出的选项框中找到“客服中心”模块，并点击画面右方的“添加”按钮，返回装修页面，便能看到店铺内已经添加“客服中心”模块，如图4-23、4-24所示：图4-23图4-24步骤三：对客服中心模块进行编辑，将鼠标放置到客服中心区域，便可看到三个按钮，分别是“编辑”&“向上、向下”&“删除”按钮，点击“编辑”按钮，便可对“搜索店内宝贝”模块开始编辑操作，如图4-25所示：图4-25步骤四：在跳出的客服中心编辑内容框内，便可对模块标题、具体工作时间、在线咨询、联系方式进行编辑，设置好后，点击”保存“按钮，如

8、图4-26所示：图4-266）店铺公告步骤一：打开我的店铺首面，点击右上角的管理我的店铺，点击店铺公告的编辑按钮。步骤二：出现下面的画面，点击图片旁的“编辑HTML源码（下图黑色圆圈处即是）”，点击后出现下图的页面，把你喜欢图片的代码复制，点击鼠标右键进行粘贴。步骤三：然后再点击“编辑HTML源码”，代码就变成图片了。最后一步，在上面加上你自己喜欢的文字，点击确认就可以了。7）页面大小步骤一：了解淘宝店铺装修的各个模块的尺寸，遵循各模块的尺寸原则。步骤二：根据页面大小有条理的规划店铺装修流程。8）大图商品展示步骤一：在进行大图商品展示时，先抓住对比原则， 对比的目的是避免出现太多的相似元素并引

9、起观者最先的注意力。步骤二：其次，是重复。重复可以增强画面的统一性和条理性。重复的元素可以是图形、大小、宽度、材质、颜色等。步骤三：再来应该注意对齐，使画面建立一种清爽的观感。其原理是让任一元素都与画面上某一内容存在一种视觉联系。步骤四：最后，亲密性的基本思想是构建清晰的结构。将相关项归组在一起，尤其是多个相关性的时候，归组会使它们形成一个视觉单元，而不是零散的元素。9）商品展示步骤一：商品展示可以采取风格代表产品，容易产生搭配的产品此类来作为首要的展示。步骤二：此外还可以通过宝贝排名的方式进行商品的展示。10）160分类步骤一：点击右侧管理我的店铺，进入店铺类别的“编辑”如图4-27、4-2

10、8所示：图4-27图4-28步骤二：进入宝贝分类管理界面，进行分类，如图4-29所示：图4-29步骤三：设置好文字分类后，下面加入分类图片，点击“添加图片”，如图4-30所示：图4-30步骤四：注意淘宝本身不提供分类图片上传空间，因此我们需要先设计好分类图片后，上传到淘宝相册空间，或者其它的相册空间，然后选择对应的分类图片，只要右键点击复制图像地址就好了，如图4-31所示：图4-31步骤五：写入图片网络地址后，点击确定，如图4-32所示：图4-32步骤六：依次加入漂亮的图片分类，包括二级栏目都可以加，加入图片的分类，图标会变为彩色提示，如图4-33所示：图4-33步骤七：点击保存按钮即可，如图4-34所示：图4-3411）页尾步骤一：进入装修后台，页面拉倒最底下，即可看见页尾区域。点击添加模块，页尾只有一个模块选择，是自定义模块，所以可以利用页尾模板代码。如图4-35所示：图4-35步骤二：添加自定义内容区，如图4-36所示：图4-36步骤三：点击源码的按钮，就是下图红色框框的，类似于<->这个形状的，吧我们的代码复制进去即可，然后再点击源码的按钮，修改我们的模板即可，修改下文字啊