1、<p><b>　　動態(tài)網(wǎng)站設(shè)計與制作</b></p><p>　　【摘 要】 隨著網(wǎng)絡(luò)日益深入社會生活，以電子商務(wù)網(wǎng)站作為對外的展示窗口，進行內(nèi)外信息交流，已成為大眾的迫切需要。網(wǎng)站信息管理系統(tǒng)是典型的信息管理系統(tǒng)(MIS),其開發(fā)主要包括后臺數(shù)據(jù)庫的建立和維護以及前端應(yīng)用程序的開發(fā)兩個方面。對于前者要求建立起數(shù)據(jù)一致性和完整性強、數(shù)據(jù)安全性好的數(shù)據(jù)庫。而對于后者則要求應(yīng)用程序

2、功能完備,易使用等特點。使用MACROMEDIA公司的Dreamweaver MX制作頁面，用ASP語言做連接數(shù)據(jù)庫的程序，使用Access制作系統(tǒng)的數(shù)據(jù)庫，做一個具有留言版、登入頁面等信息網(wǎng)站。</p><p>　　【關(guān)鍵詞】Dreamweaver 應(yīng)用、信息管理系統(tǒng)、ASP(Active Sever Pages)</p><p><b>　　前 言</b><

3、;/p><p>　　近年來，網(wǎng)絡(luò)技術(shù)得到迅速的發(fā)展，這就為信息資源的共享提供了技術(shù)上的可能.作為信息密集型的地理信息系統(tǒng)(GIS)上升到網(wǎng)絡(luò)平臺可謂適逢其時.但從目前的應(yīng)用情況來看，除了國外極少的公司擁有網(wǎng)絡(luò)版的GIS之外，在國內(nèi)還處于試驗研制的階段.因此，盡快地研制出我國自主版權(quán)的網(wǎng)絡(luò)GIS的原型和產(chǎn)品，并在技術(shù)手段上達到國際先進水平，是擺在我們面前的一項迫切的任務(wù)。</p><p>　　人

4、類社會已開始進入信息社會，信息逐漸滲透到人們工作、生活、娛樂、商業(yè)、制造業(yè)、軍事等各個領(lǐng)域，辦公自動化、電子商務(wù)、網(wǎng)上購物、遠程醫(yī)療、家庭上網(wǎng)、電子博物館等概念逐漸變?yōu)楝F(xiàn)實，這一切都是依賴于計算機技術(shù)、通信技術(shù)、網(wǎng)絡(luò)技術(shù)、信息技術(shù)的飛速發(fā)展，依賴于這些新技術(shù)在人們生活中的廣泛應(yīng)用。</p><p>　　1.系統(tǒng)開發(fā)所用工具的簡介</p><p><b>　　1.1開發(fā)環(huán)境<

5、/b></p><p>　　Windows 98/2000/XP 操作系統(tǒng)的PC</p><p><b>　　1.2開發(fā)工具</b></p><p>　　DreamweaverMX、Frontpage2003以及圖象處理工具Fireworks MX和Photoshop8.0。</p><p>　　Dreamweav

6、er是當(dāng)前最流行的網(wǎng)頁設(shè)計軟件，Dreamweaver不僅是一個專業(yè)的可視化網(wǎng)頁創(chuàng)建編輯器，而且它還是一個出色的網(wǎng)站維護工具。用戶可以通過它管理和維護已有的站點，從此不必在維護和管理方面花太多的力氣，省下的時間可以考慮如何再修飾自己的網(wǎng)頁。使用Dreamweaver,可以輕松隨意地設(shè)計跨越平臺、跨越瀏覽器的網(wǎng)頁。 </p><p><b>　　ASP 簡介 </b

