网店装修（第二版）学习情境六 教案

任务一自定义页面策划一

一、教学目标

1、知识目标

(1)了解网店自定义页面的基础理论知识。

(2)熟悉网店自定义页面的主要类型。

2、技能目标

(1)能正确理解自定义页面的作用。

(2)能区分不同类型的自定义页面

3、情感目标

(1)培养学生积极思考、大胆探索，举一反三的能力。

(2)培养学生自主学习、协助学习的能力。

二、教学内容分析

一个优秀的自定义页面能将商品信息和店铺实力很好地传达给顾客。网店的自定义页面打

破了常规页面的局限，给卖家带来了更多的可操作性，越来越多的卖家通过发挥自定义页面的创意

来展示店铺的独特性。

教学重点：1、自定义页面的定义。

2、自定义页面的主要类型。

3、自定义页面的作用。

教学难点：1、区分自定义页面的类型。

三、教学过程设计

教学步

教师活动学生活动设计意图

骤

展示网店电脑端首页导航，网店首页导航里除了一般的产看展示的网激发学生思

1、创设品分类之外，还有一些“特别”的页面导航，这是属于什店首页导航，考，引出课程

情景引么页面呢？思考特别的内容

入课题页面导航里

面有什么？

生先

让学

行

一、认识网店自定义页面了解自定义

网店

自

了解

页面的定义

的

页面

自定义页面又称二级页面，是网店装修中的一个独立定义

定义

页面，目前电脑端和无线端的网店装修后台均可根据需求

增添数量不限的自定义页面。自定义页面是卖家围绕某个

2、新课

主题焦点的一个内容聚合页，一般是文案、图片、视频等

讲解

多种组合优化美观后的页面，再配合商品详情信息、活动

优惠信息等链接，继而增加页面的访问深度，也起到页面

关联和购物引导的作用。

能熟悉自定

生

自

让学

义页面的主对

教学步

教师活动学生活动设计意图

骤

二、自定义页面的主要类型要类型，学习定义页面的

加以区分。类型熟悉了

1）活动专题页面解，加以区

活动专题页面是卖家围绕网店促销活动的主题，结合店内分，便于后面

的优惠信息以图文组合形式给消费者详细地展示促销详细的策划

内容的页面。

2）品牌介绍页面

为了消除消费者的购买疑虑、提高消费者的信任感，卖

家会添加品牌介绍页面来传播企业精神和品牌文化，从而

提高品牌信服力，树立良好的企业形象

①品牌价值

②品牌故事

③品牌背书

④品牌愿景

3）会员活动页面

会员活动页面是向消费者介绍会员积分的价值，展现会员

权益活动内容的页面。

4）售后服务页面

售后服务页面是向消费者展示网店的发货收货服务、退换

货服务、安装服务、保修维修服务等一系列细致售后服务

信息的页面。

认识自定义

三、自定义页面的作用页面的作用

1）加深消费者访问深度

2）提高店铺转化率

3）提升消费者粘度

在淘宝网上的10家网店首页，进入其自定义页面，并分别搜索不同网通过搜索思

说出不同的自定义页面属于哪种类型。店的自定义考区分，提高

3、学生

页面。学生对自定

实训

义页面类型

的认识。

本节课要掌握的重点：明白本节课

4、课后1、自定义页面的定义自己要掌握

小结2、自定义页面的主要类型的知识点

3、自定义页面的作用

任务一自定义页面策划二

一、教学目标

1、知识目标

（1）掌握自定义页面的布局。

（2）掌握自定义页面的策划。

2、技能目标

（1）能正确设计出自定义页面策划书。

（2）能根据策划书布局自定义页面模块。

3、情感目标

（1）培养学生积极思考、大胆探索，举一反三的能力。

（2）培养学生自主学习、协助学习的能力。

二、教学内容分析

一个优秀的自定义页面能将商品信息和店铺实力很好地传达给顾客。网店的自定义页面打

破了常规页面的局限，给卖家带来了更多的可操作性，越来越多的卖家通过发挥自定义页面的创意

