電商系統(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)站框架圖3.5 網(wǎng)站開(kāi)發(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ò)

2、瀏覽器和用戶的接口、通過(guò)瀏覽器與圖書(shū)供應(yīng)商的接口、企業(yè)內(nèi)部的接口、通過(guò)專(zhuān)門(mén)的軟件和銀行及其他支付平臺(tái)的接口。1.2 系統(tǒng)組成結(jié)構(gòu)零食銷(xiāo)售的系統(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模式的零食銷(xiāo)售， 因此，本系統(tǒng)設(shè)計(jì)的原則有：（1）系統(tǒng)的可擴(kuò)展性系統(tǒng)設(shè)計(jì)除了可以適應(yīng)目前的網(wǎng)站的需要以外，應(yīng)充分考慮用戶日后的業(yè)務(wù)發(fā)展需要，為業(yè)務(wù)發(fā)展提供接口。例如，如果網(wǎng)站還要擴(kuò)充一些娛樂(lè)功能， 系統(tǒng)可以輕松的進(jìn)行擴(kuò)充， 從而降低未來(lái)的管理成本。（2）技術(shù)即時(shí)性兼顧系統(tǒng)成熟性和先進(jìn)性的技術(shù)，才能保證現(xiàn)有系統(tǒng)

3、的先進(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)設(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è)施 )

4、建設(shè)也需要進(jìn)行規(guī)劃。如果只是盲目地花錢(qián)，增加硬件、軟件投資，表面上看起來(lái)好看，但是會(huì)存在很多問(wèn)題。再者， 當(dāng)今技術(shù)的發(fā)展也遠(yuǎn)超過(guò)了人們的預(yù)期，即使剛建設(shè)兩三年的基礎(chǔ)設(shè)施也不可避免地面臨一些新的挑戰(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ò)

5、、 硬件設(shè)備和基礎(chǔ)軟件。 網(wǎng)絡(luò)規(guī)劃包括數(shù)據(jù)流量及約束條件分析、網(wǎng)絡(luò)選型、拓?fù)浣Y(jié)構(gòu)設(shè)計(jì)、網(wǎng)絡(luò)安全方案、網(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è) / 改良方案；二是確定合理的網(wǎng)絡(luò)

6、協(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)定。（3）存儲(chǔ)設(shè)備必須具有瞬間數(shù)據(jù)復(fù)制功能利用完全基于存儲(chǔ)設(shè)備的數(shù)據(jù)復(fù)制功能，可以在不影響主機(jī)工作的情

7、況下在最短的時(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)用的最終保障，必須能夠保證 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)作為前提。

8、在業(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ǔ)備份， 必須選擇專(zhuān)門(mén)的存儲(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)

9、絡(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í)了解網(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ò)等的安全，

10、人們紛紛進(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)越占據(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í)

11、等。在進(jìn)行操作系統(tǒng)規(guī)劃時(shí)，既不能因循守舊，也不能一味從新。最佳策略是: 結(jié)合機(jī)構(gòu)或者企業(yè)的實(shí)際情況， 在對(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、GI

12、S 等系統(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 之間展開(kāi)。從目前的情況看，Oracle 占據(jù)了第一的位置，其后是 IBM DB2，Microsoft SQLServer 盡管仍位居兩者之后，但是發(fā)展勢(shì)頭迅猛。在進(jìn)行數(shù)據(jù)庫(kù)方面的規(guī)劃時(shí)，首先要確認(rèn)機(jī)構(gòu)或企業(yè)內(nèi)外的數(shù)據(jù)類(lèi)型、數(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)性能進(jìn)行一系列的綜合分析和測(cè)試。在此基礎(chǔ)上，就可以根據(jù)用戶的實(shí)

13、際情況，綜合考慮系統(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)所附帶的備份程序都有著這樣或那樣的缺陷， 所以若想對(duì)數(shù)據(jù)進(jìn)行可靠的存儲(chǔ)備份， 必須選擇專(zhuān)門(mén)的存儲(chǔ)備份軟、 硬件，并制定相應(yīng)的存儲(chǔ)備份及恢復(fù)方案。系統(tǒng)管理規(guī)劃互聯(lián)網(wǎng)、操作系統(tǒng)、數(shù)據(jù)庫(kù)等新技術(shù)的應(yīng)用，組成了復(fù)雜而

14、相互依存的 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í)了解網(wǎng)絡(luò)和系統(tǒng)的運(yùn)行情況；(3) 端到端資源和性能管理解決方案， 做到 IT 資源的遠(yuǎn)程監(jiān)控、 分發(fā)和變更管理； (4) 具有實(shí)時(shí)診斷和監(jiān)控功能的工具； (5) 提供可全面管理系統(tǒng)可用性與性能的綜

15、合性產(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%的增速，高出全國(guó)工業(yè)增加值速6.57 個(gè)百分點(diǎn)，盡管在金融風(fēng)暴的沖擊下，我國(guó)經(jīng)濟(jì)增速放緩，但食品產(chǎn)業(yè)荏苒保持強(qiáng)大定力，逆勢(shì)上升。由此可見(jiàn)食品產(chǎn)業(yè)所面對(duì)的巨大市場(chǎng)。從2000 年開(kāi)始，以信息化和網(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ò)

16、不僅具有廣泛地宣傳范圍， 而且還具有操作上的互動(dòng)性以及數(shù)據(jù)傳輸?shù)募皶r(shí)性。網(wǎng)絡(luò)在最大程度上縮減了交易的成本，縮短了交易的時(shí)間，擴(kuò)大了客戶群，加快了信息流通速度儼然已經(jīng)成為了聯(lián)系生產(chǎn)者及消費(fèi)者的最方便的橋梁。企業(yè)和用戶實(shí)現(xiàn)了直接接軌，屏蔽了多級(jí)中間商。對(duì)于食品行業(yè)從事電子商務(wù)企業(yè)的運(yùn)營(yíng)模式，目前有B ToB,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ó)食品

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

