電子商務(wù)網(wǎng)p設(shè)計(jì)(第二版)課件5

1、電子商務(wù)網(wǎng)頁設(shè)計(jì)教育部中等職業(yè)教育專業(yè)技能課立項(xiàng)教材中等職業(yè)教育實(shí)戰(zhàn)型電子商務(wù)規(guī)劃教材主編 歐志敏 劉生娥content電子商務(wù)網(wǎng)頁賞析商品圖片的使用與編輯15目錄HTML網(wǎng)頁制作基礎(chǔ)2電子商務(wù)網(wǎng)頁編輯軟件Dreamweaver 20203網(wǎng)頁元素的編輯4表格與DIV的使用HTML5與響應(yīng)式網(wǎng)頁設(shè)計(jì)610使用CSS控制頁面元素7使用Animate制作網(wǎng)頁中的動(dòng)畫8 使用JavaScript制作動(dòng)態(tài)效果9設(shè)計(jì)與制作電子商務(wù)網(wǎng)店結(jié)構(gòu)項(xiàng)目11設(shè)計(jì)與制作電子商務(wù)網(wǎng)店結(jié)構(gòu)項(xiàng)目11任務(wù)一 制作網(wǎng)店告示板任務(wù)二 制作圖片分類區(qū)任務(wù)三 制作商品宣傳圖 網(wǎng)店設(shè)計(jì)能提升店鋪形象,吸引人的眼球,客戶會(huì)通過網(wǎng)店設(shè)計(jì)第

2、一時(shí)間了解你店鋪的訊息。本項(xiàng)目將介紹網(wǎng)店結(jié)構(gòu)的制作方法,讓大家了解到網(wǎng)店設(shè)計(jì)的好處。 項(xiàng)目介紹Contents目錄任務(wù)分析1相關(guān)知識(shí)2任務(wù)實(shí)施3任務(wù)一 制作網(wǎng)店告示板 任務(wù)分析1 店鋪公告包括對(duì)自己店鋪的簡(jiǎn)介、想和來訪者說的話以及一些忠告和注意事項(xiàng),這里的內(nèi)容會(huì)被來訪者在第一時(shí)間注意到,一般被放置在店鋪的右上角。店主可以隨時(shí)發(fā)布滾動(dòng)的文字信息,也可以通過網(wǎng)頁代碼發(fā)布圖文配合的公告信息。這樣,公告欄將更清晰、美觀,還可以加入動(dòng)畫,使其更醒目。 店鋪公告是宣傳推廣最新發(fā)布的產(chǎn)品、公告店鋪?zhàn)钚麓黉N信息、發(fā)布重要通知的好工具。但是,店鋪的公告區(qū)域空間有限,所以店鋪公告的內(nèi)容一定要言簡(jiǎn)意賅,最好能一針見

3、血,吸引顧客。例如,你的店鋪是新開的,你可以采用以下三個(gè)方案:：2方案二:大家好,歡迎大家光臨本店;很高興認(rèn)識(shí)各位朋友,希望大家多多捧場(chǎng)。1方案一:新店開張,歡迎過路的朋友到此歇歇;本店秉承誠信待客,一流服務(wù);顧客至上,質(zhì)量為根本;錢來貨到,效率第一;新店新開張,好店好生意,顧客顧到位。3方案三:我店產(chǎn)品全部來自正規(guī)的渠道,以最直接有效的方式送達(dá)消費(fèi)者手里,避免了中間過多的流通環(huán)節(jié);本店一直是以薄利多銷為原則,在有合理利潤的基礎(chǔ)上將盡最大可能讓利給大家,所以才會(huì)比專柜便宜許多。相關(guān)知識(shí)23任務(wù)實(shí)施運(yùn)行Photoshop,執(zhí)行“文件”“新建”菜單命令,在彈出的“新建”對(duì)話框中,命名為“網(wǎng)店告示板

4、”,預(yù)設(shè)為“自定”,寬度為800,高度為600,分辨率為72,顏色模式為RGB顏色,背景內(nèi)容為白色,設(shè)置完畢后,單擊“確定”按鈕,如圖111所示。1圖111“新建”對(duì)話框3任務(wù)實(shí)施在“圖層”面板中,單擊“創(chuàng)建新圖層”按鈕 ,建立新圖層并重命名為“條紋”。設(shè)置前景色為#ff02a9,選擇工具箱中的“矩形”工具, 按住鼠標(biāo)左鍵繪制出一個(gè)矩形,執(zhí)行“編輯”“變換”“斜切”菜單命令,通過變形將矩形變?yōu)槠叫兴倪呅?如圖112所示。2圖112繪制“條紋”3任務(wù)實(shí)施按住Ctrl+Alt,同時(shí)選中“條紋”并按住鼠標(biāo)左鍵不動(dòng)可以拖拽出“條紋”的副本。重復(fù)這一操作,復(fù)制出若干個(gè)條紋副本,效果如圖113所示。3圖1

