項目三搭建電子商務網店頁面

項目編號：WYSJ-03學時：

指導老師：日期：

項目簡介

電子商務網店，是現階段電子商務網站最為廣泛也是最受學生歡迎的應用。前面項目一任務三知

識分析中提過，絕大多數運行在淘寶、易趣等電子商務平臺上的網店頁面版面布局基本是固定的。這

類模板主要有不同模塊的圖像素材構成，在轉換為相應的網頁代碼后可插入到網店各模塊的對應位

置，最后形成網店整體效果。網店模塊主要由店招部分、店鋪左側模塊(網店告示區、分類列表區等)、

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

作的圖像構成。另外淘寶、易趣等電子商務平臺提供的最基本店鋪則是由平臺生成，只需添加對應的

店招圖片、商品圖片、文字分類等即可。總體而言，搭建電子商務網店的基礎主要是通過運用photoshop

設計與制作的圖像素材來完成的。本項目將通過完成網店的主要模塊來使學生掌握photoshop的基本

應用。

項目目標

1、能力目標

學習完本項目后，學生應當能夠依據項目要求完成網店各構成模塊的設計與制作，包括：

(1)對商品照片進行處理以適應電子商務網店

(2)對圖片進行色調色澤的美化調整

(3)給圖片加上水印

(4)抽取圖像素材用來修飾網店模塊

(5)制作網店的店標

(6)制作網店的側邊分類列表區

(7)制作網店的促銷區域

2、知識目標

(1)Photoshop基本操作命令

(2)Photoshop新建文件的設置、圖像和畫布的調整

(3)Photoshop圖像模式和調整

(4)Photoshop層的概念

（5）Photoshop圖像復制粘貼、自由變換和導航器使用

（6）Photoshop濾鏡的使用

(7)Photoshop裁剪工具

(8)Photoshop橡皮擦工具

(9)Photoshop的選區創建和修改

(10)Photoshop文字工具

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

(12)Photoshop漸變工具

(13)Photoshop形狀工具

(14)Photoshop輔助工具

(15)Photoshop修飾與修復圖像

3、素質目標

（1）對標準和規范嚴謹與認真的態度

（2）團隊協作能力

（2）交際和溝通能力

（3）創新和解決問題能力

項目內容

任務一處理修飾商品圖片

任務二制作網店的店標

任務三制作網店的側邊分類列表區

任務四制作網店的促銷區域

教學形式

1、學生2人一組進行討論、分工及制作

2、各任務的實施（過程中教師進行分析指導，并講解所涉及的相關知識）

3、小組交流匯報

任務一“處理修飾商品圖片”任務單

任務編號：WYSJ-03-01學時：

實訓地點：日期：

小組成員：

姓名：班級：學號：

一、任務描述

本任務目標通過對所要搭建的網店中襪子商品圖片為例完成該網店所用圖片素材

的處理，來展示一般網店圖片處理美化的流程。

二、任務分配

三、任務實施

要求按照任務執行流程的要求分要點來描述任務的具體實施步驟。

四、任務小結

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

五、任務執行評價：

（根據任務完成的質量、及時度、報告的編寫質量給出成績（100制），作為本項目總成績評定時的

依據之一）

成績：

日期：年月日

六、任務拓展

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

任務二“制作網店的店標”任務單

任務編號：WYSJ-03-02學時：

實訓地點：日期：

小組成員：

姓名：班級：學號：

一、任務描述

本任務目標將通過對圖像素材和文字處理來制作完成網店店標效果如圖所示。

心我

二、任務分配

三、任務實施

要求按照任務執行流程的要求分要點來描述任務的具體實施步驟。

四、任務小結

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

五、任務執行評價：

（根據任務完成的質量、及時度、報告的編寫質量給出成績（100制），作為本項目總成績評定時的

依據之一）

成績：

日期:年月日

六、任務拓展

1.根據素材完成類似摳圖制作

素材:

完成:

任務三“制作網店的側邊分類列表區”任務單

任務編號：WYSJ-03-03學時：

實訓地點：日期：

小組成員:

姓名：班級：學號：

一、任務描述

本任務目標將通過對圖像素材的處理、添加文字、增加圖層樣式來制作網店的分類

列表區。該分類列表區可由網店的通告、熱賣信息和主要商品分類構成。往往列在小的

圖標式分類列表區之上，作為熱門商品，特價商品等分區入口。用大的圖片，主要是為

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

二、任務分配

三、任務實施

要求按照任務執行流程的要求分要點來描述任務的具體實施步驟。

四、任務小結

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

五、任務執行評價：

（根據任務完成的質量、及時度、報告的編寫質量給出成績（100制），作為本項目總成績評定時的

依據之一）

成績：

日期：年月日

六、任務拓展

1.完成下列網店圖標按鈕的制作。

也犍工繳］卜慢先繳「泰差數

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

2.收集相關素材完成類似布局的網店介紹區域，如圖所示。

任務四“制作網店的促銷區域”任務單

任務編號：WYSJ-03-04學時：

實訓地點：S期：

小組成員:

姓名：班級：學號:

一、任務描述

本任務目標是通過對素材的收集，對電子商務網店中占顯目位置的促銷活動區進行

制作。促銷活動區域一般在網店頁面頂部banner的下方，占整個頁面的核心位置，類似

傳統商城的促銷海報，展示當前網店的最新活動和最吸引人的資訊。在制作過程中能夠

對抽取的素材進行修復，通過蒙版進行處理，借助輔助工具對編輯元素進行定位和制作,

完成效果如圖所示。

二、任務分配

三、任務實施

要求按照任務執行流程的要求分要點來描述任務的具體實施步驟。

四、任務小結

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

五、任務執行評價：

（根據任務完成的質量、及時度、報告的編寫質量給出成績（100制），作為本項目總成績評定時的

依據之一）

成績: