電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作 教案 項(xiàng)目三 搭建電子商務(wù)網(wǎng)店頁(yè)面（任務(wù)單）

項(xiàng)目三搭建電子商務(wù)網(wǎng)店頁(yè)面

項(xiàng)目編號(hào)：WYSJ-03學(xué)時(shí)：

指導(dǎo)老師：日期：

項(xiàng)目簡(jiǎn)介

電子商務(wù)網(wǎng)店，是現(xiàn)階段電子商務(wù)網(wǎng)站最為廣泛也是最受學(xué)生歡迎的應(yīng)用。前面項(xiàng)目一任務(wù)三知

識(shí)分析中提過(guò)，絕大多數(shù)運(yùn)行在淘寶、易趣等電子商務(wù)平臺(tái)上的網(wǎng)店頁(yè)面版面布局基本是固定的。這

類(lèi)模板主要有不同模塊的圖像素材構(gòu)成，在轉(zhuǎn)換為相應(yīng)的網(wǎng)頁(yè)代碼后可插入到網(wǎng)店各模塊的對(duì)應(yīng)位

置，最后形成網(wǎng)店整體效果。網(wǎng)店模塊主要由店招部分、店鋪?zhàn)髠?cè)模塊(網(wǎng)店告示區(qū)、分類(lèi)列表區(qū)等)、

店鋪促銷(xiāo)區(qū)域、店鋪櫥窗區(qū)(商品圖片)等構(gòu)成。而這類(lèi)模塊則常運(yùn)用photoshop圖像處理軟件來(lái)制

作的圖像構(gòu)成。另外淘寶、易趣等電子商務(wù)平臺(tái)提供的最基本店鋪則是由平臺(tái)生成，只需添加對(duì)應(yīng)的

店招圖片、商品圖片、文字分類(lèi)等即可?？傮w而言，搭建電子商務(wù)網(wǎng)店的基礎(chǔ)主要是通過(guò)運(yùn)用photoshop

設(shè)計(jì)與制作的圖像素材來(lái)完成的。本項(xiàng)目將通過(guò)完成網(wǎng)店的主要模塊來(lái)使學(xué)生掌握photoshop的基本

應(yīng)用。

項(xiàng)目目標(biāo)

1、能力目標(biāo)

學(xué)習(xí)完本項(xiàng)目后，學(xué)生應(yīng)當(dāng)能夠依據(jù)項(xiàng)目要求完成網(wǎng)店各構(gòu)成模塊的設(shè)計(jì)與制作，包括：

(1)對(duì)商品照片進(jìn)行處理以適應(yīng)電子商務(wù)網(wǎng)店

(2)對(duì)圖片進(jìn)行色調(diào)色澤的美化調(diào)整

(3)給圖片加上水印

(4)抽取圖像素材用來(lái)修飾網(wǎng)店模塊

(5)制作網(wǎng)店的店標(biāo)

(6)制作網(wǎng)店的側(cè)邊分類(lèi)列表區(qū)

(7)制作網(wǎng)店的促銷(xiāo)區(qū)域

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

(1)Photoshop基本操作命令

(2)Photoshop新建文件的設(shè)置、圖像和畫(huà)布的調(diào)整

(3)Photoshop圖像模式和調(diào)整

(4)Photoshop層的概念

（5）Photoshop圖像復(fù)制粘貼、自由變換和導(dǎo)航器使用

（6）Photoshop濾鏡的使用

(7)Photoshop裁剪工具

(8)Photoshop橡皮擦工具

(9)Photoshop的選區(qū)創(chuàng)建和修改

(10)Photoshop文字工具

(11)Photoshop圖層的使用、樣式修飾、混合和蒙版

(12)Photoshop漸變工具

(13)Photoshop形狀工具

(14)Photoshop輔助工具

(15)Photoshop修飾與修復(fù)圖像

3、素質(zhì)目標(biāo)

