畢業(yè)論文(設計)-基于圖像的導游系統(tǒng)的設計

1、<p><b>　　本科生畢業(yè)設計</b></p><p>　基于圖像的導游系統(tǒng)的設計</p><p>　The design of tourist guiding system based on image</p><p>　學生姓名</p><p>　所在專業(yè)</p><p>　所在

2、班級</p><p>　申請學位</p><p>　指導教師職稱</p><p>　副指導教師職稱</p><p>　答辯時間</p><p><b>　　目 錄</b></p><p><b>　　設計總說明I</b></p>&l

3、t;p>　　introductionII</p><p><b>　　1緒論1</b></p><p><b>　　1.1引言1</b></p><p>　　1.2佛山旅游業(yè)及“南國桃園旅游渡假區(qū)”的狀況1</p><p>　　1.3系統(tǒng)的總體結構2</p><

4、p>　　1.4計算機支持3</p><p>　　2地圖導游系統(tǒng)3</p><p>　　2.1系統(tǒng)功能介紹3</p><p>　　2.2功能實現和技術研究3</p><p>　　2.2.1地圖導航的實現3</p><p>　　2.2.2功能部分的實現4</p><p><

5、b>　　3桃園網站6</b></p><p><b>　　3.1版面介紹6</b></p><p>　　3.1.1主頁介紹6</p><p>　　3.1.2其他頁面特色介紹8</p><p>　　3.2功能實現和技術研究10</p><p>　　3.2.1下拉菜單的實

6、現10</p><p>　　3.2.2圖片集的幻燈片切換技術11</p><p>　　3.2.3JavaScript語言及js文件的應用。11</p><p>　　3.2.4網頁設計平臺Dreamweaver14</p><p><b>　　4 桃園社區(qū)17</b></p><p>　　

7、4.1設置論壇的目的18</p><p>　　4.2 動網論壇系統(tǒng)18</p><p>　　4.3論壇的版面和使用18</p><p>　　4.4后臺管理18</p><p>　　4.5簡易聊天室18</p><p>　　5 結 束 語23</p><p><b>　　鳴

8、 謝24</b></p><p><b>　　參考文獻25</b></p><p><b>　　設計總說明</b></p><p>　　信息產業(yè)的發(fā)展，以及電腦網絡的普遍應用，帶領了人們生活信息化的到來。旅游業(yè)也借助網絡的平臺，更方便地向游客展示了自己的產品和服務。盡管目前已經存在各種的旅游網站，但普遍都欠

9、缺具體化和直觀化，內容累贅，而且參差不齊，難于查找。因此，本文主要在研究一個從游客方面出發(fā)的，能起到較好的導游作用的系統(tǒng)。</p><p>　　本設計分三個主要部分，地圖導游系統(tǒng)、主網站系統(tǒng)、社區(qū)論壇和臨時聊天室系統(tǒng)。這里設計的導游地圖系統(tǒng)雖然簡單，但是能更好地顯示旅游區(qū)的景觀，加上導向功能，能使游客方便快捷的查詢和了解旅游區(qū)信息。主網站是基于ASP開發(fā)的小型網站系統(tǒng)，里面大量地運用了圖像設計技術和各種特效，頁面

10、較清晰明了，能夠更好地輔助地圖系統(tǒng)反映旅游區(qū)信息。論壇社區(qū)也是使用ASP平臺設計的，具體版面跟一般的動網論壇差不多，應用論壇的目的是為了提供一個游客交流和深入了解景點的平臺。聊天室是ASP編寫的一個極簡單的平臺，只寫入了基本的功能，主要特色是不用注冊，聊天模式簡單，方便快捷。</p><p>　　正如設計題目所說的，本設計是基于圖像的，因此在設計過程中應用了多種的圖像處理技術和圖像特效。圖像比起文字的信息，更能為

11、人們所接受，而且圖像處理技術在社會應用中非常廣，技術需求量大，因此想通過這次設計更好地學習和深入了解圖像處理技術。本設計報告的書寫，也是圍繞這些技術在設計中的簡單應用和系統(tǒng)總體框架結合起來的。</p><p>　　關鍵詞：地圖導游系統(tǒng)；ASP；圖像處理技術；社區(qū)論壇</p><p>　　introduction</p><p>　　As the developmen

12、t of information industry,computers are widely used,and it's going to bring us an informationization life.At the same time,internet and computer are used in tourist industry as well,in order to provide a powerful tou

13、rism guiding system.However,all kinds of tourist web site show up at present,most of which are so complicated that visitors can not find out what they want.The paper followed make a research on a powerful tourist web sit

14、e that based on tourist's requirment for travel</p><p>　　This project devide into three sections:guiding map system,main-frame web site, chatting room and forum for communication.Although the guiding map

15、 system is simple,it can display the scenic spots directly.With the guiding system,visitors can find what they want conveniently and quickly.The main-frame web site is a mini-web system which base on ASP lanuage.It conta

