网上开店实务情境三课件.ppt

1、学 习 情 境学 习 情 境 3 网 店 装 修网 店 装 修16布局页面布局页面1编辑样式编辑样式2编辑页面编辑页面3掌握页面布局、风格设置、页面编辑的方法。掌握页面布局、风格设置、页面编辑的方法。学习目标学习目标学 习 情 境学 习 情 境 3 网 店 装 修网 店 装 修俗话说“人靠衣装，佛靠金装”，美好的外表能给人带来美的享受，网络店铺也是如此。把店铺装饰好，对于小王来说，经营好店铺、招揽更多生意、提高知名度起到非常重要的作用。那么，作为店主，小王在想该怎样来装修店铺呢？情景描述情景描述学 习 情 境学 习 情 境 3 网 店 装 修网 店 装 修 步骤1:在淘宝网首页登录淘宝账号，进

2、入店铺后台，单击“布局管理”按钮，出现店铺首页的结构展示，如图3-1所示。店铺首页由店铺页头、中间内容体、店铺页尾三大部分组成。其中，店铺页头包含“店铺招牌”、“导航”两部分内容;中间内容体包含产品展示的各个部分;店铺页尾由“自定义内容区”组成。工 作 任 务工 作 任 务 1 布 局 页 面布 局 页 面图图3-1子任务子任务1：布局首页：布局首页工 作 任 务工 作 任 务 1 布 局 页 面布 局 页 面注意：注意：以上布局可以根据店主的需要自由设置，除“导航”外，其他部分都可以删除或重新增加模块。步骤步骤2:在图在图3-1所示的页面中，单击所示的页面中，单击“添加布局单元添加布局单元”

3、，可以重新选择该模，可以重新选择该模块的布局，如图块的布局，如图3-2所所示。示。工 作 任 务工 作 任 务 1 布 局 页 面布 局 页 面图图3-2 步骤步骤3:店铺首页中将出现新的区域，如图店铺首页中将出现新的区域，如图3-3所示。在此区域所示。在此区域的右上角，鼠标按住第一个的右上角，鼠标按住第一个十字十字按钮不放，可以将此区按钮不放，可以将此区域移动到其他位置上。域移动到其他位置上。工 作 任 务工 作 任 务 1 布 局 页 面布 局 页 面图图3-3 步骤步骤4:在图在图3-3所示的页面中，单击所示的页面中，单击“请添加模块请添加模块”后面的图标，后面的图标，弹出弹出“模块管理

4、模块管理”对话框，对话框，可以可以选择一个模块，然后单击后选择一个模块，然后单击后面的面的“添加添加”按钮，如图按钮，如图3-4所示。所示。工 作 任 务工 作 任 务 1 布 局 页 面布 局 页 面图3-4工 作 任 务工 作 任 务 1 布 局 页 面布 局 页 面登录图3-1所示的淘宝网后台的店铺装修页面，单击顶部的“布局管理”，然后单击页面左侧的“默认宝贝详情页”，将在页面中心呈现“默认宝贝详情页”的页面布局，如图3-5所示。在此窗口中可以添加或删除模块，操作方法与子任务1的方法相似。子任务：布局其他页面子任务：布局其他页面图3-5工 作 任 务工 作 任 务 2 编 辑 样 式编

5、辑 样 式登录淘宝后台的店铺管理平台，单击页面顶部的“装修”下的“样式管理”，进人“样式编辑”页面，如图3-6所示。选择适合自己店铺的配色方案，再点击“保存”按钮。子任务子任务1 1：选择配色：选择配色图图3-6工 作 任 务工 作 任 务 2 编 辑 样 式编 辑 样 式子任务子任务2 2：设置背景：设置背景 步骤步骤1:在“样式编辑”页面，单击“样式编辑”下的“背景设置”，出现“页头设置”窗口。在此窗口中，单击“选择要设置的页面”旁的下拉框，既可以选择“所有页面”，也可以单独选择某一页面，如“首页”、“默认宝贝详情页”、“店内搜索页”、“默认宝贝分类页”、“店铺动态”、“活动列表”等，如图

