网店装修（第三版） 课件 学习情境五 制作网店形象的首页

网店装修（第三版）中国人民大学出版社制作网店形象的

首页

学习情境五—2

—

目录01任务一

首页策划02任务二

首页设计03任务三

首页上传网店首页的美观程度，直接决定进店消费者的主观感受，消费者在店内的停留时间，关系到消费者能否在网店下单购物。美观的网店装修会给客户好的第一印象，消费者会更愿意多花时间浏览网店的商品，增加下单的概率。

前言了解电脑端和手机端网店首页的理论知识熟悉电脑端和手机端网店首页的设计流程掌握电脑端和手机端网店首页的设计技巧知识目标能够策划电脑端和手机端网店首页设计框架能够独立制作一个完整的手机端和电脑端网店首页能够将电脑端和手机端网店首页上传至电商平台技能目标培养设计中的营销策划能力在设计制作中能够利用新技术、新理念培养数字素养、人工智能素养培养创新创造素养素养目标

学习目标

学习情境思维导图因网店首页更新的需要，设计部主管陈明发出如下所示的任务单，要求整体更换整个网店的装修，主要的任务包括首页策划、首页设计以及首页上传3个子任务。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务指派人陈明发出日期

完成日期

/时间

任务名称茶花随手杯首页制作

任务用途首页

☑主题独立页□官方承接页□主图□直通车图□钻展图□详情基础优化□详情深度优化□

官方引流图□主题广告图□新品上新

口常规活动营销策划□主题活动策划□大型活动策划□商品运营策划□

其他：

任务要求策划店铺首页布局，并完成店铺首页制作、上传。1、首页版块设计规范，布局协调，能体现品牌特色和行业特色。2、设计要求简约大气，字体选择合适、配色协调，有视觉冲击力。3、手机端设计要符合移动用户的浏览习惯

能引导消费者快速浏览。4、所设计的作品需为原创设计。5、能体现店铺促销活动，并促进顾客下单购买。

风格偏好□普通简洁，中规中矩□古典文化，怀旧经典□热烈奔放，充满情趣R大气简约，商业气息浓□年轻时尚，青春活力，另类□其他：

制作规范手机端：宽：1200像素，高：6000像素（可根据具体设计调整），jpg格式电脑端：宽：1920像素，高：6000像素（可根据具体设计调整），jpg格式自我检查确认签名：组长检查确认签名：验收人确认签名：—7

—

目录01任务一首页策划03任务三

首页上传02任务一首页设计一、首页布局内容

情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务一

首页策划手机端网店首页通常包含以下内容：1.直播视频区；2.轮播海报区；3.促销活动区、4.分类导航；5.会员专区；6.产品展示区（包含网店新品区、热销区、主题商品区等区域）等内容。手机端装修页常用的尺寸宽度为1200px，每个手机端装修页最多放29个模块。以下是手机端网店首页的部分重要模块的介绍。（一）手机端网店首页内容淘宝网店首页作为一个淘宝网店形象展示窗口，相当于一家网店的门面，装修的好坏可以直接影响网店品牌宣传效果以及买家的购物体验，最后影响的还是网店的转化率。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练直播和短视频作为电商营销的重要渠道，是当前网店装修的主要模块之一。该模块一般在网店首页的最顶端，用于展示网店直播间，若无直播活动，则会循环播放网店视频或展示直播预告。1.直播视频区任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练2.海报区手机端可通过首屏海报区和轮播海报区展示网店公告、折扣优惠和商品推荐等。由于手机屏幕限制，无论展示产品还是网店活动，主题要简明突出，吸引浏览者目光，以竖图为主。任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练3.促销活动区

促销活动区用于放置参与活动的商品或活动介绍。一般位于海报下方，通过展示网店的促销和优惠活动，提升网店的转化率。任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练4.分类导航

