網(wǎng)站設(shè)計(jì)與開發(fā)第三章課件

網(wǎng)站設(shè)計(jì)與開發(fā)

網(wǎng)站設(shè)計(jì)與開發(fā)第三章網(wǎng)站規(guī)劃與設(shè)計(jì)網(wǎng)站設(shè)計(jì)步驟網(wǎng)站規(guī)劃網(wǎng)站功能設(shè)計(jì)網(wǎng)站主要功能模塊介紹第三章網(wǎng)站規(guī)劃與設(shè)計(jì)網(wǎng)站主要功能模塊介紹網(wǎng)站功能設(shè)計(jì)網(wǎng)站規(guī)劃本章目錄網(wǎng)站設(shè)計(jì)步驟目錄1324網(wǎng)站主要功能模塊介紹網(wǎng)站功能設(shè)計(jì)網(wǎng)站規(guī)劃本章目錄網(wǎng)站設(shè)計(jì)步驟第一節(jié)網(wǎng)站設(shè)計(jì)步驟

1.1網(wǎng)站開發(fā)步驟

網(wǎng)站建設(shè)步驟：網(wǎng)站建設(shè)總的來說需要經(jīng)歷四個步驟，分別是網(wǎng)站的規(guī)劃與設(shè)計(jì)、站點(diǎn)建設(shè)、網(wǎng)站發(fā)布和網(wǎng)站的管理與維護(hù)。第一節(jié)網(wǎng)站設(shè)計(jì)步驟

1.1網(wǎng)站開發(fā)步

a.網(wǎng)站的規(guī)劃與設(shè)計(jì)是網(wǎng)站建設(shè)的第一步。在這一步中需要對網(wǎng)站進(jìn)行整體的分析，明確網(wǎng)站的建設(shè)目標(biāo)，確定網(wǎng)站的訪問對象、網(wǎng)站應(yīng)提供的內(nèi)容與服務(wù)及網(wǎng)站的域名，設(shè)計(jì)網(wǎng)站的標(biāo)志、網(wǎng)站的風(fēng)格、網(wǎng)站的目錄結(jié)構(gòu)等各方面的內(nèi)容。這一步是網(wǎng)站建設(shè)成功與否的前提，因?yàn)樗械暮罄m(xù)步驟都必須按照第一步的規(guī)劃與設(shè)計(jì)進(jìn)行實(shí)施。a.網(wǎng)站的規(guī)劃與設(shè)計(jì)是網(wǎng)站建設(shè)的第一步。

b.網(wǎng)站的規(guī)劃與設(shè)計(jì)完成之后，進(jìn)入具體的站點(diǎn)建設(shè)步驟。這個步驟主要包括域名注冊、網(wǎng)站配置、網(wǎng)頁制作和網(wǎng)站測試四個部分。除了網(wǎng)站測試必須要在其他三項(xiàng)內(nèi)容開始之后才能進(jìn)行之外，域名注冊、網(wǎng)站配置和網(wǎng)頁制作相對獨(dú)立，可以同時進(jìn)行。

c.相關(guān)的內(nèi)容都建設(shè)好后，就可以正式地發(fā)布網(wǎng)站，也就是說將網(wǎng)站放到Internet上允許用戶通過網(wǎng)站的域名進(jìn)行訪問。b.網(wǎng)站的規(guī)劃與設(shè)計(jì)完成之后，進(jìn)入具體的站點(diǎn)建設(shè)

d.網(wǎng)站的管理與維護(hù)雖然是最后一個步驟，但實(shí)際上貫穿網(wǎng)站建設(shè)的全過程，只要網(wǎng)站沒有停止運(yùn)行，就需要對其進(jìn)行管理和維護(hù)，所以這一步也是最為費(fèi)勁的一步。網(wǎng)站的管理和維護(hù)主要包括安全管理、性能管理和內(nèi)容管理三個方面。注意：網(wǎng)站建設(shè)是一個循環(huán)的過程，并不是說一次過后就結(jié)束了。它需要隨著需求的變化不斷地對網(wǎng)站進(jìn)行再次規(guī)劃與設(shè)計(jì)，進(jìn)而不斷地建設(shè)和發(fā)布新的內(nèi)容與服務(wù)，不斷地升級服務(wù)器和網(wǎng)絡(luò)環(huán)境以保障網(wǎng)站的運(yùn)行性能。d.網(wǎng)站的管理與維護(hù)雖然是最后一個步驟，但實(shí)際上第二節(jié)網(wǎng)站的規(guī)劃2.1

任務(wù)明晰網(wǎng)站建設(shè)的流程（網(wǎng)站制作有哪些流程，每一個流程由誰完成，每一項(xiàng)內(nèi)容何時完成；每一個流程由誰完成；每一項(xiàng)內(nèi)容何時完成）確定網(wǎng)站的目的、功能確定網(wǎng)站的技術(shù)解決方案對網(wǎng)站內(nèi)容進(jìn)行規(guī)劃確定網(wǎng)頁設(shè)計(jì)方案指定網(wǎng)站后期的運(yùn)營、維護(hù)、管理、安全方案企業(yè)形象宣傳：功能實(shí)現(xiàn)最容易產(chǎn)品和服務(wù)項(xiàng)目展示商品和服務(wù)訂購、轉(zhuǎn)賬與支付、運(yùn)輸信息搜索與查詢客戶信息管理（網(wǎng)上客戶管理）銷售業(yè)務(wù)信息管理新聞發(fā)布、供求信息發(fā)布網(wǎng)上營銷第二節(jié)網(wǎng)站的規(guī)劃企業(yè)形象宣傳：功注意：網(wǎng)站規(guī)劃可以分為網(wǎng)站的商務(wù)功能規(guī)劃和網(wǎng)站技術(shù)規(guī)劃兩個方面。最后形成《企業(yè)網(wǎng)站建設(shè)規(guī)劃書》。企業(yè)網(wǎng)站規(guī)劃書一般包含如下內(nèi)容：.網(wǎng)站建設(shè)目標(biāo).分析網(wǎng)站的用戶和目標(biāo)訪問群.網(wǎng)站域名設(shè)計(jì).網(wǎng)站建設(shè)財(cái)務(wù)預(yù)算.網(wǎng)站內(nèi)容規(guī)劃和欄目規(guī)劃.網(wǎng)站推廣方式注意：網(wǎng)站規(guī)劃可以分為網(wǎng)站的商務(wù)功能規(guī)第二節(jié)電子商務(wù)網(wǎng)站的規(guī)劃

2.2網(wǎng)站規(guī)劃

2.2.1規(guī)劃準(zhǔn)備——分析研究工作①.通過分析商務(wù)需求進(jìn)行業(yè)務(wù)選擇對自身商務(wù)需求的研究分析對商品特色、行業(yè)特點(diǎn)及企業(yè)行業(yè)地位的研究分析②.對目標(biāo)客戶和競爭對手的調(diào)查和分析a.對目標(biāo)客戶調(diào)查和分析

第二節(jié)電子商務(wù)網(wǎng)站的規(guī)劃

c.通過專門的咨詢公司或自己實(shí)地調(diào)查

d.利用ISP或有影響的行業(yè)網(wǎng)站進(jìn)行網(wǎng)上的調(diào)查和研究對競爭對手的調(diào)查

分析內(nèi)容：

a.確認(rèn)網(wǎng)上的競爭對手

b.了解競爭對電子商務(wù)的戰(zhàn)略所開展的主要網(wǎng)上業(yè)務(wù)

c.研究競爭對手網(wǎng)站的設(shè)計(jì)架構(gòu)與運(yùn)行效果③.網(wǎng)站的可行性研究c.通過專門的咨詢公司或自己實(shí)地調(diào)查網(wǎng)站銷售可行性分析

用戶分析

產(chǎn)品特征分析

市場特征分析

