電商系統(tǒng)設(shè)計(jì)報(bào)告

《電商系統(tǒng)設(shè)計(jì)報(bào)告》由會(huì)員分享，可在線閱讀，更多相關(guān)《電商系統(tǒng)設(shè)計(jì)報(bào)告（39頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、 電 子 商 務(wù) 系 統(tǒng) 報(bào) 告 目錄 一、系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì) 1.1 系統(tǒng)外部接口 1.2 系統(tǒng)組成結(jié)構(gòu) 1.3 系統(tǒng)設(shè)計(jì)原則 二、系統(tǒng)信息基礎(chǔ)設(shè)施設(shè)計(jì) 2.1IT 基礎(chǔ)設(shè)施規(guī)劃定義 2.2IT 基礎(chǔ)設(shè)施規(guī)劃內(nèi)容 三、支持平臺(tái)設(shè)計(jì) 3.1 網(wǎng)站建設(shè)目標(biāo) 3.2 項(xiàng)目基礎(chǔ)分析 3.3 網(wǎng)站功能欄目 3.4 網(wǎng)站框架圖

2、3.5 網(wǎng)站開發(fā)預(yù)算 四、應(yīng)用系統(tǒng)設(shè)計(jì) 4.1 應(yīng)用軟件系統(tǒng)與子系統(tǒng)的劃分 4.2 數(shù)據(jù)庫(kù)與數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì) 4.3 輸入輸出設(shè)計(jì) 五、網(wǎng)頁(yè)設(shè)計(jì) 5.1 首頁(yè)制作 5.2 商品展示頁(yè)面制作 5.3 登陸界面的制作 5.4 注冊(cè)頁(yè)面的制作 5.5 結(jié)賬頁(yè)面的制作 一、 系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì) 1.1 系統(tǒng)外部接口 從上圖中可以看到， 系統(tǒng)有 4 個(gè)接口，分別是通過(guò)瀏覽器和用戶

3、 的接口、通過(guò)瀏覽器與圖書供應(yīng)商的接口、企業(yè)內(nèi)部的接口、通過(guò)專 門的軟件和銀行及其他支付平臺(tái)的接口。 1.2 系統(tǒng)組成結(jié)構(gòu) 零食銷售的系統(tǒng)由商業(yè)邏輯和應(yīng)用服務(wù)器組成，其中，應(yīng)用服務(wù) 器又由 Web表達(dá)層應(yīng)用、支持平臺(tái)、互聯(lián)集成工具等幾個(gè)部分組成。 1.3 系統(tǒng)設(shè)計(jì)原則 由于本網(wǎng)站是基于 C2C模式的零食銷售， 因此，本系統(tǒng)設(shè)計(jì)的原 則有： （1）系統(tǒng)的可擴(kuò)展性 系統(tǒng)設(shè)計(jì)除了可以適應(yīng)目前的網(wǎng)站的需要以外， 應(yīng)充分考慮用戶 日后的業(yè)務(wù)發(fā)展需要，為業(yè)務(wù)發(fā)展提供接口。例如，如果

4、網(wǎng)站還要擴(kuò) 充一些娛樂(lè)功能， 系統(tǒng)可以輕松的進(jìn)行擴(kuò)充， 從而降低未來(lái)的管理成 本。 （2）技術(shù)即時(shí)性 兼顧系統(tǒng)成熟性和先進(jìn)性的技術(shù)，才能保證現(xiàn)有系統(tǒng)的先進(jìn)性， 使計(jì)算機(jī)系統(tǒng)發(fā)揮最大的效率，并使之隨著技術(shù)的發(fā)展不斷升級(jí)。 （ 3）系統(tǒng)的穩(wěn)定性 采用計(jì)算機(jī)系統(tǒng)管理的目的就是為了提高企業(yè)運(yùn)作效率，網(wǎng)站必 須保持 24*7 的工作方式（每天 24 小時(shí)、每周 7 天），從而保證交易 的即時(shí)性。 （ 4）電子交易的安全性 安全性是整個(gè)電子商務(wù)解決方案中最重要的方面， 因此，在系統(tǒng)

5、 設(shè)計(jì)時(shí)，需要充分保證對(duì)系統(tǒng)安全性的要求，通過(guò)支付密碼技術(shù)、安 全用戶授權(quán)體系等技術(shù)來(lái)實(shí)現(xiàn)系統(tǒng)安全性。 （5）用戶界面的友好 因?yàn)楸揪W(wǎng)站主要側(cè)重于網(wǎng)上交易， 因此系統(tǒng)建設(shè)應(yīng)該注重用戶的 感受，將用戶的個(gè)人空間和交易界面設(shè)計(jì)的更加友好和個(gè)性化。 二、系統(tǒng)信息基礎(chǔ)設(shè)施設(shè)計(jì) 信息化基礎(chǔ)設(shè)施 (IT 基礎(chǔ)設(shè)施 ) 建設(shè)也需要進(jìn)行規(guī)劃。如果只是 盲目地花錢，增加硬件、軟件投資，表面上看起來(lái)好看，但是會(huì)存在 很多問(wèn)題。再者， 當(dāng)今技術(shù)的發(fā)展也遠(yuǎn)超過(guò)了人們的預(yù)期，即使剛建 設(shè)兩三年的基礎(chǔ)設(shè)施也不可避免地面臨

6、一些新的挑戰(zhàn)， 如新出現(xiàn)的分 布式業(yè)務(wù)系統(tǒng)非常復(fù)雜， 它就會(huì)對(duì)基礎(chǔ)設(shè)施提出新的要求， 還有大量結(jié)構(gòu)化數(shù)據(jù)的出現(xiàn)使得存儲(chǔ)介質(zhì)、 存儲(chǔ)結(jié)構(gòu)都會(huì)發(fā)生很大的變化。 因此，企業(yè)的這些基礎(chǔ)設(shè)施期待重新進(jìn)行規(guī)劃，以適應(yīng)新的發(fā)展 2.1、IT 基礎(chǔ)設(shè)施規(guī)劃定義 所謂 IT 基礎(chǔ)設(shè)施規(guī)劃，就是合理規(guī)劃和安排各項(xiàng)信息化基礎(chǔ)設(shè) 施，使之形成良好的 IT 環(huán)境，讓各種業(yè)務(wù)解決方案、應(yīng)用系統(tǒng)和數(shù) 據(jù)都能不受約束地在其上實(shí)現(xiàn)有效配合。 這些基礎(chǔ)設(shè)施包括網(wǎng)絡(luò)、 硬 件設(shè)備和基礎(chǔ)軟件。 網(wǎng)絡(luò)規(guī)劃包括數(shù)據(jù)流量及約束條件分析、 網(wǎng)絡(luò)選 型、拓?fù)浣Y(jié)構(gòu)設(shè)計(jì)、網(wǎng)絡(luò)安

7、全方案、網(wǎng)絡(luò)建設(shè)方案等；硬件設(shè)備規(guī)劃 包括服務(wù)器、路由器、交換機(jī)、集線器、臺(tái)式機(jī)、筆記本、打印機(jī)、 手持設(shè)備等的規(guī)劃和配置等； 基礎(chǔ)軟件規(guī)劃包括操作系統(tǒng)軟件、 數(shù)據(jù) 庫(kù)軟件等軟件的規(guī)劃等等 2.2 、IT 基礎(chǔ)設(shè)施規(guī)劃內(nèi)容 網(wǎng)絡(luò)規(guī)劃 現(xiàn)在，企業(yè)和事業(yè)單位基本上建設(shè)有自己的網(wǎng)絡(luò)系統(tǒng)， 但是隨著 業(yè)務(wù)需求的增長(zhǎng)和技術(shù)的發(fā)展， 都不得不面臨優(yōu)化、 擴(kuò)容和升級(jí)的問(wèn)題。 在進(jìn)行網(wǎng)絡(luò)的相關(guān)規(guī)劃 時(shí)，主要側(cè)重幾個(gè)方面，一是提出企業(yè)和事業(yè)單位的 LAN/WAN(局域網(wǎng) / 廣域網(wǎng) ) 的網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)的建設(shè) / 改

