中華醫事科技大學

資訊管理系

102學年度專題製作報告

高雄旅遊網站規劃與設計

指導老師：鄭瓊茹

班 級：四資管四 A

學 生：陳鈺婷 06、凃禎憶 17、陳怡君 19

李于君 23 、邱千惠 27

日 期：103年 01月 03日

目 錄

壹、緒論-----------------------------------------------------------1

一、製作動機---------------------------------------------------1

二、製作目的---------------------------------------------------1

貳、製作方法-------------------------------------------------------2

一、網站架構圖-------------------------------------------------2

二、製作工具---------------------------------------------------3

(一) Dreamweaver 介紹---------------------------------------3

(二) PHP介紹----------------------------------------------4

叁、製作結果-------------------------------------------------------6

一、首頁-------------------------------------------------------6

(一) 高雄一日遊&二日遊推薦行程-----------------------------7

(二) 熱門景點----------------------------------------------8

(三) 熱門美食----------------------------------------------8

二、美食-------------------------------------------------------9

(一)美食分類-----------------------------------------------9

(二)美食介紹-----------------------------------------------9

三、節日------------------------------------------------------10

(一)節日分類----------------------------------------------13

(二)節日介紹----------------------------------------------13

四、伴手禮----------------------------------------------------14

(一) 伴手禮連結-------------------------------------------14

五、景點------------------------------------------------------15

(一) 景點分類---------------------------------------------15

(二) 各地景點介紹-----------------------------------------16

六、住宿------------------------------------------------------17

(一) 住宿分類---------------------------------------------17

(二) 住宿詳細介紹-----------------------------------------17

七、留言板----------------------------------------------------18

肆、結論----------------------------------------------------------20

參考文獻----------------------------------------------------------21

圖表目錄 圖 2-1 網站架構圖----------------------------------------------------2

圖 2-2 DreamWeaver 編輯器外觀---------------------------------------3

圖 3-1 網站首頁------------------------------------------------------6

圖 3-2 高雄一日遊----------------------------------------------------7

圖 3-3 高雄一日遊行程------------------------------------------------7

圖 3-4 熱門景點------------------------------------------------------8

圖 3-5 熱門美食------------------------------------------------------8

圖 3-6 美食分類------------------------------------------------------9

圖 3-7 美食詳細介紹--------------------------------------------------9

圖 3-8 節日分類-----------------------------------------------------13

圖 3-9 節日詳細介紹-------------------------------------------------13

圖 3-10知名伴手禮網站連結------------------------------------------14

圖 3-11 景點分類----------------------------------------------------15

圖 3-12 各地景點介紹------------------------------------------------16

圖 3-13 住宿分類----------------------------------------------------17

圖 3-14 住宿詳細介紹------------------------------------------------17

表 3-15 留言資料表屬性----------------------------------------------18

圖 3-15 留言資料表屬性----------------------------------------------18

圖 3-16 資料表------------------------------------------------------19

圖 3-17 留言板------------------------------------------------------19

1

壹、緒論

一、製作動機

旅遊是一種高層次的休閒活動，可以從一個有壓力和過度刺激的生活環境轉移到

一個放鬆安靜的環境；在個人方面，人們可以透過旅遊渡假來表現自我，使個人的精

神健康更佳，增進個人身心發展；在家庭方面，家庭成員一起參與渡假旅遊可以促進

家庭和樂、恢復家庭功能，所以旅遊使人們在工作之餘能充分休息，為下一個工作做

準備，使工作更有效率。

網路非常普及化，每個人家裡都有網路，查查網路資訊或其他有興趣的相關東西

是件很平常的事，藉由網路資源可以讓有資訊需求的人方便快速查詢。

我們專題的研究動機是想要幫助繁忙時間緊湊的人提供旅遊資訊服務，透過我們

製作的網站更加瞭解高雄道地的資料，可以更佳的充實豐富自己的認知，在我們用軟

體製作網頁的介紹下，讓有需求的人更快速閱覽各種休閒、節日的景點資訊。

二、製作目的

我們小組製作專題旅遊的目的，其實是想要幫助更多想要找尋旅遊資料的民眾來

方便查詢，其目的：

認識熱門美食，及各包含的小吃種類。

探索高雄地區旅遊景點，讓想到高雄觀光的人可以掌握最新、最好的資訊。

透過無遠弗屆的網路，將高雄的文化特色，介紹給更多縣市外的旅客。

提供高雄住宿、伴手禮、節日文化等各種各樣信息的網站。

了解旅遊行程規劃等資料。

本平台查閱了參考書籍與網路上旅遊網站和親身的前往高雄經驗的資料，加以分

析書籍與網路上的資訊並整合，以清楚明瞭的表格、簡單易懂的網路介面呈現給使用

者使用，讓使用者透過我們的平台閱讀旅遊資訊，而達到清晰明瞭的目的。

2

貳、製作方法 首先我們的主題就是一個提供資訊平台的高雄旅遊網站，其次要討論的就是網站

的規劃內容要放哪些東西及版面要設定怎樣、視覺設計上包含色系、外觀、使用便利

性等才會讓使用者可以簡單明瞭，再來我們朝著主題去蒐集資料圖檔，這部份算很重

要的，攸關網頁內容的一致與完整性，規劃與蒐集資料大約花在 3~4 週。

經由組員們的討論後，我們製作專題的軟體就決定使用 DreamWeaver，搭配 PHP

和資料庫 MySQL 來製作網頁，因為 DreamWeaver 所提供功能、彈性和能力，協助建立

能更完善的幫助網站方便性，讓製作者可輕易上手且含有建立動態和複雜網站所需的

專業設計、編寫、資料和發佈工具。初步的軟體工具就這樣定下來了。

一、網站架構圖

圖 2-1 網站架構圖

3

一、 DreamWeaver介紹：

Dreamweaver 提供強大的控制元件，保證設計可以有高質素的水準。應用 CSS 樣

式表的設計環境令設計師得以更快速及有效地開發專業的網站。

1. 一個工具就包含了設計及程式編輯器：您可以直接修改程式碼、在「設計」檢視

裡微調整個設計，或是兩者同時進行。您可以透過自訂的用戶介面，以自己的方

式來工作。

2. 配合符合標準的 CSS 支援來建構複雜的網站：您現在可以設計及顯示更複雜的

CSS 配置。另外，功能豐富的工具可讓您快速地選擇及控制個別頁面，甚至整個

網站的樣式屬性，節省時間。

3. 改善用戶的體驗：加入檢查是否支援各種瀏覽器的功能，自動檢查標籤及 CSS 規

則，確保在各種主要的瀏覽器中都可以正確顯示頁面。

4. 內置的影像編輯器可以節省時間：內置的 Adobe Fireworks 技術讓您可以裁剪、

調整尺寸及修改影像，而不需結束 Dreamweaver。

5. 製作更好的用戶介面：在設計模式中，程式開發人員可以透過「即時資料檢視」

觀看即時的伺服器資料，而不需要時常開啟瀏覽器來檢查。

圖 2-2 DreamWeaver編輯器外觀

4

A. 功能表列：

這個功能表欄位放置著 DreamWeaver 編輯器所有的功能項目，如：開啟舊檔、另存新

檔....等等功能項目。

B. 編輯模式：

這裡共分為三個檢視狀態活頁，『一般』為標準的檢視模式也是我們『所見即所得』的

標準編輯模式，『程式碼』檢視模式為檢視 HTML網頁原始碼的編輯狀態模式！『分割』

檢視模式則為邊修改程式碼邊觀看網頁的檢視狀態。

C. 網頁編輯區：

整個空白的視窗畫面即為網頁的編輯區，我們所有的網頁的編輯動作都將在此完成。

D. 各種常用面板：

在編輯視窗上有許多浮動的工具面板，可以隨時從選項列的視窗中開啟或關閉。

E. 屬性面板：

面板上的各項屬性設定會依據所選取的物件而不同，例如選取文字，則面板會出現文字

的內容設定，選取表格，則面板會出現表格的內容設定。

二、 PHP介紹：

PHP 是一種跨平台、嵌入式的伺服器端執行的 script language。適合於網頁的開

發，並可內嵌入 HTML 中。起初， PHP 僅僅是個人使用但後來慢慢延伸成為目前炙手

可熱的網頁技術，並且獲得許多網路管理者的青睞，利用 PHP 來幫忙做一些網管的工

作。

PHP 是在伺服器端執行的程式語言，所以任何其它的 CGI 程式所能做得到的，它

都能做到。像是從表單中收集資料，或是產生動態的網頁內容，或者是傳送及接收

cookies 等等，PHP 都能做得到!

PHP 主要運用在下列這三個部份：

5

1. 伺服器端的程式語言：PHP 大多數被使用在這個地方，要運用在這個地方你必需

要有三樣東西，一個是 PHP 的剖析器(CGI 或 Server 模組)，一個是網站伺服器，

還有一個則是網頁瀏覽器，如此才能透過伺服器來瀏覽 PHP 網頁。

2. 指令行 script：你可以使 PHP 執行在一個沒有任何伺服器或是瀏覽器的地方，你

只需要使用到一個 PHP 剖析器即可。這種大多是使用 crontab 指令(在 Unix 或

Linux 系統上)，或是使用排定的工作(Windows)來定期的執行程式，這些程式能

夠運用在簡單的文字處理工作。

3. 撰寫用戶端圖形使用者介面(GUI)：PHP 也許不是個用來開發視窗程式最好的語

言，但如果您精通 PHP，並且希望在客戶端程式用上 PHP 的高階功能，您也可以

使用 PHP-GTK 來開發這些程式。PHP-GTK 是 PHP 的一個延伸，並不包含在 PHP 的

發行套件內。

PHP 的功用不單單只是輸出 HTML 文件而己，它的功能還包括了輸出圖形、PDF 檔、

及 Flash 檔。你當然也可以讓它輸出一些文字，像是 XHTML 及任何其它的 XML 檔，PHP

可以產生出以上這些檔案，並且將它們儲存在伺服器上。PHP 也提供了相當多的協定，

像是 LDAP、IMAP、SNMP、NNTP、POP3、HTTP、COM 等等，還有其它相當多的擴充模組

可以使用。

PHP 也支援相當廣泛種類的資料庫，所以在撰寫網頁時，使用到資料庫變成是相

當的容易了。

我們參考學校圖書館裡 Dreamweaver 和 PHP 的相關書籍，配合網路上一些旅遊網

站資訊，統整新的資料，確定網站的架構。

6

叁、製作結果

一、 首頁

圖 3-1網站首頁

圖 3-1 所示是目前網站的最新製作，這是網站首頁，首頁當中將會有最新旅遊消

息，此連結是向外連接，可看昔日資訊且會不定期更新內容，往下拉有高雄一日遊&

二日遊推薦行程，熱門景點，熱門美食，超連結等資訊。而首頁左邊是本網站的五大

類別。

7

(一) 高雄一日遊&二日遊推薦行程

圖 3-2 高雄一日遊

圖 3-3 高雄一日遊行程內容

8

(二) 熱門景點

高雄除了愛河、壽山、西子灣、蓮池潭、旗津、左營舊城等知名景點外，融合了福佬人、

客家人、平埔族、鄒族、魯凱族、布農族、排灣族、以及眷村文化，是個 『山、海、河港、

人文、古跡』的城市。來到高雄，您不僅可以體驗自然生態、品嘗珍饈佳饌，還能欣賞客家

