第2章 電子商務(wù)網(wǎng)站規(guī)劃設(shè)計(jì)

北京大學(xué)出版社電子商務(wù)網(wǎng)站建設(shè)第2章電子商務(wù)網(wǎng)站規(guī)劃設(shè)計(jì)本章知識(shí)結(jié)構(gòu)框圖學(xué)習(xí)激勵(lì)案例導(dǎo)航電子商務(wù)網(wǎng)絡(luò)規(guī)劃基礎(chǔ)基本概念網(wǎng)站建設(shè)基礎(chǔ)導(dǎo)航及目錄設(shè)計(jì)計(jì)網(wǎng)站3種內(nèi)容遵循5個(gè)原則3個(gè)注意事項(xiàng)欄目規(guī)劃準(zhǔn)則欄目設(shè)計(jì)策略常用欄目功導(dǎo)航作用設(shè)計(jì)、原則、分類(lèi)、表現(xiàn)形式導(dǎo)航常用內(nèi)容目錄建立7個(gè)原則5個(gè)步驟版式及風(fēng)格設(shè)計(jì)模式版面布局基礎(chǔ)兩類(lèi)常用版式布局4大原則色彩搭配方法文字使用技巧網(wǎng)站規(guī)劃的必要性網(wǎng)站規(guī)劃6項(xiàng)任務(wù)網(wǎng)站建設(shè)3個(gè)流程網(wǎng)站規(guī)劃5種方法馬云與他的阿里巴巴本章知識(shí)要點(diǎn)學(xué)習(xí)方法本章知識(shí)要點(diǎn)1．電子商務(wù)網(wǎng)站規(guī)劃的基本理論；2．網(wǎng)站內(nèi)容及欄目設(shè)計(jì)方法；3．導(dǎo)航及目錄設(shè)計(jì)方法；4．版式及風(fēng)格設(shè)計(jì)。本章學(xué)習(xí)方法

熟讀唐詩(shī)三百詩(shī)，不會(huì)作詩(shī)也會(huì)吟。大量觀察各類(lèi)網(wǎng)站；從中悟出規(guī)律是本章學(xué)習(xí)的最佳方法，也是入門(mén)的唯一捷徑。學(xué)習(xí)激勵(lì)與案例導(dǎo)航亞馬遜Ebay(易趣)阿里巴巴馬云全球最大的電子商務(wù)網(wǎng)站誰(shuí)是下一個(gè)世界首富？比爾蓋茨說(shuō)：亞洲的馬云。2.1電子商務(wù)網(wǎng)站規(guī)劃的基本理論一、電子商務(wù)網(wǎng)站制作流程概述電子商務(wù)網(wǎng)站規(guī)劃的意義

指導(dǎo)每一個(gè)操作步驟網(wǎng)站成功的有力保障有效利用時(shí)間、提高制作效率便于團(tuán)隊(duì)合作，協(xié)同完成保障網(wǎng)站的科學(xué)性、嚴(yán)謹(jǐn)性2.1.2網(wǎng)站規(guī)劃的任務(wù)1．明晰網(wǎng)站建設(shè)的流程具體要解決以下三個(gè)任務(wù)?

（1）網(wǎng)站制作有哪些流程（2）每一個(gè)流程由誰(shuí)來(lái)完成。（3）每一項(xiàng)內(nèi)容何時(shí)完成。2．確定網(wǎng)站的目的、功能為什么要建立網(wǎng)站，為了宣傳產(chǎn)品，還是要進(jìn)行網(wǎng)上交易？做本企業(yè)網(wǎng)站，還是建立行業(yè)性網(wǎng)站？為了企業(yè)日常任務(wù)需要，還是市場(chǎng)開(kāi)拓的延伸？根據(jù)公司的需要和網(wǎng)站建設(shè)計(jì)劃，確定網(wǎng)站的整體功能。目的確定，功能明晰，為后繼工作掌握好方向，此后的工作才能順暢進(jìn)行。3．確定網(wǎng)站的技術(shù)解決方案網(wǎng)站技術(shù)解決方案（1）服務(wù)器的選用

（2）服務(wù)器平臺(tái)選型

（3）開(kāi)發(fā)技術(shù)選型

（4）數(shù)據(jù)庫(kù)選型