分类导航形式多样，位置灵活，可以根据店铺需要或者设计风格制作，无论是电脑端或是手机端，都可以放置于页中、页尾和浮窗等多个位置。在手机端，有单独分类页面，特殊款式需要用到分类重组进行页面重构。任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练5.会员专区会员管理是客户管理的重要手段，能更好地进行产品宣传和售后服务，通过维系客户关系，提升网店回购率。

任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练6.商品陈列区商品陈列区又叫商品展示区，网店中的商品陈列区一般紧挨着热销活动区，在活动区下方，商品陈列区也可以根据网店风格，以不同的形式展现商品。任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练由于电脑端的显示范围较广，除了以上手机端网店所包含的模块，电脑端网店首页还可以增加店招、导航条和页尾等内容。

下面将对电脑端网店首页的部分模块进行介绍。（二）电脑端网店首页内容任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练1.店招店招一般用于电脑端，位于网店首页的最顶端，是电商网店的招牌，可以表明网店的名称，是买家对网店第一印象的主要来源，作用与实体店铺招牌相同，对网店的品牌形象和产品定位有着重要的作用。

导航条位于店招下方，用于网店产品的分类引导。在设计导航条时需考虑网店产品共有几大类别，是否需要放品牌文案或重要活动专区等内容。2.导航条任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练3.首页全屏海报电脑端首页全屏海报多为横图，位于导航条的下方，是首页的第一视觉位置，影响网店的整体风格，起着宣传网店活动和展示商品的作用。任务一

首页策划素养提升：首页设计布局的考证要点情境导入知识探究流程计划任务实施同步实训情境考核拓展训练在网店运营推广职业技能等级证书（初级）考核中，除了需要设计制作海报以外，还需要根据题目给定的网店情景和营销思路，为整个网店选择合适的装修模块布局，并为该模块对网店的作用进行简要分析。任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练二、电脑端网店首页与手机端网店首页的差异

按照淘宝网店装修的分类，网店装修分为手机端网店装修和电脑端网店装修。由于手机的屏幕特征及使用功能与电脑差异较大，电脑端与手机端网店首页的设计有着很大的区别。手机端具备触屏功能，操作更加方便，因此，手机端首页在模块选用上需要更多的互动模块；手机端用户更倾向于利用碎片化时间浏览，所以手机端设计比电脑端可阅读性要更强，布局要简洁明了，不需要过多装饰。（二）布局复杂程度差异

手机屏幕和电脑屏幕的尺寸差异大，终端不同，图的尺寸不同。若尺寸不合适，容易造成界面混乱或效果不佳的问题。（一）尺寸大小差异

任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练（三）分类展示差异在人人手机时代，手机端的访问量远远大于电脑端，许多网店已经摒弃了过去两个端口页面同时设计的做法（可参考三只松鼠、小米和华为等行业头部商家）。许多网店会选择优先设计手机端店铺，然后把部分重要区域的设计图进行尺寸修改，并上传至电脑端。（四）设计优先等级差异手机端一屏内可同时展示的商品数量有限，因此要做好商品分类，体现商品好而精的特点。电脑端首页设计有店招导航条，手机端首页设计中也有专门的分类页功能，好的分类页能提升客单价和销量，在网店首页设计中有着重要地位。任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练（一）电脑端首页案例展示

电脑端首页常用宽度尺寸为1920px，由于在页面显示上较宽，因此需要展现网店舒适大气的风格，网店的装饰和视觉效果页较为丰富。三、首页案例展示

任务一

首页策划情境导入知识探究流程计划任务实施同步实训情境考核拓展训练淘宝手机端网店首页常用宽度为1200px，内容自上而下纵向排列，尺寸严格适配屏幕大小，呈现图大字少，在手机设备上触控移动灵活。（二）手机端首页案例展示

任务一

首页策划小试身手：分析小家电首页的案例图任务要求分别登录电脑端和手机端淘宝网，搜索生活小家电的网店首页，收集三家同时有电脑端和手机端首页的网店，并截图保存下来作为案例图。分析这些网店手机端和电脑端包含的内容和他们布局的区别。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务一