来展示店铺的独特性。

教学重点：1、自定义页面的布局。

教学难点：1、自定义页面策划书的撰写。

三、教学过程设计

教学步

教师活动学生活动设计意图

骤

请同学们翻出上节课所搜索到的自定义页面，说说这些页面的布局是怎样观察上节课激发学生

1、创设的？找到的自定思考。

问题引义页面，思

入课题考其布局特

点。

一、自定义页面的布局熟悉自定义为学生在

虽然现在很多店铺的自定义页面呈现出各种别具风格的样式，但实际上它页面的布局下面的自

们的基本框架和组成部分都是有共性的。定义页面

策划中有

一般来说，无论是哪种类型的自定义页面都由四大部分组成

明确的方

向。

2、新课

讲解

3

教学步

教师活动学生活动设计意图

骤

头部Banner图+楼层模块（至少一个）+背景+氛围点缀物

以两张不同的自定义页面为案例，分别分析其布

局•

以某店铺电脑端“双旦礼遇季”活动专题页面为例，

其布局为：双旦礼遇季Banner图一一优惠券楼层

模块一一活动主推产品楼层模块一一明星单品楼

层模块。再看看某店铺无线端会员活动页

某店铺无线端会员活动页其布局为：会员日

Banner图一一会员分享抽奖活动楼层模块。

自定义页面布局中的楼层模块没有数

量的硬性要求，只要能满足页面信息的传

4

教学步

教师活动学生活动设计意图

骤

达,给予消费者良好的体验感即可。

二、自定义页面策划书的撰写

1、自定义页面的设计流程

确定自定义页面类型。

1

明确自定义页面主题”

分析优秀自定义页面“熟悉自定义让学生学

页面的策划会策划自

P流程。定义页面

撰写自定义页面策划方案”的流程，有

明确的方

向才开始

1.确定自定义页面类型设计。

本次任务是为店铺推广宣传的“年货节”促销活动设计自定义页面，

根据自定义页面的类型定义，可确定该页面为活动专题页面类型。

2.明确自定义页面主题

仔细分析年货节活动营销策划方案，页面主题是围绕年货节促销活动

开展的，故“年货节”为主题核心。为了让页面的主题标语更打动人心，

可以结合店铺产品属性进行构思，该店铺是一家专营生活日用品的网店，

所以最后确定自定义页面的主题为“年货家居好礼购”。

3.分析优秀自定义页面

分析知名电商网店的优秀自定义页面，了解其活动专题页面的布局，

为自定义页面方案策划做好前提准备。

4.撰写自定义页面策划方案

根据自定义页面的布局组成要求，在撰写策划方案前需明确楼层模块

的数量以及内容。结合本次自定义页面的任务单内容，可确定该页面布局

中的楼层模块共四个，分别为：优惠券模块、免单商品模块、五折抢购模

块、八折回馈模块。

通过以上操作，最后策划如下：

5

教学步

教师活动学生活动设计意图

骤

YIMI生活日用品店年货节活动自定义页面策划书

页面类型活动专题页面

页面主题年货家居好礼购

头图Banner图

主题：家居好礼购

优惠券楼层模块

满50减5元，满100减10元，满300减5场

免单活动楼层模块

参与活动商品：抽纸、保温玻璃杯

页面布局

五折抢购楼层模块

参与活动商品：牙膏、纸巾筒、纸巾盒、洗发水

八折回馈楼层模块

参与活动商品:饭盒、纸手帕、洗脸毛巾、玻璃杯、筷子套

装、洗洁精

发布实训任务：为网店策划会员活动页根据上面的通过此任

任务要求：某电器网店已开张五周年，为回馈会员，该店铺策划了“五周知识点，完务的完成，

年会员日”会员活动，故需要为店铺制作一张网店会员活动页，请你根据成网店会员懂得如何

营销策略资料，策划该会员活动页的方案。活动页策划撰写自定

营销策略：书的撰写。义页面的

