服裝網(wǎng)站的設(shè)計與實現(xiàn)

基于ASP技術(shù)的服裝網(wǎng)站的設(shè)計與實現(xiàn)【摘要】本系統(tǒng)是運用ASP技術(shù)開發(fā)，實現(xiàn)了網(wǎng)站的動態(tài)管理，使得對信息的管理更加及時、高效，提高了工作效率，具有一般網(wǎng)站系統(tǒng)的功能，主要包括前臺管理和后臺管理，可為服裝網(wǎng)站提供新聞發(fā)布與管理的服務(wù)。前臺管理給瀏覽者更多的視覺沖擊和空間想象力，內(nèi)容和版式、顏色、系統(tǒng)有自己的風(fēng)格；后臺管理具有簡單易用、功能強大，性價比高、擴展性好，安全性高、穩(wěn)定性好的系統(tǒng)?！娟P(guān)鍵詞】ASP、網(wǎng)頁設(shè)計、Dreamweaver一、 引言伴隨著計算機技術(shù)在各行各業(yè)日益廣泛和深入的應(yīng)用，網(wǎng)絡(luò)的概念早已深入人心。由于web頁面能把文本、圖像、聲音、動畫、視像等多種媒體信息集于一體，不但使信息的顯示更加生動，而且使信息的瀏覽更為方便，客戶信息反饋方便了企業(yè)與客戶之間信息交流，因此服裝企業(yè)紛紛建設(shè)具有自己獨特風(fēng)格的網(wǎng)站，以增強企業(yè)知名度企業(yè)建立網(wǎng)站。因此，對于一家服裝商店來說，擁有一個屬于自己的網(wǎng)站是至關(guān)重要的。二、 本課題的國內(nèi)外研究背景目前國內(nèi)商業(yè)網(wǎng)站自身的確存在不少問題，主要表現(xiàn)在：第一，規(guī)模小、聯(lián)系不緊密，處于各自為政的分散狀態(tài)；第二，國內(nèi)網(wǎng)站在首頁頁面上通常會放置太多內(nèi)容，也存在很多廣告，使整體版面過于雜亂；第三，安全性低。國內(nèi)只有交易、銀行等網(wǎng)站才會注意到安全連接的問題。相比而言，國外許多網(wǎng)站的設(shè)計都很時尚和有自身的特點，行業(yè)明確，功能全面，安全性高等。舉例說明：歐美用戶不習(xí)慣艷麗、花哨的色彩和設(shè)計風(fēng)格，他們比較鐘情于簡潔、平淡而嚴謹?shù)娘L(fēng)格；國外傳統(tǒng)網(wǎng)站比較講究網(wǎng)站的實用性和便利性，他們會花很多時間去制作很多周到實用的細節(jié)，功能雖然大多平實但很有效。而韓國網(wǎng)站設(shè)計在世界也是相當(dāng)有影響力的。韓國的商業(yè)站點在框架結(jié)構(gòu)、內(nèi)容排版、色彩搭配、圖片運用上達到了非常和諧的統(tǒng)一，設(shè)計師擁有較大的設(shè)計空間。三、 技術(shù)綜述（一）技術(shù)概論網(wǎng)站實現(xiàn)方式有兩種：一種是靜態(tài)HTML頁面，更新信息時需要重新制作頁面然后上傳頁面并修改相應(yīng)鏈接；另一種是基于ASP和腳本語言，將動態(tài)網(wǎng)頁和數(shù)據(jù)庫結(jié)合，通過應(yīng)用程序來處理頁面。前臺開發(fā)工具應(yīng)用ASP、Dreamweaver、flash動畫等，建立富有動態(tài)效果的網(wǎng)站。后臺應(yīng)用Access建立數(shù)據(jù)庫，進行數(shù)據(jù)管理，保持數(shù)據(jù)的完整性。Dreamweaver網(wǎng)頁編輯站點的設(shè)計和頁面創(chuàng)建；網(wǎng)頁布局模式：對稱形、T形、口字形、海報形；界面的組成：對象工具欄、屬性面板、發(fā)射器；版面設(shè)計工具：表格、框架、模板；效果設(shè)計：層、時間軸、行為的運用。Flash網(wǎng)頁動畫設(shè)計（1） 網(wǎng)頁動畫與時尚動畫（漸變動畫、逐幀動畫）；（2） Flash界面構(gòu)成模式（工具及控制面板的使用）；（3） 網(wǎng)頁交互按鈕的設(shè)計：變幻按鈕、隱形按鈕；（4） 效果實例：引導(dǎo)層（滾動廣告欄）遮蓋層（水波飄浮文本）行為的運用（鼠標(biāo)跟隨、運動背景的設(shè)定）；（5） Flash文件的導(dǎo)出模式：HTML、影片、Autoif。Photoshop網(wǎng)頁圖像處理（1） Photoshop基礎(chǔ)：功能、界面組成及應(yīng)用；（2） Logo（標(biāo)志）、banner（廣告條）、導(dǎo)航欄、按鈕、藝術(shù)文本的制作；（3） 圖片輸出處理：切片、優(yōu)化；（4） Photoshop文件導(dǎo)出模式：PSD、GIF、JPEG、Autoif。（二） 系統(tǒng)功能概述在前臺管理部分可以分為五個信息瀏覽功能窗口，分別是“首頁”、“品牌故事”、“品牌風(fēng)格”、“服裝展示”、“新聞資訊”、“客戶服務(wù)”和“登錄注冊”這六大功能。關(guān)于首頁中主要介紹了關(guān)于品牌的基本信息；品牌故事主要介紹企業(yè)的創(chuàng)立過程；品牌風(fēng)格主要介紹服裝風(fēng)格定位、年齡定位、顧客層次定位；服裝展示向瀏覽者介紹公司開展的主要服裝范圍和品牌類型；新聞資訊主要是用于瀏覽公司發(fā)布的最新新聞和與企業(yè)相關(guān)的重要新聞;客戶服務(wù)主要是收集關(guān)于客戶需要的服務(wù)要求和建議的提交信息；登錄注冊主要是用于會員注冊。管理員操作部分:本網(wǎng)站的主要信息都可以通過后臺管理來進行管理。后臺管理主要包括新聞管理、產(chǎn)品管理、基本信息、管理員管理、用戶注冊這五個部分。新聞管理是網(wǎng)站的新聞發(fā)布管理系統(tǒng)；產(chǎn)品管理是根據(jù)商品的分類來對商品進行添加、修改和刪除管理；基本信息用來對網(wǎng)站的客戶提交意見信息進行處理；管理員管理是用來對后臺管理員進行權(quán)限分配管理和添加后臺管理員的操作；用戶管理是用來對前臺用戶所注冊的資料進行修改與刪除操作；用戶注冊包括注銷登陸和修改密碼兩個部分。（三） 系統(tǒng)框架圖1.前臺系統(tǒng)框架圖，如圖3-1圖3-1前臺系統(tǒng)框架圖2.后臺系統(tǒng)框架圖，如圖3-2圖3-2后臺系統(tǒng)框架圖（四）頁面風(fēng)格設(shè)計本網(wǎng)站為了擁有別的網(wǎng)站所沒有的風(fēng)格，就會讓瀏覽者愿意多停留些時間，細細品嘗該站的內(nèi)容,甚至該站會得到多人的鼓勵與注目，網(wǎng)站風(fēng)格可以從以下幾個方面說明，而每一項都是有關(guān)聯(lián)性的：色系：網(wǎng)頁的底色、文字字型、圖片的色系、顏色等等。排版：表格、框架的應(yīng)用、文字縮排、段落等等。窗口：窗口效果，例如：全屏幕窗口、特效窗口等。程序：網(wǎng)頁互動程序，例如：ASP、PHP、XML、CGI等等。特效：讓網(wǎng)頁看起來生動活潑的各種應(yīng)用，如：Flash、JavaScript、JavaApplets、DHTML架構(gòu)：目錄規(guī)劃、層次淺顯易懂、選單應(yīng)用等等。內(nèi)容：網(wǎng)站主題、整體實用性、文件關(guān)聯(lián)性、內(nèi)容切合度、是否有不必要的檔案等等。&走向：對于網(wǎng)站的未來規(guī)劃、網(wǎng)站整體內(nèi)容走向等。以上這些項目都與網(wǎng)頁風(fēng)格有密切的關(guān)系，網(wǎng)頁的風(fēng)格不是某一項相同，網(wǎng)站就是有整體感，而是要各項目的配合應(yīng)用，才能達到完美的網(wǎng)站風(fēng)格設(shè)計。圖3-3為W-GIRL服裝網(wǎng)站的首頁，圖3-4為W-GIRL服裝網(wǎng)站的后臺登錄界面，圖3-5為服裝網(wǎng)站的后臺界面。圖3-3W-GIRL服裝網(wǎng)站首頁圖3-4服裝網(wǎng)站后臺登錄界面用戶名：admrn圖3-5服裝網(wǎng)站后臺界面四、 系統(tǒng)調(diào)試與測試（一） 程序調(diào)試很多人在編寫網(wǎng)頁程序的時候用的是Dreamweaver或EditPlus,直接用記事本也大有人在，沒有專門的開發(fā)環(huán)境就給程序的調(diào)試增加了難度，不像許多高級語言那樣直接就可以在開發(fā)環(huán)境中運行、調(diào)試，但是我們可以拿瀏覽器來充當(dāng)網(wǎng)頁程序的調(diào)試工具，或者使用ASP專業(yè)調(diào)試工具。（二） 程序的測試方法鏈接測試：所有鏈接是否按指示的那樣確實鏈接到了該鏈接的頁面，所鏈接的頁面是否存在；測試工具：HTMLLinkValidator表單測試：確保提交按鈕能正常工作；Cookies測試：檢查Cookies是否起作用；如果使用Cookies來統(tǒng)計次數(shù)，驗證次數(shù)累計正確；數(shù)據(jù)庫測試：一致性錯誤和輸出錯誤。一致性錯誤主要是由于用戶提交的表單信息不正確而造成的，而輸出錯誤主要是網(wǎng)絡(luò)速度或程序設(shè)計等問題等引起的；導(dǎo)航測試：是否易于導(dǎo)航；導(dǎo)航是否直觀；主要部分是否通過主頁存?。粓D形測試：圖片尺寸要盡量地??；驗證所有頁面字體的風(fēng)格是否一致，要確保圖形有明確的用途。（三） Dreamweaver測試站點和用IIS測試本地站點DreamweaverMX提供了全面檢測站點的功能，它比檢測鏈接更全面。全面地檢測內(nèi)部、外部鏈接、去除錯標(biāo)簽、空標(biāo)簽、多余的標(biāo)簽等，它的使用相當(dāng)簡單，使用全面檢測站點功能如下：選擇菜單中【站點】的【報告】命令，打開一個窗口；選擇檢測范圍，在【報告】選項中有四個內(nèi)容供選擇：CurrentDocument、EntireLocalSite、SelectFiles、Folder；對工作流方面的信息進行檢測；對HTML文件的信息作出檢查；把制作好的網(wǎng)站文件復(fù)制到D:\我的文檔\網(wǎng)站設(shè)計文件夾中，可以打開瀏覽器，在地址欄中輸入http://localhost/我的文檔/網(wǎng)站設(shè)計/index.asp，就會看到網(wǎng)站了。五、 本系統(tǒng)的功能特色（一）利用session變量來跟蹤和校驗合法用戶本網(wǎng)站后臺管理員登錄以及管理員進入管理頁面時用到了session變量。當(dāng)用戶在WEB站點的網(wǎng)頁之間來回移動的時候，可以使用session變量來跟蹤用戶。session變量與cookie有密切的關(guān)系。實際上，session變量依賴于cook變量。在本網(wǎng)站管理員登錄進入后臺管理時，需要用到session變量。便于管理員在不同的管理網(wǎng)頁之間移動表明身份。在用戶登錄提交表單后通過admin.asp文件中的admchk()函數(shù)校驗管理員身份后獲得該變量。管理員登錄時輸入的用戶名和密碼傳遞到admchk()中和數(shù)據(jù)庫中管理員用戶名和密碼對比。正確的用戶名和密碼就賦值一個session變量。具體語句如下：ifadminpass=passwordthensession(“l(fā)ogin”)=“true”response.redirect“index.asp”elseerrinfo二“〈li〉密碼錯誤！”callerror()endif在后臺的管理頁面中首先判斷session(“l(fā)ogin”)是否為true,如果變量值為true的話表明是管理員。(二)分頁功能在顯示留言條數(shù)時，一個頁面不能完全顯示時需要分頁。在留言板中，有多個滿足條件的條數(shù)，首頁不能完全顯示，這樣就需要采用分頁技術(shù)。記錄集對象的一下三個屬性允許我們將從數(shù)據(jù)庫查詢的結(jié)果分成多個頁面：AbsolutePage—設(shè)置或返回當(dāng)前網(wǎng)頁的記錄。PageCount—返回一個記錄集的網(wǎng)頁的數(shù)目。PageSize—設(shè)置或返回包含在單個網(wǎng)頁中的記錄數(shù)目(默認值為20)。在后臺管理中，首先利用查詢語句得到一個記錄集rs，然后設(shè)置記錄集的屬性來設(shè)置單個頁面的記錄數(shù)目，語句如下：Sql二"select*fromtopicwherechecked=1orderbytopdesc,uesetimedesc"setrs=server.createobject(“adodb.recordset”)rs.opensql,conn,1,1rs.pagesize=perpagers.absolutepage=currentpagepage_count=0totalrec=rs.recordcount本網(wǎng)名設(shè)置顯示的記錄數(shù)目是根據(jù)字段perpage來確定的。六、 總結(jié)這次服裝網(wǎng)站開發(fā)制作過程，綜合使用了目前因特網(wǎng)上比較流行的各種靜態(tài)制作方法及交互式動態(tài)網(wǎng)站的制作設(shè)計手段，并對初步理由后臺程序完成了網(wǎng)站的動態(tài)響應(yīng)與生成網(wǎng)頁的技術(shù)。同時也從中學(xué)習(xí)了對靜態(tài)網(wǎng)頁的處理風(fēng)格，色彩搭配，頁面導(dǎo)航方面有了一定經(jīng)驗。在交互式網(wǎng)頁設(shè)計學(xué)會了如何使用Access簡歷數(shù)據(jù)庫，以及對數(shù)據(jù)庫瀏覽，修改，添加，查詢。如何用ASP編寫程序來方便用戶在網(wǎng)上查看網(wǎng)站各方面的信息和交流。由于設(shè)計網(wǎng)站的經(jīng)驗不足，在網(wǎng)站的整體設(shè)計及各模塊功能可能設(shè)計的不夠完全，有待于進一步的完善和改進。參考文獻：魏應(yīng)彬，周星?網(wǎng)頁設(shè)計與Web數(shù)據(jù)庫發(fā)布技術(shù)[M].清華:大學(xué)出版社,2002(5):21-29.許曰斌，程亮.ASP網(wǎng)絡(luò)編程實例[M].北京：人民郵電出版社，2001(4):62-67.任學(xué)文，范嚴.ASP動態(tài)網(wǎng)站之旅[M].北京：中國科學(xué)技術(shù)出版社，2006，20-25.高怡新.ASP動態(tài)網(wǎng)頁設(shè)計[M].北京：人民郵電出版社，2009(10):6-11.武創(chuàng)，王惠?網(wǎng)頁設(shè)計探索之旅[M].北京：電子工業(yè)出版社，2006(9):69-70.小志.ASP入門與實例演練薄[M].北京：中國青年出版社，2001(4):40-42.莊王健?網(wǎng)頁設(shè)計三劍客白金教程[M].北京：電子工業(yè)出版社，2006(1):82-83.趙大良，荊樹蓉，葛趙青.網(wǎng)頁設(shè)計與HTML語言[J].《編輯科技》,2001(13):34-37.王紹卜?利用ASP訪問Web數(shù)據(jù)庫[J].《黃岡職業(yè)技術(shù)學(xué)院學(xué)報》,2002(1):113-116.孫大春，徐銳英?網(wǎng)頁制作技巧[J].《白城師范學(xué)院學(xué)報》，2003(4):33-41.ASP-basedwebsitedesignandimplementationofapparelCollegeofAppliedScienceandTechnology,QuanzhouNormalUniversity

