網(wǎng)店裝修（第二版）學(xué)習(xí)情境六 教案

任務(wù)一自定義頁(yè)面策劃一

一、教學(xué)目標(biāo)

1、知識(shí)目標(biāo)

(1)了解網(wǎng)店自定義頁(yè)面的基礎(chǔ)理論知識(shí)。

(2)熟悉網(wǎng)店自定義頁(yè)面的主要類型。

2、技能目標(biāo)

(1)能正確理解自定義頁(yè)面的作用。

(2)能區(qū)分不同類型的自定義頁(yè)面

3、情感目標(biāo)

(1)培養(yǎng)學(xué)生積極思考、大膽探索，舉一反三的能力。

(2)培養(yǎng)學(xué)生自主學(xué)習(xí)、協(xié)助學(xué)習(xí)的能力。

二、教學(xué)內(nèi)容分析

一個(gè)優(yōu)秀的自定義頁(yè)面能將商品信息和店鋪實(shí)力很好地傳達(dá)給顧客。網(wǎng)店的自定義頁(yè)面打

破了常規(guī)頁(yè)面的局限，給賣家?guī)?lái)了更多的可操作性，越來(lái)越多的賣家通過(guò)發(fā)揮自定義頁(yè)面的創(chuàng)意

來(lái)展示店鋪的獨(dú)特性。

教學(xué)重點(diǎn)：1、自定義頁(yè)面的定義。

2、自定義頁(yè)面的主要類型。

3、自定義頁(yè)面的作用。

教學(xué)難點(diǎn)：1、區(qū)分自定義頁(yè)面的類型。

三、教學(xué)過(guò)程設(shè)計(jì)

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

展示網(wǎng)店電腦端首頁(yè)導(dǎo)航，網(wǎng)店首頁(yè)導(dǎo)航里除了一般的產(chǎn)看展示的網(wǎng)激發(fā)學(xué)生思

1、創(chuàng)設(shè)品分類之外，還有一些“特別”的頁(yè)面導(dǎo)航，這是屬于什店首頁(yè)導(dǎo)航，考，引出課程

情景引么頁(yè)面呢？思考特別的內(nèi)容

入課題頁(yè)面導(dǎo)航里

面有什么？

生先

讓學(xué)

行

一、認(rèn)識(shí)網(wǎng)店自定義頁(yè)面了解自定義

網(wǎng)店

自

了解

頁(yè)面的定義

的

頁(yè)面

自定義頁(yè)面又稱二級(jí)頁(yè)面，是網(wǎng)店裝修中的一個(gè)獨(dú)立定義

定義

頁(yè)面，目前電腦端和無(wú)線端的網(wǎng)店裝修后臺(tái)均可根據(jù)需求

增添數(shù)量不限的自定義頁(yè)面。自定義頁(yè)面是賣家圍繞某個(gè)

2、新課

主題焦點(diǎn)的一個(gè)內(nèi)容聚合頁(yè)，一般是文案、圖片、視頻等

講解

多種組合優(yōu)化美觀后的頁(yè)面，再配合商品詳情信息、活動(dòng)

優(yōu)惠信息等鏈接，繼而增加頁(yè)面的訪問(wèn)深度，也起到頁(yè)面

關(guān)聯(lián)和購(gòu)物引導(dǎo)的作用。

能熟悉自定

生

自

讓學(xué)

義頁(yè)面的主對(duì)

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

二、自定義頁(yè)面的主要類型要類型，學(xué)習(xí)定義頁(yè)面的

加以區(qū)分。類型熟悉了

1）活動(dòng)專題頁(yè)面解，加以區(qū)

活動(dòng)專題頁(yè)面是賣家圍繞網(wǎng)店促銷活動(dòng)的主題，結(jié)合店內(nèi)分，便于后面

的優(yōu)惠信息以圖文組合形式給消費(fèi)者詳細(xì)地展示促銷詳細(xì)的策劃

內(nèi)容的頁(yè)面。

2）品牌介紹頁(yè)面

為了消除消費(fèi)者的購(gòu)買疑慮、提高消費(fèi)者的信任感，賣

家會(huì)添加品牌介紹頁(yè)面來(lái)傳播企業(yè)精神和品牌文化，從而

提高品牌信服力，樹(shù)立良好的企業(yè)形象

①品牌價(jià)值

②品牌故事

③品牌背書(shū)

④品牌愿景

3）會(huì)員活動(dòng)頁(yè)面

會(huì)員活動(dòng)頁(yè)面是向消費(fèi)者介紹會(huì)員積分的價(jià)值，展現(xiàn)會(huì)員

權(quán)益活動(dòng)內(nèi)容的頁(yè)面。

4）售后服務(wù)頁(yè)面

售后服務(wù)頁(yè)面是向消費(fèi)者展示網(wǎng)店的發(fā)貨收貨服務(wù)、退換

貨服務(wù)、安裝服務(wù)、保修維修服務(wù)等一系列細(xì)致售后服務(wù)

信息的頁(yè)面。

認(rèn)識(shí)自定義

三、自定義頁(yè)面的作用頁(yè)面的作用

1）加深消費(fèi)者訪問(wèn)深度

2）提高店鋪轉(zhuǎn)化率

3）提升消費(fèi)者粘度

在淘寶網(wǎng)上的10家網(wǎng)店首頁(yè)，進(jìn)入其自定義頁(yè)面，并分別搜索不同網(wǎng)通過(guò)搜索思

說(shuō)出不同的自定義頁(yè)面屬于哪種類型。店的自定義考區(qū)分，提高

3、學(xué)生

頁(yè)面。學(xué)生對(duì)自定

實(shí)訓(xùn)

義頁(yè)面類型

的認(rèn)識(shí)。

本節(jié)課要掌握的重點(diǎn)：明白本節(jié)課

4、課后1、自定義頁(yè)面的定義自己要掌握

小結(jié)2、自定義頁(yè)面的主要類型的知識(shí)點(diǎn)

3、自定義頁(yè)面的作用

任務(wù)一自定義頁(yè)面策劃二

一、教學(xué)目標(biāo)

1、知識(shí)目標(biāo)

（1）掌握自定義頁(yè)面的布局。

（2）掌握自定義頁(yè)面的策劃。

2、技能目標(biāo)

（1）能正確設(shè)計(jì)出自定義頁(yè)面策劃書(shū)。

（2）能根據(jù)策劃書(shū)布局自定義頁(yè)面模塊。

3、情感目標(biāo)

（1）培養(yǎng)學(xué)生積極思考、大膽探索，舉一反三的能力。

（2）培養(yǎng)學(xué)生自主學(xué)習(xí)、協(xié)助學(xué)習(xí)的能力。

二、教學(xué)內(nèi)容分析

一個(gè)優(yōu)秀的自定義頁(yè)面能將商品信息和店鋪實(shí)力很好地傳達(dá)給顧客。網(wǎng)店的自定義頁(yè)面打

破了常規(guī)頁(yè)面的局限，給賣家?guī)?lái)了更多的可操作性，越來(lái)越多的賣家通過(guò)發(fā)揮自定義頁(yè)面的創(chuàng)意

來(lái)展示店鋪的獨(dú)特性。

教學(xué)重點(diǎn)：1、自定義頁(yè)面的布局。

教學(xué)難點(diǎn)：1、自定義頁(yè)面策劃書(shū)的撰寫(xiě)。

三、教學(xué)過(guò)程設(shè)計(jì)

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

請(qǐng)同學(xué)們翻出上節(jié)課所搜索到的自定義頁(yè)面，說(shuō)說(shuō)這些頁(yè)面的布局是怎樣觀察上節(jié)課激發(fā)學(xué)生

1、創(chuàng)設(shè)的？找到的自定思考。

問(wèn)題引義頁(yè)面，思

入課題考其布局特

點(diǎn)。

一、自定義頁(yè)面的布局熟悉自定義為學(xué)生在

雖然現(xiàn)在很多店鋪的自定義頁(yè)面呈現(xiàn)出各種別具風(fēng)格的樣式，但實(shí)際上它頁(yè)面的布局下面的自

們的基本框架和組成部分都是有共性的。定義頁(yè)面

策劃中有

一般來(lái)說(shuō)，無(wú)論是哪種類型的自定義頁(yè)面都由四大部分組成

明確的方

向。

2、新課

講解

3

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

頭部Banner圖+樓層模塊（至少一個(gè)）+背景+氛圍點(diǎn)綴物

以兩張不同的自定義頁(yè)面為案例，分別分析其布

局?

以某店鋪電腦端“雙旦禮遇季”活動(dòng)專題頁(yè)面為例，

其布局為：雙旦禮遇季Banner圖一一優(yōu)惠券樓層

模塊一一活動(dòng)主推產(chǎn)品樓層模塊一一明星單品樓

層模塊。再看看某店鋪無(wú)線端會(huì)員活動(dòng)頁(yè)

某店鋪無(wú)線端會(huì)員活動(dòng)頁(yè)其布局為：會(huì)員日

Banner圖一一會(huì)員分享抽獎(jiǎng)活動(dòng)樓層模塊。

自定義頁(yè)面布局中的樓層模塊沒(méi)有數(shù)

量的硬性要求，只要能滿足頁(yè)面信息的傳

4

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

達(dá),給予消費(fèi)者良好的體驗(yàn)感即可。

二、自定義頁(yè)面策劃書(shū)的撰寫(xiě)

1、自定義頁(yè)面的設(shè)計(jì)流程

確定自定義頁(yè)面類型。

1

明確自定義頁(yè)面主題”