16、in image designing technology and image filter technology,so the pages are clear enough to bring useful information to tourist.The for</p><p>　　It’s support on the subject,the design is base on image ,so lot

17、s of image technology and image special affect have been used in on this project.It’s much more easy to be accept that image information than characters’.and it’s generally used in society application,and the requirement

18、 of the technology is very large.So it want to learn and research more about the image technology through the project. </p><p>　　And the thesis followed is written according to the simple application of such

19、 a technology and the system main frame as well.</p><p>　　Keywords: south peach garden；ASP ； The image processing technology；forum community. </p><p>　　基于圖像的導游系統(tǒng)的設計</p><p><b>

20、　　畢業(yè)設計說明書</b></p><p><b>　　緒論</b></p><p><b>　　引言</b></p><p>　　旅游業(yè)是當今世界極具發(fā)展前景和發(fā)展效益的一大新興產業(yè)。隨著佛山地區(qū)經濟的高速發(fā)展,社會地位的日益提高,和深厚的文化底蘊,旅游業(yè)給這個古老名城帶來巨大的經濟效益。目前信息技術的興起,

21、正推動著旅游信息化的發(fā)展。為此，本設計以佛山新八景之一的"南國桃園旅游渡假區(qū)"為藍圖，研究設計網站導游系統(tǒng)的實施。</p><p>　　設計的方向是為了使游客更好地熟識旅游景點了解旅游區(qū)，所以一開始題目就定位在系統(tǒng)而不是網站。目前大多數旅游網站的數據量都十分豐富，但是都很難在視覺感官上起到真正導游的作用。為此這次設計在一般旅游網站漂亮界面的基礎上，加入了一個地圖導向系統(tǒng)，使得旅游景點更直觀明了

22、，而且更方便于信息的查找。旅游業(yè)中導向示意圖已經廣泛被采用了，但是應用于網絡上的并帶有導向功能的還極少看到。另外這次設計中加入了社區(qū)論壇跟聊天室元素，方便游客了解旅游景點，交流旅游心得，發(fā)掘景區(qū)亮點。這對于一個有實力的景區(qū)是十分有幫助的。</p><p>　　這次設計的目的主要是為了更好地學習并應用圖像處理技術、網頁設計技術，因此在設計過程中使用了多種的設計言語和功能軟件，而本論文中也是通過對使用多種設計方式對設

23、計本身作深入說明。</p><p>　　佛山旅游業(yè)及“南國桃園旅游渡假區(qū)”的狀況</p><p>　　近年來，佛山旅游景區(qū)建設步伐加快，一大批建設速度快，有一定規(guī)模的新的旅游度假區(qū)、風景區(qū)脫穎而出，開始產生良好的經濟效益和社會效益。已建成并對外開放的有：佛山梁園首期修復工程、廣播電視中心、季華園、高爾夫球場、佛山樂園音樂噴泉、金馬劇院文化活動中心；南海南國桃園、西樵觀音文化苑、黃大仙圣境園

24、、黃飛鴻獅藝武術館、天湖公園藝術廣場、慶云洞道觀景區(qū)；三水大旗頭古村、森林公園的孔圣園、世界第一大臥佛、千佛山；順德清暉園復園擴建、順德山旅游中心、寶林寺、均安生態(tài)園，新世界會議展覽中心；高明“后花園”建設中的秀麗河沿岸景觀帶、“三高”農業(yè)旅游基地、森林公園、天然狩獵場、水庫旅游度假區(qū)等，這些以佛山為中心，包括直轄四個市，投資巨，規(guī)模大，靜態(tài)旅游資源豐富的旅游景區(qū)連成一片，正在改變佛山旅游景點不耐看，吸引力不強的狀況。以此同時，佛山動態(tài)

25、旅游資源，如佛山秋色節(jié)、石灣陶器藝術節(jié)、高明狩獵節(jié)、順德龍舟賽、南海舞獅賽、風箏賽等，以及佛山的傳統(tǒng)旅游工藝、旅游美食，如石灣公仔、佛山秋色、剪紙工藝品、鳳城美食等，與之相呼應，使佛山正成為“有旅有游”，魅力日顯的著名旅游城市。隨著佛山經濟發(fā)展，截至2006年上半年，市</p><p>　　南國桃園位于廣東省著名的“桃花之鄉(xiāng)”——南海區(qū)獅山鎮(zhèn)，是南海區(qū)新興的旅游勝地，這里是珠江三角洲內自然條件尚末受到人為破環(huán)、污

26、染的地區(qū)之一。作為一個綜合型的旅游觀光勝地，他們堅持走商務主導型旅游路線。經過多年的發(fā)展，南國桃園現已成為一個集休閑度假、康體娛樂、商務會議、宗教文化于一體的旅游勝地。</p><p>　　這里山清水秀，洞幽石奇，山花爛漫，綠草如茵，森林綠化覆蓋面積已達95%以上，成為清靜幽雅、陶冶情操、享受自然之所?，F已建成的景點和旅游設施有：南海觀音寺、鷺鳥天堂、碧波景區(qū)、野戰(zhàn)俱樂部和高標準的高爾夫球場等。南國桃園地理位置異