美濃紙傘、內門宋江陣、大樹佛光山…等多元的民族文化，更別提擁有全臺最大的購物中心，

及著名的觀光夜市，可說是全部旅遊元素一應俱全，實在值得您深度造訪。

圖 3-4 熱門景點

(三) 熱門美食

說到高雄夜市，觀光客必定想到著名的六合觀光夜市，就連日本觀光客也都難逃六合夜

市的魅力，來到港都必來此地晃晃；綜觀六合夜市的美食小吃，不妨尋尋夜市裡頭的海鮮粥、

香腸及臭豆腐等熱門小吃。

圖 3-5 熱門美食

9

二、 美食

為了讓大家更了解高雄多元化美食特色，樹立高雄獨特風格，將高雄人心中最值

得推薦的美食一次通通推薦給您，美食部分分為中式餐廳、西式餐廳、美味小吃、海

鮮系列、茶飲冰品、異國料理六類。

圖 3-6 美食分類

圖 3-7 美食詳細介紹

10

三、 節日

自古以來，人類社會透過節日來定位生活的意義。根據集體的生活經驗，選定有

意義的日子，放下工作，透過特定的儀式來深化紀念意義；一方面，能讓勞動得以暫

停來調養生息，另一方面，也成為繼續生活的動力。

以下是近 5 年燈會介紹：

2009 年

燈會主題：【愛‧幸福】

生肖：牛

地點：愛河、光榮碼頭、真愛碼頭

主燈：犇牛迎世運

主燈簡介：以一對牛角高高舉起一顆大愛心，象徵傳揚「愛‧幸福」的燈會精神。

牛角的光彩變化則採用 2009 高雄世運四大主題顏色──橙、紅、綠、藍，藉著活潑多

變幻的彩色光芒照耀高雄港都，讓更多的人能感受到「愛‧幸福」的溫暖。

特色：2009 高雄燈會藝術節沿用去年的主調「愛‧幸福」，傳揚「愛‧幸福」是 2009

燈會的精神主軸，希望讓愛與幸福的氛圍，整年都圍繞著港都、傳佈在高雄。結合今

年高雄市國際性的重點活動「世界運動會」，燈會的主視覺與 LOGO 設計有更豐富多元

的意涵。

小提燈：世運牛，可愛的黃色台灣小水牛閃爍著一雙汪汪大眼，身體透出溫和的光芒，

惹人疼愛，並以代表「2009 世界運動會」的彩帶「高」字做成小燈上方拉提帶。

2010 年

燈會主題：【愛‧幸福】

生肖：虎

地點：愛河、光榮碼頭、真愛碼頭

主燈：福虎生豐

11

主燈簡介：高 18 公尺，以半站立的型態，輕閉的嘴巴呈現祥和、穩重之姿，象徵

著大高雄的未來與展望，竭誠迎接來自各地的民眾；豎起了耳朵以精神奕奕的姿態迎

春納福，象徵著為新的一年帶來圓滿豐收、風調雨順、國泰民安與祥和樂利的幸福。

腳下有著代表廣納四方之財的通寶，象徵著為全台灣召來源源不絕滾滾而至的金錢與

福氣。

小提燈：如意虎，全台唯一頭戴式元宵燈籠，有別於以往提燈的方式，採用 LED 七彩

小燈。

2011 年高雄燈會藝術節主燈

燈會主題：【愛‧幸福】

生肖：兔

地點：愛河、光榮碼頭、真愛碼頭、岡山河堤公園

主燈：高県市之星

主燈簡介：高 15 公尺，寬 12.4 公尺的大型水上雙兔燈座，左為代表原高雄電音

三太子，以高雄的高取名字為『高』太子。右以代表原高雄縣的宋江陣，取祖師爺宋

江–田都元帥，及高雄的「雄」字，命名為雄元帥，取名高県市之星，意涵著大高雄

將攜手邁向新紀元、迎接彩色新未來，像一顆閃耀在愛河流域上的明日之星。