分析優(yōu)秀自定義頁(yè)面“熟悉自定義讓學(xué)生學(xué)

頁(yè)面的策劃會(huì)策劃自

P流程。定義頁(yè)面

撰寫(xiě)自定義頁(yè)面策劃方案”的流程，有

明確的方

向才開(kāi)始

1.確定自定義頁(yè)面類型設(shè)計(jì)。

本次任務(wù)是為店鋪推廣宣傳的“年貨節(jié)”促銷活動(dòng)設(shè)計(jì)自定義頁(yè)面，

根據(jù)自定義頁(yè)面的類型定義，可確定該頁(yè)面為活動(dòng)專題頁(yè)面類型。

2.明確自定義頁(yè)面主題

仔細(xì)分析年貨節(jié)活動(dòng)營(yíng)銷策劃方案，頁(yè)面主題是圍繞年貨節(jié)促銷活動(dòng)

開(kāi)展的，故“年貨節(jié)”為主題核心。為了讓頁(yè)面的主題標(biāo)語(yǔ)更打動(dòng)人心，

可以結(jié)合店鋪產(chǎn)品屬性進(jìn)行構(gòu)思，該店鋪是一家專營(yíng)生活日用品的網(wǎng)店，

所以最后確定自定義頁(yè)面的主題為“年貨家居好禮購(gòu)”。

3.分析優(yōu)秀自定義頁(yè)面

分析知名電商網(wǎng)店的優(yōu)秀自定義頁(yè)面，了解其活動(dòng)專題頁(yè)面的布局，

為自定義頁(yè)面方案策劃做好前提準(zhǔn)備。

4.撰寫(xiě)自定義頁(yè)面策劃方案

根據(jù)自定義頁(yè)面的布局組成要求，在撰寫(xiě)策劃方案前需明確樓層模塊

的數(shù)量以及內(nèi)容。結(jié)合本次自定義頁(yè)面的任務(wù)單內(nèi)容，可確定該頁(yè)面布局

中的樓層模塊共四個(gè)，分別為：優(yōu)惠券模塊、免單商品模塊、五折搶購(gòu)模

塊、八折回饋模塊。

通過(guò)以上操作，最后策劃如下：

5

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

YIMI生活日用品店年貨節(jié)活動(dòng)自定義頁(yè)面策劃書(shū)

頁(yè)面類型活動(dòng)專題頁(yè)面

頁(yè)面主題年貨家居好禮購(gòu)

頭圖Banner圖

主題：家居好禮購(gòu)

優(yōu)惠券樓層模塊

滿50減5元，滿100減10元，滿300減5場(chǎng)

免單活動(dòng)樓層模塊

參與活動(dòng)商品：抽紙、保溫玻璃杯

頁(yè)面布局

五折搶購(gòu)樓層模塊

參與活動(dòng)商品：牙膏、紙巾筒、紙巾盒、洗發(fā)水

八折回饋樓層模塊

參與活動(dòng)商品:飯盒、紙手帕、洗臉毛巾、玻璃杯、筷子套

裝、洗潔精

發(fā)布實(shí)訓(xùn)任務(wù)：為網(wǎng)店策劃會(huì)員活動(dòng)頁(yè)根據(jù)上面的通過(guò)此任

任務(wù)要求：某電器網(wǎng)店已開(kāi)張五周年，為回饋會(huì)員，該店鋪策劃了“五周知識(shí)點(diǎn)，完務(wù)的完成，

年會(huì)員日”會(huì)員活動(dòng)，故需要為店鋪制作一張網(wǎng)店會(huì)員活動(dòng)頁(yè)，請(qǐng)你根據(jù)成網(wǎng)店會(huì)員懂得如何

營(yíng)銷策略資料，策劃該會(huì)員活動(dòng)頁(yè)的方案?；顒?dòng)頁(yè)策劃撰寫(xiě)自定

營(yíng)銷策略：書(shū)的撰寫(xiě)。義頁(yè)面的

1、分享抽獎(jiǎng)活動(dòng)：(沒(méi)有弄清策劃書(shū)。

楚的地方可

分享店鋪給3位好友即可獲得一次抽獎(jiǎng)機(jī)會(huì)。參看微課)

2、明星單品會(huì)員8.8折購(gòu)：

(1)網(wǎng)紅懶人鍋(原價(jià)180)；(2)北歐風(fēng)烤箱(原價(jià)280)；

3、學(xué)生

實(shí)訓(xùn)(3)多功能養(yǎng)生壺(原價(jià)140)；(4)迷你電飯煲(原價(jià)220)；

3、積分兌換樂(lè)園：

(1)優(yōu)惠券兌換：99積分兌換3元優(yōu)惠券；199積分兌換5元優(yōu)惠券；299

積分兌換9元優(yōu)惠券；

(2)禮品兌換：1900兌換紅糖養(yǎng)生茶；2900積分兌換櫻花碗四件套；；

