《淘宝天猫网店美工实战视觉设计+店铺装修+移动端店铺》教学课件-第10章装修网店

1、淘宝天猫网店美工实战-视觉设计+店铺装修+移动端店铺（微课版）第10章装修网店淘宝天猫网店美工实战-视觉设计+店铺装修+移动端店铺（微课目录 Contents10.1 装修前的准备工作10.2 装修PC端网店10.3 装修移动端网店10.4 课堂实训装修开学季专题页目录 Contents10.1 装修前的准备工作10.2 10.1.1 切片与保存图片其具体操作如下。1 添加参考线2 切片图片本例为“女包网店首页”的首页图片创建切片，并将创建的切片保存到计算机中，方便后期装修网店时使用，下面介绍网页切片与保存的方法。10.1.1 切片与保存图片其具体操作如下。1 添加参考线10.1.1 切片与保

2、存图片3 设置保存格式4 查看保存效果10.1.1 切片与保存图片3 设置保存格式4 查看保存效10.1.2 上传图片至图片空间进行装修或发布商品前，商家可将需要使用的图片上传到图片空间，在需要使用对应的图片时可以直接从中选择。其具体操作如下。1 输入文件夹名称10.1.2 上传图片至图片空间进行装修或发布商品前，商家10.1.2 上传图片至图片空间2 单击“上传”超链接4 查看上传的图片3 选择需要上传的图片10.1.2 上传图片至图片空间2 单击“上传”超链接4 目录 Contents10.1 装修前的准备工作10.2 装修PC端网店10.3 装修移动端网店10.4 课堂实训装修开学季专题

3、页目录 Contents10.1 装修前的准备工作10.2 10.2.1 认识装修模块在进行模块布局前，需要了解网店装修的基础模块。常用的基础模块包括店铺招牌模块、宝贝推荐模块、宝贝排行模块、默认分类模块、个性分类模块、自定义区模块、图片轮播模块等。网店装修的常用模块，如图所示。10.2.1 认识装修模块在进行模块布局前，需要了解网店装10.2.2 装修 PC 端网店首页本例将使用“全屏宽图”系统模块装修首页中的一个页面，其具体操作如下。1 装修首页页面2 添加模块10.2.2 装修 PC 端网店首页本例将使用“全屏宽图”10.2.2 装修 PC 端网店首页3 选择要添加的图片4 调整裁剪区域

4、5 选择要添加的图片6 预览装修后的效果10.2.2 装修 PC 端网店首页3 选择要添加的图片410.2.3 装修 PC 端商品详情页1 单击“发布宝贝”超链接2 选择商品类目详情页的装修主要是在发布商品时进行的，当完成详情页的设计后，即可将其上传到图片空间中，再直接通过“淘宝神笔”中的模板生成。下面讲解PC端商品详情页的装修方法，其具体操作如下。10.2.3 装修 PC 端商品详情页1 单击“发布宝贝”10.2.3 装修 PC 端商品详情页4 选择图片5 单击“发布宝贝”超链接 3 “立即使用”按钮6 选择宝贝信息10.2.3 装修 PC 端商品详情页4 选择图片5 单击10.2.3 装修

5、 PC 端商品详情页7 完成编辑10.2.3 装修 PC 端商品详情页7 完成编辑目录 Contents10.1 装修前的准备工作10.2 装修PC端网店10.3 装修移动端网店10.4 课堂实训装修开学季专题页目录 Contents10.1 装修前的准备工作10.2 10.3.1 装修移动端网店首页在网店装修中除了涉及PC端，还需要对移动端网店进行装修。下面将使用移动端中的自定义模块对首页进行简单装修，其具体操作如下。1 添加模块2 编辑板式10.3.1 装修移动端网店首页在网店装修中除了涉及PC端10.3.1 装修移动端网店首页4 单击“上传”按钮5 选择需要上传的图片3 单击“添加图片”

6、超链接10.3.1 装修移动端网店首页4 单击“上传”按钮5 选10.3.1 装修移动端网店首页7 单击“保存”按钮6 选择图片10.3.1 装修移动端网店首页7 单击“保存”按钮6 选10.3.1 装修移动端网店首页8 绘制其他矩形并添加图片10 查看预览效果9 添加链接地址10.3.1 装修移动端网店首页8 绘制其他矩形并添加图片10.3.2 装修移动端商品详情页打开“商品发布”页面，单击选中“使用文本编辑器”单选项，单击“添加”按钮 ，打开“图片空间”对话框，在其中选择需要添加的商品详情页图片，单击“确定”按钮，完成后单击“提交宝贝信息”按钮，即可完成移动端商品详情页的装修。移动端商品详

7、情页装修10.3.2 装修移动端商品详情页打开“商品发布”页面，单目录 Contents10.1 装修前的准备工作10.2 装修PC端网店10.3 装修移动端网店10.4 课堂实训装修开学季专题页目录 Contents10.1 装修前的准备工作10.2 10.4 课堂实训装修开学季专题页本例将装修开学季专题页，在装修前先使用切片工具进行切片，再上传到图片空间，并进行页面的装修。在装修时将直接使用全屏宽图进行装修，完成后的参考效果如图所示。实训目标10.4 课堂实训装修开学季专题页本例将装修开学季专题10.4 课堂实训装修开学季专题页实训思路根据实训目标，完成本实训主要需进行以下主要操作。（1）打开“开学季专题页.jpg”素材文件，将其进行切片操作。（2）登录淘宝，在“千牛卖家中心”下拉列表中单击“免费开店”超链接进入“千牛卖家中心”页面，在左侧列表框的“店铺管理”栏中单击“图片空间”超链接，进入“素材管理”页面，将切片后的图片上传到“素材管理”页面中。（3）打开“店铺装修”页面，添加“全屏宽度”模块，打开“全屏宽度”