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

網(wǎng)站設計與開發(fā)

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

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

網(wǎng)站建設步驟：網(wǎng)站建設總的來說需要經(jīng)歷四個步驟，分別是網(wǎng)站的規(guī)劃與設計、站點建設、網(wǎng)站發(fā)布和網(wǎng)站的管理與維護。

a.網(wǎng)站的規(guī)劃與設計是網(wǎng)站建設的第一步。在這一步中需要對網(wǎng)站進行整體的分析，明確網(wǎng)站的建設目標，確定網(wǎng)站的訪問對象、網(wǎng)站應提供的內(nèi)容與服務及網(wǎng)站的域名，設計網(wǎng)站的標志、網(wǎng)站的風格、網(wǎng)站的目錄結(jié)構等各方面的內(nèi)容。這一步是網(wǎng)站建設成功與否的前提，因為所有的后續(xù)步驟都必須按照第一步的規(guī)劃與設計進行實施。

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

c.相關的內(nèi)容都建設好后，就可以正式地發(fā)布網(wǎng)站，也就是說將網(wǎng)站放到Internet上允許用戶通過網(wǎng)站的域名進行訪問。

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

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

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

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

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

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

分析內(nèi)容：

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

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

c.研究競爭對手網(wǎng)站的設計架構與運行效果③.網(wǎng)站的可行性研究網(wǎng)站銷售可行性分析 用戶分析

產(chǎn)品特征分析

市場特征分析

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

他們希望“免費”的東西他們不容易相信人他們喜歡點擊

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

維護費用（數(shù)據(jù)更新、系統(tǒng)糾錯、完善性維護）管理費用（行政管理、監(jiān)督審查）人員可行性分析

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

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

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

b.主機管理方式選擇

c.web服務器軟件的選擇帶寬的估計

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

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

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

確定服務器解決方案三種服務器選擇方案的比較：

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

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

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

虛擬主機服務內(nèi)容選擇虛擬主機主要考慮以下幾點服務內(nèi)容：

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

(1)可靠性因素

(2)安全因素

(3)功能需求因素29案例：上海數(shù)據(jù)中心IDC（/idc2.htm）30案例：上海IDC的服務器租用服務補充：服務器性能：

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

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

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

TomcatJBOSSBEAWebLogic

IBMWebsphereTomcat是一個開放源代碼、運行servlet和JSPWeb應用軟件的基于Java的Web應用軟件容器。

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

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

主機軟硬件配置

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

1）分類法

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

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

功能與服務欄目

功能與服務的圖像文件夾

熱門求購欄目

外貿(mào)通欄目

熱門求購的圖象文件夾

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

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

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

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

邏輯結(jié)構設計邏輯結(jié)構也稱為鏈接結(jié)構，由網(wǎng)頁內(nèi)部鏈接所形成。邏輯結(jié)構描述的是網(wǎng)頁文檔的鏈接關系。邏輯結(jié)構為用戶操作方便設計的。特點：用戶在沒有完成上一個網(wǎng)頁的訪問之前就無法進入下一個網(wǎng)頁。

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

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

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

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

