《電商網(wǎng)站案例分析》PPT課件

《《電商網(wǎng)站案例分析》PPT課件》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、第九章電子商務(wù)網(wǎng)站案例分析第一節(jié)“淘寶網(wǎng)”案例分析第二節(jié)“易萬(wàn)貝”電子商務(wù)網(wǎng)站案例分析第三節(jié)“尚志都市商城”電子商務(wù)網(wǎng)站案例分析一、總體結(jié)構(gòu)設(shè)計(jì)在線(xiàn)交易商品展示用戶(hù)管理三大模塊“尚志都市”網(wǎng)站整體效果如圖9.27所示。網(wǎng)站總體業(yè)務(wù)流程如圖9.28所示。二、版式規(guī)劃該網(wǎng)站屬于典型的T型版式結(jié)構(gòu)，其構(gòu)成如圖9.29所示。三、頭部設(shè)計(jì)圖9.30網(wǎng)站標(biāo)志（Logo）1．標(biāo)志（Logo）與網(wǎng)站標(biāo)題設(shè)計(jì)（如圖9.30所示）網(wǎng)站設(shè)計(jì)者是怎么構(gòu)思的？在構(gòu)思設(shè)計(jì)上從功用性、識(shí)別性、藝術(shù)性三大方面進(jìn)行了綜合考慮。（2）網(wǎng)站設(shè)計(jì)者是怎么制作的？在一體化的網(wǎng)站標(biāo)志（Logo

2、）的設(shè)計(jì)上，網(wǎng)站設(shè)計(jì)者遵循了標(biāo)志（Logo）設(shè)計(jì)的三大原則；在制作上使用了以下方法：①圖形標(biāo)志采用了該公司的企業(yè)標(biāo)志，通過(guò)掃描處理后供使用。②在工具上，利用了PhotoShop圖像處理軟件，將公司圖標(biāo)、公司名稱(chēng)和網(wǎng)址進(jìn)行了組合處理。2．標(biāo)語(yǔ)（Banner）的設(shè)計(jì)該網(wǎng)站由于在主體正中居上的位置做了大幅廣告“網(wǎng)上開(kāi)店，贈(zèng)送網(wǎng)站”，所以省略了頭部的標(biāo)語(yǔ)（Banner），在設(shè)計(jì)時(shí)一定要注意，頭部的設(shè)計(jì)要與整體搭配和諧、自然統(tǒng)一。3．導(dǎo)航設(shè)計(jì)4．其他功能設(shè)計(jì)四、欄目設(shè)計(jì)（1）設(shè)計(jì)者是怎么構(gòu)思的？每一個(gè)電子商務(wù)網(wǎng)站都有一個(gè)會(huì)員注冊(cè)與登錄模塊，而且其位置一般都是在

3、左上部。該網(wǎng)站遵循了這一規(guī)律，由于網(wǎng)站剛編制出來(lái)，處在運(yùn)營(yíng)初期，在最主要位置為本網(wǎng)站進(jìn)行廣告宣傳是明智之舉，而“免費(fèi)開(kāi)店”及“支付寶”則是在線(xiàn)交易的兩大重要模塊，均在此位置予以設(shè)置。1．T型上部的設(shè)計(jì)（2）設(shè)計(jì)者是怎么制作的？該部分以藍(lán)色為主，采用Photoshop圖像處理工具，其大體步驟如下：①啟動(dòng)Photoshop，新建文件，并將背景設(shè)為從藍(lán)到白的漸變；②左側(cè)加入用Photoshop設(shè)計(jì)成購(gòu)物車(chē)造型；中間預(yù)留了動(dòng)畫(huà)區(qū)，右側(cè)上方加一張表格，用于一些產(chǎn)品鏈接，下邊則為開(kāi)店入口及支付寶區(qū)。③然后用Photoshop將相關(guān)的圖標(biāo)及文字加入即可，這在第五章