首页策划通过对任务的分析及首页策划知识点的学习，制订以下计划：情境导入知识探究流程计划任务实施同步实训情境考核拓展训练确定制作方向梳理首页内容制作网店内容规划图任务一

首页策划

一、确定制作方向

根据任务单要求与网店要求，分析了解网店首页需要的风格设计重点，确定制作方向。（1）风格：简约大气、商业气息浓（2）设计重点：展示网店主推商品，突出优惠活动（3）配色方案：紧扣日用品主题，贴近生活，以浅蓝色和绿色为主（4）装饰元素：贴近自然，选用叶子、水等自然元素情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务一

首页策划

二、梳理首页内容

根据网店商品和运营情况，整理出首页需要的内容模块。（1）手机端：直播视频区、轮播海报、分类导航、网店促销活动、会员活动、商品陈列区。（2）电脑端：店招、导航条、全屏海报、促销活动区/会员中心、分类导航、商品陈列区、页尾（网店资质）情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务一

首页策划

三、制作网店内容规划图

使用Excel或Photoshop绘制手机端和电脑端的内容规划图。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务一

首页策划【实训目的】小家电手机端与电脑端的首页策划【实训要求】情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务一

首页策划—29

—

目录01任务一首页策划03任务三

首页上传02任务一首页设计一、首页设计规范

（一）电脑端和手机端首页尺寸情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务二

首页设计平台端口尺寸电脑端手机端默认宽度为950px（C店）/990px（B店），全屏通栏宽度则为1920px店招为950×120px（C店）/990×120px（B店），也可做成1920×150px海报背景宽度为1920px，高度根据设计需求而定。以自适应屏幕的方式呈现，一般宽度为设备屏幕宽度1200px，高度可根据内容适当调整。一、首页设计规范

（二）首页的设计要求情境导入知识探究流程计划任务实施同步实训情境考核拓展训练当今是无线端的时代，手机端的销售占比几乎占到了网店总销售额的大部分，很多卖家越来越注重手机端网店的装修，对网店设计提出了新的要求，具体要求有以下几点。1.模块清晰，划分明确手机端人群选择面广，信息繁多，需对不同区域的信息用模块划分清晰。任务二

首页设计一、首页设计规范

（二）首页的设计要求情境导入知识探究流程计划任务实施同步实训情境考核拓展训练2.重点突出，主次有序手机端用户浏览速度快，信息传达的先后和主次非常的重要。内容需要详略得当，避免大量信息堆积造成阅读障碍。任务二

首页设计一、首页设计规范

（二）首页的设计要求情境导入知识探究流程计划任务实施同步实训情境考核拓展训练3.手机端首屏海报一屏化第一屏海报的设计尽量满足一屏化效果。根据市面上智能手机的屏幕大小，网店海报以竖图较为合适。任务二

首页设计一、首页设计规范

（二）首页的设计要求情境导入知识探究流程计划任务实施同步实训情境考核拓展训练4.图形化和图表化展示图片的效果远大于文字，所以能用图片的不用文字。要避免过多文字堆积，将画面图形化和图表化，让画面的细节丰富起来，让人感觉更清晰明了。任务二

首页设计一、首页设计规范

（二）首页的设计要求情境导入知识探究流程计划任务实施同步实训情境考核拓展训练5.字号要求统一画面文字的字号，避免画面混乱。根据淘宝文字设计规范，常用的字号在24～36号之间，手机屏幕能看清的最小字号是20号，看起来舒适的字号是24号，需要阅读的最小字号是24号，英文字母等不需要阅读的文字除外。任务二

首页设计一、首页设计规范

（二）首页的设计要求情境导入知识探究流程计划任务实施同步实训情境考核拓展训练6.语言精练简洁要用最少的语言文字达到最大化的效果。一屏的内容不宜过多，一行内最多四个有用信息。任务二

首页设计情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

首页设计包含的模块众多，无法一一细致展开。因此，接下来将对店标、分类导航、促销活动区和商品陈列区等几个重要区域的设计技巧进行详细介绍。一、首页设计技巧

（一）店标

