夢妮服飾網(wǎng)站設(shè)計與制作

1、目 錄摘 要abstract1 緒論11.1 選題意義11.2 設(shè)計思想12 運行環(huán)境22.1 開發(fā)工具的選用及介紹22.2 數(shù)據(jù)庫環(huán)境33 需求分析43.1 客戶端43.2 管理端54 網(wǎng)站總體設(shè)計74.1網(wǎng)站前臺設(shè)計74.2 網(wǎng)站后臺設(shè)計94.3 數(shù)據(jù)庫的設(shè)計105 網(wǎng)站總體設(shè)計125.1信息發(fā)布模塊實現(xiàn)135.2 產(chǎn)品展示模塊實現(xiàn)145.3 留言版塊實現(xiàn)145.4 后臺登陸頁面實現(xiàn)155.5 新聞管理實現(xiàn)165.6 產(chǎn)品管理175.7 留言版塊管理實現(xiàn)186 結(jié) 論19夢妮服飾網(wǎng)站設(shè)計與制作摘 要隨著互聯(lián)網(wǎng)的普及，越來越多的商業(yè)企業(yè)在互聯(lián)網(wǎng)上擁有了自己的企業(yè)站點。利用asp開發(fā)web網(wǎng)站

2、，簡單易行、效率高，特別適合現(xiàn)代企業(yè)作為建立企業(yè)web站點、網(wǎng)上訪問數(shù)據(jù)庫的開發(fā)工具。前臺使用macromedia dreamweaver 8 開發(fā)工具，后臺數(shù)據(jù)庫使用access數(shù)據(jù)庫。本論文主要闡述一個企業(yè)網(wǎng)站系統(tǒng)的前臺的設(shè)計、后臺操作過程及一些關(guān)鍵技術(shù)。該網(wǎng)站信息來源主要由前臺用戶的提交和后臺管理員的添加，最后在網(wǎng)上發(fā)布出來，以供大家查詢相關(guān)公司的信息。本網(wǎng)站主要讓社會各界能更好的了解本企業(yè)，歡迎對本企業(yè)的發(fā)展提出寶貴留言。該企業(yè)網(wǎng)站系統(tǒng)是前臺應用dreamweaver 8、flash cs3 、adobe photoshop cs3等軟件，后臺使用access數(shù)據(jù)庫結(jié)合asp編程技術(shù)開

3、發(fā)出來的。關(guān)鍵詞：asp，企業(yè)網(wǎng)站，access數(shù)據(jù)庫 abstractwith the popularity of internet, more and more business enterprise on the internet have their own enterprises. web site development, using asp simple, high efficiency, especially suitable for modern enterprises establish enterprise web sites, as the internet acces

4、s database development tools. in front of the macromedia use dreamweaver 8 development tool, used the backend database access database.this paper mainly expounds the reception of an enterprise web system design, operation process and some key background. the main source of information website of use

5、rs and the front end of the administrator, add background in online, for all relevant information query. this website main make society a better understanding of the enterprise, welcome to this enterprise development put forward valuable comments.this enterprise web system is applied, front dreamwea

6、ver flash cs3 software, adobe photoshop, use as background cs3 access database programming technique is developed with asp.keywords: asp, enterprises websites, access databases1緒論1.1 選題意義如今越來越多的企業(yè)已開始從對互聯(lián)網(wǎng)的認知階段進入到認同和行動階段。企業(yè)網(wǎng)站是企業(yè)在internet上展示形象的門戶，是企業(yè)開展電子交易的基地，設(shè)計制作一個優(yōu)秀的網(wǎng)站是建站的企業(yè)成功邁向互聯(lián)網(wǎng)的重要步驟。網(wǎng)絡(luò)可以帶給企業(yè)不分地域