訪問者心理分析他們總是匆匆忙忙

他們希望“免費(fèi)”的東西他們不容易相信人他們喜歡點(diǎn)擊

以客戶為中心網(wǎng)站銷售可行性分析他們總是匆匆忙忙 以客戶為中心技術(shù)可行性分析經(jīng)濟(jì)可行性分析a.電子商務(wù)網(wǎng)站的成本估算b.電子商務(wù)網(wǎng)站的收益分析成本構(gòu)成構(gòu)建開發(fā)成本運(yùn)行管理成本規(guī)劃設(shè)計(jì)成本（調(diào)查研究、業(yè)務(wù)分析、方案設(shè)計(jì)）構(gòu)建費(fèi)用（軟硬件費(fèi)用，域名、主機(jī)托管費(fèi)用，開發(fā)費(fèi)用，人員培訓(xùn)費(fèi)用）運(yùn)行費(fèi)用（網(wǎng)站推廣費(fèi)用、人員費(fèi)用、安全保證等費(fèi)用、消耗材料設(shè)備折舊費(fèi)用、技術(shù)資料咨詢費(fèi)用）

維護(hù)費(fèi)用（數(shù)據(jù)更新、系統(tǒng)糾錯、完善性維護(hù)）管理費(fèi)用（行政管理、監(jiān)督審查）技術(shù)可行性分析成本構(gòu)建開發(fā)成本規(guī)劃設(shè)計(jì)成本（調(diào)查研究、業(yè)務(wù)分人員可行性分析

網(wǎng)站建設(shè)所需要的人力配置如下：系統(tǒng)策劃師（網(wǎng)站策劃人員）、網(wǎng)站設(shè)計(jì)師、程序設(shè)計(jì)師、美工師、錄入人員、項(xiàng)目經(jīng)理人員可行性分析2.2.2網(wǎng)站商務(wù)功能和規(guī)劃

a.網(wǎng)站主題規(guī)劃確定網(wǎng)站主題（確定企業(yè)網(wǎng)站的任務(wù)或目標(biāo)是什么，網(wǎng)站的近期和遠(yuǎn)期目標(biāo)是什么，網(wǎng)站的服務(wù)領(lǐng)域和對象是什么，網(wǎng)站的盈利方式是什么等）表達(dá)網(wǎng)站主題（站點(diǎn)的中心內(nèi)容能夠反映設(shè)計(jì)者的風(fēng)格和思想）如：b2c購物站點(diǎn)，實(shí)現(xiàn)網(wǎng)上支付B2b站點(diǎn)，實(shí)現(xiàn)網(wǎng)上合同洽談和簽約企業(yè)門戶網(wǎng)站：包括企業(yè)的信息發(fā)布和信息服務(wù)內(nèi)容與主題相扣2.2.2網(wǎng)站商務(wù)功能和規(guī)劃如：b2c購物站點(diǎn)，實(shí)現(xiàn)網(wǎng)上支b.設(shè)計(jì)網(wǎng)站名稱和域名c.分析網(wǎng)站的用戶（每一個企業(yè)的服務(wù)目標(biāo)客戶群不一樣，網(wǎng)站商業(yè)模式和網(wǎng)站主題也就不同）d.網(wǎng)站建設(shè)財(cái)務(wù)預(yù)算b.設(shè)計(jì)網(wǎng)站名稱和域名2.2.3網(wǎng)站運(yùn)行環(huán)境規(guī)劃網(wǎng)站平臺配置：網(wǎng)站配置首先要做的就是為網(wǎng)站選擇合適的發(fā)布平臺，即選擇適合網(wǎng)站規(guī)模的各種軟硬件資源，包括確定服務(wù)器解決方案,確定軟件平臺等。裝配前的準(zhǔn)備工作

a.估計(jì)帶寬：第一，明確本網(wǎng)站提供的資源的種類（如支持視頻、聲音流或復(fù)雜的HTML網(wǎng)頁這樣的復(fù)雜工作的系統(tǒng)需要較多的資源）。第二，明確本系統(tǒng)所需要的反應(yīng)時間。第三，明確同時在線的用戶的數(shù)目。

b.主機(jī)管理方式選擇

c.web服務(wù)器軟件的選擇2.2.3網(wǎng)站運(yùn)行環(huán)境規(guī)劃帶寬的估計(jì)

帶寬估算：統(tǒng)計(jì)WebServer日志文件中HTTP操作紀(jì)錄的總行數(shù)。確定日志文件運(yùn)行的天數(shù)。將總行數(shù)除以天數(shù)，得到每天操作次數(shù)。將每天操作次數(shù)除以86400秒（一天的秒數(shù)），得到每秒操作次數(shù)。將每秒操作次數(shù)乘以3，得到每秒峰值操作次數(shù)。將128Kbps乘以每秒峰值操作次數(shù)，得到所需的帶寬。128Kbps是個經(jīng)驗(yàn)值。上述估計(jì)具有局限性，事實(shí)上在估計(jì)帶寬時應(yīng)考慮資源大小和請求人數(shù)。帶寬的估計(jì)帶寬估算：例如：一個站點(diǎn)30天內(nèi)的點(diǎn)擊次數(shù)為15000次。則每天操作次數(shù)為500次，每秒操作次數(shù)為0.006次/秒，每秒峰值操作次數(shù)為0.018次/秒，所需帶寬為128Kbps*0.018=2.3Kbps。

例如：自建服務(wù)器：易于控制，安全。但需要申請專線接入。適用于處理敏感數(shù)據(jù)的站點(diǎn)，例如電子商務(wù)站點(diǎn)。托管服務(wù)器：將自己的服務(wù)器放到高帶寬入網(wǎng)（100M以上）的電信局或?qū)ｉT的數(shù)據(jù)中心，通過撥號、ISDN、DDN等低速線路遠(yuǎn)程維護(hù)。ISP提供優(yōu)越的機(jī)架空間、網(wǎng)絡(luò)安全防護(hù)、UPS供電、恒溫恒濕環(huán)境及防火設(shè)施等。收費(fèi)按占用的機(jī)架空間和接入帶寬計(jì)算。適用于中、大規(guī)模的網(wǎng)站，許多大型網(wǎng)站就是以此形式建立站點(diǎn)及鏡像站點(diǎn)的。租用虛擬主機(jī)：與托管服務(wù)器相似，只是主機(jī)不是自己的。

虛擬主機(jī)：在同一計(jì)算機(jī)硬件、同一操作系統(tǒng)上，可以建立多個Web站點(diǎn)，每一個站點(diǎn)在訪問者看來好像是在一個獨(dú)立的主機(jī)硬件上，這樣的Web站點(diǎn)稱為虛擬主機(jī)。每一個虛擬主機(jī)具有獨(dú)立的域名，可以共享一個IP地址，也可以具有獨(dú)立的IP地址，能提供完整的Internet服務(wù)（包括WWW、FTP、Email等），缺點(diǎn)是不能支持高訪問量、遠(yuǎn)程管理權(quán)限有限、軟件安裝不方便。適用于小企業(yè)做產(chǎn)品宣傳和業(yè)余愛好者發(fā)布數(shù)據(jù)。

確定服務(wù)器解決方案虛擬主機(jī)：在同一計(jì)算機(jī)硬件、同一操作系統(tǒng)上，可以建立多三種服務(wù)器選擇方案的比較：

自建服務(wù)器（1）成本較高（2）適合對信息量和網(wǎng)站功能要求較高的大中型企業(yè)三種服務(wù)器選擇方案的比較：自建服務(wù)器租用虛擬主機(jī)

