第6课 店铺装修(上)

2023年4月22日发(作者：家装一站式整体家装)

课题

课时 2课时（90 min）

知识技能目标：

1.了解店铺装修的基本流程

2.了解店铺的风格管理

教学目标

3.了解店铺的布局设计

4.掌握店铺装修的操作方法

素质目标：

第6课 店铺装修（上）

领略中国前沿科技，增强民族自豪感和创新意识

教学重难点

教学方法 问答法、讨论法、讲授法、练习法

教学用具 电脑、投影仪、多媒体课件、教材、文旌课堂APP

教学设计

教学重点：店铺装修的操作方法

教学难点：店铺装修的操作方法

考勤（2 min）→互动导入（5 min）→传授新知（22 min）→任务实操（36 min）→课堂实操（20 min）→课堂

小结（3 min）→ 作业布置（2 min）

教学过程 主要教学内容及步骤 设计意图

考勤

（2 min）

 【教师】让学生使用文旌课堂app签到

 【学生】班干部报请假人员及原因

 【教师】讲述引导案例“开网店，‘门面功夫’也很重要”（详见教材），并提出

培养学生的组织

纪律性，掌握学生

的出勤情况

通过对具体案例

进行分析，激发学

生的学习热情

互动导入

（5 min）

问题

大家在网购时一般会注意店铺的哪些方面？什么样的店铺容易激发你的购物欲望？

 【学生】聆听、思考、回答

 【教师】讲解新知：店铺装修的基本流程、店铺的风格管理、店铺布局设计的相关

知识

一、店铺装修的基本流程

通过教师讲解、

网店开设成功后，就可以对店铺界面进行装修了。店铺装修的流程一般分为5个环

师生互动、分组讨

式，帮助学生了解

店铺装修的基本流

程、店铺的风格管

理、店铺布局设计

等相关知识

节：① 设置店铺基本信息；② 选择店铺模板；③ 设置模板配色；④ 设置店铺背景；⑤

论与观看微课等方

传授新知

（22 min）

设置店铺布局。

【多媒体】组织学生扫码观看“新版旺铺装修操作指南”视频（详见教材），让学生

对店铺装修流程有一个更直观地了解

二、店铺的风格管理

店铺装修花样百出，如何吸引买家的眼球，是卖家关注的重点。

【师生互动】教师提出问题，并随机邀请学生进行回答

1

如果让你来装修一家服装店，你会打造一个什么风格的？在设计时，你会注意些什

么？

【学生】聆听、思考、回答

【教师】总结学生的回答，讲解店铺的风格管理

通常来说，店铺装修最重要的是确定店铺的整体风格，不仅要注意与主营商品相符，

还要注意色彩的协调搭配，同时还要满足消费者的心理和行为需求，以便更好地促进其

消费。另外，店铺的各个页面、元素最好也保持相同的风格，使店铺有整体感，以达到视

觉营销的目的。

【知识延伸】讲解视觉营销的相关知识，拓展学生认知

视觉营销属于营销技术的一种，它是一种视觉呈现，通过直观的视觉广告进行商品的

营销。视觉营销的目的是最大限度地促进商品与买家之间的联系，最终实现商品的销售。

对于网店而言，视觉营销就是利用店铺装修造成的视觉冲击力吸引潜在买家的关注，

提升网店的流量，刺激潜在买家的购物欲望，从而使流量转变为销量。

1．商品与店铺风格

店铺风格要与主营商品相符。例如，女装类店铺适合采用插画、时尚可爱、桃心、花

边等元素；男装类店铺适合采用黑白搭配、有金属质感的设计元素；童装类店铺适合采

用卡通元素。下面介绍几种经典搭配：

【多媒体】展示”女装店铺”“潮流时装店铺”“儿童用品店铺”的图片（详见教材），

讲解这些店铺的风格与搭配

女装店铺：优雅风格，采用柔美简洁的首页，突出女性魅力，直接吸引买家眼球。

潮流时装店铺：时尚风格，采用现代潮流的首页，通过照片背景的选取、色彩色调

的搭配与模特的时尚穿着，演绎现代风范。

儿童用品店铺：卡通风格，页面色彩明亮、形式丰富，突出儿童的活泼可爱。

2．色彩与店铺风格

不同的色彩可以传达不同的情感，店铺装修时可以依据不同的店铺类型或风格选

择相对应的颜色。

【多媒体】展示”色彩与店铺风格”的图片（详见教材），讲解不同类型店铺的色彩

选择

【知识拓展】讲解“新舱外航天服，颜色可辨航天员”的相关内容，拓展学生认知

据中国载人航天工程办公室消息，北京时间2021年11月8日1时16分，经过约

6.5小时的出舱活动，神舟十三号航天员乘组密切协同，完成出舱活动全部既定任务，航