4．對(duì)網(wǎng)站內(nèi)容進(jìn)行總體規(guī)劃規(guī)劃時(shí)要解決網(wǎng)站有哪些欄目的問(wèn)題規(guī)劃時(shí)要解決每個(gè)欄目都有什么內(nèi)容的問(wèn)題+內(nèi)容規(guī)劃

5．確定網(wǎng)頁(yè)設(shè)計(jì)方案

網(wǎng)站規(guī)劃時(shí)，還要確定網(wǎng)頁(yè)的設(shè)計(jì)方案，明確每一個(gè)頁(yè)面的設(shè)計(jì)方案。包括版式設(shè)計(jì)，目錄設(shè)計(jì)，導(dǎo)航設(shè)計(jì)及風(fēng)格設(shè)計(jì)等。實(shí)際實(shí)施制作的技術(shù)人員取得該方案后，可以快速按照指定的要求進(jìn)行制作。6．制定網(wǎng)站后期的運(yùn)營(yíng)、維護(hù)、管理、安全方案對(duì)網(wǎng)站制作完成后的運(yùn)營(yíng)方案、維護(hù)計(jì)劃、管理體系、安全防范等都要進(jìn)行統(tǒng)一規(guī)劃，這是網(wǎng)站規(guī)劃的一項(xiàng)重要任務(wù)，也是網(wǎng)站規(guī)劃中不可缺少的一個(gè)有機(jī)組成部分。

2.1.3網(wǎng)站建設(shè)的流程1、規(guī)劃設(shè)計(jì)

2、實(shí)施制作

3、發(fā)布維護(hù)

1、規(guī)劃設(shè)計(jì)

確定主題規(guī)劃分析收集資料撰寫(xiě)網(wǎng)站規(guī)劃書(shū)整體規(guī)劃、系統(tǒng)分析文字、圖片、影音素材考慮周全、切實(shí)可行市場(chǎng)分析建設(shè)網(wǎng)站目的網(wǎng)站功能定位技術(shù)解決方案網(wǎng)站內(nèi)容規(guī)劃網(wǎng)頁(yè)設(shè)計(jì)方案網(wǎng)站維護(hù)計(jì)劃……2.1.3網(wǎng)站建設(shè)的流程1、規(guī)劃設(shè)計(jì)

2、實(shí)施制作

版面設(shè)計(jì)編輯排版后臺(tái)功能實(shí)現(xiàn)代碼整合PhotoshopDreamWeaver前臺(tái)美工2.1.3網(wǎng)站建設(shè)的流程1、規(guī)劃設(shè)計(jì)

2、實(shí)施制作

網(wǎng)站測(cè)試上傳發(fā)布日常維護(hù)網(wǎng)站空間內(nèi)容維護(hù)、版面維護(hù)

功能測(cè)試3、發(fā)布維護(hù)

鏈接測(cè)試流量壓力測(cè)試響應(yīng)時(shí)間測(cè)試2.1.3網(wǎng)站建設(shè)的流程2.1.4電子商務(wù)網(wǎng)站規(guī)劃的常用方法1．調(diào)查法調(diào)查法包括市場(chǎng)調(diào)查用戶調(diào)查

受眾群體調(diào)查

所謂網(wǎng)站規(guī)劃的調(diào)查法，就是通過(guò)市場(chǎng)調(diào)查、用戶調(diào)查、受眾群體調(diào)查，進(jìn)行網(wǎng)站規(guī)劃的一種方法。2．參照法參照法就是指網(wǎng)站規(guī)劃時(shí)大量參照同類(lèi)網(wǎng)站、學(xué)習(xí)同類(lèi)網(wǎng)站，形成自己的規(guī)劃方案的一種規(guī)劃方法。（1）上網(wǎng)瀏覽大量同類(lèi)網(wǎng)站，重點(diǎn)查看各網(wǎng)站的功能；（2）總結(jié)各網(wǎng)站的功能特點(diǎn)，將各網(wǎng)站的功能列在紙上；（3）將各網(wǎng)站的功能與自己原有設(shè)想對(duì)比；（4）結(jié)合自己實(shí)際需要，對(duì)各網(wǎng)站的功能進(jìn)行取精去粗，完成網(wǎng)站功能規(guī)劃。3．手繪法手繪法是將網(wǎng)站的規(guī)劃用手繪的方式進(jìn)行表現(xiàn)的一種方法。步驟1：打開(kāi)并分析你所在大學(xué)校園網(wǎng)站步驟2：梳理你曾經(jīng)就讀的中學(xué)基本情況；步驟3：畫(huà)出網(wǎng)站整體輪廓；【操作實(shí)例2-2】規(guī)劃步驟