1、分享抽奖活动：(没有弄清策划书。

楚的地方可

分享店铺给3位好友即可获得一次抽奖机会。参看微课)

2、明星单品会员8.8折购：

(1)网红懒人锅(原价180)；(2)北欧风烤箱(原价280)；

3、学生

实训(3)多功能养生壶(原价140)；(4)迷你电饭煲(原价220)；

3、积分兑换乐园：

(1)优惠券兑换：99积分兑换3元优惠券；199积分兑换5元优惠券；299

积分兑换9元优惠券；

(2)礼品兑换：1900兑换红糖养生茶；2900积分兑换樱花碗四件套；；

3900积分兑换小熊公仔；

(3)产品兑换：18999兑换加湿器；25999积分兑换养生壶；

注册会员入口

本节课要掌握的重点：明白本节课

4、课后

1.自定义页面的布局。自己要掌握

小结

2.自定义页面策划书的撰写。的知识点

6

任务二自定义页面设计一

一、教学目标

1、知识目标

(1)了解网店自定义页面的常见尺寸。

(2)熟悉网店自定义页面的设计原则。

(3)熟悉自定义页面的色彩搭配

2、技能目标

(1)能合理运用自定义页面的设计原则。

(2)能灵活对不同类型的自定义页面搭配合适色彩。

3、情感目标

(1)培养学生积极思考、大胆探索，举一反三的能力。

(2)培养学生自主学习、协助学习的能力。

二、教学内容分析

一个优秀的自定义页面能将商品信息和店铺实力很好地传达给顾客。网店的自定义页面打

破了常规页面的局限，给卖家带来了更多的可操作性，越来越多的卖家通过发挥自定义页面的创意

来展示店铺的独特性。

教学重点：1、自定义页面的设计原则。

2、自定义页面的色彩搭配。

教学难点：1、区分不同类型自定义页面的色彩搭配方法。

三、教学过程设计

教学步

教师活动学生活动设计意图

骤

展示一张优秀的的自定义页面，请同学们谈谈其设计优秀观察自定义激发学生思

1、创设

的地方在哪里？为什么？页面,谈谈其考，引出课程

问题引

设计优秀之内容

入课题

处。

一、自定义页面的常见尺寸了解自定义让学生先行

页面的电脑了解网店自

由于电脑和手机的屏幕大小不同，电脑端和无线端的

端和无线端定义页面的

的尺寸常见尺寸

自定义页面尺寸有所

不同。

1)电脑端自定义页面的尺寸

2、新课

讲解宽：950px/1920px

高：3000px〜6000px(仅建议，具体根据页面内容决定)

2)无线端自定义页面的尺寸