7、、不分國別的大量客戶，帶給您無限的商機。為了獲得服裝業(yè)的領(lǐng)先地位，面對不斷涌現(xiàn)的種種機會，企業(yè)建立一個具有自己特色的，精美完善的，集多種功能于一體的企業(yè)網(wǎng)站，尤其重要。所以在當前如何利用網(wǎng)絡(luò)提供售后服務(wù)以及客戶資源維護，是作為一個現(xiàn)代化的企業(yè)應當前應考慮的緊迫問題。企業(yè)建站的好處：1.服務(wù)現(xiàn)有的客戶，更方便更高效的客戶服務(wù)；2.爭取不斷的新客戶，上網(wǎng)是發(fā)布、收集信息的最重要的途徑和依賴；3.新一代媒體廣告，降低廣告成本提高企業(yè)形象；4.二十四小時廣告和發(fā)展業(yè)務(wù)，提高企業(yè)的品位、提高企業(yè)的效益；5.發(fā)展國際化業(yè)務(wù)，大魚在大海，我們下海就可以國際化；6.開拓本地市場，人們更希望看到本地的企業(yè)、新聞

8、；7聯(lián)接客戶，網(wǎng)絡(luò)服務(wù)更靈活、直接、高效；8.增強市場推廣，網(wǎng)絡(luò)是趨勢、是企業(yè)推廣的最重要的途徑。1.2 設(shè)計思想1.2.1 網(wǎng)站架構(gòu)網(wǎng)站首頁是兵家必爭之地，每個頻道負責人都想在顯眼的位置推薦自己的產(chǎn)品或者資訊來增加曝光率，總是希望把所有東西一下子讓用戶看到，但最后我們就發(fā)現(xiàn)你放的東西越多，用戶就根本找不到他想要的東西，快速離開的可能性很大。在國內(nèi)的門戶網(wǎng)站都習慣了資訊多、頁面長，什么都往首頁堆，感覺內(nèi)容越多會顯的越大氣，但用戶的耐性是有限的，所以網(wǎng)頁的通透性對國內(nèi)網(wǎng)站很重要，每一屏的架構(gòu)變化不宜太多，適當就好，主次內(nèi)容信息位置保持一致性，不然用戶每瀏覽到下一屏都需要重新去解讀架構(gòu)，思考該從那

9、里開始閱讀，不但用戶的耐性被消耗掉還會增加用戶的瀏覽成本，所以網(wǎng)站首頁的架構(gòu)必須清晰明了，保持較好的通透性，減少用戶的瀏覽成本。1.2.2 設(shè)計風格每個門戶網(wǎng)站的面向受眾都不同，也會造成門戶網(wǎng)站的風格定位不一樣，例如面向受眾年齡層比較年輕的門戶網(wǎng)站，在設(shè)計風格可能會偏向多色彩多功能，而面向受眾年齡層較大的門戶網(wǎng)站，在設(shè)計風格上就會相反。但不管怎樣的設(shè)計風格保持清晰方便用戶瀏覽的界面是必要的。1.2.3 信息分布門戶網(wǎng)站首頁一般都會承載大量的資訊信息，密密麻麻的信息會讓用戶瀏覽網(wǎng)頁的時候會產(chǎn)生壓迫感，如何能讓用戶順暢的瀏覽成為設(shè)計中重要的一環(huán)。2 運行環(huán)境2.1 開發(fā)工具的選用及介紹2.1.1

