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

第10章
装修网店
10.1 装修前的准备工作 10.2 装修PC端网店 10.3 装修移动端网店 10.4 课堂实训——装修开学季专题页
10.1.1 切片与保存图片
3
其具体操作如下。
本例为“女包网店 首页”的首页图片创建 切片，并将创建的切片 保存到计算机中，方便 后期装修网店时使用， 下面介绍网页切片与保 存的方法。
详情页的装修主要是在发布商品时进行的，当完成详情页的设计后，即可将其上传到 图片空间中，再直接通过“淘宝神笔”中的模板生成。下面讲解PC端商品详情页的装修 方法，其具体操作如下。
1 单击“发布宝贝”超链接
2 选择商品类目
10.2.3 装修 PC 端商品详情页
12
3 “立即使用”按钮
4 选择图片
5 单击“发布宝贝”超链接
3 选择需要上传的图片
4 查看上传的图片
10.1 装修前的准备工作 10.2 装修PC端网店 10.3 装修移动端网店 10.4 课堂实训——装修开学季专题页
10.2.1 认识装修模块
8
在进行模块布局前，需要了解网店装修的基础模块。常用的基础模块包括店铺招牌模 块、宝贝推荐模块、宝贝排行模块、默认分类模块、个性分类模块、自定义区模块、图片 轮播模块等。网店装修的常用模块，如图所示。
6 选择宝贝信息
10.2.3 装修 PC 端商品详情页
13
7 完成编辑
10.1 装修前的准备工作 10.2 装修PC端网店 10.3 装修移动端网店 10.4 课堂实训——装修开学季专题页
10.3.1 装修移动端网店首页
15
在网店装修中除了涉及PC端，还需要对移动端网店进行装修。下面将使用移动端中 的自定义模块对首页进行简单装修，其具体操作如下。
10.3.2 装修移动端商品详情页
19
打开“商品发布”页面，单击选中“使用文本编辑器”单选项，单击“添加”按钮 ， 打开“图片空间”对话框，在其中选择需要添加的商品详情页图片，单击“确定”按钮， 完成后单击“提交宝贝信息”按钮，即可完成移动端商品详情页的装修。
移动端商品详情页装修
10.1 装修前的准备工作 10.2 装修PC端网店 10.3 装修移动端网店 10.4 课堂实训——装修开学季专题页
10.4 课堂实训——装修开学季专题页
21
实训目标
本例将装修开学季专题页，在装修前先使用切片工具进行切片，再上传到图 片空间，并进行页面的装修。在装修时将直接使用全屏宽图进行装修，完成后的 参考效果如图所示。
10.4 课堂实训——装修开学季专题页
22
实训思路
根据实训目标，完成本实训主要需进行以下主要操作。 （1）打开“开学季专题页.jpg”素材文件，将其进行切片操作。 （2）登录淘宝，在“千牛卖家中心”下拉列表中单击“免费开店”超链接进入 “千牛卖家中心”页面，在左侧列表框的“店铺管理”栏中单击“图片空间”超链接， 进入“素材管理”页面，将切片后的图片上传到“素材管理”页面中。 （3）打开“店铺装修”页面，添加“全屏宽度”模块，打开“全屏宽度”对话框， 在其中分别添加切片后的图片，并查看完成后的效果。
1 添加模块
2 编辑板式
10.3.1 装修移动端网店首页
16
3 单击“添加图片”超链接
4 单击“上传”按钮
5 选择需要上传的图片
10.3.1 装修移动端网店首页
17
6 选择图片
7 单击“保存”按钮
10.3.1 装修移动端网店首页
8 绘制其他矩形并添加图片 9 添加链接地址
18
10 查看预览效果
学习进步
1 添加参考线
2 切片图片
Байду номын сангаас
10.1.1 切片与保存图片
4
3 设置保存格式
4 查看保存效果
10.1.2 上传图片至图片空间
5
进行装修或发布商品前，商家可将需要使用的图片上传到图片空间，在需要使用 对应的图片时可以直接从中选择。其具体操作如下。
1 输入文件夹名称
10.1.2 上传图片至图片空间
6
2 单击“上传”超链接
10.2.2 装修 PC 端网店首页
9
本例将使用“全屏宽图”系统模块装修首页中的一个页面，其具体操作如下。
1 装修首页页面
2 添加模块
10.2.2 装修 PC 端网店首页
10
3 选择要添加的图片 5 选择要添加的图片
4 调整裁剪区域 6 预览装修后的效果
10.2.3 装修 PC 端商品详情页
11