8、良方案；二是確定合理的網(wǎng)絡(luò)協(xié)議； 三是評(píng)估現(xiàn)有的結(jié)構(gòu)化布線系統(tǒng)的容量、網(wǎng)絡(luò)設(shè)備、廣域網(wǎng)數(shù)據(jù)鏈路帶寬是否滿足未來(lái)新業(yè)務(wù)的需求，否則就要進(jìn)行相應(yīng)的擴(kuò)充和升級(jí)等。 儲(chǔ)系統(tǒng)規(guī)存劃 存儲(chǔ)系統(tǒng)的規(guī)劃遵循以下原則 : （1）存儲(chǔ)架構(gòu)必須滿足數(shù)據(jù)集中的要求 存儲(chǔ)架構(gòu)能夠適應(yīng)大存儲(chǔ)容量的需求，又能夠?qū)Υ鎯?chǔ)資源進(jìn)行集中利用 （2）存儲(chǔ)架構(gòu)能夠?qū)υ械耐顿Y進(jìn)行保護(hù) 存儲(chǔ)架構(gòu)是一個(gè)長(zhǎng)期的 架構(gòu)，而如今存儲(chǔ)設(shè)備的升級(jí)速度也非常迅速， 進(jìn)行存儲(chǔ)架構(gòu)規(guī)劃時(shí)要考慮到對(duì)客戶現(xiàn)有設(shè)備的投資保護(hù)， 在保證不斷提供功能和性能提 高的同時(shí)，存儲(chǔ)架構(gòu)在較長(zhǎng)的時(shí)間內(nèi)能夠保持相對(duì)穩(wěn)

9、定。 （3）存儲(chǔ)設(shè)備必須具有瞬間數(shù)據(jù)復(fù)制功能 利用完全基于存儲(chǔ)設(shè)備 的數(shù)據(jù)復(fù)制功能，可以在不影響主機(jī)工作的情況下在最短的時(shí)間對(duì)數(shù) 據(jù)進(jìn)行快照式復(fù)制。 (4) 存儲(chǔ)設(shè)備必須具有遠(yuǎn)程數(shù)據(jù)復(fù)制功能利用該功能 存儲(chǔ)設(shè)備可以 提供與主機(jī)無(wú)關(guān)的數(shù)據(jù)級(jí)遠(yuǎn)程災(zāi)難備份， 對(duì)于一些不支持遠(yuǎn)程災(zāi)難備 份的主機(jī)系統(tǒng)，可以利用存儲(chǔ)進(jìn)行遠(yuǎn)程災(zāi)備。 (5) 高性能 集中的存儲(chǔ)系統(tǒng)將支持多種核心應(yīng)用，連接幾臺(tái)甚至十幾臺(tái)同時(shí)工作的服務(wù)器，存儲(chǔ)系統(tǒng)必須有高的性能才能勝任。 (6) 高可用性與高數(shù)據(jù)安全性 數(shù)據(jù)中心是核心應(yīng)用的最終保障，

10、必須能夠保證 7X24全天候運(yùn)行，存儲(chǔ)系統(tǒng)必須有高可用性，以保證應(yīng)用系統(tǒng)對(duì)數(shù)據(jù)的隨時(shí)存取。 (7) 靈活的擴(kuò)展性 存儲(chǔ)系統(tǒng)必須有強(qiáng)大的擴(kuò)展性來(lái)滿足這種高速發(fā)展的要求。 備份系統(tǒng)規(guī)劃 備份系統(tǒng)應(yīng)以不影響業(yè)務(wù)系統(tǒng)正常運(yùn)作為前提。 在業(yè)務(wù)系統(tǒng)遭受非法入侵、介質(zhì)損壞、人為誤操作等原因引起的數(shù)據(jù)丟失后，備份系統(tǒng)應(yīng)能提供快速的數(shù)據(jù)恢復(fù)手段。 要真正保證系統(tǒng)高效的運(yùn)行以及提高當(dāng)災(zāi)難出現(xiàn)時(shí)的抵御與恢復(fù)能力， 就必須做好數(shù)據(jù)的備份。 一般來(lái)說(shuō)，各種操作系統(tǒng)所附帶的備份程序都有著這樣或那樣的缺陷， 所以若想對(duì)數(shù)據(jù)進(jìn)行可靠的存儲(chǔ)備份， 必須選擇專門的存儲(chǔ)備份軟、 硬件，并制定相應(yīng)的存儲(chǔ)

11、備份及恢復(fù)方案。 系統(tǒng)管理規(guī)劃 互聯(lián)網(wǎng)、操作系統(tǒng)、數(shù)據(jù)庫(kù)等新技術(shù)的應(yīng)用，組成了復(fù)雜而相互依存的 IT 系統(tǒng)。機(jī)構(gòu)與企業(yè)在享受新技術(shù)帶來(lái)的便捷的同時(shí)，也面臨著復(fù)雜的系統(tǒng)和應(yīng)用管理問(wèn)題。 系統(tǒng)管理是以服務(wù)質(zhì)量戰(zhàn)略為核心， 利用針對(duì)業(yè)務(wù)應(yīng)用管理的新技術(shù)，對(duì)整個(gè)分布式網(wǎng)絡(luò)環(huán)境進(jìn)行統(tǒng)一監(jiān)控和管理， 使之逐步整合成 為一個(gè)安全、可靠的網(wǎng)絡(luò)體系， 實(shí)現(xiàn)集中管理、 全面防護(hù)的目的。 一 般來(lái)說(shuō)，系統(tǒng)管理規(guī)劃設(shè)計(jì)如下內(nèi)容 :(1) 一體化網(wǎng)絡(luò)和系統(tǒng)管理平 臺(tái)，改善了網(wǎng)絡(luò)和系統(tǒng)管理； (2) 功能強(qiáng)大的管理報(bào)告解決方案，隨 時(shí)

12、了解網(wǎng)絡(luò)和系統(tǒng)的運(yùn)行情況； (3) 端到端資源和性能管理解決方案， 做到 IT 資源的遠(yuǎn)程監(jiān)控、 分發(fā)和變更管理； (4) 具有實(shí)時(shí)診斷和監(jiān)控 功能的工具；（5）提供可全面管理系統(tǒng)可用性與性能的綜合性產(chǎn)品； (6) 對(duì)服務(wù)器與數(shù)據(jù)庫(kù)的性能和可用性進(jìn)行管理的產(chǎn)品，確保數(shù)據(jù)庫(kù)的穩(wěn)定性和可用性等。 安全規(guī)劃 安全問(wèn)題已經(jīng)變得比以往任何時(shí)候都重要。 為了保障數(shù)據(jù)、 網(wǎng)絡(luò)等的安全，人們紛紛進(jìn)行相關(guān)安全技術(shù)的研究，由此，目錄產(chǎn)品、加密技術(shù)、認(rèn)證技術(shù)、病毒防護(hù)技術(shù)、入侵檢測(cè)技術(shù)、防火墻技術(shù)等營(yíng)運(yùn)而生。而在信息化基礎(chǔ)設(shè)施規(guī)劃中， 有關(guān)安全產(chǎn)品與技術(shù)的規(guī)劃也越來(lái)