6、3-7所示。图3-7工 作 任 务工 作 任 务 2 编 辑 样 式编 辑 样 式步骤步骤2:选择了要设置的页面后，再设置页头背景。在具体设置背景时有两种方式:一是设置纯色背景，单击“页头背景色”旁的颜色色块即可更换;二是设置背景图片，单击“页头背景图”旁的“更换图片”按钮，即可以将背景换为图片，如图3-8所示。图3-8工 作 任 务工 作 任 务 3 编 辑 页 面编 辑 页 面子任务子任务1 1：设计店招：设计店招 店招也称为店铺招牌，是一个网店的“脸面”，好的店招可以吸引更多客流。店招不仅具有识别作用，而且能让顾客简单了解店铺的特点与产品类别。图3-9展示了两个网店的店招。图3-9 (a

7、)图3-9 (b)工 作 任 务工 作 任 务 3 编 辑 页 面编 辑 页 面操作步骤操作步骤 步骤1:在淘宝网首页登录淘宝账号，进入店铺管理后台，在“页面编辑”页面中，将鼠标放在如图3-10所示的位置上，单击出现的“编辑”按钮。图3-10工 作 任 务工 作 任 务 3 编 辑 页 面编 辑 页 面 步骤2:弹出如图3-11所示的“店铺招牌”页面，可以选择“招牌类型”中的“默认招牌”，再单击“选择文件”按钮，从本地电脑或图片空间中选择背景图片作为店招背景。也可以选择“招牌类型”中的“自定义招牌”，在编辑窗口中自由编辑，如图3-12所示。图3-11工 作 任 务工 作 任 务 3 编 辑 页

8、 面编 辑 页 面 步骤2:弹出如图3-11所示的“店铺招牌”页面，可以选择“招牌类型”中的“默认招牌”，再单击“选择文件”按钮，从本地电脑或图片空间中选择背景图片作为店招背景。也可以选择“招牌类型”中的“自定义招牌”，在编辑窗口中自由编辑，如图3-12所示。图3-12工 作 任 务工 作 任 务 3 编 辑 页 面编 辑 页 面子任务子任务2 2：设置宝贝分类：设置宝贝分类操作步骤操作步骤 步骤1:首先进入店铺管理后台，单击页面最上方横向导航中“商品”下的“分类管理”，弹出如图3-14所示的页面。单击页面右侧的“删除”按钮，可以删除对应项的分类。图3-14工 作 任 务工 作 任 务 3 编

9、 辑 页 面编 辑 页 面子任务子任务2 2：设置宝贝分类：设置宝贝分类操作步骤操作步骤步骤2:当需要查看分类下的宝贝，可以单击如图3-14所示的页面中最右侧的“查看”按钮，则出现属于该类别的宝贝。如果此宝贝还属于其他分类，则可以继续单击如图3-15所示的页面中的“添加分类”下拉菜单，勾选需要再添加的类别。图3-15工 作 任 务工 作 任 务 3 编 辑 页 面编 辑 页 面子任务子任务2 2：设置宝贝分类：设置宝贝分类操作步骤操作步骤 步骤3:返回到如图3-14所示的页面，单击“添加手工分类”按钮，会出现一个新分类窗口，在此窗口中可输人需要添加的分类名称，如图3-16所示。图3-16工 作

10、 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修注意：注意：每个分类也可以调整顺序。图3-16所示页面右侧的四个箭头中，第一个箭头表示置顶，第二个箭头表示向上移一位，第三个箭头表示向下移一位，第四个箭头表示置于底部位置。工 作 任 务工 作 任 务 3 编 辑 页 面编 辑 页 面子任务子任务2 2：设置宝贝分类：设置宝贝分类操作步骤操作步骤 步骤4:如果要针对每个分类设置一张图片，可以单击“添加图片”按钮，然后选择插入“网络图片”或“插人图片空间图片”，插人图片后单击“确定”按钮，如图3-17所示。图3-17工 作 任 务工 作 任 务 3 编 辑 页 面编 辑 页 面子任务子任务3

11、 3：设置导航：设置导航图图3-18操作步骤操作步骤 步骤1:首先进人店铺管理后台，在“页面编辑”页面中，将鼠标放在如图3-18所示的位置上，单击出现的“编辑”按钮。步骤2:弹出如图3-19所示的页面，单击“添加”按钮。工 作 任 务工 作 任 务 3 编 辑 页 面编 辑 页 面子任务子任务3 3：设置导航：设置导航操作步骤操作步骤 步骤3:在弹出的页面中单击“宝贝分类”选项卡，勾选需要加人导航的宝贝分类，再单击“确定”按钮，即可添加宝贝分类至导航菜单，如图3-20所示。图3-20工 作 任 务工 作 任 务 3 编 辑 页 面编 辑 页 面子任务子任务3 3：设置导航：设置导航操作步骤操作

12、步骤 步骤4:单击“页面”选项卡，可以勾选添加“基础页面”或“自定义页面”，也可以单击页面右上角的“添加自定义页面”文字链接设置自定义页面，最后单击“确定”按钮，即可添加页面至导航菜单，如图3-21所示。图3-21工 作 任 务工 作 任 务 3 编 辑 页 面编 辑 页 面子任务子任务3 3：设置导航：设置导航操作步骤操作步骤 步骤5:单击“自定义链接”选项卡可以添加淘宝网内部店铺链接或活动地址链接等。首先输人“链接名称”，再输人“链接地址”，最后单击“保存”按钮，如图3-22所示。图3-22工 作 任 务工 作 任 务 3 编 辑 页 面编 辑 页 面子任务子任务3 3：设置导航：设置导航