3900積分兌換小熊公仔；

(3)產(chǎn)品兌換：18999兌換加濕器；25999積分兌換養(yǎng)生壺；

注冊(cè)會(huì)員入口

本節(jié)課要掌握的重點(diǎn)：明白本節(jié)課

4、課后

1.自定義頁(yè)面的布局。自己要掌握

小結(jié)

2.自定義頁(yè)面策劃書(shū)的撰寫(xiě)。的知識(shí)點(diǎn)

6

任務(wù)二自定義頁(yè)面設(shè)計(jì)一

一、教學(xué)目標(biāo)

1、知識(shí)目標(biāo)

(1)了解網(wǎng)店自定義頁(yè)面的常見(jiàn)尺寸。

(2)熟悉網(wǎng)店自定義頁(yè)面的設(shè)計(jì)原則。

(3)熟悉自定義頁(yè)面的色彩搭配

2、技能目標(biāo)

(1)能合理運(yùn)用自定義頁(yè)面的設(shè)計(jì)原則。

(2)能靈活對(duì)不同類型的自定義頁(yè)面搭配合適色彩。

3、情感目標(biāo)

(1)培養(yǎng)學(xué)生積極思考、大膽探索，舉一反三的能力。

(2)培養(yǎng)學(xué)生自主學(xué)習(xí)、協(xié)助學(xué)習(xí)的能力。

二、教學(xué)內(nèi)容分析

一個(gè)優(yōu)秀的自定義頁(yè)面能將商品信息和店鋪實(shí)力很好地傳達(dá)給顧客。網(wǎng)店的自定義頁(yè)面打

破了常規(guī)頁(yè)面的局限，給賣家?guī)?lái)了更多的可操作性，越來(lái)越多的賣家通過(guò)發(fā)揮自定義頁(yè)面的創(chuàng)意

來(lái)展示店鋪的獨(dú)特性。

教學(xué)重點(diǎn)：1、自定義頁(yè)面的設(shè)計(jì)原則。

2、自定義頁(yè)面的色彩搭配。

教學(xué)難點(diǎn)：1、區(qū)分不同類型自定義頁(yè)面的色彩搭配方法。

三、教學(xué)過(guò)程設(shè)計(jì)

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

展示一張優(yōu)秀的的自定義頁(yè)面，請(qǐng)同學(xué)們談?wù)勂湓O(shè)計(jì)優(yōu)秀觀察自定義激發(fā)學(xué)生思

1、創(chuàng)設(shè)

的地方在哪里？為什么？頁(yè)面,談?wù)勂淇?，引出課程

問(wèn)題引

設(shè)計(jì)優(yōu)秀之內(nèi)容

入課題

處。

一、自定義頁(yè)面的常見(jiàn)尺寸了解自定義讓學(xué)生先行

頁(yè)面的電腦了解網(wǎng)店自

由于電腦和手機(jī)的屏幕大小不同，電腦端和無(wú)線端的

端和無(wú)線端定義頁(yè)面的

的尺寸常見(jiàn)尺寸

自定義頁(yè)面尺寸有所

不同。

1)電腦端自定義頁(yè)面的尺寸

2、新課

講解寬：950px/1920px

高：3000px?6000px(僅建議，具體根據(jù)頁(yè)面內(nèi)容決定)

2)無(wú)線端自定義頁(yè)面的尺寸