7、></p><p>　　在管理信息系統(tǒng)的開發(fā)應(yīng)用中，Microsoft公司的ASP（Active Server Pages）被廣為使用。ASP實際上是將標準的HTML文件拓展了一些附加特征，為編寫人員提供了在服務(wù)器端運行腳本的環(huán)境，使編寫人員可以利用VBScript和JavaScript或其他的第三方腳本語言來創(chuàng)建ASP，實現(xiàn)過去需要編寫復(fù)雜的CGI程序才能實現(xiàn)的有動態(tài)內(nèi)容的網(wǎng)頁，如計數(shù)器等。ASP提供了一

8、些內(nèi)置對象和組件，允許用戶從瀏覽器中接收和發(fā)送信息。ASP可以和諸如SQL Server這樣的數(shù)據(jù)庫進行連接，進而完成數(shù)據(jù)的交換與更新。</p><p>　　2．動態(tài)網(wǎng)站主要設(shè)計工具及本站應(yīng)用</p><p>　　2.1 photoshop在本站中的應(yīng)用</p><p>　　在眾多圖像處理軟件中，Adobe公司推出的專門用于圖形、圖像處理的軟件Photoshop以其

9、強大的功能、集成度高、適用面廣和操作簡便而著稱于世。本站在很多方面使用了PHOTOSHOP極其相關(guān)的技術(shù)：</p><p>　　首先，本站的整體樣式是通過PHOTOSHOP設(shè)計出來，在PHOTOSHOP上形成網(wǎng)站整體的風(fēng)格和樣式，這樣的關(guān)鍵是PHOTOSHOP在設(shè)計上有非常大的作用，這是其他軟件很難媲美的，而且PHOTOSHOP軟件還可以對所設(shè)計的網(wǎng)頁進行切割，然后導(dǎo)出優(yōu)化結(jié)果，這樣的結(jié)果是HTML格式的，就可以

10、很方便的導(dǎo)入到Dreamweaver MX進行進一步的編輯。</p><p>　　2.2本網(wǎng)站編寫設(shè)計環(huán)境選擇</p><p>　　為了完美的表現(xiàn)出網(wǎng)站的魅力和風(fēng)采，在本網(wǎng)站編寫環(huán)境選擇上采用國際先進的網(wǎng)頁、平面處理等工具及其動態(tài)網(wǎng)頁語言。</p><p>　　2.3編程語言選擇ASP(Active Sever Pages)</p><p>

11、　?。ˋSP）是服務(wù)器端腳本編寫環(huán)境，使用它可以創(chuàng)建和運行動態(tài)、交互的 Web 服務(wù)器應(yīng)用程序。由于腳本在服務(wù)器上而不是在客戶端運行，傳送到瀏覽器上的 Web 頁是在 Web 服務(wù)器上生成的。所以不必擔(dān)心瀏覽器能否處理腳本，這也是本旅游網(wǎng)站選擇ASP的原因。</p><p><b>　　2.4數(shù)據(jù)庫連接 </b></p><p>　　ODBC(Open Databas

12、e Connectivity)數(shù)據(jù)源中文譯名為“開放數(shù)據(jù)連接”，是微軟公司開發(fā)的一個數(shù)據(jù)庫訪問標準。它的兩個用途分別是：</p><p>　　第一，使用ODBC技術(shù)，設(shè)計人員只需編寫一個程序版本，就可以訪問多種數(shù)據(jù)庫，從而使程序具有更好的兼容性和適應(yīng)性。</p><p>　　第二，有些應(yīng)用程序需要訪問某種數(shù)據(jù)庫，但程序所在的計算機上并沒有安裝相應(yīng)的數(shù)據(jù)庫軟件。如果為了使用某種數(shù)據(jù)庫，可以安

13、裝相應(yīng)的數(shù)據(jù)庫軟件，但有些數(shù)據(jù)庫軟件極其龐大，并且對計算機的硬件、軟件配置有非常高的要求，即便能夠安裝，也會占用大量的系統(tǒng)資源。為此，ODBC提供了一批常用的數(shù)據(jù)庫軟件驅(qū)動程序，包括Microsoft Access的驅(qū)動程序。這樣，計算機上即便沒有安裝Microsoft Access，但只要有了Microsoft Access的驅(qū)動程序，程序就可以訪問數(shù)據(jù)庫。</p><p>　　如果要在ASP程序中通過A