4、已經(jīng)有詳細(xì)介紹，在此不贅述。2．產(chǎn)品分類(lèi)欄目的設(shè)計(jì)（1）設(shè)計(jì)者是怎么構(gòu)思的？產(chǎn)品分類(lèi)欄目，即網(wǎng)上商城的產(chǎn)品目錄，如圖9.36所示。分類(lèi)全面、層次清晰是本欄目的最大特點(diǎn)，在顏色上，選擇了類(lèi)別標(biāo)題用紅色，類(lèi)別內(nèi)容用黑色，標(biāo)準(zhǔn)的12像素宋體字。整體效果相當(dāng)簡(jiǎn)潔，把繁雜的類(lèi)別清晰醒目地展現(xiàn)出來(lái)。（2）設(shè)計(jì)者是怎么制作的？該部分制作十分簡(jiǎn)單，只有欄目標(biāo)題處用了一個(gè)圖像，其他部分全部是純文字，只要在Dreamweaver中先進(jìn)行排版，然后設(shè)置CSS樣式，對(duì)行間距進(jìn)行規(guī)范即可。3．推薦產(chǎn)品與最新上架欄目（如圖9.37所示）（1）設(shè)計(jì)者是怎么構(gòu)思的？目前，商品展示類(lèi)

5、電子商務(wù)網(wǎng)站，都是以圖片加文字的形式進(jìn)行說(shuō)明（如圖9.37所示），本網(wǎng)站的“推薦產(chǎn)品”及“最新上架”均屬于商品展示類(lèi)，標(biāo)準(zhǔn)的75×75像素圖像，為了更整齊劃一，還特別加了一個(gè)淺灰色的細(xì)線(xiàn)外框。紅色的欄目標(biāo)題上面還用了一條橘黃色的線(xiàn)條，引人注目的同時(shí)，更顯生動(dòng)活潑。（2）設(shè)計(jì)者是怎么制作的？在網(wǎng)頁(yè)制作前，準(zhǔn)備好所有商品圖片，并對(duì)每一個(gè)商品圖片進(jìn)行簡(jiǎn)單處理，使其正好能放在75×75像素的外框中。在DreamWeaver中以表格的方式排版，同時(shí)，在網(wǎng)站代碼中，實(shí)現(xiàn)對(duì)圖片的更換。（1）編寫(xiě)者是怎么構(gòu)思的如圖9.38所示，是圖9.27所示的網(wǎng)站整體效果右側(cè)的四

6、個(gè)欄目之一，風(fēng)格一致，制作方法統(tǒng)一。（2）編寫(xiě)者是怎么制作的這四個(gè)欄目的制作十分簡(jiǎn)單，與產(chǎn)品分類(lèi)基本相同，在此不復(fù)述。五、尾部設(shè)計(jì)六、子頁(yè)面設(shè)計(jì)1．設(shè)計(jì)者是怎么構(gòu)思的“尚志都市商城”的所有子頁(yè)面都是通過(guò)后臺(tái)編程自動(dòng)生成的。在設(shè)計(jì)時(shí)，對(duì)各子頁(yè)面均編寫(xiě)了模板，各子頁(yè)面根據(jù)各自的內(nèi)容，利用模板生成不同的頁(yè)面。而模板則是根據(jù)模板制定的一般方法，利用商城的首頁(yè)內(nèi)容改寫(xiě)而成。模板的不可編輯部分，即頭部與尾部均是商城首頁(yè)內(nèi)容。這樣的設(shè)計(jì)保持了整個(gè)網(wǎng)站風(fēng)格一致。2．設(shè)計(jì)者是怎么制作的模板設(shè)計(jì)和制作模板設(shè)計(jì)和制作經(jīng)過(guò)以下幾個(gè)步驟（具體操作請(qǐng)見(jiàn)作者網(wǎng)站視頻教程）：①啟動(dòng)

7、DreamWeaver，調(diào)入網(wǎng)站首頁(yè)index.asp；②將網(wǎng)站首頁(yè)中間部分刪除，在體部只留一個(gè)與頭部及尾部等寬的空表格；③將頭部與體部均設(shè)置為不可編輯區(qū)，將體部設(shè)置為可編輯區(qū)，如圖9.40所示；④另存為模板，名稱(chēng)為SZMB即可。描紅臨摹創(chuàng)作網(wǎng)站開(kāi)發(fā)高手成長(zhǎng)的三個(gè)階段“尚志都市商城”整體版面是如何排出來(lái)的