店标即网店的标志，是指网店中起到识别和推广网店作用的图案，通过店标可以让消费者记住网店主体和品牌文化，是网店标识的图形记号。

店标可用作网店头像，便于消费者辨别，也可出现在电脑端首页店招和手机端首页的最顶端位置。任务二

首页设计二、首页设计技巧1.店标的类型（1）纯文字店标。主要是由语言文字构成，适用于多种传播方式。在网店中广泛应用，能够准确表达品牌名称，易于辨认。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（一）店标任务二

首页设计二、首页设计技巧1.店标的类型（2）纯图案店标。纯图案店标顾名思义就是仅用图形构成的标志。这种标志生动形象，色彩分明，能体现网店理念与风格。但纯图案标志没有文字，因此表达不如文字标志准确。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（一）店标任务二

首页设计二、首页设计技巧1.店标的类型（3）图文组合店标。图文组合店标就是由文字和图案组合而成的标志，兼具两者优势。它既能通过图文并茂的形式呈现生动形象的视觉效果，又具备易于识别的特点。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（一）店标任务二

首页设计二、首页设计技巧2.店标的制作要求（1）文件格式为GIF、JPG、JPEG、PNG。（2）文件大小3MB以内。（3）建议尺寸大于120px×120px，固定宽高比1∶1。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（一）店标任务二

首页设计二、首页设计技巧3.店标的制作步骤（1）提取文字：提取店名关键字，取得店名关键字的中文（或英文）简写，或首字母。（2）设计图案：分析行业、主营业务或产品分类，选择代表该行业的图案，进行抽象创作。（3）组合图文：将字母和图案结合，完成标志的设计。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（一）店标任务二

首页设计数智赋能：AI生成LOGO工具情境导入知识探究流程计划任务实施同步实训情境考核拓展训练拥有标志性的店标是开设网店的必修课，但想设计出标准且有记忆点的Logo，不仅费时费力，最终结果还未必尽人意。这时，AI可以帮我们几分钟轻松制作出Logo，如可画、美图设计室、标小智、标智客、uBrand、Looka、FreeLogo等AI工具，只需输入品牌名和描述，AI即可快速生成不同风格及不同排版样式的Logo，树立专业品牌形象。任务二

首页设计二、首页设计技巧

（二）分类导航

分类导航是指引消费者更快找到自己购买物品位置的指向灯，引导消费者购买商品的重要途径。分类导航形式多样，可以设置在首页的不同位置。在手机端当中，还有专门的分类页。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练1.分类导航的类型（1）店招导航，常见于电脑端网店。任务二

首页设计二、首页设计技巧

（二）分类导航情境导入知识探究流程计划任务实施同步实训情境考核拓展训练1.分类导航的类型（2）页中分类导航。任务二

首页设计二、首页设计技巧

（二）分类导航情境导入知识探究流程计划任务实施同步实训情境考核拓展训练1.分类导航的类型（3）手机端分类页。

手机端装修中有系统自带的免费分类页；也有购买收费模块“分类重构”设置的自定义分类页；也可以在“分类重构”中设置吸顶导航和视频。任务二

首页设计二、首页设计技巧

（二）分类导航情境导入知识探究流程计划任务实施同步实训情境考核拓展训练2.分类导航的制作要求任务二

首页设计二、首页设计技巧

（二）分类导航情境导入知识探究流程计划任务实施同步实训情境考核拓展训练3.分类导航的制作步骤（1）产品分类：对店铺产品进行分类，分类标准可参考商品类目、商品价位、商品上架时间或店铺促销活动。（2）分类命名：为各分类统一命名，分别选出代表商品。（3）制作分类小图：将代表商品图像化，描绘简笔画，或制作风格统一的产品分类图。（4）整合排版：将分类按照图+文字合并，并进行整体排版。任务二

首页设计二、首页设计技巧

（三）促销活动区情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

促销活动是经营活动中提升成交的关键模块，各个大型网店基本都会有一个区域专门放促销活动，以此来吸引消费者的眼球、提高商品的诱惑力、引导消费者参与活动并购买商品。促销区并不是信息越多越好，必须选择对网店引流最有效的、消费者最关注的信息放进去。任务二