18、品管理部門(mén)的管理，加強(qiáng)雙邊的溝通與協(xié)作，以提高和改善管理水平，使顧客通過(guò)網(wǎng)站的瀏覽可以對(duì)食品有比較真實(shí)和豐富的了解，對(duì)食品本身做一個(gè)比較好的宣傳和推廣。3. 管理人員登陸系統(tǒng)后，將各種煩瑣的管理工作通過(guò)網(wǎng)站來(lái)管理，用最少的人力和物力提高管理水平，方便發(fā)布各種旅游信息，處理游客所遇到的各種問(wèn)題，及時(shí)了解對(duì)食品管理部門(mén)的意見(jiàn)，通過(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āo)項(xiàng)目的初步了解，對(duì)網(wǎng)絡(luò)營(yíng)銷(xiāo)項(xiàng)目進(jìn)行了系列基礎(chǔ)分析 ：1 業(yè)務(wù)定位網(wǎng)絡(luò)營(yíng)銷(xiāo)項(xiàng)目的主要業(yè)務(wù)定位是：網(wǎng)上零售品牌形象推廣2 網(wǎng)站定位網(wǎng)站為企業(yè)實(shí)現(xiàn)網(wǎng)上

19、營(yíng)銷(xiāo)，完成如下職能： 1 網(wǎng)上銷(xiāo)售產(chǎn)品2 推廣自己品牌（通過(guò)活動(dòng)和推廣提升品牌知名度）3 客戶定位網(wǎng)站的目標(biāo)客戶群體定位是：1 主要目標(biāo)客戶群：終端買(mǎi)家2 次要客戶群：代理商，批發(fā)商4 贏利模式定位1 網(wǎng)上直銷(xiāo)收入：網(wǎng)站的主要贏利來(lái)源，主要為產(chǎn)品個(gè)人零售收入2 網(wǎng)上招商收入：代理商分站為網(wǎng)站輔助贏利來(lái)源， 包含收取產(chǎn)品加盟商的加盟費(fèi)、 產(chǎn)品代理分銷(xiāo)收入3.3 網(wǎng)站功能欄目A. 產(chǎn)品展示客戶能夠以多種分類(lèi)方式瀏覽產(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)品資料