Major:ComputerScienceandTechnologyYa-FenZhuang,080603043

Supervisor:Mei-HongHuangpostgraduateAbstract:ThissystemistouseASPtechnologydevelopmenttorealizethedynamicmanagementofthesite,makingthemanagementofinformationmoretimely,efficient,improveworkefficiencyandfunctionofthesystemwithgeneralwebsite,mainlyincludingfrontandbackofficeadministrationmanagement,canclothingwebsitepressreleaseandmanagementservices.Futuremanagementtotheviewermorevisualimpactandspatialimagination,contentandlayout,color,thesystemhasitsownstyle;Backwithasimpletouse,powerful,cost-effective,goodscalability,highsecurity,stabilityagoodsystem.Keywords:ASP、WebDesign、Dreamweaver附錄：顯示各月份的日functiondateShow(obj,year,month){varmyDate=newDate(year，month-1，1);vartoday=newDate();varday=myDate.getDay();varselectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split('-');varlength;switch(month){case1:case3:case5:case7:case8:case10:case12:length=31;break;case4:case6:case9:case11:length=30;break;case2:if((year%4==0)&&(year%100!=0)||(year%400==0))length=29;elselength=28;}for(i=0;i<obj.cells.length;i++){obj.cells[i].innerHTML='';

obj.cells[i].style.color='';obj.cells[i].className='';}for(i=0;i<length;i++){obj.cells[i+day].innerHTML=(i+1);if(year==today.getFullYear()&&(month-1)==today.getMonth()&&(i+1)==today.getDate())obj.cells[i+day].style.color='red';if(year==eval(selectDate[0])&&month==eval(selectDate[1])&&(i+1)==eval(selectDate[2]))obj.cells[i+day].className='ds_border2';}}把選擇的日期傳給輸入框functiongetValue(obj,inputObj){varmyObj=inputObj.nextSibling.nextSibling.childNodes[0].childNodes[0].cells[2].childNodes;if(obj.innerHTML)inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-"+obj.innerHTML;inputObj.nextSibling.nextSibling.style.display='none';for(i=0;i<obj.parentNode.parentNode.parentNode.cells.length;i++)obj.parentNode.parentNode.parentNode.cells[i].className='';obj.className='ds_border2'}用戶登錄functioncheckpro(){if(checkspace(1.value)){1.focus();alert("請輸入用戶名！")；returnfalse;}if(checkspace(document.myform.p1.value)){document.myform.p1.focus();alert("請輸入密碼！")；returnfalse;}if(document.myform.p1.value!=document.myform.p2.value){alert("兩次密碼不一致！")；myform.p2.focus();returnfalse}}}數(shù)據(jù)庫鏈接DimDBPath,Conn,Rs,SqlDBPath二"../yazi/#db444153170.mdb"'相對于站點根目錄的數(shù)據(jù)庫路徑dimServerPathServerPath=""SubOpenDBIfIsObject(Conn)=TrueThenExitSubDimStrConnSetConn=Server.CreateObject("ADODB.Con