10、asp簡介在網(wǎng)絡(luò)開發(fā)的眾多語言中，iis(intemet information server web服務(wù)器)+asp(active server pages編程語言)+acces(數(shù)據(jù)庫)的方案組合都是microsoft公司的產(chǎn)品，它們在搭建clientserver結(jié)構(gòu)的兩層模式網(wǎng)站上相對容易。所以它們成為眾多的基于web語言開發(fā)中的主流方案。asp是運行在web服務(wù)器iis上的。 在asp出現(xiàn)之前網(wǎng)站的開發(fā)效率是非常低的，即使單個頁面布局的微小變動，往往都需要重新設(shè)計頁面的源代碼。asp技術(shù)的推出，使網(wǎng)站的建設(shè)成了一件很容易的事。asp(active server pages，活動服務(wù)器頁

11、面)是微軟公司推出的可與用戶建立交互式關(guān)系的腳本環(huán)境，在這個環(huán)境下可以通過創(chuàng)建服務(wù)器端腳本來實現(xiàn)動態(tài)交互式web頁面和強大的web應用程序等功能。可以和html語言包括相關(guān)的客戶端腳本、java小程序等混合在一起編寫。asp語法比較簡單，屬于面向?qū)ο蟮募夹g(shù)和組件技術(shù)，這樣，復雜的操作和交互過程就可以被封裝起來。在進行網(wǎng)頁制作時只需使用asp的腳本語言和內(nèi)置對象及服務(wù)器組件，不必考慮其內(nèi)部的運行機制。asp的優(yōu)勢：任何開發(fā)工具都可發(fā)展asp，語言相容性高，隱密安全性高，易于操控數(shù)據(jù)庫，面向?qū)ο髮W習容易。2.1.2 頁面設(shè)計工具 目前有大量的軟件用來設(shè)計和制作網(wǎng)頁，他們可以極大的減輕工作量，提高設(shè)

12、計效率。其中macromedia dreamweaver 8功能強大，而且是所見即所得的網(wǎng)站編輯器，并帶有站點管理功能。 dreamweaver是唯一提供roundtrip html、視覺化編輯與原始碼編輯同步的設(shè)計工具。dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務(wù)功能，提供超強的支援能力給third-party廠商，包含asp， apache，broadvision， cold fusion，icat， tango與自行發(fā)展的應用軟體。當您正使用dreamweaver在設(shè)計動態(tài)網(wǎng)頁時，所見即所得的功能，讓您不需要透過瀏覽器就能預覽網(wǎng)頁。dreamweaver將內(nèi)容與設(shè)計分開，應

13、用於快速網(wǎng)頁更新和團隊合作網(wǎng)頁編輯。2.2 數(shù)據(jù)庫環(huán)境自從1992年，microsoft 公司發(fā)布access1.0以來，隨著windows的普及，使用access的人越來越多，它逐漸成為流行的數(shù)據(jù)庫軟件之一。 access是一個面向?qū)ο蟮摹⒉捎檬录?qū)動機制的小型關(guān)系數(shù)據(jù)庫管理系統(tǒng)。在access中，用戶可以根據(jù)實際需要對數(shù)據(jù)進行分類，然后使用表對象分別存儲每一種類型的數(shù)據(jù)，并建立起不同類型數(shù)據(jù)之間的關(guān)系，供報表使用。此時，每條信息僅在一處存放，減少了冗余數(shù)據(jù)的產(chǎn)生，節(jié)省了寶貴的存儲空間，同時也加快了更新數(shù)據(jù)的速度。針對用戶在實際應用中的需求，access數(shù)據(jù)庫提供了表、查詢、窗體、報表、頁、

14、宏和模塊等七個對象，用于收集、存儲和操作各種不同的信息。 為了便于使用，access的每個對象都為用戶提供了設(shè)計器和生成向?qū)?。用戶可以在設(shè)計器中設(shè)計生成對象，或?qū)ι傻膶ο筮M行編輯；用戶也可通過生成向?qū)Х奖憧焖俚纳梢粋€完備的對象。3 需求分析 隨著現(xiàn)代化辦公的深入，網(wǎng)站用戶(主要是客戶、公司管理人員)對企業(yè)信息、服務(wù)網(wǎng)絡(luò)化的需求越來越多，要求也越來越高，因此企業(yè)網(wǎng)站不能僅僅停留在信息瀏覽的層次上，應向信息提供和應用服務(wù)相結(jié)合的綜合型網(wǎng)站發(fā)展。為此我們將網(wǎng)站設(shè)計成前后臺結(jié)合的形式，前臺顯示各種信息和服務(wù)，后臺是信息和服務(wù)管理系統(tǒng)，前后臺緊密結(jié)合，發(fā)揮網(wǎng)站的最大功能。 3.1 客戶端3.1.1