宽：640px/750px(根据无线端装修后台的不同模块尺寸限让学生对熟

悉自定义页

面的设计原

7

教学步

教师活动学生活动设计意图

骤

制决定）则，为后面的

设计奠定基

高：1500px~5000px（仅建议，具体根据页面内容决定）熟悉自定义础。

页面的设计

二、自定义页面的设计原则原则。

1）首尾呼应

在设计自定义页面时基本都是从上往下、从框架搭建到细

化细节的流程顺序进行的。在这个过程中，需要至少一个

的主要元素贯穿整体页面。

2）协调统一

保证页面里的模特、文案、点缀物、各种颜色、布局排版

以及所有这些元素汇聚在一起所组成的是同一种风格，从

而达成视觉协调统一的目的。

3）层次分明

自定义页面的层次主要涉及两个方面的层次，一方面是信

息的层次级别有主次之分，另一方面是整个页面的层次节

奏，如空间层次中的近景中景远景等，借此使页面看起来

更立体。

三自定义页面的色彩搭配

根据自定义内容的需要，采用适合的色彩搭配，能准确地

表达出相应的主题内涵。

活动专题页的常见配色

活动专题页面一般也会以暖色为主色调，如红色、橙色、

黄色等，这种色调的运用可以使页面给人带来热情、兴奋、认识区分不

欢快的心理感受。同类型自定

活动专题页面为了能与节日主题相呼应，很多时候会选择义页面的色

节日代表色。彩搭配方案。

节日相关颜色

春节红色金色中国红

情人节紫色粉色红色

妇女节玫红色丁香色

儿童节鹅黄色天蓝色绿色

中秋节普蓝色红色橙黄色

国庆节中国红黄色

圣诞节红色绿色白色

2、品牌介绍页的常见配色

在设计品牌介绍页时必须考虑品牌本身的风格与色调。为

了让消费者在浏览品牌介绍页的过程中，能深深地把店铺

品牌形象烙在心间，品牌介绍页的配色一般是挑选能代表

该品牌形象风格的颜色。

3、会员活动页的常见配色

会员活动页的配色通常表现为以暖色调为主，同时采用对

比色或者间隔色的搭配，给人活泼轻松的感觉，从而衬托

会员活动氛围。

除此配色方案外，也有一些店铺为了深化会员对品牌的认

知，在会员活动页面的配色设计中融合能代表品牌形象风

格的颜色。

4、售后服务页的常见配色

8

教学步

教师活动学生活动设计意图

骤

售后服务页的配色一般以冷色调为主，如：蓝色、绿色等

等，或者运用非彩色搭配，如黑字白底、白字黑底。

发布实训任务：搜索不同类通过分析，充

在淘宝网上搜索不同类型的自定义页面，并尝试分析其遵型的自定义分掌握自定

循了哪些设计原则以及运用了怎样的色彩搭配方案。页面,并分析义页面的设

3、学生其遵循了哪计原则和色

实训些设计原则彩搭配方案。

以及运用了

怎样的色彩

搭配方案

本节课要掌握的重点：明白本节课

4、课后自己要掌握

1自定义页面的设计原则。

小结的知识点

2、自定义页面的色彩搭配。

9

任务二自定义页面设计二

一、教学目标

1、知识目标

(1)了解网店自定义页面的排版形式。

(2)熟悉网店自定义页面的点缀元素。

(3)掌握自定义页面的设计流程。

2、技能目标

(1)能灵活对不同类型的自定义页面运用合适的排版形式。

(2)能合理运用自定义页面的点缀元素。

(3)能根据自定义页面设计的计划方案设计自定义页面。

3、情感目标

(1)培养学生积极思考、大胆探索，举一反三的能力。

(2)培养学生自主学习、协助学习的能力。

二、教学内容分析

一个优秀的自定义页面能将商品信息和店铺实力很好地传达给顾客。网店的自定义页面打

破了常规页面的局限，给卖家带来了更多的可操作性，越来越多的卖家通过发挥自定义页面的创意

来展示店铺的独特性。

教学重点：1、自定义页面的排版形式。

2、自定义页面的点缀元素。

教学难点：1、区分不同类型自定义页面的排版形式运用。

2、自定义页面的设计流程。

教学步

教师活动学生活动设计意图

骤

观察在任务一实训中搜集到的自定义页面，可发现其排版观察自定义激发学生思

形式有很多种类型，那么什么样的自定义页面适合什么样页面的排版考，引出课程

的排版形式呢？形式,思考其内容

1、创设

排版的不同

问题引

以及不同类

入课题

型的自定义

页面适合何

种排版形式。

一、自定义页面的排版形式了解不同的让学生先行

排版形式适了解自定义

1)常规楼层形

合何种自定页面的排版

常规楼层形的专题页面比较简洁利落，主要把控好背景颜义页页面。形式以及其

2、新课色要有深-浅-深-浅的层次节奏，每一个楼层模块都是独立适用情况，为

讲解的，清晰明了，有利于信息阅读。这种排版形式应用比较后面的设计

广泛，常用于品牌介绍页或售后服务页。奠定基础。

大部分新手美工在设计活动专题页面时也偏爱使用

常规楼层形排版，但为了打破常规楼层形排版过于单调的

局限，往往会在其基础上做一些细微的演变，比如整体页

10

教学步

教师活动学生活动设计意图