27、常優(yōu)越，地處廣州、禪城、桂城、花都、三水交匯處。距廣州、桂城、南海均為12公里，距南?？瓦\港約18公里，往香港和澳門交通非常方便。每天往返廣州、禪城、桂城、花都的公交車川流不息。珠三角一帶游客尤其喜歡來此休閑度假，放松心情，06年南國桃園的游客達到100萬人次。</p><p>　　1.3系統(tǒng)的總體結構</p><p>　　圖1-1 系統(tǒng)總結構圖</p><p>&

28、lt;b>　　1.4計算機支持</b></p><p>　　由于應用到ASP語言及虛擬服務器技術，首先必需在計算機上安裝好IIS組建，設置好本地路徑地址及自定義的IP地址。然后使用Dreamweaver建站時，也要把站點地址設置為跟本地路徑一樣的文件夾內。網站首頁文件名必須是index.htm或者index.asp文件。</p><p>　　圖1-2 IP地址設置

29、 圖1-3 本地路徑設置</p><p><b>　　地圖導游系統(tǒng)</b></p><p><b>　　系統(tǒng)功能介紹</b></p><p>　　系統(tǒng)版面是一個用Coreldraw繪圖軟件和Flash做成的平面地圖。版面是Q版動畫風格的旅游示意圖，背景是森林綠地和主要道路，另外用各個旅

30、游景點的代表建筑或者標志制作成圖片，作為景點在圖上的代表。版面的右側是一個簡單的功能界面，設計了相關顯示，導航鏈接，路線查詢等功能。主地圖的景觀稍作了放大，當鼠標移動到景觀上時，圖片會做稍微放大狀態(tài)，點擊鼠標，即可以進入相應的網頁介紹中，這種地圖式的導航網頁會更容易為多數游客所接收。右邊功能頁面的有個顯示相關地點的功能，比如能在地圖上顯示各個酒店的位置，WC等。另外路線查詢能顯示所選擇的兩個景點大概的最近距離，路面狀況等。比如選中南海觀

31、音寺和碧波湖，就會顯示“距離1公里，鳳凰路陡坡，注意車速”的信息。導航鏈接是直接進入主網站跟桃園社區(qū)的超鏈接。</p><p><b>　　功能實現和技術研究</b></p><p>　　2.2.1地圖導航的實現</p><p>　　地圖的設計比較簡單，主要是繪圖方面的技巧。而景點圖片的放大縮小是通過flash代碼實現的。示意圖見附錄一。<

32、;/p><p>　　2.2.2功能部分的實現</p><p>　　相關顯示也是flash效果的一部分，其實是用鏈接把左邊地圖的幾個動作幀同時連起來，這樣就能達到同時放大的效果。</p><p>　　路線查詢是用數據庫技術做成的查詢功能，景點間的相關信息已經預先通過數據庫表格整合起來，通過asp命令可以實現數據的調用，實現簡單的查詢效果。</p><p

33、><b>　　建立數據庫：</b></p><p>　　圖2-1 建立數據庫</p><p>　　安裝了sql server 2000后，建立數據表格“路線圖” 。sql語言中create table 為創(chuàng)建表格命令.如圖2-1創(chuàng)建了一個四行的表格，insert為插入數據命令，下面的網格圖就是輸入數據后的得到的表格。</p><p>&l

34、t;b>　　鏈接SQL數據庫：</b></p><p>　　在網頁中操作數據庫都是ASP動態(tài)網頁設計的重要技術，要訪問Web數據庫首先需要建立應用程序與數據庫的連接。由于ADO組件功能強大且使用方便，因而在ASP編程中一般都利用ADO組件建立應用程序與數據庫的連接并使用其操作數據庫。</p><p>　　建立ASP程序與數據庫的連接可以有多種方式，雖然使用不同的方法的連接

35、細節(jié)不盡相同，但采用的連接方法都是一樣的。這里用這次設計中使用到的ODBC驅動程序的方法作介紹。程序的代碼如下：</p><p><b>　　<html></b></p><p><b>　　<head></b></p><p>　　<title>使用OCBC驅動程序</title

36、></p><p><b>　　</head></b></p><p><b>　　<body></b></p><p><b>　　<%</b></p><p>　　dim connstr,conn,sqlstr</p>&l