首页设计二、首页设计技巧

（三）促销活动区情境导入知识探究流程计划任务实施同步实训情境考核拓展训练1.常见的促销活动类型（1）优惠券。优惠券是网店中最常见的活动，包括平台优惠券，店铺优惠券和特定商品优惠券等。任务二

首页设计二、首页设计技巧

（三）促销活动区情境导入知识探究流程计划任务实施同步实训情境考核拓展训练1.常见的促销活动类型（2）活动专区。网店的活动专区分两类：网店常规促销活动和平台大型促销活动。这些活动会给网店带来流量和销量。常见的促销活动形式有折扣活动、抽奖活动、满赠活动、会员活动和“双十一”“618”大型购物狂欢节活动等。任务二

首页设计二、首页设计技巧

（三）促销活动区情境导入知识探究流程计划任务实施同步实训情境考核拓展训练1.常见的促销活动类型（2）活动专区。任务二

首页设计二、首页设计技巧

（三）促销活动区情境导入知识探究流程计划任务实施同步实训情境考核拓展训练2.促销活动区制作要求任务二

首页设计二、首页设计技巧

（三）促销活动区情境导入知识探究流程计划任务实施同步实训情境考核拓展训练3.促销活动区的制作步骤（1）分析网店促销活动需求，对网店首页需要展示的促销活动进行归类。（2）依据页面主题和活动主题，规划布局，确定配色。（3）提炼促销活动规则文案，搜集促销产品和设计素材。（4）设计制作促销活动区，并完成对应区域的后台链接。任务二

首页设计素养提升：营销策划能力情境导入知识探究流程计划任务实施同步实训情境考核拓展训练在当前的职场环境中，具备一定的营销策划能力往往能显著提升美工的职业竞争力。美工除了能够完成网店装修外，还要理解设计如何服务于营销目标（如提高点击率、转化率），能更好地与策划/运营团队协作，从而避免“好看但无效”的设计。任务二

首页设计小试身手：确定茶具网店的设计风格任务要求请打开学习情境五中小试身手素材，根据茶具网店的产品特点，收集的同行案例和首页呈现图，确定茶具套装的首页设计风格、内容布局和选用模块。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务二

首页设计通过对任务分析及首页框架的学习，现以店庆活动为背景，设计YIMI伊米生活日用品网店首页，同时突出茶花随手杯主打产品，并制订以下流程计划：情境导入知识探究流程计划任务实施同步实训情境考核拓展训练确定首页设计风格规划布局首页收集素材制作网店首页任务二

首页设计

一、确定首页设计风格

1.字体：微软雅黑。2.字号：大标题为60，中标题为40，小标题为25。。3.配色：主色为淡绿色，辅助色为浅黄色，点缀色为草绿色。4.排版：整体简约大气，商品图片突出，商品卖点与价格醒目，购买按钮方便消费者点击。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务二

首页设计

二、规划布局首页

下图分别是电脑端首页布局和手机端布局图。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务二

首页设计情境导入知识探究流程计划任务实施同步实训情境考核拓展训练1.商品描述：撰写简洁明了和富有吸引力的商品描述，突出商品的特点和优势。可以参考竞争对手的商品描述，但要注意避免抄袭。2.促销文案：制定一些促销活动的文案，如限时折扣、满减优惠、赠品活动等。促销文案要具有吸引力和紧迫感，能够促使消费者尽快下单。3.品牌故事：如果网店有品牌故事，可以将其整理成文案素材，展示在网店首页上，增强品牌的认同感和忠诚度。

三、收集素材

（一）文案素材任务二

首页设计情境导入知识探究流程计划任务实施同步实训情境考核拓展训练1.商品图片：选择商品照片时，确保图片清晰、色彩准确和背景简洁。2.场景图片：如温馨的家居场景图片、美丽的自然风光图片等。3.图标和装饰图片：如购物车图标、收藏图标和优惠券图标等。

三、收集素材

（二）图片素材任务二

首页设计情境导入知识探究流程计划任务实施同步实训情境考核拓展训练1、打开Photoshop软件，新建文件，宽度1920px，高度6000px。手机端首页类似，新建文件，宽度1200px，高度6000px。如果首页文件高度不够，则可以通过修改画布大小来增加。打开“画布大小”，修改所需的高度，定位单击向上的箭头。

四、制作网店首页任务二

首页设计情境导入知识探究流程计划任务实施同步实训情境考核拓展训练2、新建参考线，辅助完成首页设计定位。垂直方向：485px、1435px两条；水平方向：120px、150px和600px三条。手机端首页类似，新建文件，宽度1200px，高度6000px。还可以根据首页不同的模块区域新建参考线，便于首页的设计，例如优惠券、促销区、店长推荐专区和新品上市专区等。

四、制作网店首页任务二

首页设计情境导入知识探究流程计划任务实施同步实训情境考核拓展训练3、分别完成电脑端首页和手机端首页设计。

四、制作网店首页任务二

首页设计【实训目的】制作小家电器网店首页【实训要求】情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务二

首页设计—66

—

目录01任务一首页策划03任务三首页上传02任务一首页设计一、电脑端首页上传1、模块上传

使用智能版旺铺的装修模块，完成首页中的对应模块的上传，在上传过程中，需要分别完成各模块图片的设计。

使用旺铺的模块上传，简便易操作，但有局限性，自由度不高，无法完成全屏首页的上传。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务三

首页上传

（一）电脑端首页上传方法一、电脑端首页上传2、代码上传

将首页设计为一张完整的图片，利用Photoshop软件进行切片，保存为HTML网页文件，并用Dreamweaver软件修改图片目标链接，可通过添加全屏代码实现全屏首页的整体上传。使用Photoshop切片的形式上传，自由度高，各模块的大小位置可任意调整，适用于任何一个首页。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（一）电脑端首页上传方法3、第三方工具上传

可使用一些第三方工具，如“万能热区工具”，快速生成全屏代码，完成首页上传。这些工具更新频率较快，可关注最新的第三方工具。任务三

首页上传

一、电脑端首页上传

淘宝旺铺的智能版装修后台包括了多个模块。首页中不同的设计内容可使用不同的模块进行装修。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（二）电脑端首页模块的应用任务三

首页上传

二、手机端首页上传

店铺简介，25个字内；店铺特色标签可多维度展示能力，各行业特色标签均有其准入门槛与资质，商家入驻通过后才会展示。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（一）基础设置1、店招设置任务三

首页上传

二、手机端首页上传

可创建最多10个头条，每个头条轮播4秒，支持点击跳转到“自定义页”和“新品页”。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（一）基础设置

2、店铺头条设置任务三

首页上传

二、手机端首页上传

自定义设置“店铺印象”中的“回头客说标签”与“回头客说评论”的展示。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（一）基础设置

3、评论和标签管理任务三

首页上传

二、手机端首页上传

选择“分类”，进入无线端分类页装修页面，左侧区域可以选择分类模板；右侧区域可以新建、删除和编辑一级、二级和三级分类，并修改排序，分类图片由系统智能生成；中间区域是预览区域，分类设置检查无误后，单击“发布”即可。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（二）分类页设计任务三

首页上传

二、手机端首页上传

手机端网店在互动营销功能和智能选择功能的设计上更为突出，所以装修模块的应用上与电脑端出入较大，手机端的设计样式与电脑端应保持相对统一的基础上，按照所需的呈现方式和功能，灵活选择合适的模块进行上传。

官方模块包括图文视频、宝贝货架、营销互动、权益优惠等，可以选择不同模块拖入到装修画布。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

（三）手机端首页模块的应用任务三

首页上传

数智赋能：从“人找货”到“货找人”情境导入知识探究流程计划任务实施同步实训情境考核拓展训练淘宝的手机端首页装修提供“千人千面”展示功能，淘宝的“千人千面”是一种基于个性化推荐算法的智能展示技术，能够根据不同用户的兴趣、行为、消费习惯等，动态调整商品、广告、内容的展示方式，实现“一人一界面”的精准营销。“千人千面”是传统电商到智能电商的转变，是我国电商在大数据、AI、云计算、数字经济创新等方面的综合体现。任务三

首页上传详情页设计好后，进行切片上传，制定以下计划：情境导入知识探究流程计划任务实施同步实训情境考核拓展训练首页PS切片上传电脑端首页上传手机端首页任务三

首页上传

一、首页PS切片

1、使用Photoshop软件打开首页的JPG文件，用切片工具对图片进行切片。切片时可使用参考线，对每个需添加链接的图片单独切片，切片间不要留空，尽可能减少切片。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务三

首页上传

一、首页PS切片

2、切片完成后，单击“文件”菜单中的“存储为Web和设备所用格式”子菜单。在弹出的对话框中，选择所有切片，并设置格式为“HTML+图像”。3、保存成功后，产生了一个HTML网页文件，一个包含切片图片的文件夹。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练任务三

首页上传1、打开Dreamweaver软件，新建文件，插入网店店招的核心部分图片（店招中心950px区域，可以加入超链接）。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

二、上传电脑端首页

（一）上传页头2、将店招核心区域图片上传至“图片空间”，使用“图片空间”中的图片地址替换该图片的源文件。任务三

首页上传3、选中图片，在该图片的属性栏中，找到“地图”属性，选择“矩形热点工具”，在图片中需要添加链接的区域，划出矩形区域。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

二、上传电脑端首页

（一）上传页头任务三

首页上传4、添加完成热点区域之后，对每个热点区域的链接进行添加，添加需要链接的目标商品或者链接对象。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

二、上传电脑端首页

（一）上传页头任务三

首页上传5、修改热点链接后，复制代码，拷贝<body>到</body>中的代码。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

二、上传电脑端首页

（一）上传页头任务三

首页上传1、将切片生成的“images”图片文件夹中的图片，上传至网店的图片空间。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

二、上传电脑端首页

（二）上传页面任务三

首页上传2、使用Dreamweaver软件，编辑前面保存的“首页.HTML”网页。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

二、上传电脑端首页

（二）上传页面任务三

首页上传3、修改网页中切片的“源文件”地址为图片空间中的图片地址，并且修改商品及海报切片的“链接”为对应的商品地址，优惠券及促销活动切片设置为相关活动的地址。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

二、上传电脑端首页

（二）上传页面任务三

首页上传4、编辑完成后，查看该网页代码，复制<body>到</body>中间的代码。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

二、上传电脑端首页

（二）上传页面任务三

首页上传5、将拷贝好的代码，粘贴至下面的全屏代码中，并填入店铺首页“页面高度”、“页面宽的一半”两个信息。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

二、上传电脑端首页

（二）上传页面任务三

首页上传6、将加入全屏的首页网页代码粘贴至网店首页新增的“自定义区”中，并进行发布。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

二、上传电脑端首页

（二）上传页面任务三

首页上传1、用Photoshop软件打开电脑端首页PSD文件，把店招、导航和左右两侧背景裁掉，保留中间核心部分，将图片宽度改为1200px，并调整各模块内容及尺寸，至适应竖屏浏览，淘宝官方上传要求“单图海报”宽1200px，高120px～2000px；“轮播图海报”宽1200px，高600px～2000px；“多热区切图”宽1200px，高120px～2000px等。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

三、上传手机端首页任务三

首页上传2、对手机端首页每个模块切片，且切片高度为120px～2000px，保存为JPG格式，并上传至“图片空间”。3、进入手机端页面装修后台，按照需要把对应的模块拖入到装修画布，把“单图海报”模块用于上传竖屏海报。情境导入知识探究流程计划任务实施同步实训情境考核拓展训练

三、上传手机端首页任务三

首页上传4、把“多热区切图”模块用于上传分类导航