步驟4：分別對(duì)頭部、尾部進(jìn)行規(guī)劃繪制；步驟5：對(duì)體部進(jìn)行規(guī)劃繪制。4．軟件規(guī)劃法軟件規(guī)劃法是指用Word、Photoshop、Firework等軟件進(jìn)行頁(yè)面規(guī)劃的方法?！静僮鲗?shí)例2-3】用軟件規(guī)劃法規(guī)劃一個(gè)以個(gè)人求職為主題的網(wǎng)站首頁(yè)為體會(huì)。步驟2：?jiǎn)?dòng)Word軟件；步驟1：通過(guò)上網(wǎng)查找，結(jié)合自身情況確定個(gè)人主頁(yè)的布局步驟3：進(jìn)行頭部規(guī)劃。上網(wǎng)查找與自己創(chuàng)意相符合的網(wǎng)站頭部，參照制作或復(fù)制到Word中；步驟4：進(jìn)行體部規(guī)劃。對(duì)體部的每一部分內(nèi)容進(jìn)行設(shè)計(jì)，可以不斷地上網(wǎng)查找相關(guān)資料；步驟5：對(duì)尾部進(jìn)行規(guī)劃。5．移花接木法移花接木法就是對(duì)網(wǎng)站的每個(gè)細(xì)節(jié)部分都在網(wǎng)上找到與自己設(shè)想比較一致的樣例，然后將網(wǎng)上樣例通過(guò)截圖軟件保存下來(lái)，并粘貼到自己的規(guī)劃圖上。1、在百渡中檢索相關(guān)網(wǎng)站，如“網(wǎng)上書(shū)店”。操作步驟為某書(shū)店設(shè)計(jì)一個(gè)電子商務(wù)網(wǎng)站題目2、查看網(wǎng)站的頭部，找到合適的用抓圖工具截下，放到

Word中。3、查看網(wǎng)站體部的每一個(gè)模塊及尾部，用抓圖工具截下，放到Word中。2.2電子商務(wù)網(wǎng)站頁(yè)面內(nèi)容及欄目設(shè)計(jì)2.2.1電子商務(wù)網(wǎng)站頁(yè)面應(yīng)該包括的內(nèi)容4、最后用WORD組合成一個(gè)完整的頁(yè)面，形成了整體網(wǎng)站的構(gòu)思。齊齊哈爾旅游網(wǎng)網(wǎng)站體部網(wǎng)站頭部網(wǎng)站尾部頭部?jī)?nèi)容體部?jī)?nèi)容尾部?jī)?nèi)容網(wǎng)站標(biāo)識(shí)標(biāo)題廣告條分類(lèi)導(dǎo)航與檢索LogoTitleBannerMenuSearchBanner規(guī)格全幅半幅垂直寬型小型486x60234x60120x240728x9088x31頭部?jī)?nèi)容體部?jī)?nèi)容尾部?jī)?nèi)容網(wǎng)站標(biāo)識(shí)標(biāo)題廣告條分類(lèi)導(dǎo)航與檢索LogoTitleBannerMenuSearch用戶注冊(cè)與登陸各類(lèi)欄目相關(guān)站點(diǎn)鏈接LoginLinks版權(quán)聲明管理入口聯(lián)系方式CopyRight2.2.2電子商務(wù)網(wǎng)站內(nèi)容設(shè)計(jì)遵循的原則相關(guān)性真實(shí)性動(dòng)態(tài)性準(zhǔn)確性圖像替代以主題為主線展開(kāi)內(nèi)容設(shè)計(jì)對(duì)內(nèi)容要嚴(yán)格把關(guān)

隨時(shí)進(jìn)行修改和更新

尤其是報(bào)價(jià)、庫(kù)存

適中地使用圖像代替文本2.2.3網(wǎng)站內(nèi)容收集的注意事項(xiàng)注意事項(xiàng)文責(zé)自負(fù)

材料電子版

發(fā)送途徑選擇問(wèn)題

2.2.4欄目規(guī)劃概述1．什么是網(wǎng)站的欄目?網(wǎng)站的欄目是指網(wǎng)站內(nèi)容的提綱，是網(wǎng)站內(nèi)容的大綱索引。其功能是將網(wǎng)站的所有內(nèi)容都分門(mén)別類(lèi)，利用欄目將網(wǎng)站的主體明確顯示出來(lái)。如果將網(wǎng)站比做一本書(shū)，那么書(shū)中的每章就是一個(gè)欄目。一緊扣主題的原則