15、公司的介紹針對了解一個公司首先就會要了解它的情況，需要設(shè)置一個模塊能夠展示企業(yè)的基本情況以及展示公司的品牌形象。3.1.2 管理系統(tǒng)企業(yè)網(wǎng)站的建設(shè)將會為企業(yè)內(nèi)部管理帶來一種全新的模式。網(wǎng)站是實現(xiàn)這一模式的平臺?；谄髽I(yè)網(wǎng)站開發(fā)的夢妮服飾在降低企業(yè)內(nèi)部資源的損耗、減低企業(yè)戶外宣傳的費用、加強企業(yè)與客戶、客戶與企業(yè)之間的聯(lián)系等多方面發(fā)揮了巨大作用。管理系統(tǒng)只能有企業(yè)內(nèi)部人員進入，需要賬號驗證才可以登錄?？蛻糇缘馁~號只能瀏覽網(wǎng)站前臺。3.1.3 信息的發(fā)布了解一個企業(yè)不僅僅只了解它的基本情況，還要理解它的最新動態(tài)，所以企業(yè)還需要有一個新聞發(fā)布模塊。作為一個企業(yè)的存在必定會有與市場有必然的聯(lián)系，了解

16、行業(yè)的企業(yè)信息業(yè)可以獲得有關(guān)企業(yè)的經(jīng)營情況。因此要有一些行業(yè)信息發(fā)布功能。3.1.4 產(chǎn)品的發(fā)布了解一個企業(yè)的發(fā)展背景與現(xiàn)在情況僅是一個前奏，目的都是要為了讓瀏覽者更好的了解企業(yè)的產(chǎn)品。所以產(chǎn)品信息的發(fā)布模塊也是必不可少的。而作為客戶和一些消費者最最關(guān)心的還是產(chǎn)品的價格問題。所以在瀏覽產(chǎn)品時就可見到產(chǎn)品的價格。3.1.5 聯(lián)系方式為了方便企業(yè)和客戶的聯(lián)系，除了一些常規(guī)的聯(lián)系方法如電話 ，另外設(shè)有留言版是有必要的。用戶不需要注冊就可以留言。客戶也可留下比較詳細的聯(lián)系方式，如tel、email等，既可以增加客戶與企業(yè)之間的交流，也使不同客戶可以查看各自的留言。3.2 管理端3.2.1 管理員賬號的

17、密碼管理直接點管理無法進入后臺，要輸入管理員的賬號和密碼才能登陸。3.2.2 信息管理前臺的大部分信息都需要定時間的修改和更新。所以需要制定相應的管理模塊，對新聞、產(chǎn)品、公司簡介、品牌形象等信息進行管理。信息管理的功能就是實現(xiàn)添加、修改、查看、刪除。 3.1 信息管理流程圖3.2.3 產(chǎn)品管理產(chǎn)品管理主要是要在及時的添加新上市的產(chǎn)品信息、要及時對產(chǎn)品的品牌（包包、女裝、裙子、圍巾）進行管理更新，從而使客戶瀏覽到的都是最新最有效的產(chǎn)品信息。這對以市場銷售為主的企業(yè)是重要的一項要求。需要實現(xiàn)的功能主要是產(chǎn)品列表的分類管理，以及具體的操作：添加、修改。3.2 產(chǎn)品管理流程圖3.2.4 留言管理用戶填

18、好信息，提交后馬上在前臺顯示出來，并在后臺列表顯示。這樣可以及時對客戶的信息反饋進行收集與處理，以便提高企業(yè)的信譽。它主要實現(xiàn)的功能主要是：修改、刪除。3.3 留言管理流程圖4 網(wǎng)站總體設(shè)計4.1網(wǎng)站前臺設(shè)計4.1.1 服裝網(wǎng)站系統(tǒng)流程圖 圖4.1 系統(tǒng)總體框架4.1.2設(shè)計描述網(wǎng)站首頁主要顯示最新動態(tài)信息（自動從數(shù)據(jù)庫中提?。⒆钚庐a(chǎn)品（管理員后臺發(fā)布）。網(wǎng)絡(luò)管理員在后臺可以動態(tài)更新首頁的內(nèi)容。瀏覽者一進入首頁就能夠了解整個網(wǎng)站的最新更新和公司的最新活動、行業(yè)新聞，給瀏覽者耳目一新的感覺，吸引瀏覽者經(jīng)常訪問網(wǎng)站。如圖4.2所示。圖4.2網(wǎng)站首頁確定企業(yè)所要傳達的主要信息，并將這些信息分類。比