虛擬主機(jī)是使用計(jì)算機(jī)軟件技術(shù)，把一臺運(yùn)行在Internet上的服務(wù)器主機(jī)分隔成多臺“虛擬”主機(jī)，每一臺虛擬主機(jī)都各自具有獨(dú)立的域名和IP地址，具有比較完善的Internet服務(wù)器功能。租用虛擬主機(jī)虛擬主機(jī)是使用計(jì)算機(jī)軟件技術(shù)，把一臺運(yùn)行在I租用虛擬主機(jī)虛擬主機(jī)就是由很多人一起租用一臺服務(wù)器。

租用虛擬主機(jī)虛擬主機(jī)就是由很多人一起租用一臺服務(wù)器。優(yōu)點(diǎn)：采用虛擬主機(jī)技術(shù)的用戶只需對自己的信息進(jìn)行遠(yuǎn)程維護(hù)，而無需對硬件、操作系統(tǒng)及通信線路進(jìn)行維護(hù)。因此虛擬主機(jī)技術(shù)可以為廣大中小型企業(yè)或初次建立網(wǎng)站的企業(yè)節(jié)省大量人力物力及一系列煩瑣的工作，是企業(yè)發(fā)布信息較好的方式。特點(diǎn)：采用虛擬主機(jī)方式建立電子商務(wù)網(wǎng)站具有投資小、建立速度快、安全可靠、無需軟硬件配置及投資、無需擁有技術(shù)支持等特點(diǎn)。

優(yōu)點(diǎn)：采用虛擬主機(jī)技術(shù)的用戶只需對自己的信息進(jìn)行遠(yuǎn)程維護(hù)，而虛擬主機(jī)服務(wù)內(nèi)容選擇虛擬主機(jī)主要考慮以下幾點(diǎn)服務(wù)內(nèi)容：

(1)存儲空間：適中；(2)電子郵件：提供的電子郵箱個數(shù)；(3)網(wǎng)頁制作；(4)IP地址：提供獨(dú)立的IP地址，并支持多個域名指向同一個IP地址；(5)文件傳輸（FTP）：支持網(wǎng)頁上傳;（6）時間：提供不間斷服務(wù)的時間;(7)速度：重點(diǎn)考慮網(wǎng)絡(luò)帶寬問題。虛擬主機(jī)服務(wù)內(nèi)容選擇虛擬主機(jī)主要考慮以下幾點(diǎn)服務(wù)內(nèi)容：服務(wù)器托管（主機(jī)托管）（1）主機(jī)托管就是客戶把屬于自己的一臺服務(wù)器放置在某個經(jīng)營“整機(jī)托管”業(yè)務(wù)網(wǎng)站的數(shù)據(jù)中心的機(jī)房里，由網(wǎng)站機(jī)房的技術(shù)人員對服務(wù)器進(jìn)行管理和維護(hù)。（2）自建網(wǎng)站機(jī)房和整機(jī)托管的比較自建機(jī)房成本大：技術(shù)人員、軟硬件、維護(hù)費(fèi)、線路通信服務(wù)費(fèi)整機(jī)托管更經(jīng)濟(jì)、快捷且實(shí)用：遠(yuǎn)程控制、客戶機(jī)/服務(wù)器兩者相比，整機(jī)托管在成本和服務(wù)方面有優(yōu)勢。服務(wù)器托管（主機(jī)托管）（1）主機(jī)托管就是客戶把屬于自己的一臺服務(wù)器托管（主機(jī)托管）服務(wù)器托管（主機(jī)托管）服務(wù)器托管（主機(jī)托管）服務(wù)器托管具有以下特點(diǎn)：（1）靈活：系統(tǒng)資源、軟件和服務(wù)不受限制；（2）穩(wěn)定：不受其他用戶的牽連；(3)安全；(4)快捷。主機(jī)托管服務(wù)選擇時應(yīng)考慮以下因素：

(1)可靠性因素

(2)安全因素

(3)功能需求因素服務(wù)器托管（主機(jī)托管）服務(wù)器托管具有以下特點(diǎn)：（1）靈活：系29案例：上海數(shù)據(jù)中心IDC（/idc2.htm）29案例：上海數(shù)據(jù)中心IDC（http://www.shis30案例：上海IDC的服務(wù)器租用服務(wù)30案例：上海IDC的服務(wù)器租用服務(wù)補(bǔ)充：服務(wù)器性能：

對做Web服務(wù)器的主機(jī)，服務(wù)速度主要取決于CPU、內(nèi)存、網(wǎng)絡(luò)I/O和磁盤I/O。為提高Web服務(wù)器的性能，開發(fā)服務(wù)、搜索引擎服務(wù)、數(shù)據(jù)庫服務(wù)應(yīng)另建服務(wù)器，不要建在同一個主機(jī)上。因?yàn)檫@些服務(wù)要占用大量的CPU資源和內(nèi)存資源，削弱Web服務(wù)的能力。

補(bǔ)充：服務(wù)器性能：

集群（Cluster）：一組被稱為節(jié)點(diǎn)的計(jì)算機(jī)，通過網(wǎng)絡(luò)和軟件結(jié)合在一起，通過負(fù)載均衡和失效接管來向客戶端提供一個單一的、可持續(xù)工作的服務(wù)系統(tǒng)，也可以不停機(jī)更新個別節(jié)點(diǎn)。它將可用性提升至99.99%。對于需要幾百兆高帶寬接入的大型網(wǎng)站，需要多臺服務(wù)器組成集群系統(tǒng)提供均載服務(wù)，同時也可以避免單點(diǎn)故障。

集群（Cluster）：一組被稱為節(jié)點(diǎn)的計(jì)算機(jī)，通過鏡像站點(diǎn)的體系結(jié)構(gòu)屬于一種每個單獨(dú)的節(jié)點(diǎn)都分散于地理上不同位置的集群。集群中每個節(jié)點(diǎn)具有不同的主機(jī)名（URL），但具有相同的鏡像內(nèi)容。用戶直接從多個具有獨(dú)立URL的站點(diǎn)中進(jìn)行選擇，并將HTTP請求發(fā)送給該鏡像站點(diǎn)進(jìn)行服務(wù)。通常，用戶可以選擇一個地理上距離最近的集群節(jié)點(diǎn)以減少響應(yīng)時間。鏡像站點(diǎn)的體系結(jié)構(gòu)屬于一種每個單獨(dú)的節(jié)點(diǎn)都分散于地理上不同位網(wǎng)站設(shè)計(jì)與開發(fā)第三章課件缺點(diǎn)：Web服務(wù)器集群缺少對請求分配的控制，集群節(jié)點(diǎn)的選擇僅依賴于客戶的主觀意志，但客戶根本不清楚各節(jié)點(diǎn)的負(fù)載情況。其次，集群節(jié)點(diǎn)對于客戶是可見的（非透明的），因此某一節(jié)點(diǎn)出現(xiàn)故障會影響客戶感知的集群可用性。最后，各集群節(jié)點(diǎn)對于客戶的可見性也具有潛在的安全方面的問題。缺點(diǎn)：Web服務(wù)器集群缺少對請求分配的控制，集群節(jié)點(diǎn)的選擇僅在基于DNS的集群體系結(jié)構(gòu)中，集群所在域的授權(quán)域名服務(wù)器（稱為“集群DNS”）向外部提供一個單一的URL主機(jī)名作為整個集群的虛擬接口，使得集群對用戶端具有透明性。集群中的每臺Web服務(wù)器都具有一個真實(shí)的IP地址。集群DNS作為集群系統(tǒng)的集中式請求調(diào)度器，在Web站點(diǎn)域名（URL）到服務(wù)器節(jié)點(diǎn)IP地址的映射過程中，能夠選擇集群中的任何節(jié)點(diǎn)作為請求分配的目的地。在基于DNS的集群體系結(jié)構(gòu)中，集群所在域的授權(quán)域名服務(wù)器（稱網(wǎng)站設(shè)計(jì)與開發(fā)第三章課件WEB服務(wù)器軟件選用WEB服務(wù)器軟件時的參考的性能參數(shù)：響應(yīng)能力：WEB服務(wù)器對多個用戶瀏覽信息的相應(yīng)速度。與后端服務(wù)器的集成管理的難易程度：管理Web服務(wù)器；利用Web界面進(jìn)行網(wǎng)絡(luò)管理信息開發(fā)的難易程度：穩(wěn)定性可靠性安全性：是否泄密；防止黑客的攻擊與其他系統(tǒng)的搭配WEB服務(wù)器軟件流行Web服務(wù)器系統(tǒng)ApachehttpdIIS（IIS是允許在公共Intranet或Internet上發(fā)布信息的Web服務(wù)器。）