網(wǎng)站內(nèi)容設計的方法規(guī)劃a.自上而下：首先構建整個網(wǎng)站的框架，在此框架下再詳細設計各個頁面內(nèi)容。這種方法能在整體上統(tǒng)一整個網(wǎng)站的風格，使網(wǎng)站的組織結(jié)構相對比比較合理，保證頁面和功能設置的一致性。b.自下而上：一般用于輔助設計，使網(wǎng)站既有共性又有個性c.不斷增補：屬于補充設計，隨著訪問量的增加，不斷增加網(wǎng)頁。網(wǎng)站內(nèi)容設計實施的步驟a.網(wǎng)站內(nèi)容的收集和準備內(nèi)容收集內(nèi)容整理：歸類站點內(nèi)容基本信息型網(wǎng)站（按照組織機構組織內(nèi)容）電子商務型網(wǎng)站(按照公司的服務對象劃分內(nèi)容）網(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)站內(nèi)容的設計和制作網(wǎng)站的整體風格設計-》對內(nèi)容進行邏輯組織、信息結(jié)構進行設計-》對每個網(wǎng)頁的外觀進行設計-》實施每個網(wǎng)頁的制作工作。2.2.7網(wǎng)站整體風格的設計網(wǎng)站風格是指站點整體形象給瀏覽者的綜合感覺。站點CI設計版面布局交互性文字語氣內(nèi)容價值注意內(nèi)容統(tǒng)一：LOGO、導航欄、版權和聯(lián)系信息、其他元素網(wǎng)站CI設計所謂CI，是借用的廣告術語。所謂的企業(yè)形象，是指企業(yè)的關系者對企業(yè)的整體感覺、印象和認識，優(yōu)秀的CI設計，使企業(yè)更加容易樹立市場形象、展示企業(yè)文化、搶占商業(yè)先機。

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

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

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

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

網(wǎng)站的標志、標題、主菜單和主色塊文字的鏈接色彩盡量使用標準色彩；圖片的主色彩、背景色、邊框等盡量使用標準色彩同色系的色彩。一個網(wǎng)站的標準色彩不超過3種。色彩總的應用原則應該是“總體協(xié)調(diào)，局部對比”。

色彩的心理感覺：

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

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

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

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

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

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

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

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

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

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

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

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

舉例：紅色色調(diào)為主，強調(diào)喜事、大事綠色為主，白色為輔，產(chǎn)生舒適、優(yōu)雅、適于閱讀的氣氛設計網(wǎng)站的標準字體

標準字體是指用于標志、標題、主菜單的特有字體。一般網(wǎng)頁默認的字體是宋體。使用一些比較特別的字體時，最好使用圖片的形式。主色調(diào)的選擇粉色藍色紅色綠色黑色企業(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)配套的其它顏色設計技巧a、字體的運用b、字號的設置正文字體非標準字體的使用(photoshop做成圖片）標題字體的使用欄目字體宋體不得使用行楷等過于活潑的字體黑體，用圖形的方式，搭配一些小圖標正文字號大標題欄目標題12像素、10磅、五號字不超過36像素16—18像素、三號、四號、小四號c.行間距的設置1.2倍—1.5倍行距宋體12像素正文文字，行間距為18像素總結(jié)字體字號字色行距正文：宋體題目：方方正正的，如黑體正文一律用黑色標準文字的為1.5倍，如12PX字，用18PX行距正文12px,欄目標題16-18PX，大標題<=36左上角、頁面頂部內(nèi)容與放置位置

上部下部左側(cè)右側(cè)輕快、積極壓抑、穩(wěn)定輕便、自由局促、莊重網(wǎng)站頁面設計原則

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

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

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

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

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

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

3.1功能設計（電子商務網(wǎng)站規(guī)劃工作的一部分）電子商務網(wǎng)站的功能設計一般包括：需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站導航設計主要功能模塊設計a.需求分析：一般來說電子商務網(wǎng)站所必須具備的商務功能包括新產(chǎn)品的展示發(fā)布、購物車和會員服務。系統(tǒng)的功能模塊圖可以表示為

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

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

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

1）首頁明確，主題突出

2）文字的排版

3）盡可能縮短下載時間

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

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

可在新聞標題前采用標準編目符或小的圖像作為點綴，增加頁面可讀性。將新聞標題的列表放在一個上下滾動的窗口中，以便容納更多的新聞。新聞頁面

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

tb_order_detail訂單明細表

tb_member

會員表

tb_order

訂單表各表間的關系補充：數(shù)據(jù)庫設計

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

（1）Jsp經(jīng)典設計模式請求響應瀏覽器關系數(shù)據(jù)庫JSPJavaBeansJDBC瀏覽器關系數(shù)據(jù)庫serveletJavaBeansJDBCjsp請求響應(2)采用第一種設計模式：與數(shù)據(jù)庫連接

JDBC（JavaDataBaseConnectivity，Java數(shù)據(jù)庫連接）是Sun公司制定的Java連接數(shù)據(jù)庫技術的簡稱。它是Sun公司聯(lián)合數(shù)據(jù)庫開發(fā)商開發(fā)出來的獨立于DBMS的API（ApplicationProgrammingInterface，應用程序接口），它為Java開發(fā)者使用數(shù)據(jù)庫提供了統(tǒng)一的API。

JDBC提供了四種連接數(shù)據(jù)庫的驅(qū)動程序方法。JDBC-ODBC橋（JDBC-ODBCBridge）驅(qū)動程序。本機代碼和Java驅(qū)動程序。純Java驅(qū)動程序。本機協(xié)議Java驅(qū)動程序。

利用JDBC實現(xiàn)數(shù)據(jù)庫的操作一般可分為如下幾個步驟：加載JDBC驅(qū)動程序。獲取連接接口。創(chuàng)建Statement對象。執(zhí)行Statement對象。查看返回的結(jié)果集。關閉結(jié)果集對象。關閉Statement對象。關閉連接接口。JDBC中的各種接口與類之間的關系，使用其進行數(shù)據(jù)庫連接、執(zhí)行和獲取數(shù)據(jù)的過程如圖.使用Class.forName()方法加載和注冊驅(qū)動程序后，由DriverManager類負責管理并跟蹤JDBC驅(qū)動程序，在數(shù)據(jù)庫和相應驅(qū)動程序之間建立連接。DriverManager類還處理如驅(qū)動程序登錄時間限制及登錄和跟蹤消息的顯示等事務。java.sql.Con