19、如預測有哪些人會瀏覽企業(yè)的網(wǎng)站他們希望從網(wǎng)站上獲知哪些信息：企業(yè)希望哪些人瀏覽自己的網(wǎng)站，準備提供給訪問者哪些信息，同時企業(yè)又希望獲知訪問者的哪些信息等。根據(jù)前面的需求分析，按照系統(tǒng)開發(fā)的基本觀點對網(wǎng)站進行分解，從內(nèi)容上可對網(wǎng)站作如下劃分：關(guān)于我們 通過公司的簡介、品牌形象來展現(xiàn)公司的面貌。公司動態(tài) 發(fā)布公司新聞，以及行業(yè)新聞。產(chǎn)品展示 展示產(chǎn)品和相關(guān)信息。聯(lián)系我們 公司的聯(lián)系方式和各區(qū)域的地址。在線留言 通過客戶的留言，加強企業(yè)和庫戶的交流。 關(guān)于我們分為兩部分：公司簡介和品牌形象。公司簡歷顧名思義就是介紹公司的發(fā)展規(guī)模和發(fā)展背景。而品牌形象就是介紹公司所代言的服裝品牌主題和風格，可以讓客戶

20、一覽公司的前景。公司動態(tài)由公司新聞、行業(yè)新聞組成。公司新聞當然就是發(fā)布些公司的最新信息及活動安排。行業(yè)新聞則是了解行業(yè)的企業(yè)信息業(yè)可以獲得有關(guān)企業(yè)的經(jīng)營情況。產(chǎn)品展示主要是展示品牌的相關(guān)圖片和信息。訂貨系統(tǒng)主要是讓客戶在網(wǎng)站進行產(chǎn)品訂單。聯(lián)系我們這塊和公司簡介部分一樣，由于是長期不改動的內(nèi)容，所以采取了直接從文本文件讀取的方式。在線留言部分則是這一版塊的重點。瀏覽該網(wǎng)站的用戶可以直接在留言版上留言。留言者無需注冊就能留言，可以給直接自己取個網(wǎng)名，然后填寫聯(lián)系方式，地址，email，然后輸入留言內(nèi)容。這樣方便了客戶與公司，客戶與客戶之間的信息交流。4.2網(wǎng)站后臺設(shè)計4.2.1 服裝網(wǎng)站后臺流程圖

21、圖4.3 后臺管理模塊設(shè)計4.2.2 詳細描述網(wǎng)站后臺是為公司內(nèi)部的管理員來管理網(wǎng)站而做的，比如定時更新公司新聞，產(chǎn)品信息，管理留言。其分為產(chǎn)品管理系統(tǒng)、新聞管理系統(tǒng)、留言管理系統(tǒng)、網(wǎng)站管理系統(tǒng)。均對其的子管理模塊進行增加、修改、刪除。4.3 數(shù)據(jù)庫的設(shè)計在建立一個數(shù)據(jù)庫之前，首先要對建立的數(shù)據(jù)庫進行合理的設(shè)計，一個好的應用程序系統(tǒng)依賴于一個設(shè)計好的基礎(chǔ)數(shù)據(jù)。由于表是數(shù)據(jù)庫中最基礎(chǔ)的對象，它記錄了數(shù)據(jù)庫中的全部數(shù)據(jù)，所以設(shè)計數(shù)據(jù)庫的關(guān)鍵就是設(shè)計數(shù)據(jù)庫中的表及定義表之間的關(guān)系，具體應該考慮到應用程序所需要的表的字段和關(guān)系。創(chuàng)建一個數(shù)據(jù)庫名稱為student.mdb，如圖4.4所示。圖4.4數(shù)據(jù)庫