TomcatJBOSSBEAWebLogic

IBMWebsphereTomcat是一個開放源代碼、運(yùn)行servlet和JSPWeb應(yīng)用軟件的基于Java的Web應(yīng)用軟件容器。

JBoss是全世界開發(fā)者共同努力的成果，一個基于J2EE的開放源代碼的應(yīng)用服務(wù)器一般與Tomcat或Jetty綁定使用。

WebSphere軟件平臺提供了一整套全面的集成電子商務(wù)軟件解決方案。Apache源于NCSAhttpd服務(wù)器，經(jīng)過多次修改，成為世界上最流行的Web服務(wù)器軟件之一。

流行Web服務(wù)器系統(tǒng)ApachehttpdTomcat是一主機(jī)軟硬件配置

操作系統(tǒng)軟件UNIX操作系統(tǒng)：技術(shù)成熟、開放性好、可靠性高、網(wǎng)絡(luò)功能強(qiáng)大。Linux操作系統(tǒng)：免費(fèi)的操作系統(tǒng)Windows2000操作系統(tǒng)主機(jī)軟硬件配置操作系統(tǒng)軟件數(shù)據(jù)庫軟件關(guān)系型數(shù)據(jù)庫面向?qū)ο驞B2，Oracle，Sybase，MSSQLServer，MySQL數(shù)據(jù)庫軟件2.2.4網(wǎng)站內(nèi)容規(guī)劃和設(shè)計(jì)網(wǎng)站內(nèi)容設(shè)計(jì)的總原則1）相關(guān)性（圍繞主題）2）最大限度地滿足訪問者的需求，信息內(nèi)容真實(shí)、動態(tài)性3）要最有效地進(jìn)行資源利用4）要求使用方便、界面連貫、運(yùn)行高效5）適當(dāng)使用圖像具體來說：新、精、專的信息內(nèi)容2.2.4網(wǎng)站內(nèi)容規(guī)劃和設(shè)計(jì)2.2.5網(wǎng)站信息結(jié)構(gòu)設(shè)計(jì)（1）確定網(wǎng)站的欄目欄目就是網(wǎng)站的菜單欄，它可以有子欄目，和一般菜單不同，當(dāng)點(diǎn)擊欄目或子欄目時其會鏈接到本網(wǎng)站的另一個網(wǎng)頁。欄目是網(wǎng)站的結(jié)構(gòu)體現(xiàn)，是網(wǎng)站的骨架（如大家看到的企業(yè)新聞、產(chǎn)品信息等）。設(shè)計(jì)欄目應(yīng)該考慮的方面（原則）：1）要緊扣主題2）考慮設(shè)置一個最近更新或網(wǎng)站指南欄目2.2.5網(wǎng)站信息結(jié)構(gòu)設(shè)計(jì)3）精簡原則4）提綱挈領(lǐng)原則5）凸顯特色設(shè)計(jì)方法

1）分類法

2）參照法3）精簡原則欄目設(shè)計(jì)技巧：欄目列出網(wǎng)站最有價值的內(nèi)容與網(wǎng)站定位無關(guān)的刪除欄目設(shè)計(jì)方便訪問者瀏覽和查詢所有同類網(wǎng)站都有的欄目建議加上電子商務(wù)網(wǎng)站常用欄目：網(wǎng)上商城：我要買、我要賣、熱門促銷、商品展示、分類導(dǎo)航、購物車、幫助、行業(yè)市場、商業(yè)社區(qū)、行業(yè)咨訊、公告欄等。欄目設(shè)計(jì)技巧：（2）網(wǎng)站物理結(jié)構(gòu)設(shè)計(jì)網(wǎng)站的真實(shí)目錄及網(wǎng)頁文件所存儲的位置決定的結(jié)構(gòu)，即網(wǎng)站的目錄。有兩種形式：a.扁平結(jié)構(gòu)（所有的頁面都在根目錄下）如：/pageA.html/pageB.html/pageC.html（2）網(wǎng)站物理結(jié)構(gòu)設(shè)計(jì)b.樹形結(jié)構(gòu)（在根目錄下分成多個子目錄，每個頁面從屬于上級目錄）/product1//product2//product1/A.html/product1/B.html/product2/A.html/product2/B.htmlb.樹形結(jié)構(gòu)（在根目錄下分成多個子目錄，每個頁面從屬于上級目敦煌網(wǎng)的目錄結(jié)構(gòu)設(shè)計(jì)

首頁圖像文件目錄樣式文件目錄我的Dhgate欄目我的Dhgate的圖像文件夾

功能與服務(wù)欄目

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

熱門求購欄目

外貿(mào)通欄目

熱門求購的圖象文件夾

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

案例：敦煌網(wǎng)的目錄結(jié)構(gòu)敦煌網(wǎng)的目錄結(jié)構(gòu)設(shè)計(jì)首頁圖像文件目錄樣式文件目錄我的Dhg目錄設(shè)計(jì)注意點(diǎn)：目錄結(jié)構(gòu)是否合理，對網(wǎng)站的創(chuàng)建效率會產(chǎn)生較大的影響，但更主要的，會對未來網(wǎng)站的性能、網(wǎng)站的維護(hù)及擴(kuò)展產(chǎn)生很大的影響。目錄結(jié)構(gòu)對用戶來說是不可見的，它只針對網(wǎng)站管理員，所以它的設(shè)計(jì)是為了網(wǎng)站管理員能從文件的角度更好地管理網(wǎng)站的所有資源。目錄設(shè)計(jì)注意點(diǎn)：目錄結(jié)構(gòu)的設(shè)計(jì)通常需要遵循以下原則：不要將所有的文件都放在根目錄下原因：文件管理混亂上傳速度慢（服務(wù)器會為根目錄建立一個索引）

根據(jù)欄目內(nèi)容來設(shè)計(jì)目錄結(jié)構(gòu)子目錄的建立，首先按主菜單欄目建立。其他的次要欄目，比如友情鏈接等內(nèi)容較多、需要經(jīng)常更新的欄目可以建立獨(dú)立的子目錄。而一些相關(guān)性強(qiáng)，不需要經(jīng)常更新的欄目，可以合并放在一個目錄下。目錄結(jié)構(gòu)的設(shè)計(jì)通常需要遵循以下原則：每個目錄下都建立獨(dú)立的images子目錄將圖片及資源文件都放在一個獨(dú)立的images目錄下，可以使目錄結(jié)構(gòu)更加清晰。如果很多網(wǎng)頁都需要用到同一個圖片，比如網(wǎng)站標(biāo)志圖片，那么將這個圖片放到所有這些網(wǎng)頁共有的最高層目錄的images子目錄下。每個目錄下都建立獨(dú)立的images子目錄其他需要注意的問題：a.不要使用中文名目錄b.不要使用過長的目錄c.盡量使用意義明確的目錄d.目錄層次不要太深（建議不要超過3層）e.可執(zhí)行文件和不可執(zhí)行文件分開放置(將可執(zhí)行的動態(tài)服務(wù)器網(wǎng)頁文件和不可執(zhí)行的靜態(tài)網(wǎng)頁文件與動態(tài)網(wǎng)頁文件分別放在兩個目錄下，然后將存放可執(zhí)行網(wǎng)頁文件的目錄設(shè)為不可讀和執(zhí)行。這么做的好處就是可以避免動態(tài)服務(wù)器網(wǎng)頁文件被讀取。)其他需要注意的問題：f.數(shù)據(jù)庫文件單獨(dú)放置數(shù)據(jù)庫文件因?yàn)榘踩枨蠛芨?，所以最好放置在HTTP所不能訪問到的目錄底下。這樣就可以避免惡意的用戶通過HTTP方式取到數(shù)據(jù)庫文件。f.數(shù)據(jù)庫文件單獨(dú)放置