13、越占據(jù)重要地位。 操作系統(tǒng)規(guī)劃 操作系統(tǒng)經(jīng)過(guò)很長(zhǎng)時(shí)間的發(fā)展，從單用戶、單任務(wù)的操作系統(tǒng)， 如 CP/M、C-DOS、M-DOS、TRS-DOS、 S-DOS和 MS-DOS等，發(fā)展到多用戶多道作業(yè)和分時(shí)系統(tǒng)，其典型代 表有 UNIX、XENIX、OS/2 和 Windows操作系統(tǒng)等，以及自由軟件 Linux 操作系統(tǒng)。每次操作系統(tǒng)的更新都經(jīng)歷了多個(gè)版本的升級(jí)， 如 DOS經(jīng) 歷的 7 次大的版本升級(jí)， Windows的幾次大升級(jí)等。 在進(jìn)行操作系 統(tǒng)規(guī)劃時(shí)，既不能因循守舊，也不能一味從新。最佳策略是 : 結(jié)合機(jī) 構(gòu)或者企業(yè)的實(shí)際情

14、況， 在對(duì)各種操作系統(tǒng)進(jìn)行綜合評(píng)估比較的基礎(chǔ) 上，謹(jǐn)慎選擇是否升級(jí)版本或更新操作系統(tǒng) . 數(shù)據(jù)庫(kù)系統(tǒng)規(guī)劃 數(shù)據(jù)庫(kù)技術(shù)和產(chǎn)品在不斷地的發(fā)展，主要體現(xiàn)在以下幾個(gè)方面 : (1) 數(shù)據(jù)模型是數(shù)據(jù)庫(kù)發(fā)展的主線。由于硬件技術(shù)飛速發(fā)展，支持 64 個(gè) CPU和 64GB RAM的并行計(jì)算機(jī)使數(shù)據(jù)庫(kù)系統(tǒng)擴(kuò)展性大大提高，也使查詢優(yōu)化的參數(shù)空間發(fā)生改變； （ 2）數(shù)據(jù)庫(kù)技術(shù)與其他計(jì)算機(jī)技術(shù)的結(jié)合及相互滲透是數(shù)據(jù)庫(kù)發(fā)展的重要特征； (3) 應(yīng)用需求是推動(dòng)數(shù)據(jù)庫(kù)技術(shù)不斷發(fā)展的動(dòng)力。數(shù)據(jù)庫(kù)被廣泛地應(yīng)用到 ERP、CRM、CIM、 OA、GIS

15、 等系統(tǒng)中。當(dāng)前，數(shù)據(jù)庫(kù)應(yīng)用已經(jīng)從 OLTP向 OLAP，從數(shù)據(jù) 管理向內(nèi)容管理的廣度擴(kuò)展。 至于數(shù)據(jù)庫(kù)產(chǎn)品與技術(shù)方面的競(jìng)爭(zhēng)， 主要在 Oracle 、IBM DB2和 Microsoft SQL Server 之間展開。從目前的情況看，Oracle 占據(jù)了第一的位置，其后是 IBM DB2，Microsoft SQL Server 盡管仍位居兩者之后，但是發(fā)展勢(shì)頭迅猛。在進(jìn)行數(shù)據(jù)庫(kù)方 面的規(guī)劃時(shí)，首先要確認(rèn)機(jī)構(gòu)或企業(yè)內(nèi)外的數(shù)據(jù)類型、數(shù)據(jù)內(nèi)容、數(shù) 據(jù)量。如果已有數(shù)據(jù)庫(kù)，也要對(duì)原有數(shù)據(jù)庫(kù)的軟件結(jié)構(gòu)、系統(tǒng)結(jié)構(gòu)、 數(shù)據(jù)流程、業(yè)務(wù)情況、使用情況、系統(tǒng)性

16、能進(jìn)行一系列的綜合分析和 測(cè)試。在此基礎(chǔ)上，就可以根據(jù)用戶的實(shí)際情況，綜合考慮系統(tǒng)提供 服務(wù)的用戶數(shù)、 信息量、業(yè)務(wù)需求和服務(wù)級(jí)別， 提供系統(tǒng)的、合理的、 綜合的硬件，系統(tǒng)和數(shù)據(jù)庫(kù)規(guī)劃建議。 備份系統(tǒng)規(guī)劃 備份系統(tǒng)應(yīng)以不影響業(yè)務(wù)系統(tǒng)正常運(yùn)作為前提。 在業(yè)務(wù)系統(tǒng)遭受 非法入侵、介質(zhì)損壞、人為誤操作等原因引起的數(shù)據(jù)丟失后，備份系 統(tǒng)應(yīng)能提供快速的數(shù)據(jù)恢復(fù)手段。 要真正保證系統(tǒng)高效的運(yùn)行以及 提高當(dāng)災(zāi)難出現(xiàn)時(shí)的抵御與恢復(fù)能力， 就必須做好數(shù)據(jù)的備份。 一般來(lái)說(shuō)，各種操作系統(tǒng)所附帶的備份程序都有著這樣或那樣

17、的缺陷， 所以若想對(duì)數(shù)據(jù)進(jìn)行可靠的存儲(chǔ)備份， 必須選擇專門的存儲(chǔ)備份軟、 硬件，并制定相應(yīng)的存儲(chǔ)備份及恢復(fù)方案。系統(tǒng)管理規(guī)劃 互聯(lián)網(wǎng)、操作系統(tǒng)、數(shù)據(jù)庫(kù)等新技術(shù)的應(yīng)用，組成了復(fù)雜而相互 依存的 IT 系統(tǒng)。機(jī)構(gòu)與企業(yè)在享受新技術(shù)帶來(lái)的便捷的同時(shí)，也面 臨著復(fù)雜的系統(tǒng)和應(yīng)用管理問(wèn)題。系統(tǒng)管理是以服務(wù)質(zhì)量戰(zhàn)略為核 心，利用針對(duì)業(yè)務(wù)應(yīng)用管理的新技術(shù)， 對(duì)整個(gè)分布式網(wǎng)絡(luò)環(huán)境進(jìn)行統(tǒng) 一監(jiān)控和管理，使之逐步整合成為一個(gè)安全、可靠的網(wǎng)絡(luò)體系，實(shí)現(xiàn) 集中管理、全面防護(hù)的目的。 一般來(lái)說(shuō)，系統(tǒng)管理規(guī)劃設(shè)計(jì)如下內(nèi) 容: (1) 一體化網(wǎng)絡(luò)

18、和系統(tǒng)管理平臺(tái)， 改善了網(wǎng)絡(luò)和系統(tǒng)管理； (2) 功能強(qiáng)大的管理報(bào)告解決方案，隨時(shí)了解網(wǎng)絡(luò)和系統(tǒng)的運(yùn)行情況； (3) 端到端資源和性能管理解決方案， 做到 IT 資源的遠(yuǎn)程監(jiān)控、 分發(fā)和變更管理； (4) 具有實(shí)時(shí)診斷和監(jiān)控功能的工具； (5) 提供可全面管理系統(tǒng)可用性與性能的綜合性產(chǎn)品； (6) 對(duì)服務(wù)器與數(shù)據(jù)庫(kù)的 性能和可用性進(jìn)行管理的產(chǎn)品，確保數(shù)據(jù)庫(kù)的穩(wěn)定性和可用性等 三、支持平臺(tái)設(shè)計(jì) 食品行業(yè)在我國(guó)國(guó)民經(jīng)濟(jì)中占有舉足輕重的地位， 2009 年 1 至五月份中國(guó)食品工業(yè)產(chǎn)值實(shí)現(xiàn) 1082 萬(wàn)億元產(chǎn)值， 14.6%的增速，