20、，含產(chǎn)品圖片（支持大圖、小圖）、價(jià)格（支持多級(jí)價(jià)格）、簡(jiǎn)介等A.2 產(chǎn)品查詢客戶可按產(chǎn)品關(guān)鍵字、產(chǎn)品分類(lèi)、用途等多種查詢條件，快速鎖定感興趣的產(chǎn)品A.3 產(chǎn)品推薦可按精品推薦、新品推薦、人氣產(chǎn)品、暢銷(xiāo)產(chǎn)品四種方式進(jìn)行產(chǎn)品推薦排行A.4 產(chǎn)品評(píng)論產(chǎn)品評(píng)論可為客戶采購(gòu)提供客觀的參考意見(jiàn)?？蛻簦ɑ蚬芾韱T）可對(duì)產(chǎn)品發(fā)表評(píng)分，或評(píng)論意見(jiàn)、用戶見(jiàn)證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)行各類(lèi)產(chǎn)品資料的修改、刪除、排序、查詢統(tǒng)計(jì)等編輯操作。 特色功能：客戶可對(duì)產(chǎn)品圖片進(jìn)行放大或縮小查看B.產(chǎn)品訂購(gòu)配備簡(jiǎn)單快捷的全套訂購(gòu)系統(tǒng)，能有效地保障

21、客戶快速完成訂購(gòu)過(guò)程，提高網(wǎng)站成交率B.1 在線訂購(gòu)（購(gòu)物車(chē)）客戶首先必須進(jìn)行會(huì)員注冊(cè)，才可進(jìn)行在線訂購(gòu)系統(tǒng)?？蛻艨蛇x擇配送方式和支付方式B.2 直接訂購(gòu)客戶也可選擇直接訂購(gòu)的便捷方式：無(wú)需會(huì)員注冊(cè)，直接打免費(fèi)電話或在線填寫(xiě)訂單訂購(gòu)B.3 訂單查詢客戶可在線查看和修改自己的網(wǎng)上訂單和交易記錄B.4 訂購(gòu)指南包括訂購(gòu)方式、配送方式、售后服務(wù)、常見(jiàn)問(wèn)題、付款方式等說(shuō)明B.5 在線支付支持網(wǎng)上銀行、支付寶等多種在線支付方式B.6 訂單管理（后臺(tái)）管理員在后臺(tái)可輕松實(shí)現(xiàn)客戶在線訂單的查詢、統(tǒng)計(jì)、跟蹤、編輯等功能C.企業(yè)介紹客戶更可能的從多方面了解本企業(yè)，將有力提升本企業(yè)的品牌形象和網(wǎng)上銷(xiāo)售的可信度C.

22、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)基地可重點(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è)”，輸入公司名稱(chēng)、姓名、聯(lián)系方式、省份城市等資料，注冊(cè)成為本站會(huì)員D.2 會(huì)員登錄會(huì)員注冊(cè)后，可使用會(huì)員登錄功能

23、登陸企業(yè)網(wǎng)站，才可使用本站的多項(xiàng)會(huì)員服務(wù)功能D.3 會(huì)員資料管理（會(huì)員中心）會(huì)員登錄后即進(jìn)入會(huì)員中心，可查看和修改自己的會(huì)員注冊(cè)資料（簡(jiǎn)介、密碼、聯(lián)系方式等） 、會(huì)員狀態(tài)（會(huì)員積分、會(huì)員級(jí)別等）D.4 會(huì)員信息管理會(huì)員在“會(huì)員中心”中，可發(fā)布和管理自己的簡(jiǎn)介信息、訂單信息、資訊信息等類(lèi)別信息D.5 會(huì)員權(quán)限管理（后臺(tái)）管理員可設(shè)置多種會(huì)員類(lèi)型，對(duì)不同類(lèi)型的會(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)生交流，有力的提升網(wǎng)上招商成功率和服務(wù)品質(zhì)

24、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ù)公司目前狀態(tài)公司未來(lái)發(fā)展類(lèi)別管理添加產(chǎn)品價(jià)格管理產(chǎn)品圖片參數(shù)管理會(huì)員注冊(cè)會(huì)員登錄詳見(jiàn)下文產(chǎn)品知識(shí)加盟與招聘新手指導(dǎo)購(gòu)物指示幫助中心常見(jiàn)問(wèn)題解答支付配送關(guān)于我們聯(lián)系我們會(huì)員注冊(cè)會(huì)員服務(wù)會(huì)員登錄賬戶查詢3.5 網(wǎng)站開(kāi)發(fā)預(yù)算項(xiàng)目說(shuō)明網(wǎng)站開(kāi)發(fā)建設(shè)網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)站首頁(yè)首頁(yè)設(shè)計(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)及信息類(lèi)別的分類(lèi)