二精簡(jiǎn)的原則

三四提綱挈領(lǐng)的原則

凸顯特色

2．網(wǎng)站欄目規(guī)劃的原則2.2.5欄目規(guī)劃策略分類(lèi)法參照法+1．欄目規(guī)劃的常用方法所謂分類(lèi)法，就是將欲在網(wǎng)站展示的所有資料進(jìn)行分門(mén)別類(lèi)，每一個(gè)類(lèi)別形成一個(gè)欄目。

所謂參照法，就是參照同類(lèi)網(wǎng)站所設(shè)置的欄目，結(jié)合實(shí)際需要進(jìn)行欄目設(shè)置的方法2．欄目規(guī)劃的技巧設(shè)置自己的欄目，具體方法是：（1）所有同類(lèi)網(wǎng)站都有的欄目，你一定要有；（2）70%以上同類(lèi)網(wǎng)站都有的欄目你不妨也加上；（3）如果有些欄目只有50%網(wǎng)站具有，這類(lèi)欄目，你要詢問(wèn)客戶的意見(jiàn)后，再?zèng)Q定是否采用此欄目；（4）有些欄目只有50%以下網(wǎng)站擁有，這時(shí)要注意了，這類(lèi)欄目一是用處不大的欄目，二是特色欄目，你要根據(jù)情況再三斟酌，而后決定。3．欄目的表現(xiàn)形式純文字表現(xiàn)法

圖形化的表現(xiàn)法

純文字表現(xiàn)法

圖形化的表現(xiàn)法

3．欄目的表現(xiàn)形式純文字表現(xiàn)法

圖形化的表現(xiàn)法

3．欄目的表現(xiàn)形式2.2.6電子商務(wù)網(wǎng)站常用欄目1．網(wǎng)上商城常用欄目2．工業(yè)企業(yè)常用欄目3．其他常用欄目1．網(wǎng)上商城常用欄目2．工業(yè)企業(yè)常用欄目3．其他常用欄目2.2.6電子商務(wù)網(wǎng)站常用欄目281．網(wǎng)上商城常用欄目2．工業(yè)企業(yè)常用欄目3．其他常用欄目2.2.6電子商務(wù)網(wǎng)站常用欄目1．網(wǎng)上商城常用欄目2．工業(yè)企業(yè)常用欄目3．其他常用欄目2.2.6電子商務(wù)網(wǎng)站常用欄目2.2.7阿里巴巴網(wǎng)站內(nèi)容分析案例分析LOGO(含標(biāo)題）宣傳標(biāo)語(yǔ)產(chǎn)品檢索分類(lèi)導(dǎo)航1、頭部?jī)?nèi)容案例分析2、體部?jī)?nèi)容（1）資訊欄目2.2.7阿里巴巴網(wǎng)站內(nèi)容分析2.2.7阿里巴巴網(wǎng)站內(nèi)容分析案例分析（2）社區(qū)欄目（1）資訊欄目2、體部?jī)?nèi)容2.2.7阿里巴巴網(wǎng)站內(nèi)容分析案例分析（2）社區(qū)欄目（1）資訊欄目2、體部?jī)?nèi)容（3）交易欄目案例分析3、尾部?jī)?nèi)容2.2.7阿里巴巴網(wǎng)站內(nèi)容分析2.3電子商務(wù)網(wǎng)站導(dǎo)航及目錄設(shè)計(jì)1．導(dǎo)航的作用

2．導(dǎo)航設(shè)計(jì)原則每個(gè)網(wǎng)頁(yè)中應(yīng)有一個(gè)指向主頁(yè)的鏈接美觀大方，而且要高效易用。既直接又簡(jiǎn)單向?qū)?.3.2導(dǎo)航分類(lèi)全局導(dǎo)航局部導(dǎo)航主要欄目一級(jí)目錄出現(xiàn)在網(wǎng)站的每頁(yè)上次要欄目二級(jí)以上目錄快捷導(dǎo)航