19、高出全國(guó)工業(yè)增加值速 6.57 個(gè)百分點(diǎn)，盡管在金融風(fēng)暴的沖擊下， 我國(guó)經(jīng)濟(jì)增速放緩，但食品產(chǎn)業(yè)荏苒保持強(qiáng)大定力，逆勢(shì)上升。 由此可見食品產(chǎn)業(yè)所面對(duì)的巨大市場(chǎng)。從 2000 年開始，以信息化 和網(wǎng)絡(luò)經(jīng)濟(jì)為代表的全球新經(jīng)濟(jì)飛速發(fā)展，吸引了各個(gè)行業(yè)商家的眼球，引領(lǐng)著各個(gè)行業(yè)的經(jīng)營(yíng)理念。食品產(chǎn)業(yè)同樣在這場(chǎng)變革中引入了電子商務(wù)經(jīng)營(yíng)模式。 網(wǎng)絡(luò)作為第四媒體，具有一定的特殊性。網(wǎng)絡(luò)不僅具有廣泛 地宣傳范圍， 而且還具有操作上的互動(dòng)性以及數(shù)據(jù)傳輸?shù)募皶r(shí)性。網(wǎng)絡(luò)在最大程度上縮減了交易的成本，縮短了交易的時(shí)間，擴(kuò)大了客戶群，加快了信息流通速度儼然

20、已經(jīng)成為了聯(lián)系生產(chǎn)者及消費(fèi)者的最方便的橋梁。企業(yè)和用戶實(shí)現(xiàn)了直接接軌，屏蔽了多級(jí)中間商。 對(duì)于食品行業(yè)從事電子商務(wù)企業(yè)的運(yùn)營(yíng)模式，目前有 B To B,B To C,C To C三種模式，目前網(wǎng)絡(luò)市場(chǎng)的主要形式則是 B To B。 盡管互聯(lián)網(wǎng)時(shí)代的到來(lái)為大型食品企業(yè)和中小型食品企業(yè)在不同 的方面都帶來(lái)了新的商機(jī)，但是食品行業(yè)的特殊性值得企業(yè)家們 的特別關(guān)注。食品行業(yè)是與老百姓日常生活關(guān)系最密切的、相關(guān) 企業(yè)最多的、投入最大的行業(yè)之一。而且就目前中國(guó)食品行業(yè)的 現(xiàn)狀而言，在規(guī)模及管理上都存在著巨大差異。因此，選擇恰當(dāng)

21、 的經(jīng)營(yíng)模式是各企業(yè)成功發(fā)展的重要環(huán)節(jié)。電子商務(wù)可能為一個(gè) 企業(yè)創(chuàng)造巨大商機(jī)和財(cái)富。也可能成為一個(gè)企業(yè)增加開銷，造成 資源浪費(fèi)的源頭。 3.1 網(wǎng)站建設(shè)目標(biāo) 通過(guò)互聯(lián)網(wǎng)這個(gè)平臺(tái)銷售有機(jī)綠色食品，推廣企業(yè)的品牌， 采用網(wǎng)上商城系統(tǒng)、新聞發(fā)布系統(tǒng)、會(huì)員管理系統(tǒng)、電子支付系 統(tǒng)相結(jié)合的運(yùn)營(yíng)平臺(tái)，才是長(zhǎng)期的、可行的、省錢的方案。 建立一個(gè)完整的食品網(wǎng)站，突出食品特點(diǎn)，有美觀的界面設(shè) 計(jì)。主要功能： 1. 用戶可以瀏覽各種食品的信息，同時(shí)可以查詢食品的信息，在線留言。注冊(cè)等功能。 2.

22、 網(wǎng)站有一定數(shù)量食品相關(guān)信息可供處理，方便顧客了解食品各種相關(guān)信息，同時(shí)有利于食品管理部門的管理，加強(qiáng)雙邊的溝通與協(xié)作，以提高和改善管理水平，使顧客通過(guò)網(wǎng)站的瀏覽可以對(duì)食品有比較真實(shí)和豐富的了解，對(duì)食品本身做一個(gè)比較好的宣傳和推廣。 3. 管理人員登陸系統(tǒng)后，將各種煩瑣的管理工作通過(guò)網(wǎng)站來(lái)管理，用最少的人力和物力提高管理水平，方便發(fā)布各種旅游信息，處理游客所遇到的各種問(wèn)題，及時(shí)了解對(duì)食品管理部門的意見，通過(guò)數(shù)據(jù)分析可以了解顧客的基本情況，突出食品特點(diǎn)，具有美觀的界面設(shè)計(jì)，保證網(wǎng)站安全穩(wěn)定的運(yùn)行。 3.2 項(xiàng)目基礎(chǔ)分析 我們根據(jù)對(duì)網(wǎng)絡(luò)營(yíng)銷項(xiàng)目的初步了解，對(duì)網(wǎng)絡(luò)營(yíng)銷項(xiàng)

23、目進(jìn)行了 系列基礎(chǔ)分析 ： 1 業(yè)務(wù)定位 網(wǎng)絡(luò)營(yíng)銷項(xiàng)目的主要業(yè)務(wù)定位是：①網(wǎng)上零售 ②品牌形象推廣 2 網(wǎng)站定位 網(wǎng)站為企業(yè)實(shí)現(xiàn)網(wǎng)上營(yíng)銷，完成如下職能： 1 網(wǎng)上銷售產(chǎn)品 2 推廣自己品牌（通過(guò)活動(dòng)和推廣提升品牌知名度） 3 客戶定位 網(wǎng)站的目標(biāo)客戶群體定位是： 1 主要目標(biāo)客戶群：終端買家 2 次要客戶群：代理商，批發(fā)商 4 贏利模式定位 1 網(wǎng)上直銷收入：網(wǎng)站的主要贏利來(lái)源，主要為產(chǎn)品個(gè)人零 售收入 2 網(wǎng)上招商收入：代理商分

24、站 為網(wǎng)站輔助贏利來(lái)源， 包含收取產(chǎn)品加盟商的加盟費(fèi)、 產(chǎn)品代理分銷收入 3.3 網(wǎng)站功能欄目 A. 產(chǎn)品展示 客戶能夠以多種分類方式瀏覽產(chǎn)品，并擁有強(qiáng)大的產(chǎn)品搜索功能 能夠最快速地幫助客戶鎖定感興趣的產(chǎn)品； 管理員在后臺(tái)可輕松完成 對(duì)商品信息的添加、統(tǒng)計(jì)、查詢等管理和維護(hù)過(guò)程 A.1 產(chǎn)品發(fā)布（后臺(tái)） 管理員可在線發(fā)布各種產(chǎn)品資料， 含產(chǎn)品圖片（支持大圖、小圖）、 價(jià)格（支持多級(jí)價(jià)格）、簡(jiǎn)介等 A.2 產(chǎn)品查詢 客戶可按產(chǎn)品關(guān)鍵字、產(chǎn)品分類、用途等多種查詢條件，快速鎖