寬：640px/750px(根據(jù)無(wú)線端裝修后臺(tái)的不同模塊尺寸限讓學(xué)生對(duì)熟

悉自定義頁(yè)

面的設(shè)計(jì)原

7

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

制決定）則，為后面的

設(shè)計(jì)奠定基

高：1500px~5000px（僅建議，具體根據(jù)頁(yè)面內(nèi)容決定）熟悉自定義礎(chǔ)。

頁(yè)面的設(shè)計(jì)

二、自定義頁(yè)面的設(shè)計(jì)原則原則。

1）首尾呼應(yīng)

在設(shè)計(jì)自定義頁(yè)面時(shí)基本都是從上往下、從框架搭建到細(xì)

化細(xì)節(jié)的流程順序進(jìn)行的。在這個(gè)過(guò)程中，需要至少一個(gè)

的主要元素貫穿整體頁(yè)面。

2）協(xié)調(diào)統(tǒng)一

保證頁(yè)面里的模特、文案、點(diǎn)綴物、各種顏色、布局排版

以及所有這些元素匯聚在一起所組成的是同一種風(fēng)格，從

而達(dá)成視覺(jué)協(xié)調(diào)統(tǒng)一的目的。

3）層次分明

自定義頁(yè)面的層次主要涉及兩個(gè)方面的層次，一方面是信

息的層次級(jí)別有主次之分，另一方面是整個(gè)頁(yè)面的層次節(jié)

奏，如空間層次中的近景中景遠(yuǎn)景等，借此使頁(yè)面看起來(lái)

更立體。

三自定義頁(yè)面的色彩搭配

根據(jù)自定義內(nèi)容的需要，采用適合的色彩搭配，能準(zhǔn)確地

表達(dá)出相應(yīng)的主題內(nèi)涵。

活動(dòng)專題頁(yè)的常見(jiàn)配色

活動(dòng)專題頁(yè)面一般也會(huì)以暖色為主色調(diào)，如紅色、橙色、

黃色等，這種色調(diào)的運(yùn)用可以使頁(yè)面給人帶來(lái)熱情、興奮、認(rèn)識(shí)區(qū)分不

歡快的心理感受。同類型自定

活動(dòng)專題頁(yè)面為了能與節(jié)日主題相呼應(yīng)，很多時(shí)候會(huì)選擇義頁(yè)面的色

節(jié)日代表色。彩搭配方案。

節(jié)日相關(guān)顏色

春節(jié)紅色金色中國(guó)紅

情人節(jié)紫色粉色紅色

婦女節(jié)玫紅色丁香色

兒童節(jié)鵝黃色天藍(lán)色綠色

中秋節(jié)普藍(lán)色紅色橙黃色

國(guó)慶節(jié)中國(guó)紅黃色

圣誕節(jié)紅色綠色白色

2、品牌介紹頁(yè)的常見(jiàn)配色

在設(shè)計(jì)品牌介紹頁(yè)時(shí)必須考慮品牌本身的風(fēng)格與色調(diào)。為

了讓消費(fèi)者在瀏覽品牌介紹頁(yè)的過(guò)程中，能深深地把店鋪

品牌形象烙在心間，品牌介紹頁(yè)的配色一般是挑選能代表

該品牌形象風(fēng)格的顏色。

3、會(huì)員活動(dòng)頁(yè)的常見(jiàn)配色

會(huì)員活動(dòng)頁(yè)的配色通常表現(xiàn)為以暖色調(diào)為主，同時(shí)采用對(duì)

比色或者間隔色的搭配，給人活潑輕松的感覺(jué)，從而襯托

會(huì)員活動(dòng)氛圍。

除此配色方案外，也有一些店鋪為了深化會(huì)員對(duì)品牌的認(rèn)

知，在會(huì)員活動(dòng)頁(yè)面的配色設(shè)計(jì)中融合能代表品牌形象風(fēng)

格的顏色。

4、售后服務(wù)頁(yè)的常見(jiàn)配色

8

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

售后服務(wù)頁(yè)的配色一般以冷色調(diào)為主，如：藍(lán)色、綠色等

等，或者運(yùn)用非彩色搭配，如黑字白底、白字黑底。

發(fā)布實(shí)訓(xùn)任務(wù)：搜索不同類通過(guò)分析，充

在淘寶網(wǎng)上搜索不同類型的自定義頁(yè)面，并嘗試分析其遵型的自定義分掌握自定

循了哪些設(shè)計(jì)原則以及運(yùn)用了怎樣的色彩搭配方案。頁(yè)面,并分析義頁(yè)面的設(shè)

3、學(xué)生其遵循了哪計(jì)原則和色

實(shí)訓(xùn)些設(shè)計(jì)原則彩搭配方案。

以及運(yùn)用了

怎樣的色彩

搭配方案

本節(jié)課要掌握的重點(diǎn)：明白本節(jié)課

4、課后自己要掌握

1自定義頁(yè)面的設(shè)計(jì)原則。

小結(jié)的知識(shí)點(diǎn)

2、自定義頁(yè)面的色彩搭配。

9

任務(wù)二自定義頁(yè)面設(shè)計(jì)二

一、教學(xué)目標(biāo)

1、知識(shí)目標(biāo)

(1)了解網(wǎng)店自定義頁(yè)面的排版形式。

(2)熟悉網(wǎng)店自定義頁(yè)面的點(diǎn)綴元素。

(3)掌握自定義頁(yè)面的設(shè)計(jì)流程。

2、技能目標(biāo)

(1)能靈活對(duì)不同類型的自定義頁(yè)面運(yùn)用合適的排版形式。

(2)能合理運(yùn)用自定義頁(yè)面的點(diǎn)綴元素。

(3)能根據(jù)自定義頁(yè)面設(shè)計(jì)的計(jì)劃方案設(shè)計(jì)自定義頁(yè)面。

3、情感目標(biāo)

(1)培養(yǎng)學(xué)生積極思考、大膽探索，舉一反三的能力。

(2)培養(yǎng)學(xué)生自主學(xué)習(xí)、協(xié)助學(xué)習(xí)的能力。

二、教學(xué)內(nèi)容分析

一個(gè)優(yōu)秀的自定義頁(yè)面能將商品信息和店鋪實(shí)力很好地傳達(dá)給顧客。網(wǎng)店的自定義頁(yè)面打

破了常規(guī)頁(yè)面的局限，給賣家?guī)?lái)了更多的可操作性，越來(lái)越多的賣家通過(guò)發(fā)揮自定義頁(yè)面的創(chuàng)意