1）線型邏輯組織模型線型邏輯組織模型的特點(diǎn)是直觀、簡單，它又是人們最為熟悉的一種組織形式，因?yàn)?，傳統(tǒng)的信息媒介大都采用這種形式。

邏輯結(jié)構(gòu)設(shè)計(jì)邏輯結(jié)構(gòu)也稱為鏈接結(jié)構(gòu)，由網(wǎng)頁內(nèi)部鏈接所形成。邏輯結(jié)構(gòu)描述的是網(wǎng)頁文檔的鏈接關(guān)系。邏輯結(jié)構(gòu)為用戶操作方便設(shè)計(jì)的。1）線型邏輯組織模型

邏輯結(jié)構(gòu)設(shè)計(jì)邏輯結(jié)構(gòu)也稱為鏈接結(jié)特點(diǎn)：用戶在沒有完成上一個網(wǎng)頁的訪問之前就無法進(jìn)入下一個網(wǎng)頁。特點(diǎn)：用戶在沒有完成上一個網(wǎng)頁的訪

2）樹型（層次型）邏輯組織模型層次型邏輯組織模型也稱為樹型組織模型，在Web站點(diǎn)上，應(yīng)用最多的還是層次型的組織結(jié)構(gòu)，幾乎所有的站點(diǎn)在整體欄目規(guī)劃的時候都采用層次型結(jié)構(gòu)。2）樹型（層次型）邏輯組織模型特點(diǎn)：用戶如果要訪問最底層的網(wǎng)頁就不得不按照層次從上到下一級一級地訪問，最終到達(dá)想要訪問的網(wǎng)頁。如果層次型結(jié)構(gòu)的層次很深，比如有五層或者六層，那么所帶來的麻煩就大大降低了層次型網(wǎng)絡(luò)所具有的優(yōu)點(diǎn)。又比如下圖所示的例子，用戶想從網(wǎng)頁A轉(zhuǎn)到網(wǎng)頁B，不得不先從網(wǎng)頁A一級—級地返回到網(wǎng)頁C，然后再一級一級地往下走直到網(wǎng)頁B。特點(diǎn)：用戶如果要訪問最底層的網(wǎng)頁就不得不按照層次從上到下一級所以過深過于復(fù)雜的層次型結(jié)構(gòu)反而會帶來很多不良的影響，最好的深度就是三層，最多不要超過五層。另外，建立一個良好的導(dǎo)航系統(tǒng)也可以彌補(bǔ)層次型結(jié)構(gòu)這方面的缺點(diǎn)。所以過深過于復(fù)雜的層次型結(jié)構(gòu)反而會帶來很多不良的影響，最好的

3）星狀（網(wǎng)絡(luò)型）邏輯組織模型星狀邏輯組織模型是指多個網(wǎng)頁之間都有相互鏈接的一種結(jié)構(gòu)，如下圖所示。（典型：首頁）3）星狀（網(wǎng)絡(luò)型）邏輯組織模型（典型：首頁）特點(diǎn)：網(wǎng)絡(luò)型結(jié)構(gòu)的實(shí)現(xiàn)就在于在所有相關(guān)的網(wǎng)頁上保留到其他網(wǎng)頁的超鏈接。這種結(jié)構(gòu)使用戶能更方便地在網(wǎng)站上游弋，但同時也帶來一個龐大超鏈接數(shù)的問題。我們可以簡單地計(jì)算一下，總的超鏈接數(shù)應(yīng)該等于網(wǎng)頁數(shù)乘以網(wǎng)頁數(shù)減一，所以三個網(wǎng)頁的網(wǎng)絡(luò)型結(jié)構(gòu)的超鏈接總數(shù)為3×2=6，10個網(wǎng)頁的網(wǎng)絡(luò)型結(jié)構(gòu)的超鏈接總數(shù)就到達(dá)l0×9=90。這么龐大的超鏈接數(shù)維護(hù)起來相當(dāng)麻煩，某個網(wǎng)頁的改動(如改名、刪除、增加)就可能同時需要對所有的網(wǎng)頁進(jìn)行相應(yīng)的修改，這是誰都不愿意做的事情，所以在網(wǎng)站中需要謹(jǐn)慎使用網(wǎng)絡(luò)型結(jié)構(gòu)。特點(diǎn)：網(wǎng)絡(luò)型結(jié)構(gòu)的實(shí)現(xiàn)就在于在所有相關(guān)的網(wǎng)頁上保留到其他網(wǎng)頁4）混合型邏輯組織模型混合型邏輯組織模型指的是，將以上幾種模型混合在一起構(gòu)成了一個新的網(wǎng)站模型，這樣的模型可以吸取各單個模型的所有長處，避免其短處。實(shí)際上，幾乎所有大的網(wǎng)站都采用混合型結(jié)構(gòu)來進(jìn)行組織的。4）混合型邏輯組織模型2.2.6導(dǎo)航設(shè)計(jì)

網(wǎng)站導(dǎo)航對于一個網(wǎng)站來說非常的必要和重要，它能使用戶在訪問任何一個網(wǎng)頁時，都能清楚地知道目前所處的位置，并且能快速地從這個網(wǎng)頁切換到另一網(wǎng)頁。2.2.6導(dǎo)航設(shè)計(jì)

導(dǎo)航的實(shí)現(xiàn)方法：導(dǎo)航條導(dǎo)航的實(shí)現(xiàn)方法：路徑導(dǎo)航在網(wǎng)頁上顯示這個網(wǎng)頁在網(wǎng)站層次型結(jié)構(gòu)上的位置。比如下圖所示的新浪網(wǎng)讀書欄目上就有路徑導(dǎo)航，從這個導(dǎo)航可以清楚地看到這個網(wǎng)頁歸屬于讀書欄目下的沈從文小說――《邊城》子欄目，而且通過它還可以直接跳轉(zhuǎn)到新浪首頁、讀書欄目首頁。路徑導(dǎo)航相關(guān)導(dǎo)航等相關(guān)導(dǎo)航等導(dǎo)航的設(shè)計(jì)策略：至少要使用一個一層欄目的導(dǎo)航條，如果欄目底下也有很多內(nèi)容，可以分為很多子類的話，那么可以進(jìn)一步設(shè)計(jì)欄目下的導(dǎo)航條。如果網(wǎng)站的層次很深，比如三層以上(主頁作為第一層)，最好使用路徑導(dǎo)航。路徑導(dǎo)航可以從第三層以下的網(wǎng)頁開始出現(xiàn)。如果網(wǎng)站的層次只有兩層或者三層，那么不是特別需要路徑導(dǎo)航。其他導(dǎo)航方式作為輔助的導(dǎo)航手段，視實(shí)際需要而定。