天员翟志刚、王亚平安全返回天和核心舱。

此次出舱，航天员的舱外航天服颜色成为亮点，人们可以通过舱外航天服的颜色辨别

是哪位航天员。身着带有红色元素舱外航天服的是 01 号航天员翟志刚，身着带有黄色元

素舱外航天服的是 02 号航天员王亚平，还有一套带有蓝色元素的舱外航天服此次没派

上用场。

2

中国航天员科研训练中心航天员系统舱外服总装主任设计师丁凌艳介绍，舱外服A

和舱外服B带有的颜色分别是国旗红和太空蓝，舱外服C带有的颜色国旗黄，就是国旗

上星星的颜色，主要是为了让两名航天员有不同的标识，方便区分。

从神舟十三号航天员的出舱活动中，我们不仅领略到了中国航天事业的飞速发展和科

技的腾飞，也感受到了科技与艺术相结合的魅力。

3．买家行为与店铺风格

买家行为：买家购物时的行为活动是本身需要和客观影响的综合反映，店铺装修时

应针对买家的一系列行为活动确定店铺的装修风格，使买家顺利完成购物行为。

认识过程与视觉心理：根据视觉心理学原理，卖家可增强商品与背景的对比度、掌握

适当的刺激强度，合理地确定商品的标志、广告的数量与位置，以及布局的划分范围等。

【提示】消费潮流处于不断地变化中，所以卖家应及时调整店铺布局，以适应电商的

不断发展。

三、店铺布局设计

【师生互动】教师提出问题，并随机邀请学生进行回答

同学们在网店购物时有关注过店铺的布局吗？分享一下你主要关注哪些地方。

【学生】聆听、思考、回答

【教师】总结学生的回答，讲解店铺布局设计

网店的店面是由店铺页面构成的，针对网店的布局设计就是对不同页面进行规划和

功能设计。在淘宝网上，店铺有三大页面，分别是店铺首页、宝贝列表页和宝贝详情页。

【多媒体】展示”店铺三大页面构成”的图片（详见教材），讲解店铺页面构成的具

体内容

【提示】不同的店铺装修模板中，店铺三大页面的内容布局会有所区别，但所包括的

模块基本相同。

【课堂讨论】教师组织学生分组，围绕以下问题开展讨论

假设你是一个网店经营者，请结合店铺的主营商品，谈谈你会如何装修店铺？

【学生】聆听、分组、思考、讨论

【教师】巡堂辅导

 【学生】聆听、思考、理解、记忆

 【教师】讲解任务实操的相关内容

任务实操一——装修个人网店

任务实操

（36 min）

一、设置店铺基本信息

【多媒体】组织学生扫码观看“设置店铺基本信息”视频（详见教材），让学生了解

设置店铺基本信息的具体方法

通过具体的任务

实操，帮助学生熟

悉装修个人网店的

具体操作，并能做

到学以致用

3

以淘宝网为例，店铺的基本信息包括店铺名称、店铺标志、联系地址等，具体设置方

法如下：

第一步：登录淘宝网，在首页中单击“千牛卖家中心”超链接。

第二步：打开“千牛卖家中心”页面，在左侧的导航栏中选择“店铺”→“店铺信

息”选项，打开“基础信息”页面。

【多媒体】展示”‘基础信息’页面”的图片（详见教材），讲解设置店铺信息时的

注意事项

第三步：在“联系地址”设置区中填写淘宝店铺企业所在地址或店主个人的常用地

址。

第四步：设置店标。所谓店标，就是店铺的标志，也就是我们常说的logo。默认情

况下，淘宝会提供一个店铺标志，将鼠标指针移至该标志上方后，单击“删除”图标可

删除默认店标，接着单击“上传图片”按钮，在打开的对话框中根据提示进行操作，可

上传素材图片作为店标。

【提示】在淘宝网中，店标文件的格式一般为png、jpg、jpeg，大小不超过3 MB，

最小宽度为120 px、最小高度为120 px，宽高比为1∶1。

【多媒体】展示”更换店标”的图片（详见教材），讲解更换店标的操作步骤

二、选择店铺模板

用户可以免费使用淘宝提供的店铺模板，也可以在装修市场购买模板，操作步骤如

下：

第一步：在“千牛卖家中心”页面的左侧栏中，选择“店铺”→“PC店铺装

修”选项，在打开的页面中单击“装修模板”超链接。

第二步：打开“模板管理”页面。系统自带3个模板，可以任选其一，单击其下方

的“马上使用”按钮即可应用该模板。

第三步：单击“返回装修”按钮，打开“淘宝旺铺”页面，可以看到系统模板应

用成功。

【提示】淘宝旺铺默认打开店铺首页的编辑页面。

三、设置模板配色