特色：高雄市及高雄縣合併成為大高雄，延續「愛‧幸福」的主題，結合建國百年的

值年生肖「兔」，搭配之吉祥標語「百年好合‧兔躍高昇」，慶祝縣市於民國百年合

併的一大喜事，也盼望合併後的高雄市能創造更多經濟價值及邁入另一新紀元！燈會

場域歷年最大，由愛河延伸至岡山河堤公園，推出全國首次施放總長約 500 公尺的環

港煙火及可愛幸福兔造型煙火，並於河東路光藝術廊道展出十國文化燈飾，讓農曆年

的第一個滿月－月圓人團圓。

小提燈：高耀兔，兔燈高戴、頭頂光明、光耀四方，故名高耀兔，亦有光耀高雄之意，

用色彩以熱情黃色為基底，象徵熱情的高雄，加上七彩的水波紋飾，將高雄愛河港口

及豐富多元的都會意象，做全面的聯想詮釋，跟去年一樣為頭戴式元宵燈籠。

12

2012 年

燈會主題：【飛龍在天】

生肖：龍

地點：愛河、光榮碼頭、岡山河堤公園、旗山鼓山公園

主燈：青龍、2012 龍、魚躍龍門、如意龍、發財龍

主燈簡介：由書法大師張炳煌與雕刻大師王秀杞聯手打造，擺開以往單一座主燈

的概念，在光榮碼頭與真愛碼頭之間的海面上矗立五座龍形裝置藝術，書法中「龍」

字的流暢線條透過雕塑手法呈現。

特色：開幕煙火以龍飛鳳舞為高雄燈會揭開序幕，雙龍獻瑞字幕煙火在空中點燃呈現

60 秒，龍的圖騰代表尊貴吉祥的天運，結合世運會代表高雄的高字，表達高雄地靈人

傑、氣宇非凡，閉幕煙火火特別設計陳菊市長 Q 版造型花媽煙火在高空中向大家問好，

同時點亮 101 個祈福燈籠煙火。花媽在龍年為全民點燈祈福，愛幸福擁抱大高雄，而

港灣聲光水舞秀，特別加入水上燈飾共同參與演出，在水舞變化上，更引進全國首次

曝光「跑動式太陽水煙花」，藉由水上燈飾及千變萬化由內向外的光芒，帶給親臨現

場的觀眾，體驗一場令人震撼的聲光饗宴。

小提燈：高昇龍。

2013 年

燈會主題：【愛‧幸福】

生肖：蛇

地點：愛河、光榮碼頭、岡山河堤公園、旗山鼓山公園、佛光山

特色：將「愛．幸福」作為出發點，結合各國特色花燈、鐵道橋「Ｄｉｏｓ Ｍ

ｉｏ驚奇聲光劇場」、浪漫的威尼斯貢多拉遊船以及活動金字招牌──全台唯一的「環

港煙火」，並以「多元、創新、國際化」的角度為訴求，以高雄在地文化作為出發點，

融入多國燈節藝術氛圍與臺灣文創精神，打造不同凡響的國際燈節氣勢！

13

小提燈：百變福小龍，Q 版百步蛇的造型，還戴著象徵智慧和學問的眼鏡，造型則是

魯凱族、排灣族精神象徵的重要圖騰，背後設計成兩層扇型的螺旋盤，透著燈光，不

同角度看起來就像是千變萬化的萬花筒，可以讓燈光看起來更立體。

圖 3-8 節日分類

圖 3-9 節日詳細介紹

14

四、伴手禮(特產)

伴手禮 的意義在於透過各種型態的商品（食品、農產品、工藝品都算），呈現地

方的多元文化，並讓造訪的遊客能藉由這些商品與親友分享當地文化。

圖 3-10 知名伴手禮網站連結

15

五、景點

擁有大都市現代風格的高雄市，旅遊景點的豐富讓人目不暇給，在市區有高雄 85