14、DO對象訪問數(shù)據(jù)庫，必須先建立一個數(shù)據(jù)源(Data Source)。數(shù)據(jù)源包含了如何與一個數(shù)據(jù)提供者進行連接的信息。數(shù)據(jù)提供者可以是任何支持ODBC的數(shù)據(jù)庫。數(shù)據(jù)源有三種類型：系統(tǒng)數(shù)據(jù)源、用戶數(shù)據(jù)源和文件數(shù)據(jù)源。如果建立的數(shù)據(jù)源是系統(tǒng)數(shù)據(jù)源，則所有的用戶都可以訪問；如果是用戶數(shù)據(jù)源，則只有指定用戶可以訪問；如果是文件數(shù)據(jù)源，則數(shù)據(jù)源信息將被存儲在一個文件中，多個用戶可以通過它來訪問數(shù)據(jù)庫?！熬W(wǎng)上書店”的ODBC數(shù)據(jù)源是名為“db”的系統(tǒng)

15、數(shù)據(jù)源。</p><p>　　數(shù)據(jù)源的配置流程為：“開始”→“設(shè)置” →控制面板→管理工具→數(shù)據(jù)源(ODBC)。當(dāng)數(shù)據(jù)庫參數(shù)設(shè)置完成，會彈出測試所建立的數(shù)據(jù)源是否成功，同時也列出了連接到Microsoft Access數(shù)據(jù)源的所有信息。</p><p>　　2.5網(wǎng)站運行環(huán)境選擇IIS(Internet Information Server)</p><p>　　

16、IIS 即Microsoft Internet Information Server 是運行Windows平臺的一款Web服務(wù)器，支持ASP的運行。本站的瀏覽需要IIS的支持。本旅游網(wǎng)站需要在IIS下才能正常運行。</p><p>　　2.6網(wǎng)站數(shù)據(jù)庫選擇Access</p><p>　　本旅游網(wǎng)站就是采用這個開發(fā)工具Microsoft Access開發(fā)數(shù)據(jù)庫。</p>&l

17、t;p>　　3．網(wǎng)站的主要功能和模塊</p><p>　　任何一個網(wǎng)站，必須首先具有明確的目的和目標群體。網(wǎng)站是面對客戶、供應(yīng)商、消費者還是全部？主要目的是為了介紹企業(yè)、宣傳某種產(chǎn)品還是為了試驗電子商務(wù)？如果目的不是唯一的，還應(yīng)該清楚的列出不同目的的輕重關(guān)系。建站包括類型的選擇、內(nèi)容功能的籌備、界面設(shè)計等各個方面都受到目的性的直接影響，因此目的性是一切原則的基礎(chǔ)。</p><p>　

18、　更新是網(wǎng)站的點睛之作，是吸引回頭率的主要手段之一，也是一個主流網(wǎng)站所不可或缺的。在瀏覽者眼中，網(wǎng)站的生命力就體現(xiàn)在這里。</p><p>　　本網(wǎng)站瀏覽者可以查看景區(qū)。本網(wǎng)站主要由主頁、江郎山景區(qū)、廿八都景區(qū)、浮蓋山景區(qū)、歷史人物故居、留言版等欄目組成。</p><p>　　以下具體介紹主要制作方法：</p><p><b>　　3.1新建站點</