導(dǎo)航的設(shè)計(jì)策略：網(wǎng)站內(nèi)容設(shè)計(jì)的方法規(guī)劃a.自上而下：首先構(gòu)建整個網(wǎng)站的框架，在此框架下再詳細(xì)設(shè)計(jì)各個頁面內(nèi)容。這種方法能在整體上統(tǒng)一整個網(wǎng)站的風(fēng)格，使網(wǎng)站的組織結(jié)構(gòu)相對比比較合理，保證頁面和功能設(shè)置的一致性。網(wǎng)站設(shè)計(jì)與開發(fā)第三章課件b.自下而上：一般用于輔助設(shè)計(jì)，使網(wǎng)站既有共性又有個性c.不斷增補(bǔ)：屬于補(bǔ)充設(shè)計(jì)，隨著訪問量的增加，不斷增加網(wǎng)頁。網(wǎng)站內(nèi)容設(shè)計(jì)實(shí)施的步驟a.網(wǎng)站內(nèi)容的收集和準(zhǔn)備內(nèi)容收集內(nèi)容整理：歸類站點(diǎn)內(nèi)容基本信息型網(wǎng)站（按照組織機(jī)構(gòu)組織內(nèi)容）電子商務(wù)型網(wǎng)站(按照公司的服務(wù)對象劃分內(nèi)容）b.自下而上：一般用于輔助設(shè)計(jì)，使網(wǎng)站既有共性又有個性網(wǎng)站內(nèi)容產(chǎn)品列表批發(fā)商零售商供求信息C2C交易產(chǎn)品1，產(chǎn)品2，…，產(chǎn)品n大客戶、小客戶、vip客戶公司資料1、公司資料2A地、B地，…產(chǎn)品1、產(chǎn)品2，…供貨信息1、供貨信息2，…求購信息1、求購信息2，…產(chǎn)品介紹1、價格產(chǎn)品圖片1、產(chǎn)品圖片2網(wǎng)站產(chǎn)品列表批發(fā)商零售商供求信息C2C交易產(chǎn)品1，產(chǎn)品2，…網(wǎng)站內(nèi)容的設(shè)計(jì)和制作網(wǎng)站的整體風(fēng)格設(shè)計(jì)-》對內(nèi)容進(jìn)行邏輯組織、信息結(jié)構(gòu)進(jìn)行設(shè)計(jì)-》對每個網(wǎng)頁的外觀進(jìn)行設(shè)計(jì)-》實(shí)施每個網(wǎng)頁的制作工作。網(wǎng)站內(nèi)容的設(shè)計(jì)和制作2.2.7網(wǎng)站整體風(fēng)格的設(shè)計(jì)網(wǎng)站風(fēng)格是指站點(diǎn)整體形象給瀏覽者的綜合感覺。站點(diǎn)CI設(shè)計(jì)版面布局交互性文字語氣內(nèi)容價值注意內(nèi)容統(tǒng)一：LOGO、導(dǎo)航欄、版權(quán)和聯(lián)系信息、其他元素2.2.7網(wǎng)站整體風(fēng)格的設(shè)計(jì)站點(diǎn)CI設(shè)計(jì)注意內(nèi)容統(tǒng)一：LO網(wǎng)站CI設(shè)計(jì)所謂CI，是借用的廣告術(shù)語。所謂的企業(yè)形象，是指企業(yè)的關(guān)系者對企業(yè)的整體感覺、印象和認(rèn)識，優(yōu)秀的CI設(shè)計(jì)，使企業(yè)更加容易樹立市場形象、展示企業(yè)文化、搶占商業(yè)先機(jī)。

企業(yè)標(biāo)志的要素（網(wǎng)站的標(biāo)志（Logo）、商品的商標(biāo)、文字和圖形類型和標(biāo)志。）企業(yè)名稱標(biāo)準(zhǔn)字要素（企業(yè)或公司的正式名稱）企業(yè)的標(biāo)準(zhǔn)色要素設(shè)計(jì)網(wǎng)站的色彩（通常1~3種色彩為主）企業(yè)標(biāo)語要素專業(yè)字體要素網(wǎng)站CI設(shè)計(jì)網(wǎng)站名稱的設(shè)計(jì)簡短響亮易記，立意要正，網(wǎng)站最好使用中文名稱，不要使用英文或中英文混合型名稱網(wǎng)站標(biāo)志的設(shè)計(jì)標(biāo)志可以是中文、英文字母，可以是符號、圖案，可以是動物或者人物等。標(biāo)志的設(shè)計(jì)創(chuàng)意來自你網(wǎng)站的名稱和內(nèi)容。設(shè)計(jì)標(biāo)志有以下幾種方法：

網(wǎng)站名稱的設(shè)計(jì)

a.選擇與網(wǎng)站主題有關(guān)的，并具有代表性的人或者物，用它們作為設(shè)計(jì)的藍(lán)本，加以卡通化和藝術(shù)化。例：

b.對于專業(yè)性的網(wǎng)站，可以以本專業(yè)有代表的物品作為標(biāo)志。例:c.最常用和最簡單的方式是用自己網(wǎng)站的中文或者英文名稱作為標(biāo)志。采用不同的字體、字母的變形與組合，可以很容易制作出自己的標(biāo)志。a.選擇與網(wǎng)站主題有關(guān)的，并具有代表性的人或者物，用它們Logo展示Logo展示網(wǎng)站宣傳口號的設(shè)計(jì)宣傳口號是網(wǎng)站的精神，網(wǎng)站的目標(biāo)，往往用一句話或一個詞來表示。如：雀巢（味道好極了），阿里巴巴網(wǎng)站（中國商人自己的網(wǎng)站）等網(wǎng)站標(biāo)準(zhǔn)色彩的設(shè)計(jì)

網(wǎng)站宣傳口號的設(shè)計(jì)

所謂“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩。例如，IBM網(wǎng)站的主色調(diào)是深藍(lán)色的，肯得基網(wǎng)站的主色調(diào)是紅色條型的，網(wǎng)易網(wǎng)站的主色調(diào)是淡藍(lán)色的，Windows視窗標(biāo)志上的紅藍(lán)黃綠色塊。

網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊文字的鏈接色彩盡量使用標(biāo)準(zhǔn)色彩；圖片的主色彩、背景色、邊框等盡量使用標(biāo)準(zhǔn)色彩同色系的色彩。一個網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種。色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對比”。所謂“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩。例

色彩的心理感覺：

①紅色是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動，憤怒，熱情，活力的感覺。

②綠色是介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺。它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。

③橙色也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時尚的效果。

④黃色是一種具有快樂，希望，智慧和輕快的個性，它的明度最高。

⑤藍(lán)色是一種具有涼爽，清新，專業(yè)的色彩。它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛就像天空的色彩一樣。

⑥白色是一種具有潔白的顏色，明快，純真，清潔的感受。

⑦黑色是一種具有深沉，神秘，寂靜，悲哀，壓抑的感受。

⑧灰色是一種具有中庸，平凡，溫和，謙讓，中立和高雅的感覺。

幾種色彩搭配技巧：（1）使用單色彩，所謂單色彩是指先選定一種色彩，然后調(diào)整透明度或者飽和度，也就是說，將某一種單色彩變淡或變深后產(chǎn)生一種新的色彩，用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。

（2）使用兩種色彩，所謂兩種色彩是指先選定一種色彩，然后再選擇該色彩的對比色。例如，藍(lán)色是黃色的對比色。這樣的色彩可以使整個頁面色彩豐富但不花俏。

（3）使用一個色系，所謂色系是指一個感覺的色彩，例如淡藍(lán)、淡黃、淡綠；或者土黃、土灰、土藍(lán)。

（4）使用黑色一種彩色。例如，大紅的字體配黑色的邊框感覺很“跳”，黑色的背景配上白色字體感覺很“亮”。

幾種色彩搭配技巧：舉例：紅色色調(diào)為主，強(qiáng)調(diào)喜事、大事舉例：紅色色調(diào)為主，強(qiáng)調(diào)喜事、大事綠色為主，白色為輔，產(chǎn)生舒適、優(yōu)雅、適于閱讀的氣氛綠色為主，白色為輔，產(chǎn)生舒適、優(yōu)雅、適于閱讀的氣氛設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體

標(biāo)準(zhǔn)字體是指用于標(biāo)志、標(biāo)題、主菜單的特有字體。一般網(wǎng)頁默認(rèn)的字體是宋體。使用一些比較特別的字體時，最好使用圖片的形式。設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體標(biāo)準(zhǔn)字體是指用于標(biāo)志、標(biāo)題、主菜單的特有字主色調(diào)的選擇粉色藍(lán)色紅色綠色黑色企業(yè)、事業(yè)單位的網(wǎng)站政府網(wǎng)站、在重大節(jié)日期間改版為紅色食品、農(nóng)業(yè)類網(wǎng)站、購物類、兒童類網(wǎng)站科幻、游戲類網(wǎng)站女性、兒童類網(wǎng)站主色調(diào):網(wǎng)站使用最多的顏色稱為主色調(diào)輔色調(diào):與主色調(diào)配套的其它顏色設(shè)計(jì)技巧主色調(diào)的選擇粉色藍(lán)色紅色綠色黑色企業(yè)、事業(yè)單位的網(wǎng)站政府網(wǎng)站a、字體的運(yùn)用b、字號的設(shè)置正文字體非標(biāo)準(zhǔn)字體的使用(photoshop做成圖片）標(biāo)題字體的使用欄目字體宋體不得使用行楷等過于活潑的字體黑體，用圖形的方式，搭配一些小圖標(biāo)正文字號大標(biāo)題欄目標(biāo)題12像素、10磅、五號字不超過36像素16—18像素、三號、四號、小四號a、字體的運(yùn)用b、字號的設(shè)置正文字體非標(biāo)準(zhǔn)字體的使用(pc.行間距的設(shè)置1.2倍—1.5倍行距宋體12像素正文文字，行間距為18像素總結(jié)字體字號字色行距正文：宋體題目：方方正正的，如黑體正文一律用黑色標(biāo)準(zhǔn)文字的為1.5倍，如12PX字，用18PX行距正文12px,欄目標(biāo)題16-18PX，大標(biāo)題<=36c.行間距的設(shè)置1.2倍—1.5倍行距總結(jié)字體字號字色左上角、頁面頂部內(nèi)容與放置位置

上部下部左側(cè)右側(cè)輕快、積極壓抑、穩(wěn)定輕便、自由局促、莊重左上角、頁面頂部內(nèi)容與放置位置上部下部左側(cè)右側(cè)輕快、積極網(wǎng)站頁面設(shè)計(jì)原則

1）必須貫徹網(wǎng)站的整體設(shè)計(jì)，樹立網(wǎng)站的CI形象，（使用統(tǒng)一的標(biāo)志。色彩、字體和標(biāo)語）

2）要兼顧網(wǎng)頁的美感網(wǎng)頁設(shè)計(jì)過程中應(yīng)注意：

1）網(wǎng)頁命名要簡潔

2）確保頁面的導(dǎo)航性好2.2.8頁面設(shè)計(jì)及版面設(shè)計(jì)網(wǎng)站頁面設(shè)計(jì)原則2.2.8頁面設(shè)計(jì)及版面設(shè)計(jì)3）網(wǎng)頁要易讀4）合理設(shè)計(jì)視覺效果5）為圖片添加文字說明6）不宜使用太多的動畫和靜態(tài)圖片7）頁面長度要適中8）盡量使用相對超級鏈接3）網(wǎng)頁要易讀網(wǎng)站的版面設(shè)計(jì)在網(wǎng)頁布局過程中，應(yīng)該遵循的原則有：對稱平衡、異常平衡及對比、凝視和空白、用圖片解說等。一般來說，網(wǎng)頁的布局有下面幾種常見的結(jié)構(gòu)。網(wǎng)站設(shè)計(jì)與開發(fā)第三章課件

T型布局就是指頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因?yàn)椴藛螚l背景較深，整體效果類似英文字母“T”,所以我們稱之為“T”形布局。這是網(wǎng)頁設(shè)計(jì)中用的最廣泛的一種布局方式。這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明。是初學(xué)者最容易上手的布局方法。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很容易讓人"看之無味"。

T型布局就是指頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主“三”型布局這種布局多用于國外站點(diǎn)，國內(nèi)用的不多。特點(diǎn)是頁面上橫向兩條色塊，將頁面整體分割為三部分，色塊中大多放廣告條。“三”型布局這種布局多用于國外站點(diǎn)，國內(nèi)用的不多。特點(diǎn)是頁面POP布局以一張精美圖片作為頁面的設(shè)計(jì)中心。常用于時尚類站點(diǎn)，比如ELLE.com。優(yōu)點(diǎn)顯而易見：漂亮吸引人。缺點(diǎn)就是速度慢。POP布局以一張精美圖片作為頁面的設(shè)計(jì)中心。常用于時尚類π型布局所謂的這種結(jié)構(gòu)是指頁面頂部為“網(wǎng)站標(biāo)志+廣告條+主菜單”,下方左面和右面為鏈接、廣告或其他一些內(nèi)容,下方的中間部分是主題內(nèi)容的布局,其整體效果類似于符號pai。這種布局的優(yōu)點(diǎn)是充分利用版面,信息量大;缺點(diǎn)是頁面擁擠,不夠靈活。π型布局所謂的這種結(jié)構(gòu)是指頁面頂部為“網(wǎng)站標(biāo)志+廣告條+主菜口型布局與π型布局類型類似，但是它是頁面上下各有一個廣告條，左面是主菜單，右面是友情鏈接，中間是主要內(nèi)容。這種布局的優(yōu)點(diǎn)是充分利用版面、信息量大。缺點(diǎn)是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設(shè)計(jì)，例如網(wǎng)易壁紙，此類版式多為游戲娛樂站點(diǎn)。口型布局與π型布局類型類似，但是它是頁面上下各有一個廣告條，第三節(jié)電子商務(wù)網(wǎng)站功能設(shè)計(jì)

3.1功能設(shè)計(jì)（電子商務(wù)網(wǎng)站規(guī)劃工作的一部分）電子商務(wù)網(wǎng)站的功能設(shè)計(jì)一般包括：需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站導(dǎo)航設(shè)計(jì)主要功能模塊設(shè)計(jì)第三節(jié)電子商務(wù)網(wǎng)站功能設(shè)計(jì)

3.1功能a.需求分析：一般來說電子商務(wù)網(wǎng)站所必須具備的商務(wù)功能包括新產(chǎn)品的展示發(fā)布、購物車和會員服務(wù)。系統(tǒng)的功能模塊圖可以表示為

網(wǎng)絡(luò)購物中心會員管理購物車公告顯示與管理訂單管理商品搜索商品展示收銀臺結(jié)帳商品分類管理a.需求分析：網(wǎng)絡(luò)購物中心會員管理購物車公告顯示與管理訂單管具體可分為前臺商品展示及銷售、后臺管理兩部分

網(wǎng)絡(luò)購物中心前臺商品展示商品查詢購物車收銀臺會員管理訂單管理商城公告新品上市特價商品暢銷商品按類別查看商品按類別及商品名稱模糊查詢添加至購物車查看購物車從購物車中移去指定商品清空購物車填寫訂單信息結(jié)賬會員注冊會員登陸會員修改個人資料具體可分為前臺商品展示及銷售、后臺管理兩部分網(wǎng)絡(luò)購物中心前網(wǎng)絡(luò)購物中心后臺商品管理公告管理訂單管理會員管理退出后臺后臺登錄查看商品列表添加商品信息修改商品信息查看商品詳細(xì)信息查看公告列表查看訂單列表查看訂單詳細(xì)信息執(zhí)行訂單查看會員列表解凍/凍結(jié)會員查看會員詳細(xì)信息添加公告刪除公告網(wǎng)絡(luò)購物中心后臺商品管理公告管理訂單管理會員管理退出后臺查看網(wǎng)站前臺文件架構(gòu)index.jsp商品搜索(search.jsp)搜索結(jié)果(search_deal.jsp)商品分類Goodsclassify.jsp廣告欄ad.jsp網(wǎng)站導(dǎo)航navigation.jsp會員登錄(login.jsp)會員登錄處理(login_deal.jsp)網(wǎng)站前臺文件架構(gòu)index.jsp商品搜索搜索結(jié)果會員登錄會網(wǎng)站后臺文件結(jié)構(gòu)后臺登錄后臺首頁會員管理詳細(xì)信息訂單管理執(zhí)行訂單詳細(xì)信息添加商品信息修改商品信息刪除商品信息公告管理添加公告信息刪除公告信息退出后臺解凍/凍結(jié)管理網(wǎng)站后臺文件結(jié)構(gòu)后臺登錄后臺首頁會員管理詳細(xì)信息訂單管理執(zhí)行3.2首頁設(shè)計(jì)

首頁/主頁(homepage)指用戶進(jìn)入站點(diǎn)后所看到的第一個頁面，體現(xiàn)了網(wǎng)站的形象。注意：網(wǎng)站中的首頁使用規(guī)定的文件名，不同的服務(wù)器規(guī)定不同。文件名多為index.htm或index.html、default.htm或default.html。主頁通常有兩種類型，一種是文字型（適合分類信息比較多的情況），一種是圖像型(適合分類信息比較少的情況）。3.2首頁設(shè)計(jì)首頁/主頁(homepage)指用戶進(jìn)入站點(diǎn)確定首頁的功能模塊：對于電子商務(wù)網(wǎng)站,模塊有：頁頭：用來準(zhǔn)確無誤地標(biāo)示企業(yè)的網(wǎng)站，能夠體現(xiàn)出企業(yè)網(wǎng)站的主題。（可以用企業(yè)的名稱、標(biāo)語、徽號或圖像表示）主菜單（導(dǎo)航條）最新消息傳遞郵件列表（頁面的底部）聯(lián)絡(luò)信息版權(quán)確定首頁的功能模塊：其他信息如：廣告條、搜索、友情鏈接、郵件列表、計(jì)數(shù)器等。首頁的設(shè)計(jì)

1）首頁明確，主題突出

2）文字的排版

3）盡可能縮短下載時間

4）在設(shè)計(jì)時，避免”封面”問題其他信息如：廣告條、搜索、友情鏈接、郵件列表、計(jì)數(shù)器等。頭部內(nèi)容體部內(nèi)容尾部內(nèi)容網(wǎng)站標(biāo)識標(biāo)題廣告條分類導(dǎo)航與檢索LogoTitleBannerMenuSearchBanner規(guī)格全幅半幅垂直寬型小型486x60234x60120x240728x9088x31頭部內(nèi)容體部內(nèi)容尾部內(nèi)容網(wǎng)站標(biāo)識標(biāo)題廣告條分類導(dǎo)航LogoT頭部內(nèi)容體部內(nèi)容尾部內(nèi)容網(wǎng)站標(biāo)識標(biāo)題廣告條分類導(dǎo)航與檢索LogoTitleBannerMenuSearch用戶注冊與登陸各類欄目相關(guān)站點(diǎn)鏈接LoginLinks版權(quán)聲明管理入口聯(lián)系方式CopyRight頭部內(nèi)容體部內(nèi)容尾部內(nèi)容網(wǎng)站標(biāo)識標(biāo)題廣告條分類導(dǎo)航LogoT頭部內(nèi)容LOGO產(chǎn)品檢索分類導(dǎo)航頭部內(nèi)容LOGO產(chǎn)品檢索分類導(dǎo)航尾部內(nèi)容尾部內(nèi)容其他頁面的設(shè)計(jì)1）新聞頁面的設(shè)計(jì)新聞頁面用于動態(tài)發(fā)布有關(guān)新產(chǎn)品、新開發(fā)項(xiàng)目或公司活動的情況、又可以作為公司的活動年表。

新聞標(biāo)題：由新聞日期（位于標(biāo)題的開頭）、新聞目的（用一個動詞來描述）、涉及的產(chǎn)品或企業(yè)、提示語（常用圖標(biāo)”new”來表示）組成新聞標(biāo)題的版面布局：首頁中新聞標(biāo)題的版面布置要保持簡單、清晰、引人矚目。一般按新聞早晚降序排列。

其他頁面的設(shè)計(jì)可在新聞標(biāo)題前采用標(biāo)準(zhǔn)編目符或小的圖像作為點(diǎn)綴，增加頁面可讀性。將新聞標(biāo)題的列表放在一個上下滾動的窗口中，以便容納更多的新聞。新聞頁面

建立菜單欄導(dǎo)航；建立與前面或后面新聞的鏈接、將新聞進(jìn)行分類或時間索引、建立菜單；在新聞頁面中設(shè)置與該新聞有關(guān)的圖片、聲音或其他多媒體文件；將稿件中出現(xiàn)的關(guān)鍵人名鏈接到其e-mail地址或因特網(wǎng)頁面上；根據(jù)需要考慮鏈接稿件中提到的企業(yè)合伙人、公司雇員的見解或其他說明；客戶、分析家或公共輿論對該新聞稿主題的見解?？稍谛侣剺?biāo)題前采用標(biāo)準(zhǔn)編目符或小的圖像作為點(diǎn)綴，3.3產(chǎn)品頁面的設(shè)計(jì)產(chǎn)品頁面一般采用信息分層、逐層細(xì)化的方法展示公司產(chǎn)品或服務(wù)。產(chǎn)品目錄的分層：第一層建立一個產(chǎn)品/價格列表第二層建立對應(yīng)每個產(chǎn)品的頁面第三層提供產(chǎn)品更深層次的信息第四層如果瀏覽者對第三層的信息還不滿足，可以通過網(wǎng)絡(luò)向公司的有關(guān)人員進(jìn)一步了解信息。3.3產(chǎn)品頁面的設(shè)計(jì)3.4雇員頁面設(shè)計(jì)雇員頁面是企業(yè)最寶貴的資源和財(cái)富，網(wǎng)上企業(yè)通過創(chuàng)建每個雇員的頁面可以吸引潛在的用戶，同時也是使虛擬企業(yè)人格化的有效手段。目前主要的實(shí)現(xiàn)方式是使用框架形式（左邊列出雇員清單，右邊鏈接到雇員的個人頁面）4）其他頁面的設(shè)計(jì)客戶支持頁面市場調(diào)研頁面（收集消費(fèi)者對產(chǎn)品、服務(wù)評價、建議等信息）企業(yè)信息頁面其他內(nèi)容（贊助商務(wù)頁面、貨物追蹤系統(tǒng)、電子貨幣、安全保密系統(tǒng)等）3.4雇員頁面設(shè)計(jì)第四節(jié)主要功能模塊介紹以網(wǎng)上商城為例，舉例說明產(chǎn)品展示模塊、購物車（書）、后臺管理（視頻）。第四節(jié)主要功能模塊介紹數(shù)據(jù)庫設(shè)計(jì)數(shù)據(jù)庫設(shè)計(jì)各表間的關(guān)系各表間的關(guān)系補(bǔ)充：數(shù)據(jù)庫設(shè)計(jì)

Jsp與數(shù)據(jù)庫的連接

（1）Jsp經(jīng)典設(shè)計(jì)模式請求響應(yīng)瀏覽器關(guān)系數(shù)據(jù)庫JSPJavaBeansJDBC瀏覽器關(guān)系數(shù)據(jù)庫serveletJavaBeansJDBCjsp請求響應(yīng)補(bǔ)充：請求響應(yīng)瀏關(guān)系JSPJavaBeansJDBC瀏關(guān)系s(2)采用第一種設(shè)計(jì)模式：與數(shù)據(jù)庫連