來(lái)展示店鋪的獨(dú)特性。

教學(xué)重點(diǎn)：1、自定義頁(yè)面的排版形式。

2、自定義頁(yè)面的點(diǎn)綴元素。

教學(xué)難點(diǎn)：1、區(qū)分不同類型自定義頁(yè)面的排版形式運(yùn)用。

2、自定義頁(yè)面的設(shè)計(jì)流程。

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

觀察在任務(wù)一實(shí)訓(xùn)中搜集到的自定義頁(yè)面，可發(fā)現(xiàn)其排版觀察自定義激發(fā)學(xué)生思

形式有很多種類型，那么什么樣的自定義頁(yè)面適合什么樣頁(yè)面的排版考，引出課程

的排版形式呢？形式,思考其內(nèi)容

1、創(chuàng)設(shè)

排版的不同

問(wèn)題引

以及不同類

入課題

型的自定義

頁(yè)面適合何

種排版形式。

一、自定義頁(yè)面的排版形式了解不同的讓學(xué)生先行

排版形式適了解自定義

1)常規(guī)樓層形

合何種自定頁(yè)面的排版

常規(guī)樓層形的專題頁(yè)面比較簡(jiǎn)潔利落，主要把控好背景顏義頁(yè)頁(yè)面。形式以及其

2、新課色要有深-淺-深-淺的層次節(jié)奏，每一個(gè)樓層模塊都是獨(dú)立適用情況，為

講解的，清晰明了，有利于信息閱讀。這種排版形式應(yīng)用比較后面的設(shè)計(jì)

廣泛，常用于品牌介紹頁(yè)或售后服務(wù)頁(yè)。奠定基礎(chǔ)。

大部分新手美工在設(shè)計(jì)活動(dòng)專題頁(yè)面時(shí)也偏愛(ài)使用

常規(guī)樓層形排版，但為了打破常規(guī)樓層形排版過(guò)于單調(diào)的

局限，往往會(huì)在其基礎(chǔ)上做一些細(xì)微的演變，比如整體頁(yè)

10

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

面背景不做切割，只需在中間部分進(jìn)行分割，作獨(dú)立的樓

層模塊。

還有一種排版是在原來(lái)的基礎(chǔ)上，對(duì)某一塊樓層的內(nèi)

部進(jìn)行一些小變化。

2)“S”形

“S”形排版的自定義頁(yè)面，對(duì)比于常規(guī)樓層的排版形式

不會(huì)顯得枯燥呆板，而是給人輕松活潑的感覺(jué)，而且消費(fèi)

者閱讀起來(lái)也十分流暢。這種排版形式適用于不同類型的

自定義頁(yè)面。

3)“Z”形

“Z”形排版會(huì)比“S”形排版多了一份厚重感，更適合用

于男性化風(fēng)格的自定義頁(yè)面，比如汽車、男性護(hù)膚、游戲、

電子器械等類目的自定義頁(yè)面。

4)T字形

“1”字形排版的自定義頁(yè)面，給人呈現(xiàn)一種硬朗大氣的感

覺(jué)。這種形式的自定義頁(yè)面需要有高質(zhì)量模特大圖或產(chǎn)品

圖鎮(zhèn)樓才能避免背景搶鏡的情況。因此，“1”字形排版一

般情況很少用到，但對(duì)于那些追求獨(dú)特和個(gè)性化的賣家來(lái)

說(shuō)，“1”字形排版是不錯(cuò)的選擇。

5)自由排版形

自由排版形的自定義頁(yè)面適合用于高端路線的時(shí)尚服飾類

目，這種排版設(shè)計(jì)雖看上去簡(jiǎn)潔干凈，但是對(duì)于設(shè)計(jì)師的

排版功力要求卻比較高，新手美工一般不太適合嘗試。

認(rèn)識(shí)自定義

二、自定義頁(yè)面的點(diǎn)綴元素

頁(yè)面的點(diǎn)綴

點(diǎn)綴元素的應(yīng)用較多地出現(xiàn)在活動(dòng)專題頁(yè)或者會(huì)員活元素以及適

動(dòng)頁(yè)，設(shè)計(jì)時(shí)在頁(yè)面背景上適當(dāng)?shù)卦黾狱c(diǎn)綴元素能有效地用情況。

烘托主題，活躍氣氛，比起空白干凈的背景更有吸引力一

些。

增加點(diǎn)綴元素的時(shí)候需要考慮是否與節(jié)日主題相匹

配，在頁(yè)面中加入一些與主題吻合的點(diǎn)綴元素，會(huì)讓消費(fèi)

者在瀏覽頁(yè)面時(shí)更有代入感。

節(jié)日點(diǎn)綴物元素