19、b></p><p>　　在 Dreamweaver 中建立站點，是進行網(wǎng)站開發(fā)的第二個關(guān)鍵步驟。這里所講的建立站點，其實就是在 Dreamweaver 中定義站點、策劃站點結(jié)構(gòu)、部署開發(fā)環(huán)境。定義站點是為了更好地利用【文件】面板對站點文件進行管理，也是為減少一些錯誤的出現(xiàn)，如路徑出錯，鏈接出錯等等。許多初學(xué)者開始做網(wǎng)頁時，就只知道做單一網(wǎng)頁，對文件的條理性、結(jié)構(gòu)性不加以管理，沒有對文件進行分類管理，使整個

20、站點結(jié)構(gòu)顯得很亂；所以在開發(fā)之前應(yīng)該認真策劃好站點結(jié)構(gòu)。打開 Dreamweaver MX 2004 軟件，執(zhí)行【站點】 | 【站點管理】命令，在彈出的【站點管理】對話框中選擇【新建】，按新建站點的步驟逐步進行設(shè)置，最后保存完成制作。 </p><p>　　3.2創(chuàng)建動態(tài)網(wǎng)站首頁</p><p>　?。?）使用Dreamweaver　MX制作首頁模板</p><p>

21、;　　1)首先單擊WindowsXP 的“開始” →“所有程序” →“Macromedia” →“Macromedia Dreamweaver MX”。</p><p>　　2)“文件” →“新建” 然后彈出一個對話框點擊創(chuàng)建即可。</p><p><b>　　圖3-1</b></p><p>　?。?）網(wǎng)站的功能介紹</p>

22、<p><b>　　網(wǎng)站的組織結(jié)構(gòu)圖：</b></p><p>　　4．本網(wǎng)站前臺功能介紹</p><p><b>　　4．1主頁</b></p><p>　　主頁index.asp全圖如下所示：</p><p><b>　　圖4-1</b></p>&

23、lt;p>　　這個主頁使瀏覽者清楚了解到江山大概的人文景觀。同時在主頁中包含了江郎山、廿八都古鎮(zhèn)、浮蓋山石洞群、歷史人物故居、及留言版這五個大塊內(nèi)容。</p><p><b>　　4.2江郎山</b></p><p>　　江郎山j(luò)ls.asp全圖如下：</p><p><b>　　圖4-2</b></p>

24、<p>　　主要功能：介紹江郎山的風(fēng)土人情，傳說的故事，江郎山、青龍虎山溪、偉人峰等景點。</p><p><b>　　4.3廿八都古鎮(zhèn)</b></p><p>　　廿八都古鎮(zhèn)nbd.asp全圖如下：</p><p><b>　　圖4-3</b></p><p>　　主要功能：介紹廿八

25、都山歌和景點。</p><p><b>　　4．4浮蓋堆石洞群</b></p><p>　　浮蓋堆石洞群fgdsdq.asp全圖如下：</p><p><b>　　圖4-4</b></p><p>　　主要功能：對浮蓋堆石洞群進行了詳細的介紹，還有對浮蓋山、楓嶺關(guān)、煉石三疊和洞群景色一一作了說明。&

26、lt;/p><p><b>　　4.5歷史人物故居</b></p><p>　　歷史人物故居lsrwgj.asp全圖如下：</p><p><b>　　圖4-5</b></p><p>　　主要功能：介紹戴笠老家和戴笠一生和戴笠家的各種機關(guān)。</p><p><b>　

27、　4.6仙峽關(guān)</b></p><p>　　仙峽關(guān) xxg.asp</p><p><b>　　圖4-6</b></p><p>　　主要功能：介紹仙峽古道、月亮湖和仙峽關(guān)。</p><p><b>　　4.7留言版</b></p><p><b>　　

28、(1)留言版</b></p><p><b>　　圖4-7-1</b></p><p>　　主要功能：可以在此網(wǎng)站中注冊用戶并給這個網(wǎng)站留言，互相交流，提供意見。</p><p><b>　　(2)詳細留言頁面</b></p><p><b>　　圖4-7-2</b>

29、;</p><p><b>　　5．網(wǎng)站的主要代碼</b></p><p><b>　　5．1鼠標跟蹤代碼</b></p><p><b>　　<script></b></p><p><b>　　var x,y</b></p>