5、13制作背景”3任務(wù)實(shí)施在“圖層”面板中,新建“圓角矩形”圖層,設(shè)置前景色為白色,選擇工具箱中的“圓角矩形”工具, 在其工具選項(xiàng)欄中選中“填充像素”按鈕,并設(shè)置圓角半徑為60px,按住鼠標(biāo)左鍵拖出一個(gè)圓角矩形,如圖114所示。4圖114繪制圓角矩形3任務(wù)實(shí)施選擇工具箱中的“文本”工具,在工具選項(xiàng)欄中設(shè)置字體類型為方正舒體,字體大小為120,顏色為黑色,輸入文本“公告欄”,再設(shè)置字體類型為Informal Roman,字體大小為60,輸入英文“Announcement”,如圖115所示。5圖115輸入文本3任務(wù)實(shí)施在“圖層”面板,建立新圖層“綠花”,選擇工具箱中的“自定形狀”工具,單擊“填充像素

6、”按鈕,選擇“形狀44”形狀,如圖116所示,繪制出一朵綠色的小花。用同樣的方法制作其它花形狀等圖層,如圖117所示。6圖116“自定形狀”工具選項(xiàng)欄圖117效果圖Contents目錄任務(wù)分析1相關(guān)知識(shí)2任務(wù)實(shí)施3任務(wù)二 制作圖片分類區(qū) 任務(wù)分析1 店鋪的寶貝分類是非常重要的。寶貝的分類如何進(jìn)行標(biāo)明設(shè)置會(huì)影響到店鋪的PV及成交轉(zhuǎn)化率,會(huì)影響到客戶能夠買多少產(chǎn)品。店鋪是面向消費(fèi)者市場(chǎng)的,消費(fèi)者市場(chǎng)由許多個(gè)人組成,每個(gè)人都有不同的習(xí)慣、需求、喜好等,為了滿足不同消費(fèi)者的需要,就需要進(jìn)行寶貝分類,這是制定店鋪營銷策略非常重要的環(huán)節(jié)。2相關(guān)知識(shí)按寶貝的生產(chǎn)方法分類按寶貝的主要成分分類345其他分類 對(duì)

7、寶貝的分類方式有以下五種:12按寶貝用途分類按寶貝原材料分類2相關(guān)知識(shí)1按寶貝用途分類不同的用途造成了各種寶貝不同的價(jià)值,因此可以通過寶貝的用途來進(jìn)行分類,這種分類方法不僅適合對(duì)寶貝進(jìn)行大類劃分,也可用于進(jìn)一步的細(xì)分。比如“家用電器”是一大類,按用途進(jìn)一步細(xì)分為:音響設(shè)備、視頻設(shè)備、制冷空調(diào)器具、廚房器具等。按用途分類便于比較同類寶貝的性能,因此有利于客戶進(jìn)行對(duì)比購買。多用途的寶貝不適合用此分類方式。2相關(guān)知識(shí)2按寶貝原材料分類原材料的種類與質(zhì)量往往對(duì)寶貝的性能和質(zhì)量起到?jīng)Q定性的作用,所以原材料是很重要的分類標(biāo)志,此分類方式適用于原材料來源較多,并且對(duì)其性能起決定作用的寶貝。例如,服裝類的寶貝

8、按原材料進(jìn)行分類,可分為棉布服裝、皮革服裝、絲綢服裝等,這些寶貝的使用價(jià)值和特點(diǎn)都有明顯的差別。由多種原材料制成的寶貝不適用于此分類方式。2相關(guān)知識(shí)按寶貝的主要成分分類4許多寶貝的性能、質(zhì)量等都是由寶貝的主要成分決定的,因此寶貝的主要成分或特殊成分是進(jìn)行寶貝分類的重要標(biāo)志。例如,塑料產(chǎn)品的主要成分有明顯的不同,分為聚乙烯塑料、聚苯乙烯塑料等。對(duì)于主要成分相同而含有特殊成分的產(chǎn)品,如營養(yǎng)護(hù)膚霜類的寶貝,可按其特殊成分進(jìn)行分類,如人參營養(yǎng)霜、維生素E營養(yǎng)霜、珍珠粉營養(yǎng)霜等?；瘜W(xué)成分復(fù)雜或區(qū)別不明顯的寶貝不適用于此分類方式。2相關(guān)知識(shí)5其他分類如果寶貝的特性、結(jié)構(gòu)、重量、顏色、產(chǎn)地、收獲季節(jié)等可區(qū)分