25、 定感興趣的產(chǎn)品 A.3 產(chǎn)品推薦 可按精品推薦、新品推薦、人氣產(chǎn)品、暢銷產(chǎn)品四種方式進(jìn)行產(chǎn) 品推薦排行 A.4 產(chǎn)品評(píng)論 產(chǎn)品評(píng)論可為客戶采購(gòu)提供客觀的參考意見?？蛻簦ɑ蚬芾韱T） 可對(duì)產(chǎn)品發(fā)表評(píng)分，或評(píng)論意見、用戶見證 A.5 產(chǎn)品關(guān)聯(lián) 產(chǎn)品介紹頁(yè)面中，可以看到與當(dāng)前產(chǎn)品有關(guān)的其他產(chǎn)品列表 A.6 產(chǎn)品管理（后臺(tái)） 管理員可在線輕松進(jìn)行各類產(chǎn)品資料的修改、刪除、排序、查詢統(tǒng)計(jì)等編輯操作。 特色功能：客戶可對(duì)產(chǎn)品圖片進(jìn)行放大或縮小查看B.產(chǎn)品訂購(gòu) 配備簡(jiǎn)單快捷的全套訂購(gòu)系統(tǒng)，

26、能有效地保障客戶快速完成訂購(gòu)過(guò)程，提高網(wǎng)站成交率 B.1 在線訂購(gòu)（購(gòu)物車） 客戶首先必須進(jìn)行會(huì)員注冊(cè)，才可進(jìn)行在線訂購(gòu)系統(tǒng)?？蛻艨蛇x 擇配送方式和支付方式 B.2 直接訂購(gòu) 客戶也可選擇直接訂購(gòu)的便捷方式：無(wú)需會(huì)員注冊(cè)，直接打免費(fèi) 電話或在線填寫訂單訂購(gòu) B.3 訂單查詢 客戶可在線查看和修改自己的網(wǎng)上訂單和交易記錄 B.4 訂購(gòu)指南 包括訂購(gòu)方式、配送方式、售后服務(wù)、常見問(wèn)題、付款方式等說(shuō) 明 B.5 在線支付 支持網(wǎng)上銀行、支付寶等多種在線支付

27、方式 B.6 訂單管理（后臺(tái)） 管理員在后臺(tái)可輕松實(shí)現(xiàn)客戶在線訂單的查詢、統(tǒng)計(jì)、跟蹤、編 輯等功能 C.企業(yè)介紹 客戶更可能的從多方面了解本企業(yè)，將有力提升本企業(yè)的品牌形 象和網(wǎng)上銷售的可信度 C.1 企業(yè)概況 企業(yè)概述、發(fā)展歷程等， 常規(guī)采用文字 +企業(yè)形象照片形式 （可選購(gòu)“企業(yè)視頻介紹”功能） C.2 主營(yíng)業(yè)務(wù) 企業(yè)主要經(jīng)營(yíng)的產(chǎn)品與服務(wù)項(xiàng)目簡(jiǎn)介 C.3 使命愿景 企業(yè)的經(jīng)營(yíng)宗旨、價(jià)值觀、使命宣言、發(fā)展愿景 C.4 企業(yè)風(fēng)采 生產(chǎn)基地可

28、重點(diǎn)展示綠色有機(jī)食品的生產(chǎn)環(huán)境和過(guò)程，讓消費(fèi)者放心；公司可展示辦公室景象照片等 D.會(huì)員管理 客戶可通過(guò)“會(huì)員注冊(cè)”來(lái)提交自己的簡(jiǎn)介資料，管理員也可以 此收集網(wǎng)站訪問(wèn)者的聯(lián)系資料。管理員可對(duì)注冊(cè)會(huì)員資料進(jìn)行統(tǒng)計(jì)、 查詢、編輯等操作 D.1 會(huì)員注冊(cè) 客戶通過(guò)“會(huì)員注冊(cè)”，輸入公司名稱、姓名、聯(lián)系方式、省份城 市等資料，注冊(cè)成為本站會(huì)員 D.2 會(huì)員登錄 會(huì)員注冊(cè)后，可使用會(huì)員登錄功能登陸企業(yè)網(wǎng)站，才可使用本站的多項(xiàng)會(huì)員服務(wù)功能 D.3 會(huì)員資料管理（會(huì)員中心） 會(huì)員登錄后即進(jìn)入會(huì)員中心

29、，可查看和修改自己的會(huì)員注冊(cè)資料（簡(jiǎn)介、密碼、聯(lián)系方式等） 、會(huì)員狀態(tài)（會(huì)員積分、會(huì)員級(jí)別等） D.4 會(huì)員信息管理 會(huì)員在“會(huì)員中心”中，可發(fā)布和管理自己的簡(jiǎn)介信息、訂單信 息、資訊信息等類別信息 D.5 會(huì)員權(quán)限管理（后臺(tái)） 管理員可設(shè)置多種會(huì)員類型，對(duì)不同類型的會(huì)員可設(shè)置不同的服務(wù)權(quán)限。（例如可設(shè)置普通會(huì)員、高級(jí)會(huì)員，享有不同的產(chǎn)品定價(jià)折 扣和不同的產(chǎn)品信息或資訊文章的瀏覽權(quán)限） E.聯(lián)系我們 網(wǎng)站必須提供盡量多元化的聯(lián)系方式，盡量方便客戶以最便捷的 方式，和我們產(chǎn)生交流，有力的提升

30、網(wǎng)上招商成功率和服務(wù)品質(zhì) F.管理員權(quán)限管理（后臺(tái)） 網(wǎng)站系統(tǒng)提供多種管理員權(quán)限設(shè)置功能，不 同級(jí)別的管理員具有不同的后臺(tái)功能管理權(quán)限， 不能越權(quán)操作其他功 能模塊，保證網(wǎng)站后臺(tái)系統(tǒng)的管理安全 3.4 網(wǎng)站框架圖 公司介紹 產(chǎn)品管理 會(huì)員服務(wù) 

31、 公司目前狀態(tài) 公司未來(lái)發(fā)展 類別管理 添加產(chǎn)品 價(jià)格管理 產(chǎn)品圖片 參數(shù)管理 會(huì)員注冊(cè) 會(huì)員登錄 詳見下文 產(chǎn)品知識(shí) 加盟與招聘

32、 新手指導(dǎo) 購(gòu)物指示 幫助中心 常見問(wèn)題解答 支付配送 關(guān)于我們 聯(lián)系我們 會(huì)員注冊(cè) 會(huì)員服務(wù) 會(huì)員登錄 賬戶查詢 3.5 網(wǎng)站開發(fā)預(yù)算 項(xiàng)目 說(shuō)明 網(wǎng)站開發(fā)建設(shè) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站首頁(yè) 首頁(yè)設(shè)

33、計(jì)采用客戶的既定標(biāo)準(zhǔn)色， 注重協(xié)調(diào)各區(qū)域的主次關(guān)系， 以營(yíng) 造高易用性與視覺(jué)舒適性的人機(jī) 交互界面為終極目標(biāo)； 網(wǎng)站欄目頁(yè) 根據(jù)網(wǎng)站結(jié)構(gòu)及信息類別的分類， （一級(jí)欄目頁(yè)） 確定需要獨(dú)立設(shè)計(jì)的頻道欄目。 設(shè) 計(jì)中兼顧并繼承首頁(yè)的設(shè)計(jì)風(fēng)格， 保障版面在各具體頁(yè)面中的適用 性和靈活性。 （活動(dòng) & 促銷、產(chǎn)品、新聞、會(huì)員 管理、購(gòu)物車、購(gòu)物幫助、積分、 關(guān)于我們） 網(wǎng)站內(nèi)容頁(yè) 根據(jù)上級(jí)頁(yè)面的設(shè)計(jì)風(fēng)格與內(nèi)容 （二級(jí)及以下 頁(yè)元素組成進(jìn)行設(shè)計(jì)， 出具設(shè)計(jì)稿 欄目頁(yè)） 圖形文件。 數(shù)據(jù)庫(kù)系統(tǒng)開發(fā)