相關(guān)導(dǎo)航2.3.3電子商務(wù)網(wǎng)站導(dǎo)航欄設(shè)計(jì)方法純文字表現(xiàn)法圖片表現(xiàn)法優(yōu)點(diǎn)：顯示速度快缺點(diǎn)：視覺(jué)效果差優(yōu)點(diǎn)：視覺(jué)效果好缺點(diǎn)：顯示速度慢1、電子商務(wù)網(wǎng)站導(dǎo)航欄的表現(xiàn)形式首頁(yè)簡(jiǎn)介類(lèi)如：?jiǎn)挝桓艣r、企業(yè)簡(jiǎn)介、走進(jìn)企業(yè)如：產(chǎn)品介紹如：論壇、留言板2、電子商務(wù)網(wǎng)站導(dǎo)航欄的常見(jiàn)內(nèi)容展示類(lèi)社區(qū)類(lèi)2.3.3電子商務(wù)網(wǎng)站導(dǎo)航欄設(shè)計(jì)方法（1）確定導(dǎo)航內(nèi)容。

（2）確定導(dǎo)航表現(xiàn)形式

（3）確定導(dǎo)航實(shí)現(xiàn)方法

3.電子商務(wù)網(wǎng)站導(dǎo)航欄的設(shè)計(jì)步驟步驟2.3.4、電子商務(wù)網(wǎng)站目錄設(shè)計(jì)概述網(wǎng)站目錄是指建立網(wǎng)站時(shí)創(chuàng)建的目錄，用于存放網(wǎng)站中所有的圖片、網(wǎng)頁(yè)、數(shù)據(jù)庫(kù)等文件。站點(diǎn)本身的維護(hù)、未來(lái)的擴(kuò)充和移植有著重要的影響。原則：（1）分類(lèi)存放、分別建立目錄分門(mén)別類(lèi)，有序存放（2）目錄的層次不要太深不超過(guò)3層（3）根目錄下不要存放所有文件主頁(yè)文件、流量統(tǒng)計(jì)的文本文件（4）根據(jù)欄目?jī)?nèi)容建立子目錄（5）在每個(gè)主欄目子目錄下都建立獨(dú)立的images目錄（6）不要使用中文目錄（7）不要使用過(guò)長(zhǎng)的目錄影響檢索速度2.3.5網(wǎng)站目錄建設(shè)的步驟及方法

1.建立一個(gè)用于存放網(wǎng)站的總目錄2.進(jìn)入此網(wǎng)站目錄，展開(kāi)網(wǎng)站目錄的建設(shè)工作3.在網(wǎng)站的根目錄下建立一個(gè)Images子目錄存放首頁(yè)圖像文件4.在網(wǎng)站的根目錄下建立一個(gè)style子目錄存放樣式表文件5.在網(wǎng)站的根目錄為每一個(gè)欄目建立對(duì)應(yīng)子目錄，每個(gè)子目錄下建立Images子目錄存放子頁(yè)面圖像文件如：MyWeb2.3.6案例：敦煌網(wǎng)的目錄結(jié)構(gòu)動(dòng)手制作1．敦煌網(wǎng)的LOGO及導(dǎo)航欄

動(dòng)手制作2．敦煌網(wǎng)的目錄結(jié)構(gòu)設(shè)計(jì)

首頁(yè)圖像文件目錄樣式文件目錄我的Dhgate欄目我的Dhgate的圖像文件夾

功能與服務(wù)欄目

功能與服務(wù)的圖像文件夾

熱門(mén)求購(gòu)欄目

外貿(mào)通欄目

熱門(mén)求購(gòu)的圖象文件夾

外貿(mào)通的圖像文件夾

2.3.6案例：敦煌網(wǎng)的目錄結(jié)構(gòu)2.4電子商務(wù)網(wǎng)站版式及風(fēng)格設(shè)計(jì)2.4.1版面布局的基礎(chǔ)左上角、頁(yè)面頂部分辨率確定內(nèi)容與放置位置

1280X10241024X768800X600高度寬度隨意上部下部左側(cè)右側(cè)輕快、積極壓抑、穩(wěn)定輕便、自由局促、莊重2.4.2網(wǎng)頁(yè)的常用版式左右結(jié)構(gòu)布局左中右結(jié)構(gòu)布局上下結(jié)構(gòu)布局1、結(jié)構(gòu)化布局2、藝術(shù)化布局20%—30%70%—80%菜單用戶登錄流量統(tǒng)計(jì)聯(lián)系方式主體內(nèi)容左右結(jié)構(gòu)布局左中右結(jié)構(gòu)布局上下結(jié)構(gòu)布局1、結(jié)構(gòu)化布局2、藝