（1）對(duì)標(biāo)準(zhǔn)和規(guī)范嚴(yán)謹(jǐn)與認(rèn)真的態(tài)度

（2）團(tuán)隊(duì)協(xié)作能力

（2）交際和溝通能力

（3）創(chuàng)新和解決問(wèn)題能力

項(xiàng)目?jī)?nèi)容

任務(wù)一處理修飾商品圖片

任務(wù)二制作網(wǎng)店的店標(biāo)

任務(wù)三制作網(wǎng)店的側(cè)邊分類(lèi)列表區(qū)

任務(wù)四制作網(wǎng)店的促銷(xiāo)區(qū)域

教學(xué)形式

1、學(xué)生2人一組進(jìn)行討論、分工及制作

2、各任務(wù)的實(shí)施（過(guò)程中教師進(jìn)行分析指導(dǎo)，并講解所涉及的相關(guān)知識(shí)）

3、小組交流匯報(bào)

任務(wù)一“處理修飾商品圖片”任務(wù)單

任務(wù)編號(hào)：WYSJ-03-01學(xué)時(shí)：

實(shí)訓(xùn)地點(diǎn)：日期：

小組成員：

姓名：班級(jí)：學(xué)號(hào)：

一、任務(wù)描述

本任務(wù)目標(biāo)通過(guò)對(duì)所要搭建的網(wǎng)店中襪子商品圖片為例完成該網(wǎng)店所用圖片素材

的處理，來(lái)展示一般網(wǎng)店圖片處理美化的流程。

二、任務(wù)分配

三、任務(wù)實(shí)施

要求按照任務(wù)執(zhí)行流程的要求分要點(diǎn)來(lái)描述任務(wù)的具體實(shí)施步驟。

四、任務(wù)小結(jié)

請(qǐng)寫(xiě)出在制作過(guò)程中遇到的問(wèn)題及解決辦法。

五、任務(wù)執(zhí)行評(píng)價(jià)：

（根據(jù)任務(wù)完成的質(zhì)量、及時(shí)度、報(bào)告的編寫(xiě)質(zhì)量給出成績(jī)（100制），作為本項(xiàng)目總成績(jī)?cè)u(píng)定時(shí)的

依據(jù)之一）

成績(jī)：

日期：年月日

六、任務(wù)拓展

1.處理類(lèi)似商品圖片，說(shuō)明步驟

任務(wù)二“制作網(wǎng)店的店標(biāo)”任務(wù)單

任務(wù)編號(hào)：WYSJ-03-02學(xué)時(shí)：

實(shí)訓(xùn)地點(diǎn)：日期：

小組成員：

姓名：班級(jí)：學(xué)號(hào)：

一、任務(wù)描述

本任務(wù)目標(biāo)將通過(guò)對(duì)圖像素材和文字處理來(lái)制作完成網(wǎng)店店標(biāo)效果如圖所示。

心我

二、任務(wù)分配

三、任務(wù)實(shí)施

要求按照任務(wù)執(zhí)行流程的要求分要點(diǎn)來(lái)描述任務(wù)的具體實(shí)施步驟。

四、任務(wù)小結(jié)

請(qǐng)寫(xiě)出在制作過(guò)程中遇到的問(wèn)題及解決辦法。

五、任務(wù)執(zhí)行評(píng)價(jià)：

（根據(jù)任務(wù)完成的質(zhì)量、及時(shí)度、報(bào)告的編寫(xiě)質(zhì)量給出成績(jī)（100制），作為本項(xiàng)目總成績(jī)?cè)u(píng)定時(shí)的

依據(jù)之一）

成績(jī)：

日期:年月日

六、任務(wù)拓展

1.根據(jù)素材完成類(lèi)似摳圖制作

素材:

完成:

任務(wù)三“制作網(wǎng)店的側(cè)邊分類(lèi)列表區(qū)”任務(wù)單

任務(wù)編號(hào)：WYSJ-03-03學(xué)時(shí)：