34、 產(chǎn)品展示 多級(jí)分類功能； 自行添加修改刪除  單價(jià) 數(shù)量 價(jià)格 1000 1 1000 400 8 3200 150 10 1500 2000 1 2000

35、 數(shù)據(jù)； 產(chǎn)品關(guān)鍵詞指定； 圖片關(guān)鍵 詞及標(biāo)簽（ Tag）設(shè)定；優(yōu)先顯示 排序功能， 搜索分為模糊搜索和高 級(jí)搜索 2 種形式，模糊搜索結(jié)合網(wǎng) 站整體數(shù)據(jù)庫(kù)， 對(duì)網(wǎng)站所有信息進(jìn) 行關(guān)鍵字模糊搜索精確搜索應(yīng)用 于網(wǎng)站版塊， 可實(shí)現(xiàn)多層級(jí)精確搜 索，針對(duì)模糊搜索可進(jìn)行再次細(xì)化 搜索 產(chǎn)品訂購(gòu)系統(tǒng) 購(gòu)物車記憶功能， 防止顧客掉線丟 失購(gòu)物車商品信息； 購(gòu)物車提示功 能：可讓顧客隨時(shí)查看購(gòu)物車內(nèi)商 品和金額， 客戶可以在訂單中添加 備注內(nèi)容 訂單管理 能夠查看管理訂單信息，

36、 能夠按多 種方式對(duì)訂單信息進(jìn)行列表 管理員能夠定義訂單的處理狀態(tài)， 如正在處理、已確認(rèn)、無(wú)效等，能 夠自由修改訂單的狀態(tài) 能夠按類別、 關(guān)鍵字檢索訂單信息 積分管理 會(huì)員能夠查看自己的積分情況、 消 費(fèi)額（經(jīng)驗(yàn)值）情況；用戶可以用 積分兌換商品 管理員可以修改積分， 可以按類別 管理積分兌換或者附贈(zèng)禮品的管 理 網(wǎng)上支付系統(tǒng) 支付寶、易寶、財(cái)付通等 留言板 留言表格設(shè)置合理，可多人管理； 用戶發(fā)送留言后， 留言將自動(dòng)發(fā)至 指定郵箱； 網(wǎng)站管理員可以刪除留 言內(nèi)容；

37、資訊發(fā)布系統(tǒng) 管理和發(fā)布新聞?lì)愇恼聝?nèi)容； 每欄 目信息能夠按類別顯示， 方便瀏覽 者瀏覽與查找； 系統(tǒng)可以提取最新的信息在首頁(yè) 或欄目首頁(yè)顯示； 管理員能夠按類 別、關(guān)鍵字查詢信息，方便管理； 會(huì)員管理系統(tǒng) 瀏覽者在線填寫注冊(cè)表， 即時(shí)成為 網(wǎng)站全員； 會(huì)員可自行維護(hù)個(gè)人注 冊(cè)信息；后臺(tái)設(shè)置會(huì)員管理界面， 管理員可對(duì)會(huì)員信息進(jìn)行分類查 詢、對(duì)無(wú)效會(huì)員進(jìn)行刪除； 會(huì)員登錄后能夠查看、管理自己的信息；會(huì)員能夠查看自己的訂單、積分 

38、 900 1 900 900 1 900 600 1 600 600 1 600 500 1 500 1400 1 1400 1500 1 1500 值；會(huì)員能夠查看自己的歷史交易 記錄；會(huì)員能夠查看自己的收藏 夾； 權(quán)限管理 設(shè)立不同后臺(tái)模塊的

39、管理權(quán)限， 可 900 1 900 實(shí)現(xiàn)多人共同管理的目的 網(wǎng)站開發(fā)費(fèi)用總計(jì)： 15000 元，網(wǎng)站優(yōu)惠價(jià)： 12000 元 域名注冊(cè) .com100 元每年，三年共計(jì) 300 元，雙線全能虛擬主機(jī) 4GB， 1900 元每年，三年可享 8 折優(yōu)惠，即三年只要 4560 元，可省 1140 元 網(wǎng)站配套服務(wù) 在線客服交流 客戶可直接在線與公司交流 贈(zèng)送 1 贈(zèng)送 在線流量統(tǒng)計(jì) 可直接從網(wǎng)上看到網(wǎng)站的詢問(wèn)情 贈(zèng)送 1 贈(zèng)送 況 網(wǎng)站維護(hù)服務(wù)

40、終身免費(fèi)技術(shù)維護(hù) 贈(zèng)送 1 贈(zèng)送 網(wǎng)站設(shè)計(jì)排版 網(wǎng)站名稱 輸入內(nèi)容 搜索 會(huì)員服務(wù) 首頁(yè)  主食  休閑食品  調(diào)料  干貨  酒類  方便食品 公司介紹  產(chǎn)品展示 新聞中心 在線訂購(gòu) 幫助中心 版權(quán)所有

41、 四、應(yīng)用系統(tǒng)設(shè)計(jì) 4.1 應(yīng)用軟件系統(tǒng)與子系統(tǒng)的劃分 應(yīng)用軟件系統(tǒng)按邏輯劃分 應(yīng)用軟件系統(tǒng)的網(wǎng)絡(luò)接入設(shè)備室系統(tǒng)活動(dòng)開展的前提， 有設(shè)備的 接入才有之后各項(xiàng)操作的完成， 當(dāng)然保證安全是必要的， 所以要考慮 網(wǎng)絡(luò)接入的安全接入系統(tǒng)， 服務(wù)器部分主要針對(duì)信息的發(fā)布等相關(guān)內(nèi) 容。中間件主要是控制系統(tǒng)服務(wù)器等相關(guān)

42、的中間件安全系統(tǒng)。 數(shù)據(jù)存 儲(chǔ)部分是數(shù)據(jù)的管理， 分析應(yīng)用等。 開發(fā)維護(hù)部分是對(duì)系統(tǒng)的研究開 發(fā)維護(hù)，保證系統(tǒng)的安全運(yùn)營(yíng)。 按子系統(tǒng)的劃分 休閑 食品 網(wǎng)店 用戶 管理 子系 員子 統(tǒng) 系統(tǒng) 會(huì)員 網(wǎng)站 商品 購(gòu)物 查看 管理 商品 訂單 客服 注冊(cè)、 推薦 選購(gòu) 車管 訂單 員登 管理 管理 管理 登陸 理 陸 休閑食品網(wǎng)站

43、：總體上一個(gè)對(duì)外的版面，一切依據(jù)此來(lái)展開。 用戶子系統(tǒng)：一個(gè)有關(guān)于用戶的相關(guān)操作系統(tǒng)， 包括有用戶在該的網(wǎng)站活動(dòng)，相關(guān)信息的查看等等。 管理員子系統(tǒng)：該網(wǎng)站相關(guān)人員的活動(dòng)，對(duì)用戶的及時(shí)反饋，自身系統(tǒng)的管理。 4.2 數(shù)據(jù)庫(kù)與數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì) 數(shù)據(jù)庫(kù)與數(shù)據(jù)庫(kù)服務(wù)器建立連接是對(duì)數(shù)據(jù)的有效利用， 數(shù)據(jù)服務(wù)器與（應(yīng)用邏輯）基于 web 的應(yīng)用服務(wù)器通過(guò)請(qǐng)求、響應(yīng)聯(lián)系實(shí)現(xiàn)對(duì)數(shù)據(jù)的邏輯表達(dá)，基于 web 的應(yīng)用服務(wù)器與瀏覽器客戶機(jī)通過(guò)請(qǐng)求、響應(yīng)聯(lián)系來(lái)實(shí)