春節(jié)燈籠、對(duì)聯(lián)、炮竹煙花、紅包、中國(guó)結(jié)、書(shū)

法字體

端午節(jié)粽子、龍舟、竹、山水、水墨

七夕節(jié)愛(ài)心、絲帶、巧克力、手捧花、情書(shū)、花瓣、

蝴蝶結(jié)

中秋節(jié)月亮、月餅、玉兔、燈籠、夜空

圣誕節(jié)雪花、紅帽子、圣誕樹(shù)、雪人、圣誕老人、

禮物

三、自定義以頁(yè)面的設(shè)計(jì)計(jì)劃

熟悉自定義以設(shè)計(jì)案例

頁(yè)面的設(shè)計(jì)展示一份優(yōu)

11

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

流程。秀的自定義

分析策劃方案頁(yè)面設(shè)計(jì)的

流程，幫助學(xué)

生舉一反三。

明確風(fēng)格、配色、排版、點(diǎn)綴物、字體

搜索收集相關(guān)素材

Photoshop制作自定義頁(yè)面

1.分析策劃方案

(1)本次任務(wù)所設(shè)計(jì)的自定義頁(yè)面類型為活動(dòng)主題頁(yè)面，

此類頁(yè)面要求主題鮮明，活動(dòng)氛圍濃厚，且其包含的促銷

信息較多，所以在設(shè)計(jì)時(shí)須突出不同的促銷活動(dòng)信息，最

大化地滿足不同消費(fèi)者的優(yōu)惠需求。

(2)頁(yè)面主題為：年貨家居好禮購(gòu)。從這里可提取的信息

有：活動(dòng)背景對(duì)應(yīng)的節(jié)日是春節(jié)，店鋪類目是生活用品類。

春節(jié)的節(jié)日特征是歡慶喜悅，生活用品類的特征則是給人

溫暖溫馨的感覺(jué)。通過(guò)主題標(biāo)語(yǔ)“好禮購(gòu)”字樣可知店鋪

希望消費(fèi)者在瀏覽頁(yè)面時(shí)能將本店商品和贈(zèng)送親朋戚友的

年貨禮物聯(lián)想在一起，從而萌生購(gòu)買心理。

(3)從頁(yè)面的布局規(guī)劃圖可知，除了頭部Banner圖外，

樓層模塊一共有四個(gè)，分別對(duì)應(yīng)的促銷活動(dòng)是：優(yōu)惠券、

免單活動(dòng)、五折搶購(gòu)、八折回饋。該頁(yè)面容納的優(yōu)惠信息

較多，故在設(shè)計(jì)時(shí)盡量使用統(tǒng)一協(xié)調(diào)的配色和元素，把多

個(gè)優(yōu)惠活動(dòng)連接一起，讓活動(dòng)主題貫穿頁(yè)面。

2.明確風(fēng)格、配色、排版、點(diǎn)綴物、字體

(1)風(fēng)格：根據(jù)策劃書(shū)的分析，初定YIMI生活日用品店

年貨節(jié)活動(dòng)專題頁(yè)設(shè)計(jì)風(fēng)格以喜慶、熱鬧、動(dòng)感為主。

(2)配色：選取暖色為主色調(diào)，再結(jié)合節(jié)日代表色表，最

終敲定頁(yè)面色彩為紅色、金黃色，營(yíng)造活潑熱鬧的氛圍。

(3)排版：因優(yōu)惠活動(dòng)和參與活動(dòng)的商品較多，頁(yè)面排版

采用常規(guī)樓層形(局部自由排版)的形式。

(4)點(diǎn)綴物：本任務(wù)的頁(yè)面主題為年貨節(jié)，根據(jù)節(jié)日主題

12

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

點(diǎn)綴物代表所示，頁(yè)面中可加入燈籠、煙花爆竹、紅包等

具有春節(jié)特色的點(diǎn)綴元素。

(5)字體：頭部Banner圖的主標(biāo)題字體選用傳統(tǒng)韻律感

比較強(qiáng)的葉根友毛筆行書(shū)，與春節(jié)活動(dòng)背景相呼應(yīng)。小標(biāo)

題和正文部分選用微軟雅黑字體。

3.搜索收集相關(guān)素材

四、自定義頁(yè)面設(shè)計(jì)

通過(guò)以上操作，最后設(shè)計(jì)自定義頁(yè)面如下：

■星濯特久去m護(hù)頭皮郵水

*:/,海飛絲去屑洗發(fā)水

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

新年你￥38.99

^223^^3

歐式創(chuàng)愚家用餐巾耐跑廉

木質(zhì)收納紙巾盒

?約*居?廳木《(8支

新年價(jià)：￥15.99

生優(yōu)惠專享先領(lǐng)券再購(gòu)物2

年黃優(yōu)惠壽?]八年管優(yōu)?壽Tm年黃優(yōu)**'

5[3U

￡全年最低價(jià)免單推回家百

前兩名免單

瑞￥13.9

0mBi形多色的海卷紙同

振興圓形紙巾筒

*第11的號(hào)自住3t用射0*用4HSW

新年價(jià)：￥13.99

露是?10.9

港新口氣潸除牙斑牙骨

佳潔士美白牙膏

3006*0版美日酒*冰口燙日月統(tǒng)

新年你￥19.99

黑￥14.9踹￥19.9

發(fā)布實(shí)訓(xùn)任務(wù)：為網(wǎng)店設(shè)計(jì)會(huì)員活動(dòng)頁(yè)根據(jù)上面的通過(guò)此任務(wù)

任務(wù)要求:請(qǐng)把任務(wù)一的自定義頁(yè)面策劃方案設(shè)計(jì)成圖片。知識(shí)點(diǎn)，完成的完成，懂得

3、學(xué)生制作規(guī)范：寬1920像素，高2500像素以上，jpg格式。網(wǎng)店會(huì)員活舉一反三設(shè)

實(shí)訓(xùn)動(dòng)頁(yè)的設(shè)計(jì)。計(jì)不同類型

的自定義頁(yè)

頁(yè)面。。

本節(jié)課要掌握的重點(diǎn)：明白本節(jié)課

自己要掌握

4、課后1.自定義頁(yè)面的排版形式。

的知識(shí)點(diǎn)

小結(jié)2.自定義頁(yè)面的點(diǎn)綴元素。

3.自定義頁(yè)面的設(shè)計(jì)流程。

13

任務(wù)三自定義頁(yè)面上傳

一、教學(xué)目標(biāo)

1、知識(shí)目標(biāo)

(1)分別了解電腦端和手機(jī)端自定義頁(yè)面的上傳方法。

2、技能目標(biāo)

(1)能靈活上傳手機(jī)端自定義頁(yè)面。

3、情感目標(biāo)

(1)培養(yǎng)學(xué)生積極思考、大膽探索，舉一反三的能力。

(2)培養(yǎng)學(xué)生自主學(xué)習(xí)、協(xié)助學(xué)習(xí)的能力。

二、教學(xué)內(nèi)容分析

一個(gè)優(yōu)秀的自定義頁(yè)面能將商品信息和店鋪實(shí)力很好地傳達(dá)給顧客。網(wǎng)店的自定義頁(yè)面打

破了常規(guī)頁(yè)面的局限，給賣家?guī)?lái)了更多的可操作性，越來(lái)越多的賣家通過(guò)發(fā)揮自定義頁(yè)面的創(chuàng)意

來(lái)展示店鋪的獨(dú)特性。

教學(xué)重點(diǎn)：1、電腦端和手機(jī)端自定義頁(yè)面的上傳方法。

教學(xué)難點(diǎn)：1、手機(jī)端自定義頁(yè)面的上傳以及熱區(qū)鏈接的設(shè)置。

三、教學(xué)過(guò)程設(shè)計(jì)

教學(xué)步

教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

驟

展示網(wǎng)店后臺(tái)電腦端和手機(jī)端自定義頁(yè)面的裝修頁(yè)面觀察不同端激發(fā)學(xué)生思

1、創(chuàng)設(shè)提問(wèn)：網(wǎng)店裝修后臺(tái)電腦端自定義頁(yè)面的裝修頁(yè)面和手機(jī)口的自定義考，引出課程

問(wèn)題引端的截然不同，那么兩個(gè)不同端口的上傳方法會(huì)有所不同頁(yè)面的裝修內(nèi)容

入課題么？頁(yè)面,思考教

師問(wèn)題。

電

腦端

一、電腦端自定義頁(yè)面的上傳了解讓學(xué)生先行

端

機(jī)

自

和

電腦端的自定義頁(yè)面和首頁(yè)的裝修基礎(chǔ)模塊大同小手了解電腦端

面

頁(yè)

上

定

異，所以兩者的上傳步驟大致相同。值得一提的是，在智義和手機(jī)端自

法

方

并

傳

能版的電腦端裝修平臺(tái)中，自定義頁(yè)面的某些基礎(chǔ)模塊新的定義頁(yè)面的

種

兩

情

區(qū)

增了同步功能。如圖下圖所示，寶貝推薦模塊、全屏寬圖分上傳方法。

況

模塊、雙列圖片模塊、文本鏈接模塊、圖文模塊、文本模。

塊、多端輪播模塊、全屏輪播模塊均能實(shí)現(xiàn)電腦端和無(wú)線

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

定義頁(yè)面自動(dòng)同步生成無(wú)線自定義頁(yè)面，不支持從無(wú)線端

同步到電腦端。

2、新課

智能版的同步功能方便于將設(shè)計(jì)好的電腦端自定義

講解

頁(yè)面上傳后直接同步生成無(wú)線端的