大樓、城市光廊、玫瑰聖母院、駁二藝術特區、瑞豐夜市、愛河之心(如意湖)、夢時

代購物中心等，而近郊的旗津風景區、蓮池潭、西子灣風景區也都有秀麗的景緻供前

往旅遊的民眾觀賞；除此之外，五都合併前的高雄縣，佔地相當廣大且旅遊資源相對

豐富，不論您打算來趟訪古之旅拜訪旗山老街、美濃、橋頭糖廠，亦或是山林尋幽之

旅，如阿公店水庫、觀音山、荖濃溪、茂林國家風景區、關山越嶺古道、寶來溫泉等，

都可依您想到高雄旅遊的目的來安排；而甫於 2010 年全新開幕位於大樹區觀音山風景

區旁的義大世界，九十餘公頃的面積，區域內包含學校、星級飯店、遊樂世界、購物

廣場等涵蓋文化藝術、購物美食、休閒渡假等多元主題，在南台灣掀起渡假遊憩新風

潮，也是您探訪高雄不可錯過的新興景點。

高雄景點眾多，包含玩樂、古蹟、自然風光、都市特色等各式各樣的景點，我們將以

分區方式歸類介紹，另有關鍵字搜尋，點進後下面有地圖一一將景點位置呈現。

圖 3-11 景點分類

輸入 Keyword

16

圖 3-12 各地景點介紹

17

六、 住宿

出來玩，如果有一間舒服的飯店能適當放鬆休息，是件很棒的事，想必出門遊玩

的人都很想知道到了高雄應該住哪裡，這裡為各位整理了一份高雄住宿的旅館清單，

希望能幫助到有需要的人。此分類有飯店、小而美的民宿、旅館、溫泉等介紹。

圖 3-13 住宿分類

圖 3-14 住宿詳細介紹

18

七、留言版

為了製作訪客留言系統，我們將建立一個 db_myweb 資料表儲存留言的內容，下

表為資料表的欄位規劃：

（一） 留言板資料表屬性

表 3-15 留言資料表屬性

欄位名稱 資料型態 說明

msgID Varchar(20) 留言編號（主鍵、自動編號）

userName varchar(20) 訪客姓名

userSex tinyint(1) 訪客性別

userSite varchar(30) 個人網站

userIcon varchar(20) 代表圖示

msgSubject varchar(30) 留言主題

msgContent text 留言內容

msgDate date 留言日期

userIP varchar(15) 訪客 IP 位址

圖 3-15留言資料表屬性

19

（二）留言板資料表

圖 3-16資料表

圖 3-17留言板

20

肆、結論 讓使用者瀏覽本網站所架設的網頁、得到相關的旅遊資訊及高雄特色介紹，透過

網頁介面搜尋符合自己所需的資料以達到預防錯誤資訊。

本專題讓我們學到很多東西，不管是第一次接觸的 DreamWeaver 還是課程上曾經學過

的 PHP5MySQL，在製作的過程中，我們不但熟悉了 DreamWeaver 的操作界面，跟以前

所學到的 frontpage 完全不同的功能，更了解許多的基本概念，十分感謝有老師在旁

邊一一指導，給我們許多的建議，之後經過無數次的修改、增加更多旅遊相關內容，

使旅遊網頁更加豐富，進而成功建置了這個高雄旅遊網。

21

參考文獻

1. 大高雄旅館入口網 http://kha.roombook.com.tw/main_kha.php

2. 高雄旅遊網 http://khh.travel/tw/

3. 美美旅遊網 http://emmm.tw/s.php?city=kaohsiung

4. Taiwan 旅遊網 http://taiwan.net.tw/m1.aspx?sNo=0001121

5. 挑戰 PHP5MySQL-程式設計樂活學 碁峰股份有限公司 文淵閣工作室 編著

6. DreamWeaver CS5 碁峰出版 文淵閣工作室 編著