选定店铺模板后，便可以为店铺模板设置配色了，具体操作如下：

第一步：打开“淘宝旺铺”页面，单击左侧栏中的“配色”按钮，在打开的“配

色方案”页面中选择任意一款配色方案，即可应用该配色方案，并在右侧的店铺预览窗

格中显示最终效果。

第二步：单击“配色方案”页面右上角的“预览”按钮，可以预览店铺应用模板和

配色方案后的整体效果。

4

第三步：单击页面右上角的“发布站点”按钮，在打开的对话框中单击“确认发

布”按钮，淘宝店铺将应用所做的设置，单击“返回”按钮可返回配色方案页面。

四、设置店铺背景

店铺背景分为页头背景和页面背景，下面介绍两者的设置方法：

第一步：打开“淘宝旺铺”页面，在左侧栏中单击“页头”按钮，在打开的“页

头设置”页面中勾选“显示”复选框，并单击“页头背景色”右侧的颜色块，打开调色

器。

第二步：在调色器中选择页头背景色（可根据自身喜好进行选择），然后单击“确

定”按钮，应用设置。

第三步：在“页头设置”页面中单击“页头背景图”区域中的“更换图”按钮，

可以在打开的对话框中上传一张图片作为页头背景。注意：页头背景图片的大小不能超

过200 KB，图片的格式要求为gif、jpg或png。

第四步：在“页头设置”页面左侧单击“应用到所有页面”按钮，将当前页头背

景设置应用到所有页面。

第五步：单击左侧栏中的“页面”按钮，参照页头背景的设置方法，设置页面背

景即可。

五、设置店铺布局

第一步：设置首页布局。在“淘宝旺铺”页面中单击“布局管理”按钮，打开

“布局管理”页面。

第二步：添加布局单元。单击“添加布局单元”按钮，在打开的对话框中选择想要

的布局，如选择“950/1920（通栏）”。

第三步：返回“布局管理”页面，可看到新添加的布局单元，如图4-18所示。

单击其右侧的“移动”按钮可拖动该布局单元到任意合适的位置。

【提示】卖家可以根据需要添加多个布局单元。

CSS是一种样式表语言，能够对网页中元素位置的排版进行精确控制，支持几乎所有

的字体字号样式，具有对网页对象和模型样式编辑的能力。淘宝旺铺的CSS功能需要购

买才能使用，卖家可以根据自身需求决定是否订购该功能，此处不再赘述。

第四步：查看模块。模块分为4类：一是通栏宽度为190 px的模块，有13种；

二是通栏宽度为750 px的模块，有7种；三是通栏宽度为1 920 px的模块，有3种；四

是通栏宽度为950 px的模块，有12种。

【提示】要使用通栏宽度为1 920 px的模块，需先将淘宝旺铺升级为智能版。为此，

可在“淘宝旺铺”页面左上角单击“升级到智能版”超链接，在打开的页面中根据提示进

行升级操作。

第五步：选择所需模块，并拖动至合适位置。本例在所有尺寸类型下，选择添加

“自定义区”模块。

5

【提示】添加模块的宽度需在布局单元的限定宽度内。如果对效果不满意，可以单击

模块右侧的“删除”按钮删除该模块。

第六步：设置其他页面的布局。在“首页”下拉列表中选择不同的页面名称，参

照设置首页布局的方法设置其他页面的布局。

【师生互动】教师提出问题，并随机邀请学生进行回答

请简述装修个人网店的步骤，并思考在开装修网店的过程中需要注意些什么。

【学生】聆听、思考、回答

 【学生】聆听、思考、理解、记忆

 【教师】布置课堂实操的相关内容，组织学生进行实际操作

课堂实操

（20 min）

请按照任务实操中所讲的步骤进行装修个人网店的操作练习。 帮助学生进一步掌

 【学生】完成课堂实操

 【教师】巡堂辅导、答疑解惑

 【教师】简要总结本节课的要点

课堂小结

（3 min）

本节课学习了店铺装修的基本流程、店铺的风格管理、店铺布局设计等内容，讲解了

装修个人网店的具体操作，希望同学们通过本节课的学习，能够熟悉与掌握店铺装修的

操作方法。

 【学生】总结回顾知识点

 【教师】布置作业

作业布置

（2 min）

复习店铺装修的流程与操作步骤，并进行总结归纳。

 【学生】完成课后任务

本节课效果不错，学生能够积极参与到教学活动中。教学上，教师应本着“授之鱼不如授之以渔”的宗旨，

注重对学生能力的培养，不仅要教他们学习知识，而且让他们在学习过程中学会学习。

复习知识面，巩

固知识点

通过课堂总结，

巩固学生对知识点

的印象

通过课堂实操，

握装修个人网店的

方法

教学反思

6