9、清楚,容易進(jìn)行分類,那么也可以采用此類方式進(jìn)行分類。3任務(wù)實(shí)施運(yùn)行Photoshop,執(zhí)行“文件”“新建”菜單命令,在彈出的“新建”對(duì)話框中,命名為“圖片分類區(qū)”,預(yù)設(shè)為“自定”,寬度為780,高度為3 047,分辨率為72,顏色模式為RGB顏色,背景內(nèi)容為白色,設(shè)置完畢后,單擊“確定”按鈕,如圖118所示。 1圖118“新建”對(duì)話框3任務(wù)實(shí)施按快捷鍵Ctrl+R顯示標(biāo)尺,單擊工具箱中的“移動(dòng)”工具,用移動(dòng)工具從標(biāo)尺中拖出若干條水平參考線和垂直參考線,如圖119所示。2圖119拖出參考線3任務(wù)實(shí)施執(zhí)行“文件”“置入嵌入對(duì)象”菜單命令,將“時(shí)尚涼鞋廣告.jpg”圖片文件置入,按快捷鍵Ctrl+T

10、調(diào)整大小并移到適當(dāng)?shù)奈恢?如圖1110所示。3圖1110置入圖片文件3任務(wù)實(shí)施在“圖層”面板中,單擊“創(chuàng)建新圖層”按鈕 ,建立新圖層并重命名為“圖片分類條目”,設(shè)置前景色為#684842,選擇工具箱中的“矩形選框”工具, 按住鼠標(biāo)左鍵拖出一個(gè)矩形選框,按快捷鍵Alt+Delete填充前景色,按Ctrl+D取消選區(qū)。選擇工具箱中的“自定形狀”工具,在該工具選項(xiàng)欄中單擊“形狀圖層”按鈕 ,并在形狀列表中選擇“箭頭9”,顏色為白色,然后在矩形內(nèi)部左側(cè)繪制出一個(gè)白色箭頭,再單擊“文本”工具,輸入文本“時(shí)尚涼鞋”,如圖1111所示。4圖1111繪制圖片分類標(biāo)志3任務(wù)實(shí)施執(zhí)行“文件”“置入嵌入對(duì)象”菜單命

11、令,將“涼鞋01.jpg”圖片文件置入,按快捷鍵Ctrl+T等比例縮小到76%,并移到合適的位置。用同樣的方法置入“涼鞋02.jpg”、“涼鞋03.jpg”、“涼鞋04.jpg”、“涼鞋05.jpg”、“涼鞋06.jpg”,并調(diào)整大小和位置,如圖1112所示。5圖1112置入并排版“時(shí)尚涼鞋”分類區(qū)的所有商品圖片3任務(wù)實(shí)施執(zhí)行“文件”“置入嵌入對(duì)象”菜單命令,將“時(shí)尚休閑男鞋廣告.jpg”圖片文件置入,按快捷鍵Ctrl+T調(diào)整大小并移到適當(dāng)?shù)奈恢?。?fù)制“圖片分類條目”和“形狀1”兩個(gè)圖層,按住Shift鍵,用移動(dòng)工具將兩個(gè)圖層副本的內(nèi)容沿著垂直方向往下移到適當(dāng)?shù)奈恢?再單擊“文本”工具,輸入文

12、本“時(shí)尚休閑男鞋”,如圖1113所示。6圖1113制作第二個(gè)圖片分類區(qū)3任務(wù)實(shí)施按照步驟(5)的方法,置入嵌入對(duì)象“休閑鞋01.jpg”、“休閑鞋02.jpg”、“休閑鞋03.jpg”、“休閑鞋04.jpg”、“休閑鞋05.jpg”、“休閑鞋06.jpg”等圖片文件,并調(diào)整其大小和位置,如圖1114所示。7圖1114置入并排版“時(shí)尚休閑男鞋”分類區(qū)的所有商品圖片3任務(wù)實(shí)施按照步驟(6)和步驟(7)的方法,完成“時(shí)尚真皮男鞋”圖片分類區(qū)的制作,如圖1115所示。8圖1115完成“時(shí)尚真皮男鞋”分類區(qū)3任務(wù)實(shí)施完成上面的操作后,效果圖如圖1116所示。9圖1116效果圖Contents目錄任務(wù)分析

13、1任務(wù)實(shí)施3任務(wù)三 制作商品宣傳圖相關(guān)知識(shí)2任務(wù)分析1 商品圖片是用戶了解商品的第一印象，宣傳圖片不僅要清晰顯現(xiàn)出商品的外觀特征，更要用巧妙的構(gòu)圖給用戶留下深刻的印象，當(dāng)然，文字LOGO和宣傳話語也必不可少。2.事件onload（裝入一個(gè)文檔）：當(dāng)瀏覽器完成裝入一個(gè)窗口或一個(gè)幀集合中所有的幀時(shí)，產(chǎn)生該事件。 onunload（退出一個(gè)文檔）：當(dāng)Web頁面退出時(shí)引發(fā)該事件。 onsubmit（提交一個(gè)表單對(duì)象）：在完成信息輸入，準(zhǔn)備將信息提交給服務(wù)器處理時(shí)發(fā)生該事件。 onReset（重置一個(gè)表單對(duì)象）：當(dāng)一個(gè)表單對(duì)象被提交以及被重置時(shí)，觸發(fā)該事件。 onmousedown（按下鼠標(biāo)）：當(dāng)按下鼠