骤

面背景不做切割，只需在中间部分进行分割，作独立的楼

层模块。

还有一种排版是在原来的基础上，对某一块楼层的内

部进行一些小变化。

2)“S”形

“S”形排版的自定义页面，对比于常规楼层的排版形式

不会显得枯燥呆板，而是给人轻松活泼的感觉，而且消费

者阅读起来也十分流畅。这种排版形式适用于不同类型的

自定义页面。

3)“Z”形

“Z”形排版会比“S”形排版多了一份厚重感，更适合用

于男性化风格的自定义页面，比如汽车、男性护肤、游戏、

电子器械等类目的自定义页面。

4)T字形

“1”字形排版的自定义页面，给人呈现一种硬朗大气的感

觉。这种形式的自定义页面需要有高质量模特大图或产品

图镇楼才能避免背景抢镜的情况。因此，“1”字形排版一

般情况很少用到，但对于那些追求独特和个性化的卖家来

说，“1”字形排版是不错的选择。

5)自由排版形

自由排版形的自定义页面适合用于高端路线的时尚服饰类

目，这种排版设计虽看上去简洁干净，但是对于设计师的

排版功力要求却比较高，新手美工一般不太适合尝试。

认识自定义

二、自定义页面的点缀元素

页面的点缀

点缀元素的应用较多地出现在活动专题页或者会员活元素以及适

动页，设计时在页面背景上适当地增加点缀元素能有效地用情况。

烘托主题，活跃气氛，比起空白干净的背景更有吸引力一

些。

增加点缀元素的时候需要考虑是否与节日主题相匹

配，在页面中加入一些与主题吻合的点缀元素，会让消费

者在浏览页面时更有代入感。

节日点缀物元素

春节灯笼、对联、炮竹烟花、红包、中国结、书

法字体

端午节粽子、龙舟、竹、山水、水墨

七夕节爱心、丝带、巧克力、手捧花、情书、花瓣、

蝴蝶结

中秋节月亮、月饼、玉兔、灯笼、夜空

圣诞节雪花、红帽子、圣诞树、雪人、圣诞老人、

礼物

三、自定义以页面的设计计划

熟悉自定义以设计案例

页面的设计展示一份优

11

教学步

教师活动学生活动设计意图

骤

流程。秀的自定义

分析策划方案页面设计的

流程，帮助学

生举一反三。

明确风格、配色、排版、点缀物、字体

搜索收集相关素材

Photoshop制作自定义页面

1.分析策划方案

(1)本次任务所设计的自定义页面类型为活动主题页面，

此类页面要求主题鲜明，活动氛围浓厚，且其包含的促销

信息较多，所以在设计时须突出不同的促销活动信息，最

大化地满足不同消费者的优惠需求。

(2)页面主题为：年货家居好礼购。从这里可提取的信息

有：活动背景对应的节日是春节，店铺类目是生活用品类。

春节的节日特征是欢庆喜悦，生活用品类的特征则是给人

温暖温馨的感觉。通过主题标语“好礼购”字样可知店铺

希望消费者在浏览页面时能将本店商品和赠送亲朋戚友的

年货礼物联想在一起，从而萌生购买心理。

(3)从页面的布局规划图可知，除了头部Banner图外，

楼层模块一共有四个，分别对应的促销活动是：优惠券、

免单活动、五折抢购、八折回馈。该页面容纳的优惠信息

较多，故在设计时尽量使用统一协调的配色和元素，把多

个优惠活动连接一起，让活动主题贯穿页面。

2.明确风格、配色、排版、点缀物、字体

(1)风格：根据策划书的分析，初定YIMI生活日用品店

年货节活动专题页设计风格以喜庆、热闹、动感为主。

(2)配色：选取暖色为主色调，再结合节日代表色表，最

终敲定页面色彩为红色、金黄色，营造活泼热闹的氛围。

(3)排版：因优惠活动和参与活动的商品较多，页面排版

采用常规楼层形(局部自由排版)的形式。

(4)点缀物：本任务的页面主题为年货节，根据节日主题

12

教学步

教师活动学生活动设计意图

骤

点缀物代表所示，页面中可加入灯笼、烟花爆竹、红包等

具有春节特色的点缀元素。

(5)字体：头部Banner图的主标题字体选用传统韵律感

比较强的叶根友毛笔行书，与春节活动背景相呼应。小标

题和正文部分选用微软雅黑字体。

3.搜索收集相关素材

四、自定义页面设计

通过以上操作，最后设计自定义页面如下：

■星濯特久去m护头皮邮水

*:/,海飞丝去屑洗发水

/''3KSOOMI大存■持久去UM舟再*»1。*皮

新年你¥38.99

^223^^3

欧式创愚家用餐巾耐跑廉

木质收纳纸巾盒

・约*居•厅木《(8支

新年价：¥15.99

生优惠专享先领券再购物2

年黄优惠寿।]八年管优・寿Tm年黄优**'

5[3U

£全年最低价免单推回家百

前两名免单

瑞¥13.9

0mBi形多色的海卷纸同

振兴圆形纸巾筒

*第11的号自住3t用射0*用4HSW

新年价：¥13.99

露是«10.9

港新口气潸除牙斑牙骨

佳洁士美白牙膏

3006*0版美日酒*冰口烫日月统

新年你¥19.99

黑¥14.9踹¥19.9

发布实训任务：为网店设计会员活动页根据上面的通过此任务

任务要求:请把任务一的自定义页面策划方案设计成图片。知识点，完成的完成，懂得

3、学生制作规范：宽1920像素，高2500像素以上，jpg格式。网店会员活举一反三设

实训动页的设计。计不同类型

的自定义页

页面。。

本节课要掌握的重点：明白本节课

自己要掌握

4、课后1.自定义页面的排版形式。

的知识点

小结2.自定义页面的点缀元素。

3.自定义页面的设计流程。

13

任务三自定义页面上传

一、教学目标

1、知识目标

(1)分别了解电脑端和手机端自定义页面的上传方法。

2、技能目标

(1)能灵活上传手机端自定义页面。

3、情感目标

(1)培养学生积极思考、大胆探索，举一反三的能力。

(2)培养学生自主学习、协助学习的能力。

二、教学内容分析

一个优秀的自定义页面能将商品信息和店铺实力很好地传达给顾客。网店的自定义页面打

破了常规页面的局限，给卖家带来了更多的可操作性，越来越多的卖家通过发挥自定义页面的创意

来展示店铺的独特性。

教学重点：1、电脑端和手机端自定义页面的上传方法。

教学难点：1、手机端自定义页面的上传以及热区链接的设置。

三、教学过程设计

教学步

教师活动学生活动设计意图

骤

展示网店后台电脑端和手机端自定义页面的装修页面观察不同端激发学生思

1、创设提问：网店装修后台电脑端自定义页面的装修页面和手机口的自定义考，引出课程

问题引端的截然不同，那么两个不同端口的上传方法会有所不同页面的装修内容

入课题么？页面,思考教

师问题。

电

脑端

一、电脑端自定义页面的上传了解让学生先行

端

机

自

和

电脑端的自定义页面和首页的装修基础模块大同小手了解电脑端

面

页

上

定

异，所以两者的上传步骤大致相同。值得一提的是，在智义和手机端自

法

方

并

传

能版的电脑端装修平台中，自定义页面的某些基础模块新的定义页面的

种

两

情

区

增了同步功能。如图下图所示，宝贝推荐模块、全屏宽图分上传方法。

况

模块、双列图片模块、文本链接模块、图文模块、文本模。

块、多端轮播模块、全屏轮播模块均能实现电脑端和无线

端的同步效果。但目前智能版的同步功能只支持电脑端自

定义页面自动同步生成无线自定义页面，不支持从无线端

同步到电脑端。

2、新课

智能版的同步功能方便于将设计好的电脑端自定义

讲解

页面上传后直接同步生成无线端的