22、的設(shè)計它主要分為如下幾個表文件： 用戶信息表主要記錄瀏覽者登錄信息，以方便管理員進入后臺，對客戶留言、新聞發(fā)布、產(chǎn)品更新進行后臺管理。用戶信息結(jié)構(gòu)表如表4.1所示。表4.1字段名稱數(shù)據(jù)類型說明user文本用戶名password文本密碼id自動編號主鍵簡介表是使客戶瀏覽公司資訊模塊時，了解企業(yè)的發(fā)展動態(tài)，如表4.2所示。表4.2字段名稱數(shù)據(jù)類型說明gsi備注公司簡介id自動編號主鍵形象表是使客戶瀏覽公司品牌形象模塊時，了解企業(yè)的發(fā)展文化，如表4.3所示。表4.3字段名稱數(shù)據(jù)類型說明xx備注品牌形象id自動編號主鍵產(chǎn)品展示表是用來存儲產(chǎn)品的具體信息，供客戶瀏覽，如表4.4所示。 表4.4字段名稱數(shù)

23、據(jù)類型說明mc文本名稱tupian文本圖片路徑id自動編號主鍵客戶留言表儲存的是客戶的留言信息，前臺可以對留言主題、聯(lián)系人、電話、e-mail、聯(lián)系電話、圖片、留言內(nèi)容進行添加，回復則是管理員從后臺根據(jù)需求進行回復，如表4.5所示。 表4.5字段名稱數(shù)據(jù)類型說明username文本姓名tel文本電話address文本地址email文本e-mailbeizhu備注留言id自動編號主鍵新聞中心表是使客戶瀏覽新聞中心模塊時，了解企業(yè)、行業(yè)的發(fā)展動態(tài)，設(shè)置字段及類型，如表4.6和4.7所示。表4.6字段名稱數(shù)據(jù)類型說明zhuti文本主題news備注內(nèi)容id自動編號主鍵表4.7字段名稱數(shù)據(jù)類型說明zhu

24、ti1文本主題news1備注內(nèi)容id自動編號主鍵5 網(wǎng)站總體實現(xiàn)5.1信息發(fā)布頁面信息發(fā)布模塊主要有公司新聞發(fā)布和行業(yè)新聞發(fā)布，這里以公司新聞發(fā)布為主要。實現(xiàn)頁面如圖5.1所示。圖5.1 dongtai.asp公司動態(tài)為dongtai.asp。這個模塊有兩個部分：公司新聞和行業(yè)新聞。公司新聞主要是覺得通過看一個公司的最新消息是宣傳一個公司的最有效途徑。新聞自動循環(huán)，點擊新聞后的查看時，則新打開一個頁面(dongtai1.asp)，讀取新聞的具體內(nèi)容。其他信息發(fā)布的頁面，如行業(yè)新聞，和公司新聞頁面類似。主要代碼：公司新聞 %i=1while not rs.eof and i 5.2 產(chǎn)品展示產(chǎn)品展示模塊是企業(yè)網(wǎng)站的一個重點，實現(xiàn)頁面如圖5.2所示。圖5.2 cp.asp 產(chǎn)品展示頁面(cp.asp)，但是產(chǎn)品展示顯示的信息比較豐富。在網(wǎng)站后臺管理中必須加強管理。5.3 留言版留言版作為增強客戶與企業(yè)，方便企業(yè)收集顧客意見，改善企業(yè)不足之處，也是一大要點。留言版實現(xiàn)頁面，如圖5.3所示。 圖5.3 ly.asp留言者可以填寫自己的信息，提交后，這些信息傳到數(shù)據(jù)庫，每頁顯示4條記錄，超過記錄就進行跳轉(zhuǎn)，跳到下一頁記錄，點擊提交時，在本頁面讀取留言