37、t;p>　　set conn=server.createobject("adodb.connection")</p><p>　　conn.open "driver={sql server};server=(local);database=路線查詢;uid=sa;pwd="</p><p>　　set rs=conn.execute("

38、;select spot as 地點,road as 路線,mile as 路程，news as 消息 from 路線查詢"）</p><p>　　‘建立一個表，把查詢結果顯示在表中</p><p>　　response.write("<table border=3>")</p><p>　　response.write(&

39、quot;<tr>")</p><p>　　'顯示表中字段的名稱</p><p>　　for i=0 to rs.fields.count-1</p><p>　　response.write("<td>"&rs(i).name&"</td>")</p

40、><p><b>　　next</b></p><p>　　rs.movenext</p><p>　　response.write("<tr>")</p><p><b>　　wend</b></p><p>　　response.write(&

41、quot;</table>")</p><p><b>　　'釋放資源</b></p><p>　　set conn=nothing</p><p><b>　　%> </b></p><p><b>　　</body></b>

42、;</p><p><b>　　</html></b></p><p>　　語句段conn.open "driver={sql server};server=(local);database=路線查詢;uid=sa;pwd="是open的參數設置，這是ODBC驅動程序的主要特點。</p><p>　　其中，dri

43、ver部分為ODBC驅動程序，對于SQL Server數據庫，應使用sql server;</p><p>　　Server部分為數據庫服務器的名字，在此，因為使用的是本地的服務器，所以數據庫服務器的名字可以為（local）或本機名。Database表示要連接的SQL Server數據庫的名字，在此為“WEIWEI”數據庫；uid表示訪問數據庫登錄名稱,pwdz表示登錄密碼[2]。</p><

44、p>　　實現“路線查詢”功能：</p><p>　　首先講數據庫中所有第一字段的值都顯示在一個下拉列表框中，這樣，下拉列表框中的每個項必與數據庫中的某一個記錄相匹配，再使用SELECT語句進行查詢。</p><p><b>　　<% </b></p><p>　　set conn=server.createobject("

45、adodb.connection")</p><p>　　str="provider=microsoft.jet.oledb.4.0;data source="&server.mappath("WEIWEI.mdb")</p><p>　　coon.connectionstring=str</p><p>&

46、lt;b>　　conn.open</b></p><p>　　set rs=conn.execute("路線查詢")</p><p><b>　　%></b></p><p>　　<form method="post" action="execute.asp&quo

47、t;></p><p><b>　　<%</b></p><p>　　response.write "<select size=1 spot=spot>"</p><p>　　while not rs.eof</p><p>　　response.write "<

48、;option>" & rs.fields(1).value & "</option>"</p><p>　　rs.movenext</p><p><b>　　wend</b></p><p>　　response.write "</select>"

49、;</p><p><b>　　%></b></p><p>　　<p><input type="submit" value="提交” name="b1"><input type="reset"</p><p>　　value="

50、全部重置" name="b2"></p></p><p><b>　　</form></b></p><p>　　當被選中的項被提交以后，還需要程序執(zhí)行數據的調出工作，程序如下：</p><p>　　<!--#include file=displaytable.asp-->

51、</p><p><b>　　<%</b></p><p>　　db="WEIWEI.mdb"</p><p>　　name=request("name")</p><p>　　sqlstr="select * from 路線查詢 where 地點='&qu

52、ot;&spot&"'"</p><p>　　response.write sqlstr</p><p>　　set conn=server.createobject("adodb.connection")</p><p>　　str="provider=microsoft.jet.oledb

53、.4.0;data source=" & server.mappath </p><p><b>　　(db)</b></p><p>　　conn.connectionstring=str</p><p><b>　　conn.open</b></p><p>　　set rs=

54、conn.execute(sqlstr)</p><p><b>　　%)</b></p><p><b>　　<html></b></p><p>　　<body bgcolor="#66FFCC"></p><p>　　<% if not (rs

55、 is nothing) then %></p><p>　　<% displaytable rs %></p><p><b>　　<% else%></b></p><p>　　<hr><font color="red">select命令有誤！</font>

56、;</p><p>　　<% end if %></p><p><b>　　</body></b></p><p><b>　　</html> </b></p><p>　　導航鏈接相對簡單，是用超鏈接實現主網站，桃園社區(qū)，簡易聊天室的導航，這樣是為了方便游客

57、瀏覽系統(tǒng)的各個板塊。</p><p><b>　　桃園網站</b></p><p><b>　　版面介紹</b></p><p><b>　　主頁介紹</b></p><p>　　進入首頁，首先看到的是橫跨頁面的下拉式導航條，導航朗欄共7項，概括了網站的主要內容和主要鏈接，如圖

58、3-1。另外通過點擊導航欄可以進入相關主題的網頁。</p><p>　　圖3-1 主導航欄圖</p><p>　　下拉菜單起到分目錄的作用，當鼠標放到7個導航欄中之一上時，則會自動在下面顯示菜單。如圖3-2</p><p>　　點擊對應鏈接即能快捷跳轉到相關內容。比如點擊注冊，就能打開論壇注冊頁面，而不需要先進入桃園論壇來打開注冊頁面。下拉菜單中沒有顯示的鏈接一般從

59、導航欄中進入就能找到較全面的信息，如度假酒店欄，需要查找具體酒店信息的話，可以先進入酒店頁面，再查找具體的酒店介紹。 </p><p>　　導航欄下方顯眼位置是一個用flash制作的大幅 圖3-2 下拉菜單顯示圖</p><p>　　圖片介紹集。

60、 </p><p>　　圖3-3 圖片集截圖</p><p>　　該圖集共7張關于桃園景區(qū)的風景照，通過flash實現了自動并循環(huán)切換的功能。其切換效果跟循環(huán)時間均通過flash語言控制。</p><p>　　圖集右側是如圖3-4所示的鏈接頁，從這里可以快捷的進入到桃園社區(qū)版

61、面，設置該功能主要是考慮到游客在留覽過程中有所想寫的情況。</p><p>　　3-4 右側的鏈接頁</p><p>　　上面介紹到的三個內容是此網站頁面的基本組成元素，已通過Dreamweaver編成統(tǒng)一模版，在其他的大部分網頁中通過調用模版使用。</p><p>　　主頁下方還有消息介紹和酒店介紹兩個功能。如圖3-5所示，消息欄列出了最新的5條信息，由最新的向下

62、排列，點擊進入到相關的介紹中，也可以通過點擊左邊的圖片進入到消息介紹主頁面。酒店介紹版面選取了5間南國桃園內比較出名的酒店做了圖片和概況的簡單介紹。Flash效果的使用加入了此版面的觀賞性。</p><p><b>　　圖3-5消息介紹 </b></p><p><b>　　圖3-6 酒店介紹</b></p><p>　　

63、3.1.2其他頁面特色介紹</p><p>　　上面提到大部分頁面通過插入主頁三元素的模版都具有了統(tǒng)一的版面風格?？捎米鞲牡哪０嬉酝獾目删庉媴^(qū)域，根據內容大概可以分為文字說明和圖片演示兩部分。</p><p>　　a．文字部分版面介紹</p><p>　　文字說明版面的內容相對豐富。主頁中的消息介紹版被移到頁面的右側，而且作了跟細致的修改，如圖3-8所示。這里添加

64、的小道消息反映的是一些游客總結的旅游經驗，如飲食，居住，發(fā)現的新景觀等等。首頁中雖然沒有此鏈接，但是進入消息欄同樣會發(fā)現此相關內容。</p><p>　　頁面下面部分就是文字的內容。如圖3-7內容上還設計了一個簡單的導航，這里的鏈接都是與文本正文相關聯(lián)的內容。文本正文都是用由CSS限定的小四宋體格式。</p><p><b>　　圖3-7 消息欄</b></p&

65、gt;<p>　　圖3-8頁中導航欄 </p><p>　　圖3-9所示為一個隨屏幕移動的信息欄，超鏈接是導向到南國桃園官方網站。這個版面功能是通過Javascript實現的。</p><p>　　b.圖片演示部分版面介紹</p><p>　　圖片演示頁有兩種形式，一種網絡相冊的形式，

66、另外一種是flash制作成的幻燈片效果，如圖3-10。都可以通過點擊 圖3-9 聯(lián)系信息欄</p><p>　　查看大圖。 </p><p>　　圖3-10 圖片演示集</p><p><b>　　功能實現和技術研究</b></p><p>　　3.2.1下拉菜單的實現</p><p&g

67、t;<b>　　a.操作過程</b></p><p>　　b. 兩個簡單的按鈕類腳本分析</p><p>　　On (rollover){</p><p>　　_root.Menu.gotoAndPlay(“1 Down”);</p><p><b>　　}</b></p><p

68、>　　//當鼠標滑過按鈕上方時，運行實例名為Menu的影片剪輯中標簽為1 Down的幀。</p><p>　　On ( roolover) {</p><p>　　_root.Menu.gotoAndPlay(“3 Down”);</p><p><b>　　}</b></p><p>　　//在main3影片剪輯

69、元件的編輯畫面中輸入透明按鈕的動作腳本。</p><p>　　上面列出的是影片剪輯元件的一些簡單編輯過程。Flash代碼與一般的asp代碼有很多的相似之處。而不同的是Flash更側重于圖像，代碼腳本只需在必要時應用上就足夠了。上面看到的1Dow幀是控制當鼠標滑過時，顯示某個下來菜單的一條命令，而第二個腳本作用是給main3這個下拉菜單的某個項目添加一個透明的按鈕。在Flash中，按鈕是引導下一個動作的功能鍵，添加

70、上按鈕給這個菜單賦予了比一般圖形剪輯更多的功能。</p><p><b>　　c. 設計技術要點</b></p><p>　　這里應用簡單的動作和標簽名來制作這種效果，因此腳本程序比較長，用于導航的影片剪輯的編輯過程都較為復雜。因為在影片剪輯中使用了多個影片剪輯，并在每個影片剪輯中又包含其它編輯過程，所以容易混淆的部分比較多。制作剪輯是一個復雜的過程，而通過放置透明按

71、鈕實現鼠標滑過時引發(fā)事件，實現子菜單的彈出隱藏是這個實例的關鍵之處。</p><p>　　3.2.2圖片集的幻燈片切換技術</p><p><b>　　a. 操作過程</b></p><p>　　圖3-12 圖片集實現操作過程圖</p><p><b>　　b.設計技術要點</b></p>

72、;<p>　　本實例是應用遮罩功能實現的圖片切換效果，設計過程中需要制作多個影片剪輯元件，而且需要對同一個元件運用多重遮罩，反復的操作容易造成混淆，因此元件的命名需要科學和有條理。比如兩個圖片間的切換就需要一個包含兩個影片剪輯元件和一個圖形元件的影片剪輯元件，即4個元件。7個圖片間的切換就需要24個元件了。另外，flash中的遮罩功能十分強大，應用不同的遮罩形式就能完成各種變化效果的flash動畫。</p>

73、<p>　　3.2.3JavaScript語言及js文件的應用。</p><p>　　JavaScript是目前比較流行的一種制作網頁特效的語言，靈活運用JavaScript能使網頁版面更生動有趣。設計中大量運用了Javascript語言特效，這里舉兩個本設計中較簡單的例子說明JSP語言的強大魅力。</p><p>　　鼠標控制圖片的明暗效果</p><p&g

74、t;　　<script language=“javascript”></p><p>　　Function makevisible(cur,which)</p><p><b>　　{</b></p><p>　　If(which==0)</p><p>　　Cur.filters.alpha.opacity

75、=100;</p><p><b>　　Else</b></p><p>　　Cur.filters.alpha.opacity=20;</p><p><b>　　}</b></p><p><b>　　</script></b></p><p

76、>　　<a href=“http://”><img src=“flower.jpg” border=0 style=“filter:alpha(opacity=20)” onMouseOver=“makevisible(this,0)” onMouseOut=“makevisible(this,1)”alt=“”></a><br></p><p>　　其中if

77、語句是定義圖片顯示的方法，分別為以100亮度顯示和以20亮度顯示，if which==0,則100亮度，which==1,則20亮度。用<a>標記的語句是為了設置圖片的樣式。內容是插入”flower.jpg”圖片，定義邊框為0，初時顯示形式為20亮度，當鼠標放到圖片上時，which為0，圖片離開時，which為1。</p><p><b>　　b．節(jié)假日倒計時</b></p

78、><p>　　<script language=“javascript”></p><p>　　Var urodz=new Date(“8/8/2008”);</p><p>　　Var s=“今天離<font color=red>北京奧運會開幕</font>”;</p><p>　　Var now=new D

79、ate();</p><p>　　Var ile=urodz.getTime()-now.getTime();</p><p>　　Var dni=Math.floor(ile/(1000*60*60*24));</p><p>　　If (dni>0)</p><p>　　Document.write(““+s+”還有<font

80、 color=red>“+dni+”</font>天”);</p><p><b>　　Else</b></p><p>　　Document.write(“好像已經過了吧！”)；</p><p><b>　　</script></b></p><p>　　程序一開始定

81、義了urodz變量，其值為“8/8/2008“，now變量為當前日期，最后用ile和dni變量式計算出余下日期。如果日期大于0，輸出”今天離北京奧運會開幕還有**天”的語句，其中北京奧運會開幕字體為紅色。語句document.write是輸出數據到頁面上的標簽。</p><p><b>　　c.js文件的功能</b></p><p>　　js文件就是儲存javascr

82、ipt腳本的文件。一般到頁面內容比較多的時候，可以把javascript單獨保存在js文件中，通過調用語句使用。而且這樣的文件格式也方便在其他地方的使用。本設計用也較多地使用了JS格式文件，主要用作flash動畫的調用，定義等。如主站首頁中就運用JS文件，對頁面中的三個flash文件進行調用。程序如下</p><p>　　function _main_html_GetTagScript0(){</p>

83、<p>　　var sTag = ''</p><p>　　+ '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab

84、#version=7,0,19,0" width="1003" height="122">'+ ' <param name="movie" value="fla/sub_navi.swf" />'</p><p>　　+ '

85、 <param name="quality" value="high" />'</p><p>　　+ ' <embed src="fla/sub_navi.swf" quality="high" pluginspage="http://www.macromedi

86、a.com/go/getflashplayer" type="application/x-shockwave-flash" width="1003" height="122"></embed>'</p><p>　　+ ' </object>'</p>&

87、lt;p><b>　　+ '';</b></p><p>　　document.write (sTag);</p><p>　　}// sub_navi.swf文件的鏈接 </p><p>　　function _main_html_GetTagScript1(){</p><p>　　var sT

88、ag = ''</p><p>　　+ '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0&q

89、uot; width="705" height="342">'</p><p>　　+ ' <param name="movie" value="fla/mainfla.swf" />'</p><p>　　+ '

90、 <param name="quality" value="high" />'</p><p>　　+ ' <embed src="fla/mainfla.swf" quality="high" pluginspage="http://www.macromedi

91、a.com/go/getflashplayer" type="application/x-shockwave-flash" width="705" height="342"></embed>'</p><p>　　+ ' </object>'</p>&l

92、t;p><b>　　+ '';</b></p><p>　　document.write (sTag);</p><p>　　}// mainfla.swf文件的鏈接</p><p>　　function _main_html_GetTagScript2(){</p><p>　　var sTag

93、= ''</p><p>　　+ '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"

94、; width="424" height="128">'</p><p>　　+ ' <param name="movie" value="fla/main_room_navi.swf" />'</p><p>　　+ '

95、 <param name="quality" value="high" />'</p><p>　　+ ' <embed src="fla/main_room_navi.swf" quality="high" pluginspage=&qu

96、ot;http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="424" height="128"></embed>'</p><p>　　+ ' </ob

97、ject>'</p><p><b>　　+ '';</b></p><p>　　document.write (sTag);</p><p>　　}// main_room_navi.swf文件的鏈接</p><p>　　而在首頁代碼中，則是通過這一語句實現此js文件的嵌套的。</p

98、><p>　　<SCRIPT language=javascript </p><p>　　src="maintop.files/_main_html_TagScript.js"></SCRIPT></p><p>　　3.2.4網頁設計平臺Dreamweaver</p><p>　　Dreamweav

99、er是目前使用最廣泛的網頁設計軟件，并且功能十分的強大，只要能靈活運用該軟件，就已經能夠設計出相當漂亮的網站。這次設計中較好地運用了Dreamweaver軟件的基本操作及應用技巧，使設計過程更快更方便。</p><p>　　這里僅對模版和庫，CSS樣式表的應用作簡單的介紹。</p><p><b>　　a.使用模版</b></p><p>　　

100、在dreamweaver中，模版是一種特殊的文檔，可以按照模版創(chuàng)建新的網頁，從而得到與模版相似但又有所不同的新的網頁。當修改模版時使用該模版創(chuàng)建的所有網頁可以一次自動更新，這就打打提高了網頁更新維護的效率。前面提到過系統(tǒng)主網站的版式都比較統(tǒng)一，主導航條，自動切換的圖片集，右側社區(qū)鏈接，都作為模版存在于每個主站的網頁中。</p><p>　　在設計模板之前應先考慮清楚哪些內容是需要用作整體模板結構的，當然，模板也可

101、只用作網頁中的幾個版面，它的作用就是提高設計的效率。在模板設計過程中，需要預定義可編輯區(qū)域，可編輯區(qū)域就是引用此模板的網頁能作出修改的地方。</p><p><b>　　b.庫的創(chuàng)建和應用</b></p><p>　　庫是一種用來存儲想要在整個網站上經常重復使用或更新的頁面元素的方法，這些元素稱謂庫項目，庫項目都統(tǒng)一存儲在每個站點的本地根文件夾內的Library文件夾

102、</p><p>　　中。本設計暫時應用了一例庫的功能。如圖3-11所示，該圖片經處理已分解成如圖3-12所示的六幅截圖，并且產生了庫項目 intro_right.lbi. 只要對圖3-13中的圖片作修改，就能改變圖3-12的效果，并改變所有引用此庫項目的圖片效果。</p><p>　　圖3-13 原示意圖 圖3-14 庫項目圖</p>

103、<p>　　庫項目的保存方法是，選擇所要建立庫的內容，選擇“文件〉另存為”命令，彈出“另存為”對話框，在“文件名”文本框中輸入名字，“保存類型”選擇“庫文件（*.lbi）” ，確定保存即可。</p><p>　　調用可庫項目也很簡單，將光標置于要插入庫項目的位置，選擇“窗口>資源”命令，打開“資源”面板。選擇所需的庫項目，單擊“插入”按鈕，插入庫項目。</p><p>

104、　　使用后的庫文件在主頁中的代碼如下所示</p><p>　　<!-- #BeginLibraryItem "/main.files/intro.files/intro_right.lbi" --></p><p><b>　　<html></b></p><p><b>　　<hea

105、d></b></p><p>　　<title>庫1</title></head></p><p>　　<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" margi

106、nheight="0"></p><p>　　<!-- ImageReady Slices (庫1) --></p><p>　　<table id="__01" width="235" height="390" border="0" cellpadding=&quo

107、t;0" cellspacing="0"></p><p><b>　　<tr></b></p><p>　　<td colspan="3"> <img src="main.files/intro.files/images/intro_right_01.gif"

108、width="235" height="177" alt=""></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td rowspan=&

109、quot;3"> <img src="main.files/intro.files/images/intro_right_02.gif" width="57" height="213" alt=""></td></p><p>　　<td> <a href="E:\m

110、ysite\main.files\maintop.htm"onmouseover="window.status='往桃園主頁'; return true;"onmouseout="window.status=''; return true;"> <img src="main.files/intro.files/images/tom

111、aintop.gif" width="103" height="30" border="0" alt=""></a></td></p><p>　　<td rowspan="3"> <img src="main.files/intro.files/

112、images/intro_right_04.gif" width="75" height="213" alt=""></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p&g

113、t;<p>　　<td> <a href="E:\mysite\main.files\maintop.htm"</p><p>　　onmouseover="window.status='往桃園社區(qū)'; return true;"</p><p>　　onmouseout="window.s

114、tatus=''; return true;"> <img src="main.files/intro.files/images/tomainchat.gif" width="103" height="30" border="0" alt=""></a></td><

115、;/p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td> <img src="main.files/intro.files/images/intro_right_06.gif" width="

116、;103" height="153" alt=""></td></p><p>　　</tr></table><!-- End ImageReady Slices --></p><p><b>　　</body></b></p><

117、p><b>　　</html></b></p><p>　　可以看到，使用庫項目插入的頁面元素，在主頁中仍然會顯示出完整的HTML代碼，包括<html>在內的所有標記。</p><p>　　c.CSS樣式表的應用</p><p>　　采用CSS技術，可以有效地對頁面地布局、字體、顏色、背景和其他效果實現更加精確的控

118、制。所謂CSS就是層疊樣式表，用來控制文檔中的某一文本區(qū)域外觀的一組格式屬性。CSS樣式可以用來一次對若干各文檔所有的樣式進行控制。同HTML相比，使用CSS樣式表的好處除了在于它可以同時鏈接多個文檔外，當CSS樣式有所更新或者被修改之后，所有應用了該樣式表的文檔都會被自動更新。</p><p>　　登錄頁面的樣式表如下所示</p><p>　　<STYLE type=text/cs

119、s></p><p><b>　　BODY {</b></p><p>　　MARGIN: 0px;</p><p>　　font-family: "宋體";</p><p>　　font-size: 14px;</p><p>　　font-style: normal;

120、</p><p>　　line-height: normal;</p><p>　　font-weight: normal;</p><p>　　font-variant: normal;</p><p>　　text-transform: none;</p><p>　　color: #000000;</p&g

121、t;<p><b>　　}</b></p><p>　　圖3-15 樣式表的編輯框</p><p>　　如圖3-14定義了登錄頁中文本字體為宋體，字號為14，字體為黑色的文字樣式，其他取正常就是默認值。其中BODY是該樣式表的名稱，通過此名稱可以在其他頁面中調用此樣式表。一般較簡單的定義也可以不為樣式表建名，如下語句所示：</p><

122、p>　　<style type=“text/css”></p><p><b>　　<!—</b></p><p>　　H1 {color:blue}</p><p><b>　　--> </b></p><p><b>　　</style><

123、;/b></p><p><b>　　</head></b></p><p>　　這段代碼簡單地定義了所有的H1標題顯示為藍色。</p><p>　　如圖3－13所示，樣式表的定義包括背景、區(qū)塊、方框、邊框、列表、定位和擴展。所以可以說，樣式表的功能是多種多樣的。 </p><p>　　4 桃園社區(qū)

124、 </p><p>　　4.1設置論壇的目的</p><p>　　此系統(tǒng)的設計是為了能更好地起到導游作用，讓游客更容易地了解到旅游區(qū)信息的。而論壇正好提供給游客一個交流旅游信息和提供給游客一個對旅游區(qū)評價的平臺，同時游客間的交流又能給新游客帶來更貼近自身的信息，因此，在進行導游系統(tǒng)設計時也同時引入了論壇的功能。</p><p>　　4.2 動網論壇系統(tǒng)&

125、lt;/p><p>　　因論壇系統(tǒng)的設計相對困難，而且內容廣，設計內核復雜，因此這次設計采用了第三方的論壇系統(tǒng)。為迎合南國桃園旅游度假區(qū)的主題，及為游客提供方便簡捷的交流平臺的目的，對原論壇系統(tǒng)作了較大的修改。</p><p>　　4.3論壇的版面和使用</p><p>　　論壇的色彩是以淡紅色為底色，背景有桃花樣式制作而成的底紋。一如既往的有用Flash制作而成的以南

126、國桃園為主題的照片集。</p><p>　　動網論壇的功能是十分全面和強大的。正如網上一般論壇，游客只要注冊好，就能在論壇里發(fā)自己的帖子，交流信息。另外系統(tǒng)還提供強大的用戶控制界面，隱身功能，搜索功能，自由風格選擇，甚至還提供了網上博客功能，游客可以在這里打造自己的一片空間。個人博客可以記錄本人在論壇里發(fā)表過的文章，能收藏別人的好文章，還有相冊，信箱和新聞轉播功能。</p><p><

127、;b>　　4.4后臺管理</b></p><p>　　論壇的一大特色就是強大的后臺管理系統(tǒng)。登錄后臺后就能清楚的看到左邊的功能菜單。該論壇功能分10個類別，分別是常規(guī)管理，論壇管理，用戶管理，外觀設置，論壇帖子管理，替換、限制處理，數據處理（Access）,文件管理，菜單管理，道具中心管理。 其中常規(guī)管理的內容最多，包括了日常管理和設置。在這里可以添加廣告，寫公告，修改頁面基本設置，獲取論壇基本