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

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

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

項(xiàng)目簡介

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

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

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

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

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

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

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

設(shè)計(jì)與制作的圖像素材來完成的。本項(xiàng)目將通過完成網(wǎng)店的主要模塊來使學(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)抽取圖像素材用來修飾網(wǎng)店模塊

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

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

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

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

(1)Photoshop基本操作命令

(2)Photoshop新建文件的設(shè)置、圖像和畫布的調(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)新和解決問題能力

項(xiàng)目內(nèi)容

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

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

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

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

教學(xué)形式

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

2、各任務(wù)的實(shí)施（過程中教師進(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)通過對(duì)所要搭建的網(wǎng)店中襪子商品圖片為例完成該網(wǎng)店所用圖片素材

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

二、任務(wù)分配

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

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

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

請(qǐng)寫出在制作過程中遇到的問題及解決辦法。

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

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

依據(jù)之一）

成績：

日期：年月日

六、任務(wù)拓展

1.處理類似商品圖片，說明步驟

任務(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)將通過對(duì)圖像素材和文字處理來制作完成網(wǎng)店店標(biāo)效果如圖所示。

心我

二、任務(wù)分配

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

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

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

請(qǐng)寫出在制作過程中遇到的問題及解決辦法。

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

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

依據(jù)之一）

成績：

日期:年月日

六、任務(wù)拓展

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

素材:

完成:

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

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

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

小組成員:

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

一、任務(wù)描述

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

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

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

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

二、任務(wù)分配

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

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

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

請(qǐng)寫出在制作過程中遇到的問題及解決辦法。

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

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

依據(jù)之一）

成績：

日期：年月日

六、任務(wù)拓展

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

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

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

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

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

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

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

小組成員:

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

一、任務(wù)描述

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

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

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

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

完成效果如圖所示。

二、任務(wù)分配

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

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

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

請(qǐng)寫出在制作過程中遇到的問題及解決辦法0

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

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

依據(jù)之一）

成績: