项目三 任务三 设计店铺首页（课件） -《店铺运营》（财经版第二版）同步精品课堂

任务三 设计店铺首页 店铺运营 同步精品课堂 财经版第二版 1 学习目标 1.掌握千牛卖家工作台的操作流程。 2.理解店铺配色原则与布局逻辑。 3.熟悉店招、导航及功能模块的设置方法。 目录 问题探究 某美妆店铺选择粉色（主色）+ 白色（副色）+ 金色（点缀色）的柔和配色方案，通过通栏布局展示 5 张轮播图，分别推广新品、促销活动及明星单品。页头统一设置品牌 LOGO 与动态闪烁的 “限时折扣” 标语，页尾添加 “客服咨询” 和 “店铺收藏” 模块。两栏布局中，左侧 190 像素区放置商品分类（按功能 / 肤质划分），右侧 750 像素区展示 “热销 TOP10” 与 “套装组合推荐”，搭配销量数据与用户评价标签。 若店铺主营户外登山装备，需突出专业感与耐用性，应如何调整配色方案与布局模块？ 温故知新 1.商品图片常见问题有哪些。 2.常用的抠图工具有哪些。 新知学习 首页布局包括：页头背景、页面背景、店铺招牌（简称店招）、店铺导航、轮播海报、推荐宝贝、自定义模块及在线客服中心等。 新知学习 1. 进入“千牛卖家工作台” 进入官网（www.taobao.com），登录账户，单击“千牛卖家中心”，进入“千牛卖家工作台”。 一 、设计店铺首页布局 新知学习 2. 进入装修页面 执行“店铺管理 > 店铺装修 > 页面① > PC端② > 首页（装修页面）④”进入首页装修页面。 一 、设计店铺首页布局 新知学习 3. 装修店铺首页 店铺装修内容包括：模块、配色、页头、页面以及CSS等。 店铺装修可视方式包括页面编辑和布局管理两种。 一 、设计店铺首页布局 新知学习 4. 设置店铺配色 在“店铺装修”界面下，单击“配色”，页面左侧就会弹出“配色方案”窗口，单击合适的配色方案，就可以完成店铺配色设置。 一 、设计店铺首页布局 新知学习 5. 设计店铺页头 在设计的时候整个店铺页面的页头都是一样的。 在“店铺装修”界面下，单击“页头”，页面左侧就会弹出“页头设置”窗口，设置合适的页头背景色、页头下边距、页头背景图、背景显示方式以及背景对其方式，系统会自动保存设置，如果想要整个店铺页头统一配置，单击“应用到所有页面”按钮。 一 、设计店铺首页布局 新知学习 6. 规划店铺首页布局 首页布局包括：“页面背景”和“布局”。 一 、设计店铺首页布局 新知学习 1.在“店铺装修”界面下,单击“页面编辑”按钮,进入“页面编辑”界面,鼠标移到店铺招牌上显示“编辑”按钮，单击“编辑”按钮进入店铺招牌设置界面。 二、装修店铺首页 (一)设置店铺店招和导航 新知学习 2.在店铺招牌设置界面设置“招牌类型”“店铺名称”“背景图”以及“高度”参数,完成店铺招牌的设置。 二、装修店铺首页 (一)设置店铺店招和导航 新知学习 3. 在“页面编辑”界面，鼠标移到店铺导航上显示“编辑”按钮，单击“编辑”按钮进入店铺导航设置界面。 二、装修店铺首页 (一)设置店铺店招和导航 新知学习 4.单击“编辑”按钮进入店铺导航设置界面，可以设置导航目录,一级目录最多只能设置12个。 添加导航内容包括:宝贝分类、自定义页面以及自定义链接三种,这些可以在店铺运营过程中逐一添加。 二、装修店铺首页 (一)设置店铺店招和导航 新知学习 1.编辑图片轮播模块 鼠标移至“图片轮播”模块上,点击“编辑”按钮,进入“图片轮播”模块编辑界面“图片轮播”编辑界面包括轮播内容设置和显示设置，在内容设置中可以设置轮播图片地址和链接地址。 2.编辑宝贝推荐模块 鼠标移至“宝贝推荐”模块上，点击“编辑”按钮，进入“宝贝推荐”模块编辑页面。 二、装修店铺首页 (二)设置常见页面功能模块 拓展提升 某母婴店铺采用浅粉色（主色）+ 白色（副色）+ 薄荷绿（点缀色）的柔和配色方案，通栏布局展示 4 张轮播图，分别推广新生儿礼盒、早教玩具及 “满 99 减 10” 活动。页头设置品牌 LOGO 与 “安心育儿，从这里开始” 标语，页尾添加 “新手妈妈指南” 入口。两栏布局中，左侧 190 像素区放置 “按年龄选品” 分类，右侧 750 像素区展示 “本月爆款” 与 “限时秒杀” 模块，搭配 “已售 5000+” 标签与 “立即抢购” 按钮。 拓展提升 若店铺主营中老年保健器械，需突出专业与信任感，应如何调整配色方案与布局模块？ 配色方案：采用深蓝色（主色，体现专业）+ 灰色（副色，平衡视觉）+ 金色（点缀色，凸显品质）。布局模块： 通栏轮播图展示权威认证证书与用户好评截图； 左侧 190 像素区放置 “高血压 / 糖尿病专区” 等疾病分类； 右侧 750 像素区设置 “医师推荐” 与 “使用前后对比” 模块，强化信任感； 页头添加 “三甲医院合作” 标识，导航栏增设 “产品资质” 独立页面。 练一练 主色在店铺配色方案中的比例范围是______。 答案： 60%~90% 练一练 布局单元最多可以添加 5 个功能模块。（ ） 答案：× 解析：布局单元总数最多不超过 5 个，但每个布局单元内可放置多个功能模块。 练一练 店铺首页装修的可视方式包括（ ）。 A. 代码编辑与模块管理 B. 页面编辑与布局管理 C. 图片编辑与文字管理 D. CSS 编辑与配色管理 答案：B 解析：教材明确提到 “页面编辑” 和 “布局管理” 是两种可视方式。 练一练 主副色搭配的正确比例是（ ）。 A. 主色 40%~60% + 副色 20%~40% + 点缀色 5%~10% B. 主色 60%~90% + 副色 20%~40% + 点缀色 5%~10% C. 主色 20%~40% + 副色 60%~90% + 点缀色 5%~10% D. 主色 50%~70% + 副色 10%~30% + 点缀色 5%~10% 答案：B 解析：教材明确给出主色（60%~90%）+ 副色（20%~40%）+ 点缀色（5%~10%）的比例公式。 练一练 图片轮播模块最多可以添加多少张图片？（ ） A. 3 张 B. 5 张 C. 7 张 D. 9 张 答案：B 解析：教材提到 “最多只能添加 5 张图片”。 练一练 店铺导航一级目录最多可以设置多少个？（ ） A. 8 个 B. 10 个 C. 12 个 D. 15 个 答案：C 解析：教材明确说明 “一级目录最多只能设置 12 个”。 练一练 移动端装修需要注意（ ）。 A. 独立设计风格 B. 与 PC 端风格统一 C. 仅适配小屏幕 D. 使用付费 CSS 模块 答案：B 解析：教材强调 “手机端的装修要与 PC 端的装修风格统一”。 练一练 (多选)页头设置包括哪些内容？（ ） A. 背景色 B. 背景图 C. 下边距 D. CSS 编辑 答案：ABC 解析：页头设置包含背景色、背景图、下边距等，CSS 编辑属于导航功能。 练一练 (多选)宝贝推荐模块的显示设置包括（ ）。 A. 标题 B. 折扣价 C. 销量数据 D. 商品分类 答案：ABC 解析：教材提到可显示标题、折扣价、销量数据，商品分类属于导航或布局模块。 练一练 (多选)布局管理中可以进行哪些操作？（ ） A. 添加模块 B. 删除模块 C. 移动模块 D. CSS 编辑 答案：ABC 解析：布局管理支持添加、删除、移动模块，CSS 编辑属于导航或高级功能。 练一练 简述装修店铺首页的内容。 答案：模块、配色、页头、页面以及CSS 等，其中CSS属于付费项目,可按需使用。 总结思考 本堂课主要讲述店铺首页装修，需掌握千牛卖家工作台的操作流程；理解店铺配色原则与布局逻辑；熟悉店招、导航及功能模块的设置方法。 作业布置 1.简述设计店铺首页布局的步骤。 2.简述店铺首页装修内容。 3.简述店铺配色主副色搭配方案。 4.简述190X750或750X190(两栏)布局内容。 感谢观看 $$