《電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作》課件項(xiàng)目一

項(xiàng)目一賞析電子商務(wù)網(wǎng)站能力目標(biāo)：(1)分析電子商務(wù)網(wǎng)站的基本組成。(2)分析電子商務(wù)網(wǎng)站的風(fēng)格和布局。(3)編寫簡(jiǎn)易的電子商務(wù)網(wǎng)站賞析報(bào)告。(4)模仿電子商務(wù)網(wǎng)站進(jìn)行網(wǎng)站的簡(jiǎn)單規(guī)劃設(shè)計(jì)。知識(shí)目標(biāo)：(1)網(wǎng)頁(yè)基礎(chǔ)知識(shí)。(2)網(wǎng)頁(yè)的基本構(gòu)成。(3)網(wǎng)站的構(gòu)成和風(fēng)格設(shè)置。(4)網(wǎng)頁(yè)布局的常用結(jié)構(gòu)。(5)網(wǎng)站的規(guī)劃原理。任務(wù)一賞析企業(yè)形象網(wǎng)站電子商務(wù)網(wǎng)站和網(wǎng)頁(yè)（1）網(wǎng)站：網(wǎng)站是一個(gè)存放在網(wǎng)絡(luò)服務(wù)器上完整信息的集合體。它包含一個(gè)或多個(gè)網(wǎng)頁(yè)，這些網(wǎng)頁(yè)以一定的方式鏈接在一起，成為一個(gè)整體。（2）網(wǎng)頁(yè)：網(wǎng)頁(yè)實(shí)際上是一個(gè)文件，網(wǎng)頁(yè)里可以有文字、圖像、聲音及視頻信息等。（3）首頁(yè)：首頁(yè)也是一個(gè)網(wǎng)頁(yè)，和一般網(wǎng)頁(yè)一樣，可以存放各種信息，同時(shí)又是一個(gè)特殊的網(wǎng)頁(yè)，作為整個(gè)網(wǎng)站的起始點(diǎn)和匯總點(diǎn)。圖1-1京東商城首頁(yè)圖1-2京東商城子頁(yè)任務(wù)一賞析企業(yè)形象網(wǎng)站電子商務(wù)網(wǎng)頁(yè)的界面構(gòu)成網(wǎng)頁(yè)的界面只包含內(nèi)置元素，而不包含窗體元素。以內(nèi)容來劃分，一般的網(wǎng)頁(yè)界面包括網(wǎng)站Logo、導(dǎo)航欄、Banner、內(nèi)容欄和版尾五部分。（1）網(wǎng)站Logo：網(wǎng)站Logo是整個(gè)網(wǎng)站對(duì)外唯一的標(biāo)志，是網(wǎng)站商標(biāo)和品牌的圖形表現(xiàn)。（2）導(dǎo)航欄：導(dǎo)航欄是索引網(wǎng)站內(nèi)容、幫助用戶快速訪問所需內(nèi)容的輔助工具。根據(jù)網(wǎng)站內(nèi)容，一個(gè)網(wǎng)頁(yè)可以設(shè)置多個(gè)導(dǎo)航欄。（3）Banner：Banner的中文意思為旗幟或網(wǎng)幅，是一種可以由文本、圖像和動(dòng)畫相結(jié)合而生成的網(wǎng)頁(yè)欄目。Banner的主要作用是顯示網(wǎng)站的各種廣告。（4）內(nèi)容欄：內(nèi)容欄是網(wǎng)頁(yè)內(nèi)容的主體，通?？梢杂梢粋€(gè)或多個(gè)子欄組成，包含網(wǎng)頁(yè)提供的所有信息和服務(wù)項(xiàng)目。（5）版尾：版尾是整個(gè)網(wǎng)頁(yè)的收尾部分。在這部分內(nèi)容中，可以聲明網(wǎng)頁(yè)的版權(quán)、法律依據(jù)，以及為用戶提供各種提示信息等。任務(wù)一賞析企業(yè)形象網(wǎng)站版尾logo內(nèi)容欄banner導(dǎo)航欄任務(wù)一賞析企業(yè)形象網(wǎng)站電子商務(wù)網(wǎng)頁(yè)的風(fēng)格和布局（1）網(wǎng)頁(yè)的風(fēng)格：在對(duì)網(wǎng)頁(yè)插入各種元素、修飾效果之前，要先確定網(wǎng)頁(yè)的風(fēng)格。網(wǎng)頁(yè)的風(fēng)格是指網(wǎng)站給瀏覽者的整體形象，包括站點(diǎn)的CI(標(biāo)志、色彩和字體)、版面布局、瀏覽方式、交互性、文字、內(nèi)容及網(wǎng)站榮譽(yù)等諸多因素。（2）根據(jù)不同的網(wǎng)頁(yè)風(fēng)格，可以將網(wǎng)頁(yè)分成商業(yè)網(wǎng)頁(yè)和個(gè)人網(wǎng)頁(yè)。商業(yè)網(wǎng)頁(yè)內(nèi)容豐富、信息量大，一般都有統(tǒng)一的布局設(shè)計(jì)。個(gè)人網(wǎng)頁(yè)風(fēng)格多樣、內(nèi)容專一、形式靈活，更容易創(chuàng)造出美感。（3）國(guó)字型布局模式：這是一個(gè)形象的說法，就是指頁(yè)面上下各有一個(gè)廣告條，左側(cè)是主菜單，右側(cè)是友情鏈接等，中間是主要內(nèi)容。這種布局的優(yōu)點(diǎn)是頁(yè)面充實(shí)、內(nèi)容豐富、信息量大，是綜合性網(wǎng)站常用的版式。（4）“T”結(jié)構(gòu)布局。所謂“T”結(jié)構(gòu)，就是指網(wǎng)頁(yè)上邊和下邊相結(jié)合，頁(yè)面頂部為橫條網(wǎng)站標(biāo)志和廣告條，下方的左側(cè)為主菜單，右側(cè)顯示內(nèi)容的布局。這是網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用最廣泛的一種布局方式。任務(wù)一賞析企業(yè)形象網(wǎng)站靈活的網(wǎng)頁(yè)布局（1）分割屏幕類型（2）去界面化類型（3）基于模塊或網(wǎng)格類型