實(shí)訓(xùn)地點(diǎn)：日期：

小組成員:

姓名：班級(jí)：學(xué)號(hào)：

一、任務(wù)描述

本任務(wù)目標(biāo)將通過(guò)對(duì)圖像素材的處理、添加文字、增加圖層樣式來(lái)制作網(wǎng)店的分類(lèi)

列表區(qū)。該分類(lèi)列表區(qū)可由網(wǎng)店的通告、熱賣(mài)信息和主要商品分類(lèi)構(gòu)成。往往列在小的

圖標(biāo)式分類(lèi)列表區(qū)之上，作為熱門(mén)商品，特價(jià)商品等分區(qū)入口。用大的圖片，主要是為

了更好的吸引訪(fǎng)問(wèn)網(wǎng)店的客戶(hù)注意。效果如圖所示。

二、任務(wù)分配

三、任務(wù)實(shí)施

要求按照任務(wù)執(zhí)行流程的要求分要點(diǎn)來(lái)描述任務(wù)的具體實(shí)施步驟。

四、任務(wù)小結(jié)

請(qǐng)寫(xiě)出在制作過(guò)程中遇到的問(wèn)題及解決辦法。

五、任務(wù)執(zhí)行評(píng)價(jià)：

（根據(jù)任務(wù)完成的質(zhì)量、及時(shí)度、報(bào)告的編寫(xiě)質(zhì)量給出成績(jī)（100制），作為本項(xiàng)目總成績(jī)?cè)u(píng)定時(shí)的

依據(jù)之一）

成績(jī)：

日期：年月日

六、任務(wù)拓展

1.完成下列網(wǎng)店圖標(biāo)按鈕的制作。

也犍工繳］卜慢先繳「泰差數(shù)

、h扁z^yyuntry.：,、儡、h簫gz^y^unii

2.收集相關(guān)素材完成類(lèi)似布局的網(wǎng)店介紹區(qū)域，如圖所示。

任務(wù)四“制作網(wǎng)店的促銷(xiāo)區(qū)域”任務(wù)單

任務(wù)編號(hào)：WYSJ-03-04學(xué)時(shí)：

實(shí)訓(xùn)地點(diǎn)：S期：

小組成員:

姓名：班級(jí)：學(xué)號(hào):

一、任務(wù)描述

本任務(wù)目標(biāo)是通過(guò)對(duì)素材的收集，對(duì)電子商務(wù)網(wǎng)店中占顯目位置的促銷(xiāo)活動(dòng)區(qū)進(jìn)行

制作。促銷(xiāo)活動(dòng)區(qū)域一般在網(wǎng)店頁(yè)面頂部banner的下方，占整個(gè)頁(yè)面的核心位置，類(lèi)似

傳統(tǒng)商城的促銷(xiāo)海報(bào)，展示當(dāng)前網(wǎng)店的最新活動(dòng)和最吸引人的資訊。在制作過(guò)程中能夠

對(duì)抽取的素材進(jìn)行修復(fù)，通過(guò)蒙版進(jìn)行處理，借助輔助工具對(duì)編輯元素進(jìn)行定位和制作,

完成效果如圖所示。

二、任務(wù)分配

三、任務(wù)實(shí)施

要求按照任務(wù)執(zhí)行流程的要求分要點(diǎn)來(lái)描述任務(wù)的具體實(shí)施步驟。

四、任務(wù)小結(jié)

請(qǐng)寫(xiě)出在制作過(guò)程中遇到的問(wèn)題及解決辦法0

五、任務(wù)執(zhí)行評(píng)價(jià)：

（根據(jù)任務(wù)完成的質(zhì)量、及時(shí)度、報(bào)告的編寫(xiě)質(zhì)量給出成績(jī)（100制），作為本項(xiàng)目總成績(jī)?cè)u(píng)定時(shí)的

依據(jù)之一）

成績(jī):