14、標(biāo)上一個(gè)鍵時(shí)，發(fā)生該事件。 onmousemove（鼠標(biāo)移動(dòng)）：鼠標(biāo)移動(dòng)的時(shí)候發(fā)生該事件。 onmouseover（鼠標(biāo)懸停）：鼠標(biāo)懸停在一個(gè)界面對(duì)象時(shí)發(fā)生該事件。 相關(guān)知識(shí)03040201 1.行為行為是用來動(dòng)態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面效果或是執(zhí)行特定任務(wù)的一種方法。行為是由事件和動(dòng)作構(gòu)成。例如，當(dāng)用戶把鼠標(biāo)移動(dòng)至對(duì)象上（稱：事件），這個(gè)對(duì)象會(huì)發(fā)生預(yù)定義的變化（稱：動(dòng)作）。事件是為大多數(shù)瀏覽器理解的通用代碼，瀏覽器通過釋譯來執(zhí)行動(dòng)作。 一個(gè)事件也可以觸發(fā)許多動(dòng)作，你可以定義它們執(zhí)行的順序。在dreamweaver中有多種事件與動(dòng)作，如圖9-1所示，其中英文字母的是事件，中文的是動(dòng)作。相關(guān)知

15、識(shí)03040201 1.行為相關(guān)知識(shí)03040201圖9-1 行為面板相關(guān)知識(shí)2漸變工具的合理使用，圖像標(biāo)尺的準(zhǔn)確定位布局，圖形選區(qū)的疊加使用，文字工具的使用與相關(guān)設(shè)計(jì)。3任務(wù)實(shí)施運(yùn)行Photoshop,執(zhí)行“文件”“新建”菜單命令,在彈出的“新建”對(duì)話框中,預(yù)設(shè)為“自定”,設(shè)置寬度為640,高度為480,顏色模式為RGB顏色,背景內(nèi)容為白色,設(shè)置完畢后,單擊“確定”按鈕,如圖118所示。1圖11-8 新建文件對(duì)話框 3任務(wù)實(shí)施制作背景漸變效果。設(shè)置背景色為#c3d7dd和前景色為# 94c2e5，利用漸變工具對(duì)底圖進(jìn)行著色，如圖11-9所示。2圖11-9 漸變著色3任務(wù)實(shí)施制作手機(jī)疊放效果。

16、點(diǎn)擊菜單“視圖”，選擇子菜單“標(biāo)尺”，拖拽出一橫一豎兩條輔助線，確定疊放手機(jī)的中心點(diǎn)位置，如圖11-10所示。3圖11-10 標(biāo)尺工具3任務(wù)實(shí)施新建4個(gè)圖層，使用快速選擇工具，分別將4張素材中的手機(jī)選中，拖放到4個(gè)圖層中，如圖11-11所示。4圖11-11 新建四個(gè)手機(jī)層3任務(wù)實(shí)施分別選擇4個(gè)手機(jī)，點(diǎn)擊菜單“編輯”，選擇子菜單“自由變換”，將每個(gè)手機(jī)調(diào)整到統(tǒng)一大小，圍繞中心點(diǎn)一圈，如圖11-12所示。5圖11-12 自由變換手機(jī)3任務(wù)實(shí)施選擇1手機(jī)圖層，利用快速選擇工具確定選區(qū)，換至4手機(jī)圖層中，刪除掉4手機(jī)圖層被遮住部分，如圖11-13所示。6圖11-13 刪除被遮檔部分3任務(wù)實(shí)施制作標(biāo)題文字1及背景，使用圓角矩形（10）選區(qū)建立背景，使用漸變色進(jìn)行填充。使用文字工具鍵入文字，如圖11-14所示7圖11-14 鍵入文字3任務(wù)實(shí)施制作標(biāo)題文字2及背景，使用圓角矩形（30）選區(qū)建立背景，調(diào)整圖層透明度為25%。使用文字工具鍵入文字，如圖11-15所示。8圖11-15 最后效果圖 本項(xiàng)目介紹了淘寶店鋪的基本結(jié)構(gòu),淘寶店鋪主要是由以下幾個(gè)頁面組成的:店鋪首頁、店鋪列表頁、寶貝詳情頁。 經(jīng)驗(yàn)交流:同