25、，（一級(jí)欄目頁(yè)）確定需要獨(dú)立設(shè)計(jì)的頻道欄目。設(shè)計(jì)中兼顧并繼承首頁(yè)的設(shè)計(jì)風(fēng)格，保障版面在各具體頁(yè)面中的適用性和靈活性。（活動(dòng) & 促銷(xiāo)、產(chǎn)品、新聞、會(huì)員管理、購(gòu)物車(chē)、購(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)開(kāi)發(fā)產(chǎn)品展示多級(jí)分類(lèi)功能； 自行添加修改刪除單價(jià)數(shù)量?jī)r(jià)格10001100040083200150101500200012000數(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)鍵字

26、模糊搜索精確搜索應(yīng)用于網(wǎng)站版塊， 可實(shí)現(xiàn)多層級(jí)精確搜索，針對(duì)模糊搜索可進(jìn)行再次細(xì)化搜索產(chǎn)品訂購(gòu)系統(tǒng)購(gòu)物車(chē)記憶功能， 防止顧客掉線丟失購(gòu)物車(chē)商品信息； 購(gòu)物車(chē)提示功能：可讓顧客隨時(shí)查看購(gòu)物車(chē)內(nèi)商品和金額， 客戶可以在訂單中添加備注內(nèi)容訂單管理能夠查看管理訂單信息， 能夠按多種方式對(duì)訂單信息進(jìn)行列表管理員能夠定義訂單的處理狀態(tài)，如正在處理、已確認(rèn)、無(wú)效等，能夠自由修改訂單的狀態(tài)能夠按類(lèi)別、 關(guān)鍵字檢索訂單信息積分管理會(huì)員能夠查看自己的積分情況、消費(fèi)額（經(jīng)驗(yàn)值）情況；用戶可以用積分兌換商品管理員可以修改積分， 可以按類(lèi)別管理積分兌換或者附贈(zèng)禮品的管理網(wǎng)上支付系統(tǒng)支付寶、易寶、財(cái)付通等留言板留言表格設(shè)

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

28、值；會(huì)員能夠查看自己的歷史交易記錄；會(huì)員能夠查看自己的收藏夾；權(quán)限管理設(shè)立不同后臺(tái)模塊的管理權(quán)限，可 9001900實(shí)現(xiàn)多人共同管理的目的網(wǎng)站開(kāi)發(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ù)終身免費(fèi)技術(shù)維護(hù)贈(zèng)送1贈(zèng)送網(wǎng)站設(shè)計(jì)排版網(wǎng)站名稱(chēng)輸入內(nèi)容搜索會(huì)員服務(wù)首頁(yè)主食休閑食品調(diào)料干貨酒類(lèi)方便食品公司介紹產(chǎn)品

29、展示新聞中心在線訂購(gòu)幫助中心版權(quán)所有四、應(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)開(kāi)展的前提，有設(shè)備的接入才有之后各項(xiàng)操作的完成，當(dāng)然保證安全是必要的， 所以要考慮網(wǎng)絡(luò)接入的安全接入系統(tǒng)， 服務(wù)器部分主要針對(duì)信息的發(fā)布等相關(guān)內(nèi)容。中間件主要是控制系統(tǒng)服務(wù)器等相關(guān)的中間件安全系統(tǒng)。數(shù)據(jù)存儲(chǔ)部分是數(shù)據(jù)的管理， 分析應(yīng)用等。 開(kāi)發(fā)維護(hù)部分是對(duì)系統(tǒng)的研究開(kāi)發(fā)維護(hù)，保證系統(tǒng)的安全運(yùn)營(yíng)。按子系統(tǒng)的劃分休閑食品網(wǎng)店用戶管理子系員子統(tǒng)系統(tǒng)會(huì)員網(wǎng)站商品購(gòu)物查看管理商品訂單客服注冊(cè)、推薦選購(gòu)車(chē)管訂單員登管理管理管理登陸理陸休閑食品網(wǎng)站：總體上一個(gè)對(duì)外的

30、版面，一切依據(jù)此來(lái)展開(kā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í)現(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ì)輸入輸出設(shè)計(jì)主要針對(duì)