13、操作步骤操作步骤步骤7:最后，导航的前台效果如图3-24所示。图3-24工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务4 4：设置宝贝推荐：设置宝贝推荐图图3-25操作步骤操作步骤 步骤1:在淘宝后台的店铺装修页面中单击“页面编辑”，然后在导航下方添加“宝贝推荐”模块，如图3-25所示。工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务4 4：设置宝贝推荐：设置宝贝推荐图图3-26操作步骤操作步骤 步骤2:在“宝贝推荐”模块右上角单击“编辑”按钮，进人宝贝推荐设置界面，可设置希望推荐宝贝的“宝贝分类”、“关键字”、“价格范围”和“宝贝数量”等

14、多个条件，也可以只设置一个条件，如图3-26所示。工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务4 4：设置宝贝推荐：设置宝贝推荐图图3-27操作步骤操作步骤 步骤3:单击“显示设置”选项卡，可以对宝贝推荐里宝贝的展现方式进行设置，选择完成后单击“保存”按钮即可，如图3-2 7所示。工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务4 4：设置宝贝推荐：设置宝贝推荐操作步骤操作步骤步骤4:设置完成后，宝贝推荐的前台呈现效果如图3-28所示。图3-28工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务5 5：设置图片轮播

15、设置图片轮播操作步骤操作步骤 步骤1:在淘宝后台的店铺装修页面中单击“页面编辑”，然后在导航下方添加“图片轮播”模块，如图3-29所示。图3-29工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务5 5：设置图片轮播设置图片轮播操作步骤操作步骤 步骤2:在“图片轮播”模块右上角单击“编辑”按钮，进人图片轮播设置界面。首先在“内容设置”选项卡中单击“图片地址”下方输入框旁的按钮，可选择上传图片的方式为从本地电脑上传，也可以从图片空间中选择上传。然后在“链接地址”输人框中输人单击图片所进人的网页地址，如图3-30所示。图3-30工 作 任 务工 作 任 务 3 旺 铺 装

16、修旺 铺 装 修子任务子任务5 5：设置图片轮播设置图片轮播操作步骤操作步骤 步骤3:单击“显示设置”选项卡，可以设置三项内容:一是“显示标题，;二是“模块高度”;三是“切换效果”。设置完成后，单击“保存”按钮，如图3-31所示。图3-31工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务5 5：设置图片轮播设置图片轮播操作步骤操作步骤步骤4:设置完成后，图片轮播的前台呈现效果如图3-32所示。图3-32工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务6 6：设置旺旺设置旺旺操作步骤操作步骤 步骤1:登录个人淘宝账户管理后台，进入店铺装修页面，

17、在左侧布局中单击添加“客服中心”模块，如图3-3 3所示。图3-33工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务6 6：设置旺旺设置旺旺操作步骤操作步骤 步骤2:单击“客服中心”模块右上角的“编辑”按钮，进人“客服中心”的设置界面。在“内容设置”选项卡中，可以设置“工作时间”、输入“联系方式”等，如图3-34所示。图3-34工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务6 6：设置旺旺设置旺旺操作步骤操作步骤 步骤3:单击“显示设置”选项卡，可以设置是否显示标题栏以及标题显示的内容，如图3-35所示。图3-35工 作 任 务工 作 任

18、务 3 旺 铺 装 修旺 铺 装 修子任务子任务6 6：设置旺旺设置旺旺操作步骤操作步骤 步骤步骤4:设置完成后，客服中心的前台呈现效果如图3-36所示。步骤步骤5:除设置固定旺旺外，还可以设置悬浮旺旺。在店铺装修页面的右侧有一个悬浮旺旺模块，单击其顶部的“编辑”按钮，如图3-37所示。图3-36图3-37工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务6 6：设置旺旺设置旺旺操作步骤操作步骤 步骤6:弹出悬浮旺旺的编辑窗口，如图3-38所示。这个窗口的设置内容和固定旺旺相似这里不再赘述。图3-38工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子

19、任务7 7：设置自定义内容区设置自定义内容区操作步骤操作步骤 步骤1:在“页尾区域”添加“自定义内容区”模块后，在“页面编辑”页面中，单击自定义内容区模块右上角的编辑按钮，出现自定义内容区设置窗口，这个窗口类似Word操作界面。也可以转换到代码视图，粘贴网页代码，如图3-39所示。图3-39工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务7 7：设置自定义内容区设置自定义内容区操作步骤操作步骤步骤2:单击“插人图片空间图片”图标，在下方选择上传的新图片，如图3-40所示。图3-40工 作 任 务工 作 任 务 3 旺 铺 装 修旺 铺 装 修子任务子任务7 7：设置自定义内容区设置自定义内容区操作步骤操作步骤步骤3:设置完成后，自定义内容区的前台呈现效果如图3-41所示。图3-41