44、現(xiàn)對(duì)用戶的要求。 眾多服務(wù)器相互作用相互聯(lián)系共同服務(wù)于企業(yè)網(wǎng)站， web 服務(wù)器、應(yīng)用服務(wù)器、 事務(wù)服務(wù)器、數(shù)據(jù)庫(kù)服務(wù)器相互之間作用服務(wù)于總體系統(tǒng)。 4.3 輸入輸出設(shè)計(jì)

45、 輸入輸出設(shè)計(jì)主要針對(duì)應(yīng)用軟件的輸入輸出數(shù)據(jù)的格式、內(nèi)容、 方法等方面的設(shè)計(jì)， 保證期間的合理合法等。 輸入輸出主要是用戶通 過(guò)鍵盤完成在線的瀏覽、購(gòu)買、支付等過(guò)程，以及交易之后的相關(guān)事 宜等。 五、網(wǎng)頁(yè)設(shè)計(jì) 首頁(yè) 是 是 用戶登陸 商品分類 用戶注冊(cè) 否 否 驗(yàn)證 驗(yàn)證 進(jìn) 特 飲 糖 膨

46、 肉 餅 堅(jiān) 口 產(chǎn) 料 果 化 類 干 果 零 零 罐 巧 食 零 糕 炒 食 食 頭 克 品 食 點(diǎn) 貨 支付網(wǎng)頁(yè) 否 是 驗(yàn)證 系統(tǒng)流程圖 3-1 詳細(xì)設(shè)計(jì)與實(shí)現(xiàn) 5.1 首頁(yè)制作 打開 dreamweaver8 選擇站點(diǎn)，然后點(diǎn)擊新建站點(diǎn)， 在顯示出來(lái) 的頁(yè)面輸入站點(diǎn)的名稱，如下圖所示。

47、 圖 4-1 站點(diǎn)建立 然后點(diǎn)擊確認(rèn)，就會(huì)建立一個(gè)叫“零食網(wǎng)”的站點(diǎn)文件夾，可以在 dreamweaver8 的右下角看到，如圖 圖 4-2 文件夾視圖 在右下角的零食網(wǎng)文件夾出，右鍵點(diǎn)擊該文件夾，選擇新建文 件夾，命名為 CSS，用來(lái)存放建立的 CSS樣式文件。然后同理新建文件夾命名為 images，用來(lái)保存建立網(wǎng)頁(yè)所需要的相關(guān)媒體文件。 點(diǎn)擊左上角的新建選項(xiàng)，然后新建一個(gè)網(wǎng)頁(yè)。在設(shè)計(jì)樣式中，選

48、擇插入然后選擇表格，在出現(xiàn)的界面中設(shè)置如下 圖 4-3 表格設(shè)置 表格建立完成后，效果如下圖所示 圖 4-4 頁(yè)面布局 然后在每個(gè)表格中插入先前準(zhǔn)備好的背景圖片即可。 表格背景設(shè)置完成后，選擇插入—布局對(duì)象—層，然后在出現(xiàn) 的層中插入一張表格，用來(lái)設(shè)置主頁(yè)中商品的“全部分類”選項(xiàng)。插入的表格設(shè)置為 9 行 1 列即可。 在新建的這張表格中，填入需要設(shè)置的商品名稱。然后將該層移動(dòng)到最左邊的大表格中即可。 接著制作在主頁(yè)中需要

49、顯示的部分商品的展示圖片，制作方法如下：打開 photoshop 工具，新建一張圖片，大小設(shè)置為 283*283, 接著插入 3 張靜態(tài)的圖片，在 photoshop 中找到導(dǎo)航欄中的窗口選項(xiàng)， 然后選中動(dòng)畫， 在動(dòng)畫窗口新建 3 張新的動(dòng)畫圖片，在第一張新建動(dòng)畫中只顯示插入的第一張圖，然后，在第二張新建動(dòng)畫中只顯示第二張插入的圖片， 最后，在第三張中只顯示插入的第三張圖，效果如圖所示 圖 4-5GIF 圖片制作然后設(shè)置播放動(dòng)畫的時(shí)間為 1 秒，如圖所示 圖 4-6 動(dòng)畫 最后，保存為 gif 格式，同

50、理，創(chuàng)建其他需要的圖片即可。 在首頁(yè)相應(yīng)的位置插入制作好的圖片，然后在最右邊的大表格 中填入商品的名稱和資料， 完善頁(yè)面的布局。 接著對(duì)字體和頁(yè)面的背 景設(shè)置 CSS樣式 然后設(shè)置 3 個(gè)熱點(diǎn)區(qū)域，分別在登陸、注冊(cè)和聯(lián)系的位置并設(shè) 置到鏈接，其中在聯(lián)系的鏈接中， 我們輸入 mailto:test@ 于測(cè)試。完成后的頁(yè)面如圖所示  用 圖

51、4-7 首頁(yè)截圖 5.2 商品展示頁(yè)面制作 商品展示頁(yè)面我們可以利用 dreamweaver自帶的模板進(jìn)行修改， 方法如下 : 選擇新建一個(gè)頁(yè)面，在彈出的窗口中選擇如下圖所示 圖 4-8 模板 然后我們對(duì)新建的頁(yè)面進(jìn)行修改。 首先將背景顏色更改為符合我們網(wǎng)站風(fēng)格的顏色，用鼠標(biāo)點(diǎn)擊 背景的空白處，我們可以再 dreamweaver的下方看見背景的屬性設(shè)置 菜單，然后我們只需要將

52、里面的屬性修改為我們需要的屬性即可， 具 體的參數(shù)設(shè)置如下圖所示 圖 4-9 屬性 然后建立一個(gè)頁(yè)面，在代碼欄中我們寫入需要設(shè)置的CSS樣式 代碼，里面包括網(wǎng)頁(yè)中文字的樣式和部分背景圖片的樣式。 然后保存 為 CSS后綴的文件即可。 返回之前所建立的商品展示頁(yè)面， 在網(wǎng)頁(yè)代碼中應(yīng)用建好的 CSS樣式，輸入的代碼如下 接著，我們?cè)陧?yè)面下方的表格中設(shè)

53、置滾動(dòng)提示文字， 輸入的代碼如下

更 多 商 品 ， 添 加 中 Ing...

在網(wǎng)頁(yè)頂部的位置，我們添加一個(gè)導(dǎo)航條，用于其他分類商品的鏈接和返回首頁(yè)，從左到右輸入的文字如下 圖 4-10 導(dǎo)航欄 接著選中文字，然后在下方的屬性欄中添加需要連接到的地址頁(yè)面。最后對(duì)網(wǎng)頁(yè)進(jìn)行一些小的修整，完成后的頁(yè)面如下