31、應(yīng)用軟件的輸入輸出數(shù)據(jù)的格式、內(nèi)容、方法等方面的設(shè)計(jì)， 保證期間的合理合法等。 輸入輸出主要是用戶通過(guò)鍵盤(pán)完成在線的瀏覽、購(gòu)買(mǎi)、支付等過(guò)程，以及交易之后的相關(guān)事宜等。五、網(wǎng)頁(yè)設(shè)計(jì)首頁(yè)是是用戶登陸商品分類(lèi)用戶注冊(cè)否否驗(yàn)證驗(yàn)證進(jìn)特飲糖膨肉餅堅(jiān)口產(chǎn)料果化類(lèi)干果零零罐巧食零糕炒食食頭克品食點(diǎn)貨支付網(wǎng)頁(yè)否是驗(yàn)證系統(tǒng)流程圖 3-1詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)5.1 首頁(yè)制作打開(kāi) dreamweaver8 選擇站點(diǎn)，然后點(diǎn)擊新建站點(diǎn)， 在顯示出來(lái)的頁(yè)面輸入站點(diǎn)的名稱(chēng)，如下圖所示。圖 4-1 站點(diǎn)建立然后點(diǎn)擊確認(rèn)，就會(huì)建立一個(gè)叫“零食網(wǎng)”的站點(diǎn)文件夾，可以在dreamweaver8 的右下角看到，如圖圖 4-2 文件夾視圖

32、在右下角的零食網(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ì)樣式中，選擇插入然后選擇表格，在出現(xiàn)的界面中設(shè)置如下圖 4-3 表格設(shè)置表格建立完成后，效果如下圖所示圖 4-4 頁(yè)面布局然后在每個(gè)表格中插入先前準(zhǔn)備好的背景圖片即可。表格背景設(shè)置完成后，選擇插入布局對(duì)象層，然后在出現(xiàn)的層中插入一張表格，用來(lái)設(shè)置主頁(yè)中商品的“全部分類(lèi)”選項(xiàng)。插入的表格設(shè)置為 9 行 1 列即可。在新建的這張表格中，填入需要設(shè)置的商品名稱(chēng)。然后將該層

33、移動(dòng)到最左邊的大表格中即可。 接著制作在主頁(yè)中需要顯示的部分商品的展示圖片，制作方法如下：打開(kāi) photoshop 工具，新建一張圖片，大小設(shè)置為 283*283, 接著插入 3 張靜態(tài)的圖片，在 photoshop 中找到導(dǎo)航欄中的窗口選項(xiàng)， 然后選中動(dòng)畫(huà)， 在動(dòng)畫(huà)窗口新建 3 張新的動(dòng)畫(huà)圖片，在第一張新建動(dòng)畫(huà)中只顯示插入的第一張圖，然后，在第二張新建動(dòng)畫(huà)中只顯示第二張插入的圖片， 最后，在第三張中只顯示插入的第三張圖，效果如圖所示圖 4-5GIF 圖片制作然后設(shè)置播放動(dòng)畫(huà)的時(shí)間為 1 秒，如圖所示圖 4-6 動(dòng)畫(huà)最后，保存為 gif格式，同理，創(chuàng)建其他需要的圖片即可。在首頁(yè)相應(yīng)的位置插入制

34、作好的圖片，然后在最右邊的大表格中填入商品的名稱(chēng)和資料， 完善頁(yè)面的布局。 接著對(duì)字體和頁(yè)面的背景設(shè)置 CSS樣式然后設(shè)置3 個(gè)熱點(diǎn)區(qū)域，分別在登陸、注冊(cè)和聯(lián)系的位置并設(shè)置到鏈接，其中在聯(lián)系的鏈接中， 我們輸入 mailto:test于測(cè)試。完成后的頁(yè)面如圖所示用圖 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的下方看見(jiàn)背景的屬性

35、設(shè)置菜單，然后我們只需要將里面的屬性修改為我們需要的屬性即可，具體的參數(shù)設(shè)置如下圖所示圖 4-9 屬性然后建立一個(gè)頁(yè)面，在代碼欄中我們寫(xiě)入需要設(shè)置的CSS樣式代碼，里面包括網(wǎng)頁(yè)中文字的樣式和部分背景圖片的樣式。然后保存為 CSS后綴的文件即可。 返回之前所建立的商品展示頁(yè)面， 在網(wǎng)頁(yè)代碼中應(yīng)用建好的 CSS樣式，輸入的代碼如下接著，我們?cè)陧?yè)面下方的表格中設(shè)置滾動(dòng)提示文字，輸入的代碼如下更多商品，添加中Ing.在網(wǎng)頁(yè)頂部的位置，我們添加一個(gè)導(dǎo)航條，用于其他分類(lèi)商品的鏈接和返回首頁(yè)，從左到右輸入的文字如下圖 4-10 導(dǎo)航欄接著選中文字，然后在下方的屬性欄中添加需要連接到的地址頁(yè)面。最后對(duì)網(wǎng)頁(yè)進(jìn)行

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

37、如下function fun1()alert(登陸成功！ );最后，我們?cè)诰W(wǎng)頁(yè)的左下角設(shè)置一個(gè)返回首頁(yè)的鏈接，完成后的效果如圖圖 4-13 登陸頁(yè)面5.4 注冊(cè)頁(yè)面的制作插入一張表格設(shè)置為 1 列 5 行，在第一行中我們?cè)O(shè)置一個(gè)用于返回首頁(yè)的鏈接并設(shè)置為向右對(duì)齊，在第 3 行中我們輸入部分的文字，用于提醒注冊(cè)的用戶。在第 5 行中，我們插入 5 個(gè)文本域，分別用作輸入用戶名稱(chēng)，用戶密碼，驗(yàn)證密碼，用戶郵箱，用戶昵稱(chēng)，然后在下面插入連個(gè)單選按鈕用于用戶設(shè)置性別。 最后，在最下方設(shè)置兩個(gè)按鈕，用于用戶提交表單和重置表單，完成的效果如下圖所示圖 4-14 注冊(cè)頁(yè)面接著我們編寫(xiě)用于驗(yàn)證用戶輸入的信息是

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

39、erpwdok.value!=document.form2.userpwd.value)document.form2.userpwdok.focus();alert(兩次密碼不一致！ );return false;if(document.form2.email.value=)/判斷用戶是否輸入了EMAIL地址document.form2.email.focus();alert(Email不能為空！ );return false;if(document.form2.uname.value=)/判斷用戶是否輸入了昵稱(chēng)document.form2.uname.focus();alert(用戶昵稱(chēng)不能

40、為空！ );return false;5.5 結(jié)賬頁(yè)面的制作插入一張表格并進(jìn)行分割， 插入事先準(zhǔn)備好的圖片并設(shè)置好 CSS 樣式，然后在頁(yè)面表格中左側(cè)插入一個(gè)文本域， 用于輸入購(gòu)買(mǎi)的商品數(shù)量，接著在商品數(shù)量表單下面插入兩個(gè)按鈕， 一個(gè)用于提交輸入的數(shù)量并提示購(gòu)買(mǎi)成功操作， 另一個(gè)用于取消當(dāng)前的操作， 完成后的頁(yè)面如圖所示圖 4-15 結(jié)賬頁(yè)面調(diào)試運(yùn)行調(diào)試將站點(diǎn)文件移動(dòng)到別的文件夾，進(jìn)行測(cè)試，這樣可以檢測(cè)網(wǎng)頁(yè)中的鏈接是否添加正確。首先進(jìn)入站點(diǎn)文件夾，打開(kāi) index.html 文件，在瀏覽器中顯示如下圖所示圖 5-1 首頁(yè)測(cè)試我們可以發(fā)現(xiàn)部分圖片顯示不正常，因此可以判定有部分圖片的鏈接添加的不正

41、確， 檢查后發(fā)現(xiàn)無(wú)法顯示的圖片是因?yàn)閳D片的地址設(shè)置為絕對(duì)路徑，因此，當(dāng)文件夾的位置改變后，發(fā)生了圖片顯示不正常的情況。修改后的結(jié)果如下圖所示圖 5-2 首頁(yè)鏈接修改后可以看到網(wǎng)頁(yè)已經(jīng)可以正常顯示。在打開(kāi)的首頁(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)一切正常，并且我們可以看到，下部的滾動(dòng)文字提示運(yùn)行正常，如圖所示圖 5-6 底部效果數(shù)據(jù)測(cè)試返回首頁(yè)，然后我們進(jìn)入注冊(cè)頁(yè)面 , 進(jìn)入頁(yè)面后，我們可

42、以看到頁(yè)面顯示正常，然后我們輸入數(shù)據(jù)進(jìn)行測(cè)試，當(dāng)我們不輸入信息是，點(diǎn)擊提交按鈕，如圖所示圖 5-7 用戶名提示彈出提示“用戶名不能為空” ，接著我們輸入兩組不同的密碼數(shù)據(jù)，如圖所示圖 5-8 密碼提示彈出提示“兩次密碼不一致” ，接著我們輸入正確的數(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)買(mǎi)的商品后， 進(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)買(mǎi)成功提示，并且返回首頁(yè)。