（4）一屏布局類型

任務(wù)一賞析企業(yè)形象網(wǎng)站電子商務(wù)網(wǎng)頁(yè)的基本構(gòu)成元素（1）文本：網(wǎng)頁(yè)內(nèi)容是網(wǎng)站的靈魂，網(wǎng)頁(yè)中的信息以文本為主。（2）圖像：圖像在網(wǎng)頁(yè)中具有提供信息、展示形象、裝飾網(wǎng)頁(yè)、表達(dá)個(gè)人情趣和風(fēng)格的作用。（3）超鏈接：超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片、一個(gè)電子郵件地址、一個(gè)文件，甚至是一個(gè)應(yīng)用程序。（4）動(dòng)畫：動(dòng)畫具有很強(qiáng)的視覺沖擊力和聽覺沖擊力，可以有效地吸引瀏覽者的注意力。（5）聲音與視頻：聲音和視頻是多媒體網(wǎng)頁(yè)的一個(gè)重要組成部分。用于網(wǎng)絡(luò)的聲音文件的格式非常多，常用的有MIDI,WAV,MP3和AIF等。視頻文件的格式也非常多，常見的有ASF，WMV，RM等。（6）表格：表格通常使用表格來控制網(wǎng)頁(yè)中信息的布局方式。（7）表單：表單是網(wǎng)頁(yè)中實(shí)現(xiàn)交互功能的主要元素。網(wǎng)頁(yè)中的表單通常用來接收瀏覽者在瀏覽器端的輸入，然后將這些信息發(fā)送到設(shè)計(jì)者設(shè)置的目標(biāo)端。任務(wù)二賞析電子商務(wù)商城網(wǎng)站“京東商城”的版面布局大致是“同字形”或者“左拐角形”結(jié)構(gòu)。色調(diào)為喜慶的紅色?！熬〇|商城”的頂端部分由網(wǎng)站、導(dǎo)航條以及方便訪問者搜索相關(guān)信息的搜索欄構(gòu)成。中間主體部分是商品促銷信息區(qū)，由自動(dòng)輪換的促銷活動(dòng)圖像或者動(dòng)畫組成。在主體部分右邊列表中，常設(shè)置相關(guān)的暢銷排行榜、特賣活動(dòng)信息、品牌直通車等。在底部，除了常見的網(wǎng)上購(gòu)物商城版權(quán)信息等外還有“購(gòu)物指南”、“配送方式”、“支付方式”、“售后服務(wù)”等解決訪問者購(gòu)物疑問的欄目信息。任務(wù)二賞析電子商務(wù)商城網(wǎng)站該網(wǎng)站的布局結(jié)構(gòu)和京東商城類似，便于消費(fèi)者查找的搜索欄也放在頁(yè)面頂部導(dǎo)航欄上方或者下方的顯著位置，“購(gòu)物車”也會(huì)放置在右側(cè)頂部顯著的位置。主體部分從左到右依次為分類列表區(qū)、相關(guān)信息動(dòng)態(tài)區(qū)，促銷宣傳區(qū)、櫥窗展示區(qū)等。在主頁(yè)底部，有常見的“購(gòu)物資訊”、“支付方式”、“幫助和購(gòu)物指南”等欄目。二級(jí)頁(yè)面包括主商品的介紹、規(guī)格、用戶評(píng)價(jià)等。任務(wù)二賞析電子商務(wù)商城網(wǎng)站（1）淘寶網(wǎng)和傳統(tǒng)網(wǎng)上商城不一樣，它更像個(gè)平臺(tái)，為商品在線交易的平臺(tái)，但整體結(jié)構(gòu)還是和商城相近。淘寶網(wǎng)由于商品眾多，分類工作是重中之重，除了左側(cè)分類列表區(qū)進(jìn)行初步分類外，更為詳細(xì)的商品分類列表占據(jù)了頁(yè)面主體的主要部分，取代了其他商城站常見的櫥窗展示區(qū)。（2）淘寶網(wǎng)中某件商品的二級(jí)頁(yè)面和商城商品的二級(jí)頁(yè)面類似。淘寶網(wǎng)除了這樣的二級(jí)頁(yè)面外，還不斷生成以某個(gè)主題匯集起來的各類相關(guān)商品的促銷活動(dòng)推廣頁(yè)面。這類頁(yè)面的數(shù)量和更新程度均要遠(yuǎn)遠(yuǎn)高于京東商城、蘇寧網(wǎng)等類似的商城網(wǎng)站。任務(wù)二賞析電子商務(wù)商城網(wǎng)站網(wǎng)上購(gòu)物商城布局分析：（1）網(wǎng)上購(gòu)物商城的最主要的特色是在主頁(yè)會(huì)有很大篇幅來顯示分類列表，一般位于部分的左側(cè)邊欄，有些商城類目非常豐富，如淘寶網(wǎng)，分類列表則占用主體部分的主要位置。分類列表的作用如同傳統(tǒng)商場(chǎng)中的導(dǎo)購(gòu)牌，將購(gòu)物商場(chǎng)中的商品分門別類，這樣可以方便訪問者找到需要的商品。（2）網(wǎng)站的布局因?yàn)楹头诸惲斜韰^(qū)域結(jié)合，也大多采用“左拐角形”布局，主頁(yè)的中間是活動(dòng)促銷信息，下面往往是櫥窗展示區(qū)，而在底部則是該網(wǎng)站的問題解答。（3）商城網(wǎng)站的二級(jí)頁(yè)面一般是具體某樣商品的描述頁(yè)面，結(jié)構(gòu)和主頁(yè)類似，首先是該商品的多個(gè)展示圖片，然后圖的右側(cè)是該商品的名稱、規(guī)格、運(yùn)費(fèi)、價(jià)格、付款方式等。之后是“加入購(gòu)物車”、“立刻購(gòu)買”和“加入收藏”等處理該商品方式的按鈕。商品下面往往帶有商品評(píng)價(jià)等內(nèi)容。（4）商城頁(yè)面的底部一般是常見問答、友情鏈接、網(wǎng)站版權(quán)、備案等信息。任務(wù)二賞析電子商務(wù)商城網(wǎng)站策劃網(wǎng)站建設(shè)（1）網(wǎng)站策劃在網(wǎng)站建設(shè)前期，要進(jìn)行市場(chǎng)分析，然后總結(jié)形成書面報(bào)告，即網(wǎng)站策劃書。（2）行業(yè)定位分析客戶的所屬行業(yè)是很重要的，一般會(huì)依據(jù)所屬行業(yè)大體來定位網(wǎng)站的風(fēng)格。（3）色調(diào)色調(diào)是指一幅作品色彩的基本傾向。（4）網(wǎng)頁(yè)風(fēng)格每個(gè)行業(yè)、每個(gè)客戶都有自己的喜好與偏愛，風(fēng)格是指站點(diǎn)的整體形象給瀏覽者的綜合感受。（5）導(dǎo)航網(wǎng)站導(dǎo)航是將網(wǎng)站的層次結(jié)構(gòu)以一種有條理的方式清晰展示，讓用戶在瀏覽網(wǎng)