30、<p>　　var step=18</p><p>　　var flag=0</p><p>　　var message="★FOLLOW Me!"</p><p>　　message=message.split("")</p><p>　　var xpos=new Array()</p

31、><p>　　for (i=0;i<=message.length-1;i++) {</p><p>　　xpos[i]=-50}</p><p>　　var ypos=new Array()</p><p>　　for (i=0;i<=message.length-1;i++) {</p><p>　　ypo

32、s[i]=-200}</p><p>　　function handlerMM(e){</p><p>　　x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX</p><p>　　y = (document.layers) ? e.pageY : document.body

33、.scrollTop+event.clientY</p><p><b>　　flag=1}</b></p><p>　　function www_helpor_net() {</p><p>　　if (flag==1 && document.all) {</p><p>　　for (i=messag

34、e.length-1; i>=1; i--) {</p><p>　　xpos[i]=xpos[i-1]+step</p><p>　　ypos[i]=ypos[i-1]}</p><p>　　xpos[0]=x+step</p><p><b>　　ypos[0]=y</b></p><p&g

35、t;　　for (i=0; i<message.length-1; i++) {</p><p>　　var thisspan = eval("span"+(i)+".style")</p><p>　　thisspan.posLeft=xpos[i]</p><p>　　thisspan.posTop=ypos[i]}

36、}</p><p>　　else if (flag==1 && document.layers) {</p><p>　　for (i=message.length-1; i>=1; i--) {</p><p>　　xpos[i]=xpos[i-1]+step</p><p>　　ypos[i]=ypos[i-1]}&

37、lt;/p><p>　　xpos[0]=x+step</p><p><b>　　ypos[0]=y</b></p><p>　　for (i=0; i<message.length-1; i++) {</p><p>　　var thisspan = eval("document.span"+i)

38、</p><p>　　thisspan.left=xpos[i]</p><p>　　thisspan.top=ypos[i]}}</p><p>　　var timer=setTimeout("www_helpor_net()",30)}</p><p>　　for (i=0;i<=message.length-1

39、;i++) {</p><p>　　document.write("<span id='span"+i+"' class='spanstyle'>")</p><p>　　document.write(message[i])</p><p>　　document.write(&quo

40、t;</span>")}</p><p>　　if (document.layers){</p><p>　　document.captureEvents(Event.MOUSEMOVE);}</p><p>　　document.onmousemove = handlerMM;</p><p>　　www_helpor

41、_net();</p><p><b>　　// --></b></p><p><b>　　</script></b></p><p><b>　　5.2 跑馬燈代碼</b></p><p>　　<MARQUEE scrollAmount=2 hspa

42、ce=5 scrollDelay=10 loop=100 width="90%" </p><p>　　height=20 on="left" directi align="center"></p><p>　　<FONT face=宋體 color=#ffffff </p><p>　　siz

43、e=2><STRONG>請你留言</FONT></MARQUEE></p><p>　　5.3 本站簡介代碼</p><p>　　<marquee direction=up height=100 scroll amount=1 scroll delay=20 width="95%" >歡迎光臨本網(wǎng)站，初次做網(wǎng)站，請大

44、家不要見笑，水平有限，以后會越來越好，請各位多多指教?。。?lt;/p><p>　　</marquee></p><p>　　6．旅游網(wǎng)站系統(tǒng)功能具體的實現(xiàn)</p><p>　　6．1數(shù)據(jù)庫的設(shè)計與創(chuàng)建表</p><p><b>　　表6-1</b></p><p>　　7．網(wǎng)站的測試與維

45、護</p><p>　　網(wǎng)站制作完成后，我對網(wǎng)站做了全面的測試，首先在IIS中建立一個虛似的目錄，填寫一個虛擬目錄名，如：jc 選擇目錄，點下一步，然后完成就可以了。再打開瀏覽器輸入地址，以上面的虛擬目錄名為例，應(yīng)該是http://localhost/jc/index.asp</p><p>　　進入網(wǎng)站的主頁。打開留言版(new.asp)填寫留言信息。就這樣每一個頁面都經(jīng)過仔細的測試，最

46、后測得結(jié)果此旅游網(wǎng)站可以正常的對外交流。以外還需要管理人員不斷的傳送新的咨訊，及時的處理好游客留言，不斷更新，做好網(wǎng)站的維護工作。</p><p><b>　　8．總結(jié)</b></p><p>　　經(jīng)過了三個月的學(xué)習(xí)和工作，我終于完成了動態(tài)網(wǎng)站的設(shè)計和論文。從開始接到論文題目到設(shè)計的實現(xiàn)，再到論文文章的完成，每走一步對我來說都是新的嘗試與挑戰(zhàn)，這也是我在大學(xué)期間獨立完

47、成的最大的項目。在這段時間里，我學(xué)到了很多知識也有很多感受，使自己非常稚嫩作品一步步完善起來，每一次改進都是我學(xué)習(xí)的收獲。</p><p>　　雖然我的論文作品不是很成熟，還有很多不足之處，但我可以自豪的說，這里面的每一個頁面，都有我的勞動。當(dāng)看著自己的網(wǎng)站，真是莫大的幸福和欣慰。我相信其中的酸甜苦辣最終都會化為甜美的甘泉。</p><p><b>　　參考文獻</b>

48、;</p><p>　　[1]. 蔡翠平 編著：《網(wǎng)絡(luò)程序設(shè)計——ASP》，清華大學(xué)出版社 ，2003年8月第5次印刷；</p><p>　　[2]. 丁貴廣等 編著：《ASP編程基礎(chǔ)與實例》，機械工業(yè)出版社；</p><p>　　[3]. 黃明、梁旭 編著：《ASP信息系統(tǒng)設(shè)計與開發(fā)實例（第2版）》，機械工業(yè)出版社出版；</p><p>　

49、　[4]. Craig Eddy,Timothy Buchanan編著：《中文Access 2000學(xué)時教程》，機械工業(yè)出版社；</p><p>　　[5]. 周家地 編著：《Dreamweaver MX入門與提高》，清華大學(xué)出版社, 2002年4月；</p><p>　　[6]. 趙豐年 編著：《網(wǎng)頁制作教程》，人民郵電出版社 ，2002年7月北京第5次印刷；</p>&l

50、t;p><b>　　致 謝 </b></p><p>　　經(jīng)過半年的忙碌和工作，本次畢業(yè)設(shè)計已經(jīng)接近尾聲，作為一個大專生的畢業(yè)設(shè)計，由于經(jīng)驗的匱乏，難免有許多考慮不周全的地方，如果沒有導(dǎo)師的督促，以及一起工作的同學(xué)們的支持，想要完成這個設(shè)計是難以想象的。</p><p>　　在這里要感謝我的導(dǎo)師劉曉丹老師。劉老師平日里工作繁多，但在我做畢業(yè)設(shè)計的每個階段，從外

51、出實習(xí)到查閱資料，設(shè)計草案的確定和修改，中期檢查，后期詳細設(shè)計，裝配草圖等整個過程中都給予了我悉心的指導(dǎo)。我的設(shè)計較為復(fù)雜煩瑣，但是劉老師仍然細心地糾正其中的錯誤。除了敬佩劉老師的專業(yè)水平外，她的治學(xué)嚴謹和科學(xué)研究的精神也是我永遠學(xué)習(xí)的榜樣，并將積極影響我今后的學(xué)習(xí)和工作。</p><p>　　還要感謝大學(xué)三年來所有的老師，為我們打下計算機專業(yè)知識的基礎(chǔ)；同時還要感謝所有的同學(xué)們，正是因為有了你們的支持和鼓勵。此