54、 圖 4-11 商品展示頁(yè)面 5.3 登陸界面的制作 首先插入表格并進(jìn)行分割，然后在分割好后的表格中插入事先 準(zhǔn)備好的圖片，完成界面的基本制作。接著對(duì)網(wǎng)頁(yè)的細(xì)節(jié)進(jìn)行制作， 在右側(cè)的表格中， 我們選擇插入—表單—文本域， 在此我們需要插入 兩個(gè)表單，一個(gè)用于填寫用戶名稱，一個(gè)用于填寫用戶密碼，并將這 兩個(gè)表單分別命名為 t1 和 t2 ，接著在這兩個(gè)表單的上方添加上文字 提示。然后在兩個(gè)表格的最下方添加兩個(gè)按鈕，一個(gè)命名為提交，用于提交表單內(nèi)容，命名為取消，用于重置表單。完成后的效果如圖

55、所示 圖 4-12 登陸框 接著我們編寫一個(gè)簡(jiǎn)單的 javascript 程序，用于提示用戶的登陸情況。代碼如下 最后，我們?cè)诰W(wǎng)頁(yè)的左下角設(shè)置一個(gè)返回首頁(yè)的鏈接， 完成后的效果 如圖 圖 4-13 登陸頁(yè)面 5.4 注冊(cè)頁(yè)面的制作

56、插入一張表格設(shè)置為 1 列 5 行，在第一行中我們?cè)O(shè)置一個(gè)用于返回首頁(yè)的鏈接并設(shè)置為向右對(duì)齊，在第 3 行中我們輸入部分的文字，用于提醒注冊(cè)的用戶。在第 5 行中，我們插入 5 個(gè)文本域，分別用作輸入用戶名稱，用戶密碼，驗(yàn)證密碼，用戶郵箱，用戶昵稱，然后在下面插入連個(gè)單選按鈕用于用戶設(shè)置性別。 最后，在最下方設(shè)置兩個(gè)按鈕，用于用戶提交表單和重置表單，完成的效果如下圖所示 圖 4-14 注冊(cè)頁(yè)面 接著我們編寫用于驗(yàn)證用戶輸入的信息是否合理的 ja

57、vascript 程序代碼，部分代碼如下 function checkSubmit() // 用于驗(yàn)證用戶輸入的信息是否正確 { if(document.form2.userid.value=="")// 判斷用戶是否輸入了用戶 名 { document.form2.userid.focus(); alert(" 用戶名不能為空！ "); return false; } if(document.form2.userpwd.value=="")// 判斷兩次輸入的密碼是

58、否一致 { document.form2.userpwd.focus(); alert(" 登陸密碼不能為空！ "); return false; } if(document.form2.userpwdok.value!=document.form2.userpwd.v alue) { document.form2.userpwdok.focus(); alert(" 兩次密碼不一致！ "); return false; } if(document.form2.e

59、mail.value=="")// 判斷用戶是否輸入了 EMAIL 地址 { document.form2.email.focus(); alert("Email 不能為空！ "); return false; } if(document.form2.uname.value=="")// 判斷用戶是否輸入了昵稱 { document.form2.uname.focus(); alert(" 用戶昵稱不能為空！ "); return false; }

60、 } 5.5 結(jié)賬頁(yè)面的制作 插入一張表格并進(jìn)行分割， 插入事先準(zhǔn)備好的圖片并設(shè)置好 CSS 樣式，然后在頁(yè)面表格中左側(cè)插入一個(gè)文本域， 用于輸入購(gòu)買的商品數(shù)量，接著在商品數(shù)量表單下面插入兩個(gè)按鈕， 一個(gè)用于提交輸入的數(shù)量并提示購(gòu)買成功操作， 另一個(gè)用于取消當(dāng)前的操作， 完成后的頁(yè)面如圖所示 圖 4-15 結(jié)賬頁(yè)面 調(diào)試運(yùn)行 調(diào)試 將站點(diǎn)文件移動(dòng)

61、到別的文件夾，進(jìn)行測(cè)試，這樣可以檢測(cè)網(wǎng)頁(yè) 中的鏈接是否添加正確。首先進(jìn)入站點(diǎn)文件夾，打開 index.html 文件，在瀏覽器中顯示如下圖所示 圖 5-1 首頁(yè)測(cè)試 我們可以發(fā)現(xiàn)部分圖片顯示不正常，因此可以判定有部分圖片 的鏈接添加的不正確， 檢查后發(fā)現(xiàn)無(wú)法顯示的圖片是因?yàn)閳D片的地址設(shè)置為絕對(duì)路徑，因此，當(dāng)文件夾的位置改變后，發(fā)生了圖片顯示不 正常的情況。 修改后的結(jié)果如下圖所示 圖

62、 5-2 首頁(yè)鏈接修改后 可以看到網(wǎng)頁(yè)已經(jīng)可以正常顯示。 在打開的首頁(yè)中，我們點(diǎn)擊左側(cè)導(dǎo)航欄中的“進(jìn)口零食”鏈接，進(jìn)入如下頁(yè)面 圖 5-3 進(jìn)口零食頁(yè)面 發(fā)現(xiàn)一切正常， 然后在該頁(yè)面中， 我們點(diǎn)擊頂部導(dǎo)航欄中特產(chǎn)零食鏈 接 圖 5-4 導(dǎo)航欄測(cè)試 發(fā)現(xiàn)一切正常，然后我們?cè)谌我恻c(diǎn)擊頂部的其他任意鏈接 圖 5-5 其他鏈接測(cè)試 發(fā)現(xiàn)一切正常，并且我們可以看到，下部

63、的滾動(dòng)文字提示運(yùn)行正常，如圖所示 圖 5-6 底部效果 數(shù)據(jù)測(cè)試 返回首頁(yè)，然后我們進(jìn)入注冊(cè)頁(yè)面 , 進(jìn)入頁(yè)面后，我們可以看到頁(yè)面顯示正常，然后我們輸入數(shù)據(jù)進(jìn)行測(cè)試，當(dāng)我們不輸入信息是，點(diǎn)擊提交按鈕，如圖所示 圖 5-7 用戶名提示 彈出提示“用戶名不能為空” ，接著我們輸入兩組不同的密碼數(shù)據(jù)，如圖所示 圖 5-8 密碼提示

64、 彈出提示“兩次密碼不一致” ，接著我們輸入正確的數(shù)據(jù)，成功跳轉(zhuǎn) 回首頁(yè)，證明注冊(cè)成功。 在首頁(yè)中，我們點(diǎn)擊登錄鏈接，輸入任意用戶賬戶和密碼后，點(diǎn)擊登錄按鈕，結(jié)果如圖所示 圖 5-9 登陸提示 提示“登錄成功”，點(diǎn)擊確認(rèn)后，返回首頁(yè)。當(dāng)輸入用戶數(shù)據(jù)后，我們點(diǎn)擊“清空”按鈕，可以看到用戶輸入的數(shù)據(jù)已經(jīng)清空。 我們?cè)谏唐氛故卷?yè)面， 點(diǎn)擊任意我們想要購(gòu)買的商品后， 進(jìn)入結(jié)賬頁(yè)面，在結(jié)賬頁(yè)面中，我們可以看到默認(rèn)的商品數(shù)量為 1，接著修改商品數(shù)量，如圖所示 圖 5-10 商品數(shù)量 點(diǎn)擊取消后 圖 5-11 成功提示 彈出取消成功的提示并且商品的數(shù)量重置為 1，如圖所示 圖 5-12 重置結(jié)果 當(dāng)我們輸入商品數(shù)量后，點(diǎn)擊提交后 圖 5-13 成功提示 彈出購(gòu)買成功提示，并且返回首頁(yè)。