元培科技大學
資訊管理系畢業專題
康樂社區推廣觀光網站建置
組 別：B15
指導老師：廖國雄
老師
組 員：林孟屏 0942408018
彭惠君 0952408003
黃雅琳 0952408005
張世俊 0952408032
摘 要
近年來生活水準大幅提昇，以及實施週休二日，使得大家有更多的閒暇時間 從事休閒活動。近年來，不論國內外幾乎都在努力的發展觀光休閒事業，以自然 景觀、文物古蹟、歷史文化之類的地區特色為號召，吸引遊客。其康樂社區內就 擁有許多特色的景點，例如在日據時期留下碉堡、彈孔，與社區內百年古井、古 厝、廟宇…等等，皆成為社區內最具歷史價值的自然文物，且在社區發展協會及 全體里民團結合作努力蒐集下，保存維護著歷史的軌跡，並培養在地解說員；臨 近也有許多知名觀光景點，如南寮漁港，十七公里海岸還有規劃完善的單車步 道…等，適合安排一日旅遊行程。我們利用社區豐富的自然資源，再以架設網站 的方式推廣康樂社區，記載社區的文化藝術與特色，讓歷史文物傳承給下一代及 提供社區附近觀光景點。 關鍵詞：康樂社區、社區發展協會、歷史文物目 錄
摘 要... I 目 錄... II 圖目錄... IV 表目錄... IX 第一章 諸論 ... 10 1.1 背景 ... 10 1.2 動機 ... 10 1.3 目的 ... 11 1.4 限制 ... 11 1.5 關鍵名詞定義 ... 11 第二章 文獻探討 ... 12 2.1 社區的發展與現況 ... 12 2.2 社區特色 ... 12 2.2.1 社區農村文物館 ... 12 2.2.2 社區歷史古蹟及廟宇 ... 25 2.2.3 社區康樂公園 ... 29 2.2.4 社區特產 ... 32 2.3 其他社區網站之探討 ... 34 第三章 專題設計與規劃 ... 43 3.1 專題規劃目標 ... 433.4 系統架構圖 ... 46 3.5 甘特圖 ... 48 3.6 專題設備 ... 49 3.7 專題分工項目表 ... 50 第四章 專題成果 ... 51 4.1 需求分析 ... 51 4.1.1 問題描述 ... 51 4.1.2 功能性需求 ... 51 4.1.3 非功能性需求 ... 54 4.2 系統分析 ... 55 4.2.1 活動圖 ... 55 4.2.2 網站系統使用案例圖 ... 56 4.2.3 使用案例描述 ... 57 4.2.4 循序圖 ... 71 4.3 系統介紹 ... 82 4.4 使用手冊 ... 91 4.4.1 一般使用者使用手冊 ... 91 4.4.2 管理者使用手冊 ... 107 第五章 結論與建議 ... 123 5.1 結論 ... 123 5.2 建議與未來展望 ... 124 參考文獻... 125 附 錄... 128
圖目錄
圖 2-1 鐵耙 ... 13 圖 2-2 割耙 ... 13 圖 2-3 犁 ... 14 圖 2-4 牛軛 ... 14 圖 2-5 碌碡 ... 14 圖 2-6 秧匹 ... 15 圖 2-7 秧擔 ... 15 圖 2-8 蒔田管 ... 15 圖 2-9 古時秤子 ... 16 圖 2-10 大蕩(大牽) ... 16 圖 2-11 旋桶 ... 16 圖 2-12 點心擔 ... 17 圖 2-13 蓑衣 ... 17 圖 2-14 機器桶 ... 18 圖 2-15 石磨 ... 18 圖 2-16 蒸籠 ... 18 圖 2-17 風鼓 ... 19 圖 2-18 大憨輪 ... 19 圖 2-19 腳踏車 ... 20 圖 2-20 三輪車 ... 20 圖 2-21 灶腳 ... 20 圖 2-22 八角眠床 ... 21 圖 2-23 火籠 ... 21 圖 2-24 早期裁縫機 ... 21 圖 2-25 窩籃(嬰兒床)... 22 圖 2-26 古早嫁粧 ... 22 圖 2-27 梳妝台 ... 22 圖 2-28 洗臉面桶 ... 23 圖 2-29 衣櫃 ... 23 圖 2-30 菜櫥仔(碗櫥)... 24 圖 2-31 糕仔印(烏龜型)... 24 圖 2-32 糕仔印(壽桃型)... 24 圖 2-33 鞋楦(雨鞋) ... 25圖 2-37 百靈宮 ... 26 圖 2-38 萬士爺 ... 27 圖 2-39 聚福祠 ... 27 圖 2-40 大稻埕 ... 27 圖 2-41 林家古厝 ... 28 圖 2-42 莊家古厝 ... 28 圖 2-43 彭家古厝 ... 28 圖 2-44 百年古井 ... 29 圖 2-45 台灣海棗(康榔樹) ... 29 圖 2-46F-16 ... 30 圖 2-47F-5E ... 30 圖 2-48F-86F 軍刀式 ... 30 圖 2-49C-119 空中車廂式 ... 31 圖 2-50C-130 大力士運輸機 ... 31 圖 2-51 幻象 2000-5 ... 31 圖 2-52 琉璃牆 ... 32 圖 2-53 豆腐乳 ... 32 圖 2-54 菜包 ... 33 圖 2-55 福菜 ... 33 圖 2-56 社區風味餐 ... 33 圖 2-57 環保肥皂... 34 圖 3-1 雛型法開發模式 ... 44 圖 3-2 系統架構圖... 46 圖 3-3 甘特圖 ... 48 圖 4-1 活動圖 ... 55 圖 4-2 康樂社區網站系統使用案例圖 ... 56 圖 4-3 循序圖-關於社區 ... 71 圖 4-4 循序圖-最新消息 ... 72 圖 4-5 循序圖-社區特色 ... 73 圖 4-6 循序圖-活動劇照 ... 74 圖 4-7 循序圖-社區導覽 ... 75 圖 4-8 循序圖-交通指南 ... 75 圖 4-9 循序圖-觀光休閒 ... 76 圖 4-10 循序圖-趣味一下 ... 77 圖 4-11 循序圖-網站導覽 ... 77 圖 4-12 循序圖-留言板 ... 78 圖 4-13 循序圖-管理者專區-管理最新消息(新增、刪除、修改) ... 79 圖 4-14 循序圖-管理者專區-管理活動劇照(新增、刪除、修改) ... 80
圖 4-15 循序圖-管理者專區-管理留言板(新增、刪除) ... 81 圖 4-16 系統介紹 (康樂社區首頁) ... 82 圖 4-17 系統介紹 (關於社區-歷史沿革) ... 82 圖 4-18 系統介紹 (關於社區-社區組織) ... 83 圖 4-19 系統介紹 (關於社區-歷任幹部) ... 83 圖 4-20 系統介紹 (最新消息) ... 84 圖 4-21 系統介紹 (社區特色-康樂公園) ... 84 圖 4-22 系統介紹 (社區特色-農村文物館) ... 85 圖 4-23 系統介紹 (社區特色-社區特產) ... 85 圖 4-24 系統介紹 (活動劇照) ... 86 圖 4-25 系統介紹 (社區導覽) ... 86 圖 4-26 系統介紹 (交通指南) ... 87 圖 4-27 系統介紹 (觀光休閒-一日遊行程) ... 87 圖 4-28 系統介紹 (觀光休閒-地中海風情) ... 88 圖 4-29 系統介紹 (觀光休閒-港南風景區) ... 88 圖 4-30 系統介紹 (觀光休閒-南寮漁港) ... 89 圖 4-31 系統介紹 (觀光休閒-十七公里海岸) ... 89 圖 4-32 系統介紹 (趣味一下) ... 89 圖 4-33 系統介紹 (留言板) ... 90 圖 4-34 系統介紹 (管理者專區) ... 90 圖 4-35 一般使用者手冊(開啟網際網路) ... 91 圖 4-36 一般使用者手冊(康樂社區首頁-1) ... 92 圖 4-37 一般使用者手冊(康樂社區首頁-2) ... 92 圖 4-38 一般使用者手冊(歷史沿革)... 92 圖 4-39 一般使用者手冊(社區組織)... 93 圖 4-40 一般使用者手冊(歷任幹部)... 93 圖 4-41 一般使用者手冊(最新消息)... 94 圖 4-42 一般使用者手冊(社區特色-康樂公園) ... 94 圖 4-43 一般使用者手冊(社區特色-農村文物館) ... 95 圖 4-44 一般使用者手冊(社區特色-歷史古蹟) ... 95 圖 4-45 一般使用者手冊(社區特色-社區特產-1) ... 96 圖 4-46 一般使用者手冊(社區特色-社區特產-2) ... 96 圖 4-47 一般使用者手冊(活動劇照-觀看相簿) ... 97 圖 4-48 一般使用者手冊(活動劇照-觀看相簿-2) ... 97 圖 4-49 一般使用者手冊(活動劇照-觀看照片) ... 98
圖 4-53 一般使用者手冊(交通指南-地圖) ... 100 圖 4-54 一般使用者手冊(觀光休閒-一日遊行程) ... 100 圖 4-55 一般使用者手冊(觀光休閒-地中海風情) ... 101 圖 4-56 一般使用者手冊(觀光休閒-港南風景區) ... 101 圖 4-57 一般使用者手冊(觀光休閒-南竂漁港) ... 102 圖 4-58 一般使用者手冊(觀光休閒-十七公里海岸) ... 102 圖 4-59 一般使用者手冊(趣味一下-小遊戲) ... 103 圖 4-60 一般使用者手冊(趣味一下-拼圖遊戲) ... 103 圖 4-61 一般使用者手冊(留言板-1) ... 104 圖 4-62 一般使用者手冊(留言板-2) ... 104 圖 4-63 一般使用者手冊(留言板-3) ... 105 圖 4-64 一般使用者手冊(留言板-回覆功能) ... 105 圖 4-65 一般使用者手冊(留言板-回覆功能-2) ... 106 圖 4-66 管理者使用者手冊 (管理者專區) ... 107 圖 4-67 管理者使用者手冊 (輸入帳號密碼) ... 107 圖 4-68 管理者使用者手冊 (管理者管理者畫面) ... 108 圖 4-69 管理者使用者手冊 (密碼錯誤)... 108 圖 4-70 管理者使用者手冊 (管理者登出) ... 109 圖 4-71 管理者使用者手冊 (管理者管理畫面) ... 109 圖 4-72 管理者使用者手冊 (管理最新消息) ... 110 圖 4-73 管理者使用者手冊 (新增最新消息) ... 110 圖 4-74 管理者使用者手冊 (新增最新消息-2) ... 111 圖 4-75 管理者使用者手冊 (新增最新消息-3) ... 111 圖 4-76 管理者使用者手冊 (刪除最新消息) ... 112 圖 4-77 管理者使用者手冊 (刪除最新消息-2) ... 112 圖 4-78 管理者使用者手冊 (修改最新消息) ... 113 圖 4-79 管理者使用者手冊 (修改最新消息-2) ... 113 圖 4-80 管理者使用者手冊 (管理留言板) ... 114 圖 4-81 管理者使用者手冊 (留言板留言) ... 114 圖 4-82 管理者使用者手冊 (留言板留言-2) ... 115 圖 4-83 管理者使用者手冊 (留言板留言-3) ... 115 圖 4-84 管理者使用者手冊 (留言板回覆功能) ... 116 圖 4-85 管理者使用者手冊 (留言板回覆功能-2) ... 116 圖 4-86 管理者使用者手冊 (刪除留言)... 117 圖 4-87 管理者使用者手冊 (刪除留言-2) ... 117 圖 4-88 管理者使用者手冊 (管理活動劇照) ... 118 圖 4-89 管理者使用者手冊 (新增相簿)... 118 圖 4-90 管理者使用者手冊 (新增相簿-2) ... 119
圖 4-91 管理者使用者手冊 (新增照片)... 119 圖 4-92 管理者使用者手冊 (新增照片-2) ... 120 圖 4-93 管理者使用者手冊 (設定封面照片/刪除照片) ... 120 圖 4-94 管理者使用者手冊 (設定封面照片/刪除相簿) ... 121 圖 4-95 管理者使用者手冊 (設定封面照片/刪除相簿-2) ... 121 圖 4-96 管理者使用者手冊 (變更相簿名稱或敘述) ... 122
表目錄
表 2-1 社區網站分析比較表 ... 42 表 3-1 專題分工項目表 ... 50 表 4-1 事件表 ... 53
第一章 諸論
本章節將分五個小節來介紹專題的背景、動機、目的、限制和關鍵名詞定義， 敘說如下：1.1 背景
古槺榔庄為清朝康熙約五十年墾成之北莊二十四聚落之一。因三百年前，其 地茂生槺榔樹而得其名。在日據時期，原屬新竹郡舊港庄([2]，2009)。 昭和十六年(民國 30 年)，新竹郡舊港地區是今空軍基地。而韮菜園莊、大 店莊合併現今的大店、以及槺榔、頂牛埔莊、和下牛埔莊(已屬南寮)、萬興莊因 萬興油行而名(已屬南寮)、圳(船)頭、通頭前溪、何姓溪、溪口又名圳頭(日據時 期已取消)。河口舊港、大店為往昔與大陸貿易物資運輸路線、輕便車道路舊港、 大街(今北門街外媽祖長和宮)所經。以上地區改隸為新竹市槺榔庄。民國 71 年 11 月 1 日行政區域調整為新竹市北區康樂里，以其音「槺榔」為名，迄至今日。 康樂里隸屬於北區南寮聯里之一，本里位於新竹市西北隅，樹林頭與南寮之間頭 前溪南岸。臨新竹機場，南寮漁港境內有一何姓溪流過，總長達 1.5 公里，為本 莊河川主要排水系統。主要過境道路有東大路，東西向快速道路和天府路交通甚 為發達。居民大部分以務農為主，里民生性善良，民風純樸。自民國八十八年起， 康樂里已著手改造環境美化綠地工作，現有的自然文物；百年古井、彭宅、林宅、 莊宅古厝、二座日據時期所留下碉堡，大片牆留下的彈孔，多處廟宇，古槺榔大 稻埕等古蹟([2]，2009)。1.2 動機
本專題選擇以「康樂社區」作為主題，因為康樂社區具有特色且臨近許多知 名觀光景點。社區原有架設部落格，但版面設計並不符合里長期望，因此架設一 個全新的康樂社區網站。 在拜訪社區里長及參觀康樂社區的過程中，幽默有趣的林里長帶領我們了解 社區的各項古文物及歷史遺跡且一一的介紹社區的特色。例如在公園內，里長想 放置一個具有特色的東西，於是透過各種管道去申請一台戰機；而公園裡種植許 多的槺榔樹也是里長覺得公園裡需要具有社區代表性的東西，於是爭取經費申請 來的……等等，訪談中都顯露著里長對康樂社區充滿了熱情及努力，讓康樂社區1.3 目的
在我們這次訪談社區中，發現康樂社區擁有許多豐富的自然資源，社區內的 歷史古蹟也保存得很好，社區內的農村文物館…飛機公園也是社區的明顯特色， 也有學校會帶著學生來社區做校外教學參觀…等等的活動，另外社區會不定期舉 辦不同活動來聯絡居民的感情，里長也為社區爭取許多相關的設施；且社區鄰近 許多景點，很適合建置一個社區兼推廣觀光的網站。網站針對社區現有的資訊來 架設網站，網頁以淺顯易懂，深入淺出為主要設計，藉由圖片、動畫介紹，應用 網頁的技術加上多媒體設計及動畫的方式，呈現出該社區的特色，使瀏覽者對康 樂社區更有興趣的了解與探討且留下更深的印象。1.4 限制
1、農村文物館及碉堡因安全上的考量無法任意進入，需事先向里長預約才可入 內參觀。 2、里長因公務繁忙，無法經常解說。 3、社區電腦設備不足，無法提供網站伺服器來放社區網站。1.5 關鍵名詞定義
1、康樂社區：位於新竹市北區東大路三段 353 巷 31 號，臨近新竹機場與南寮 漁港。 2、社區發展協會：為推動社區發展工作所訂立的社區組織。 3、歷史文物：把古代遺留下來且具有歷史、藝術價值的東西。第二章 文獻探討
本章節將分三個小節來介紹社區、社區特色及其他社區網站之比較，敘說如 下：2.1 社區的發展與現況
康樂里為清朝康熙約五十年墾成之北莊二十四聚落之一。因三百年前，其地 茂生槺榔樹而得其名。早期與大陸貿易時，由舊港到北門大街間以輕便車運輸物 資所必經之地，民國七十一年十一月一日行政區域調整為新竹市北區康樂里，以 其音「槺榔」為名，迄至今日([2]，2009)。 康樂社區位於新竹市北區，隸屬北區南寮聯里之一，東臨古賢里與士林里， 西臨南寮里和舊港里，南方有新竹機場，北方有頭前溪流域；交通方面，往東約 十分鐘車程可至新竹市區，往西五分鐘車程可至南寮漁港。主要過境道路有東大 路、天府路、東西向快速道路，交通發達。以農起家的槺榔庄，居民大部份以務 農為主，民風純樸。近年來政府推行社區營造運動，亦是一股推動社區特色發展 的助力，自民國八十八年起，社區已著手改造環境美化綠地工作，現有的自然文 物；百年古井、古厝、二座日據時期所留下的碉堡，大片牆留下的彈孔，多處廟 宇，古槺榔大稻埕等古蹟([2]，2009)。 轉型為現代風貌的康樂社區，除了有古蹟景點可遊覽，有蓬勃發展的社區產 業供民眾體驗外，還有不定期舉辦在社區內部大大小小的活動供社區居民參與。 除外，還設有警鈴連線防盜系統在每家每戶，只要動一指如同求救訊號，芳鄰幾 百尺的居民都會即時現身幫忙，亦是社區裡特色之一。康樂社區的轉變，帶給居 民現代又便利的生活，也保留了原始的傳統風貌。現今的一切一切都在里長；理 事長 林再興先生，暨九位鄰長、社區理監事、全體里民努力團結合作下，保存 維護著歷史的軌跡。2.2 社區特色
本節共包含四小節，以圖片和文字說明介紹社區特色，分別是農村文物館、 歷史古蹟及廟宇、康樂公園、社區特產。 2.2.1 社區農村文物館日啟用，位於新竹市北區康樂里。館內的展示物品是由里長用心的收集及里民 們熱心的提供，讓農村文物館保存了農村時期日常生活中所使用的器具、餐具、 生財工具、古時的房間及產業…等，保留傳統氣息；並讓後代子孫來學習與觀摩， 親身體驗早期的農村人與物之間的互動([2]，2009)。 說明： 是犁田深耕時，以獸力牽引，用來碎 土過濾田中殘株，拉平水田的器具， 狀以「而」字。 圖 2-1鐵耙 說明： 掘土整地的耕種器具，為長方形木製 版塊拼製而成的長方形器具，其寬度 依地而異，上可立人，兩邊框立放底 邊上下兩端上翹，並於木板上穿孔， 加釘、竹刀或鐵刀，俗稱「割耙齒」 上下呈間隔交錯形，操作時，牛拉繩 及軛於前，人立割耙上，增加重量， 在行進間將土塊割碎。 圖 2-2割耙
說明： 農夫用來翻土的工具。 圖 2-3犁 說明： 分為： (1)牛擔－掛在牛頸脖上。 (2)後踢－牛與犁的結合器。 牛擔與後踢之繩子，依牛的體型大小 配合長度利用牛的力量來翻土。 圖 2-4牛軛 說明： 是一個木製矩形框，框中滾筒狀的木 製圓軸上裝置七片木葉，兩邊有踏 板，人站其上，用牛拖拉，碌碡葉片 便翻滾拍打，以壓平插秧前的水田。 打碌碡時，農人的左右腳分別站在碌 碡的前後邊框上，耕牛在前拖行，碌 碡向上轉動，就把草根壓在泥底下。 一般操作兩次，第一次重心放在前 頭，第二次，重心放在後面，邊走邊 壓。泥土壓平就可以插秧了。
說明： 盛秧苗器具。 圖 2-6秧匹 說明： 挑秧的工具，將秧苗挑到插秧的地 方。 圖 2-7秧擔 說明： 插秧時農夫都在右手拇指上帶著，利 用斜口地方截取秧苗，再將秧苗插入 土中，同時也方便操作及保護拇指減 低傷害。 圖 2-8蒔田管
說明： 構造很簡單，除了那根又長又圓秤桿 外，最前端是秤鉤，中間可提的部分 是秤繩，後面是秤錘，要知道物品的 重量，就用一根桿子，中間掛起繩 子，然後兩端一邊掛起物品一邊掛秤 錘，就可以算出物品的重量。 圖 2-9古時秤子 說明： 曬穀時，將穀堆扒開推平捏上，扒成 一行行，像田畦的穀浪，讓太陽曬曝 乾，和快速聚集稻穀的良好器具。 圖 2-10大蕩(大牽) 說明： 農夫用來澆菜苗及葉菜類之疏菜澆 水工具。(一擔約 60 台斤)
說明： 農民用來傳送食物，到農田給下田工 作的農民食用的工具。農民工作時間 較早，工作繁忙、粗重時間較長，於 是每日上午十點及下午三點左右訂 為點心時間。 圖 2-12點心擔 說明： 蓑衣是用草或棕欄皮製成的雨衣。蓑 衣可以分成上下兩截，上衣寬肩，便 於揮動手臂工作，下截部分像圍裙， 長度及膝。至於腳就要赤裸了，棕簑 是古時候農民遮蔽風雨的道具。 圖 2-13蓑衣
說明： 又稱脫古機。打榖機是一種水稻收割 後將其上的榖粒分離的機動設備。以 前，在收割之後，農民必須用力拍打 水稻，令其上的榖粒掉落。自從有了 打榖機，機械化可以省卻人力，又可 以改善生產力。 圖 2-14機器桶 說明： 石磨是由一對扁圓石板組成，用來磨 碎榖粒。一扇磨盤固定不動，另一扇 在其上作水平轉動。榖粒通過上磨盤 中部的孔注入水，水平轉動即可磨成 米漿。是早期用來磨米成粉製作「粿」 的石造工具，是過去農村常見的文 物。 圖 2-15石磨 說明： 以竹片編織而成，用來蒸年糕、蔡頭 粿、發糕。
說明： 風鼓是舊時農業社會收成稻子時，用 來將米粒和榖殼分開的重要農具。風 鼓主要結構分成支架、風箱、漏斗、 榖物出口四部分，使用方法是一人以 「插箕」將稻榖倒入風鼓仰斗裏，一 人用右手搖動風鼓曲柄，轉動鼓內扇 葉，左手操作仰式漏斗底下的木板 底，輕輕的土塵、雜物、秕榖會吹出 風鼓口，結實的榖粒則順著漏嘴落入 麻袋或米籮中，再搬入倉庫或「古亭」 內儲存。 圖 2-17風鼓 說明： 大憨輪是用人力來運送民生物資用 品，是一種營生工具(與現代的貨車 一樣)須繳牌照稅，最大乘載重量為 2,000 台斤。昔農業社會運輸的工具 之一。 圖 2-18大憨輪
說明： 腳踏車後座可用來載裝貨物，到市集 販賣，也是農家重要的交通工具。 圖 2-19腳踏車 說明： 是台灣最普遍的交通工具，早期是用 來載運農作物的。 圖 2-20三輪車 說明： 早期用來生火煮飯、蒸籠、煮水…等 等用途，需使用木材使其生火。
說明： 台灣民間把這種用來睡的大床通稱 為紅眠床，因為紅眠和閩南語的安眠 音近似，所以這名字也有盼望安逸舒 適睡眠的意思；也稱為八腳床。 圖 2-22八角眠床 說明： 用竹子編成，內置壹陶皿盛碳，木炭 點火放置碳灰緩合木炭燃燒速度增 加取暖效果。可隨身攜帶極為方便， 是古農村長輩取暖最佳工具。 圖 2-23火籠 說明： 製作衣服、褲子、被單、窗簾等家庭 用品的工具。 圖 2-24早期裁縫機
說明： 窩籃：古時後是用竹材編製成的。 用途：提供嬰兒休息與睡眠時使用的 寢俱。 圖 2-25窩籃(嬰兒床) 說明： 古早嫁粧：竹尺、剪刀、針、線。 用途：製作衣服，補衣服的工具。 圖 2-26古早嫁粧 說明： 可供梳裝打扮的梳妝台，是女人梳妝 打扮不可缺少的重要工具。而木造的 梳妝台，除抽屜外，均有雕刻花樣。
說明： 早期人們用來盛水洗臉的木桶。 圖 2-28洗臉面桶 說明： 古時存放衣服的櫃子，上頭都有雕刻 花樣。 圖 2-29衣櫃
說明： 早期的人們放置碗盤或是將吃剩的 飯菜食物，收存在菜櫥內，防止蒼 蠅、蚊蟲沾食。 圖 2-30菜櫥仔(碗櫥) 說明： 製作糕仔的模具。 圖 2-31糕仔印(烏龜型) 說明： 製作糕仔的模具。
說明： 新竹製鞋業的演變，從木楦頭、鋁楦 頭(阿魯米)到現在塑料楦頭。因塑膠 製的可塑性高且好加工及回收很方 便，可製成大小不一，形狀各異的楦 頭。(西元 1960-2001 年，行的產業) 圖 2-33鞋楦(雨鞋) 2.2.2 社區歷史古蹟及廟宇 社區古蹟包含了二次世界大戰期間，日本人因應戰爭而建造的防空碉堡、在 牆上也留下許多機關槍掃射過的彈孔痕跡、擁有百年歷史的三合院、廟宇及農村 時代生活必需的百年古井，而古老的水井現在也成為孩子們體驗農村生活的媒 介，至今都成為社區內特有的百年古蹟。 說明： 二次世界大戰末期，美軍空襲台灣， 由於康樂社區鄰近空軍基地，故被美 軍列為重點轟炸地區，也因此在康樂 社區留下數個碉堡遺址。昔時的小碉 堡，現在經由發展協會的巧思，成為 小孩子們最愛的遊樂場所。 圖 2-34防空小碉堡
說明： 日本人在民國 32 年建造的二座三層 樓高防空碉堡。碉堡的地基以鋼筋混 泥土建成，碉堡分三層各層設有機槍 口，底層設水井一口，儲藏室 1 處， 對外連絡坑道有 4 條。初建時 80 公 尺，現剰 30 公尺左右。 圖 2-35碉堡 說明： 二次世界大戰曾在此留下痕跡，機關 槍掃射過的大片彈孔牆，一個個彈孔 都顯示出歷史的無情催殘。 圖 2-36彈孔牆 說明： 原先位於東大路三段 556 巷底(溪浦 、前溪高灘地)，原先用紅布條綁在 林頭樹上，靈異屢現，村民集資建一 小廟供奉；85 年興建東西快速道路， 遷移至現在的 622 巷底。
說明： 萬士爺公是在清代年間，用牛車拖運 屍骨骸約 8 車至 13 車前往新竹第五 公墓。到了此地(現東大路 377 巷 22 號)牛車軸心斷掉不能走；擲筊聖杯 三次，就是要葬於此地。之後，仍然 有很多靈異傳奇事件讓人不了解而 轟動一時。 圖 2-38萬士爺 說明： 聚福祠原先為土角砌成的，年代久 遠。已不可考民國 32 年由村民集資 翻修磚造，由莊心泥水匠建造，廟的 木製門由洪英枝製作。民國 58 年因 漏水，再由謝炳炎修理，並加建北方 圍牆。聚福祠原供俸土地公一尊，後 來因建機場，田庄洪厝，土地公被 廢，廟內土地公、土地婆、文判官、 武判官暫住聚福祠迄今。 圖 2-39聚福祠 說明： 大稻埕是昔日康榔庄民聚會的活動 中心。早期庄內舉凡婚喪喜慶、神明 生日、演歌仔戲、布袋戲…等，以及 跑江湖的在此打拳、賣藥膏、變把 戲。 圖 2-40大稻埕
說明： 位於東大路三段 335 巷 31 號，昔稱 「草厝」。何時何人所建已不可考， 根據地方耆老所言，此厝建築約有 180 年歷史了，現為康樂里里長辦公 處。 圖 2-41林家古厝 說明： 民國 35 年，韭菜園只有四戶人家， 莊家古厝是其中一家，由莊明金先生 所建造。「莊家古厝」迄今有百年的 歷史。 圖 2-42莊家古厝 說明： 位於東大路三段 335 巷 27 號，為莊 勉女士所建，由養女蓮繼承，蓮嫁蔡 金生，蔡金生賣給彭金海父親彭狗旺 (俗稱)，依此推算古厝應有 150 年以 上的屋齡。
說明： 早期取水的水井。此井深約 20 公 尺，一年四季都有水從不乾涸，水質 清澈潔淨。九二一大地震時全省停 水，古井重現往日風采，此地居民因 而免於缺水。平日團體活動中亦有舉 辦「古井汲水」等體驗活動，結合農 村文化導覽，成為社區一大特色。 圖 2-44百年古井 2.2.3 社區康樂公園 茂盛的槺榔樹是康樂里的精神象徵，不論公園哪個角落都可看見。除外，最 吸引行人目光的，莫過於 F104 星式戰機，此架戰機是民國八十九年由新竹市空 軍基地贈予本里，讓飛機展示變成公園內的一大特色，公園也因此被民眾稱為「飛 機公園」；在公園內周邊也設置數根石柱，柱上妝點各式型號戰機石雕，並設有 解說牌，在遊戲區的牆上也彩繪上特有的琉璃及美輪美奐的 3 層石造涼亭亦是特 色之一。 說明： 常綠喬木，株高 5-8 公尺，幹上具葉 柄痕跡；名為台灣康榔。屬棕欄科植 物，種子有纖維質保護，屬海漂型植 物。台灣海棗的老葉所作成的地掃帚 稱為糠榔帚，十分耐用的清潔工具。 台灣海棗閩南語俗稱康榔。 圖 2-45台灣海棗(康榔樹)
說明： 超音速之結構設計，集當今航空動力 學之精華於一體，期最高時速超過 2 馬赫，為世界一流之戰機，推力大， 爬升快，精密的航電裝備及視距外飛 彈，使得 F16 成為纏鬥中的高手，足 以應付任何挑戰。 圖 2-46 F-16 說明： F-5 系列屬於美國所發展之輕型戰 鬥機中最成功的機種之一，經過巧妙 設計保持超音速性能和極佳運動 性。F-5E 由我國航發中心與美國諾 斯洛普公司合作生產，首架戰機於民 國 63 年 10 月 30 日出廠。 圖 2-47 F-5E 說明： 美國北美公司製造，可執行對空及對 地任務，韓戰期間該型機曾擊落數米 格機，台海空戰更創下 31:1 之輝煌 戰果，成為米格機之剋星，43 年開 始服役，至 69 年作戰部隊停用改為 訓練專用，66 年徐役。
說明： 美國費查公司製造，最大馬力 3500 匹，可搭載兵員 42-62 人，民國 47 年加入空軍服役，擔任運補、空投、 空降及搜救等任務，為我空軍運兵部 隊主要機種，任重道遠，貢獻至偉。 有老母雞之暱稱，現已徐役。 圖 2-49 C-119空中車廂式 說明： 美國原型機在 1954 年試飛，屬於四 架渦輪螺旋槳發動機之戰術運輪 機，可用於空中加油、搜索救難、照 相測量、氣象觀察、飛航管制、戰略 通信轉播、空中消防、衛星資料回收 等工作，裝上武器可進行攻擊。 圖 2-50 C-130大力士運輸機 說明： 由法國達梭公司發展之戰鬥機，性能 優越配備精良，靈活的滾轉，慢飛， 高攻角飛行，小巧的轉彎半徑，是我 空防鐵三角中的利器。我國於 81 年 底購買 60 架，成為全世界第一個使 用此型戰機的國家。 圖 2-51 幻象2000-5
說明： 琉璃是中國的玻璃古稱，含蘊著高 雅、美麗的特質，流燦生輝。琉璃的 作法是以脫蠟鑄造法創作，融合各種 顏色混合燒製的氧化鉛水晶玻璃。因 可以保存常久，故社區以此作為美化 環境之藝術，圖案皆以農村為主題。 圖 2-52 琉璃牆 2.2.4 社區特產 康樂社區是一個純樸的農業社區，有豐富的農村文化，而社區發展協會配合 行政院勞工委員會的多元就業開發方案，讓這些對於農特產品加工、農村米食的 製作等相當拿手的社區媽媽們，能夠大展身手。不只保有傳統，也有研發及創意。 說明： 先將豆麴洗淨，放在太陽下曝曬至乾 燥，再將乾燥的豆麴加上純米酒及白 砂糖，加以擾拌至糖溶化，放至二天 等待發酵後，在經過四個步驟，即完 成又香又細綿又好吃的古法手工製 造的豆腐乳。 圖 2-53豆腐乳
說明： 收採黃槿葉，經過包餡料及蒸煮，即 可完成好吃的菜包。 圖 2-54菜包 說明： 採收芥菜，先過鹽使其軟化，去除水 份，後放至甕中壓實發酵及曝曬 ，反覆發酵，即可完成。 圖 2-55福菜 說明： 康樂社區發展協會的成員有很多的 烹飪好手，可以供應團體自助餐或合 菜，隨客人的需求，所有食材盡可能 利用社區生產的蔬果，也是社區居民 自己食用的，不用農藥，有些還是以 網室生產，吃得開心也安心。 圖 2-56社區風味餐
說明： 利用來自學校、餐廳、廚師、家庭的 回鍋油製作環保肥皂，去污力強，好 洗好沖又環保。 圖 2-57 環保肥皂
2.3 其他社區網站之探討
本章節將探討不同社區的網站，分析各網站之優缺點、功能及特色。 共探討七個社區網站，網址如下： 南庄東河社區 http://tw.myblog.yahoo.com/donghe-walo/ 白米社區 http://www.lanyangnet.com.tw/ilpoint/su07/ 雙龍社區 http://isingan.myweb.hinet.net/ 蓬萊社區 http://www.penla.idv.tw/community.html 金華社區 http://jinhwa123.googlepages.com/index.htm 福林社區 http://fcu.org.tw/~f93b0190/ 前溪社區 http://fcu.org.tw/~qs90a0191/ 分析內容如下：南庄東河社區 http://tw.myblog.yahoo.com/donghe-walo/ 優點： 1、在首頁處清楚放置社區的 LOGO，並簡單的寫出社區介紹。 2、文章分類區有詳細的做出分類。 3、部落格相簿也有分類出活動年份及名稱。 缺點： 1、排版過於雜亂，底圖無法達到宣傳景點，反而造成反效果。 2、底圖的比例沒適當大小，導至下拉時會出現二張重疊，使版面看起來不合。 3、以白色字當部落格的主題不明顯且不易看清楚。
白米社區 http://www.lanyangnet.com.tw/ilpoint/su07/ 優點： 1、整體版面簡單明暸，也附上圖片加上說明。 2、在美食介紹區有詳細區分鄉鎮市的美食選擇。 3、在美食介紹區除了有詳細的店家名稱、電話及住址外，還加上滑動的圖片及 連結，列表名稱前加上推字供遊客作參考選擇，很貼心的設計。 4、在住宿介紹區除了有詳細的店家名稱、電話及住址外，還附上圖片及連結， 列表名稱前加上精字供遊客作參考選擇, 並附上國民旅遊合作之圖示。 缺點： 1、選單太小不明顯，讓人無法馬上看出在哪裡。 2、無討論區或留言板之網頁提供遊客留言。 3、首頁過於單調，加點動畫會更好。 4、網站資訊過少，像是無鄰近景點、套裝行程..等介紹。
雙龍社區 http://isingan.myweb.hinet.net/ 優點： 1、在進入首頁前的歡迎頁有小小的燈光特效，並有附上參訪人數。 2、選單清楚明瞭，讓人可以知道要的資訊要點什麼選單就找的到，且點選每個 選單就有不同的一張底圖。 3、版面設計以原住名圖案點綴出相關性，底圖及配色相當得宜。 4、在旅遊行程內有提供三種旅遊行程供下載，並清楚的附上注意事項及各項費 用。 5、交通資訊方面提供了四種開車路線由不同高速公路出發及公車路線，並附上 地圖。 缺點： 1、進入首頁後，沒有其他的動畫出現，顯得有些單調。 2、網站內的照片過少，無法清楚看出社區內的景點特色。 3、無討論區或留言板之網頁提供遊客留言。
蓬萊社區 http://www.penla.idv.tw/community.html 優點： 1、網頁除了介紹蓬萊社區之外，也把蓬萊社區要推廣的觀光景點介紹的很詳細。 2、網頁內的「旅遊地圖」把景點在哪一條線道的幾公里處，標示的很清楚，讓 參觀社區景點的遊客能更方便的找到想要去的景點。 3、網頁內的「旅遊地圖」內的景點，點選景點可看見該景點的詳細的照片、文 字介紹、店家資訊(聯絡電話/網址)。 缺點： 1、網頁的色彩及排版過於單調。 2、網頁介紹過於短少簡單。 3、對於社區的介紹太少。
金華社區 http://jinhwa123.googlepages.com/index.htm 優點： 1、網站資料的更新速度很快。 2、社區的首頁放有最新的活動影音檔，也很吸引人觀看。 3、「影像記錄」裡有許多社區活動影音檔，內容非常豐富，也讓里民能觀看社 區所舉辦的所有活動的照片及影音，很用心也很便利。 4、「加入金華」內有很「社區學習」裡面有詳細的社區社團活動日期/時間/地點， 「加入志工」，也讓想作志工的里民能自由參加。 缺點： 1、網頁內有商業廣告。 2、網頁除了影音檔之外，沒有動畫也沒有插圖，顯得單調。
福林社區 http://fcu.org.tw/~f93b0190/ 優點： 1、網站看的到代表福林社區的圖徽。 2、網頁有音樂檔可播放，也可選擇音樂停止。 3、網頁有照片、有動畫、讓網站活潑。 4、「社區活動紀錄」裡面有豐富的照片。 缺點： 1、網頁顯示畫面的速度慢。 2、網站點選進去，某些畫面的底圖太複雜，讓瀏灠者閱讀不便利。 3、網站資料更新速度太慢，最新更新日期為 2007/06/28。 4、網站的最新消息都放在「電腦網站志工」的「福林部落格」，想看社區最新 消息，要另外點選「福林部落格」才看的到。
前溪社區 http://fcu.org.tw/~qs90a0191/ 優點： 1、網站有社區文化地圖.社區交通位置地圖，讓瀏覽者方便找到社區。 2、網站有告知里民每一期社區會務報導，讓里民可清楚得知社區消息。 3、網站裡登山健行.社區環保.媽媽教室.歡樂元宵.活動照片很豐富。 缺點： 1、網站無動畫.無音效.顯得有些單調，首頁背景過於搶眼。 2、無討論區，無留言板讓瀏覽者發表留言。 3、網頁顯示畫面的速度很慢。 4、網站頁首畫面版面過於單調。
分析比較表 表 2-1 社區網站分析比較表 社區名稱 網站功能 康樂 社區 南庄 東河 社區 白米 社區 雙龍 社區 蓬萊 社區 金華 社區 福林 社區 前溪 社區 關於社區 ● ● ● ● ● ● ● 最新消息 ● ● ● ● ● 社區特色 ● ● ● ● ● 活動劇照 ● ● ● ● ● 社區導覽 ● ● 交通指南 ● ● ● ● ● 觀光休閒 ● ● ● ● 趣味一下 ● 留言板 ● ● ●
第三章 專題設計與規劃
本章節將分七個小節來介紹本專題的專題規劃目標、預期貢獻、系統開發方 法、系統架構圖、甘特圖、專題設備及專題分工項目表，敘說如下。3.1 專題規劃目標
1、蒐集與社區的相關資料。 因為目前康樂社區所架設的部落格無完整的功能且版面過於單調，因此，本小組 除自行蒐集社區最新相關資料外，也利用假日及社區舉辦活動時，親自撥空前往 蒐集相關資訊及參訪社區活動。 2、架設社區新網站。 我們希望能夠依里長所期望的網站，重新替里長架設一個能突顯出社區特色兼推 廣觀光的網站。網站內容預計包括下列功能： (1) 關於社區 (2) 最新消息 (3) 社區特色 (4) 社區活動 (5) 社區導覽 (6) 交通指南 (7) 觀光休閒 (8) 趣味一下 (9) 討論區 (10) 管理者專區3.2 預期貢獻
1、對康樂社區的貢獻： (1) 建置一個全新的康樂社區網站。 (2) 提供社區附近之觀光景點介紹。 (3) 促進康樂社區的資訊科技應用。 (4) 提供社區與里民／瀏覽者間的交流管道。 2、對瀏覽者的貢獻： (1) 瀏覽者能清楚的認識康樂社區及相關歷史。 (2) 瀏覽者能取得社區的最新消息、社區活動及社區之手工產品介紹。 (3) 瀏覽者能取得社區附近之觀光景點及遊玩去處。3.3 系統開發方法
圖 3-1 雛型法開發模式 ◎ 雛型法只要是基於下列的構想而設計的： 1、需求變更無法避免。 2、一個可看得到、可操作的雛型是開發者與使用者溝通的良好工具。 3、雛型的建造及修改應該要非常快速，以因應顧客的要求。 4、提高使用者參與的意願，進而提高顧客滿意度。 操作與維護 需求分析 初步設計 建立雛型 使用者驗證 細部設計 編 碼 測 試 意見回饋與需求更改◎ 需求分析雛型依下列步驟進行： 1、快速地分析使用需求，並建立雛型。此雛型包括使用介面和互動的功能，讓 使用者可以操作並試驗。 2、蒐集試驗後的意見和需求的更改，並依此修改雛型。此循環重複數次直到滿 意或可接受的程度為止。 3、將需求凍結並捨去雛型，再依傳統的瀑布模式進行設計、編碼、測試和操作 維護。 ◎ 分析與設計雛型： 1、在建造雛型之前先做詳細的需求分析與初步設計，此法可降低重大需求變更 和雛型修改的次數。 2、雛型經使用者的試驗和修改後，接下來的細部設計、編碼、測試和操作維護， 與瀑布模式的作法一樣。 3、雛型系統的架構和主要功能模組都加以保留，經修改後成為最終的產品。 ◎ 雛型法的優點： 1、雛型法可增進使用者參與。 2、可看得到、可操作的雛型成為開發者與使用者溝通的基礎。 3、需求分析的時間及成本可以降低。 4、系統的正確性提高。 ◎ 雛型法的缺點： 1、由於溝通較複雜、專案開發較動態，因此，專案管理及控制也較為困難。 2、較難建造大型系統的雛型。 3、缺乏深入的分析及開發的工具，因此系統的效率較差。
3.4 系統架構圖
圖 3-2 系統架構圖 一日遊行程 地中海風情 港南風景區 南寮漁港 十七公里海岸 康樂公園 農村文物館 歷史古蹟 社區特產 歷史沿革 社區組織 歷任幹部 細說槺榔庄(首頁) 最新消息 社區特色 社區導覽 活動劇照 交通指南 觀光休閒 意見回饋與需 求更改 趣味一下 留言板 管理者專區 關於社區以「細說槺榔庄」為網站的主題，因康樂社區茂生槺榔樹而得名加上里名也 是以其音為名。網站內將細分為十個單元，分別是關於社區、最新消息、社區特 色、活動劇照、社區導覽、交通指南、觀光休閒、趣味一下、留言板、管理者專 區，介紹其功能如下： 關於社區：介紹社區的歷史沿革、社區組織及歷任幹部，其主要目的是要讓里民 及瀏覽者更加了解社區的一切。 最新消息：讓里民及瀏覽者得到社區內最新的第一手資訊。 社區特色：介紹社區內的康樂公園、農村文物館、歷史古蹟、社區特產(包括手 工產品、手工肥皂及風味餐)，讓瀏覽者更了解社區的特色。 活動劇照：提供社區的活動照片讓瀏覽者透過這些照片更加了解社區的熱情及活 力。 社區導覽：提供社區內的地理環境及各景點的分佈位置，並標示出來，讓瀏覽者 至社區內觀光時，即可快速找到目標。 交通指南：提供明確的路線指引及停車資訊，並嵌入 google 地圖，讓瀏覽者可 以更加了解社區所在的地理位置。 觀光休閒：提供給瀏覽者最佳的一日遊行程及社區臨近觀光景點介紹並提供超連 結及圖片，讓瀏覽者可以更加了解附近之遊玩的好去處。 趣味一下：提供拼圖遊戲，讓瀏覽者休閒之於可動動腦力。 留言板：提供讓里民或瀏覽者發表及回覆之主題，並可寫下一些對社區的感 想與建議。 管理者專區：提供管理者管理最新消息、社區活動及討論區之功能。
3.5 甘特圖
3.6 專題設備
本專題預計所需使用到的軟體、硬體列舉如下： 作業系統：Microsoft Windows XP
軟體方面：
(1) 文書處理 → Microsoft Office 2003
(2) 影像繪圖軟體 → Ulead PhotoImpact 12、Adobe PhotoShop CS3
(3) 多媒體網頁製作 → Macromedia Dreamweaver 8、Macromedia Flash 8、 Macromedia Fireworks 8 (4) 資料庫 → MySQL (5) 程式語言 → PHP (6) Web 伺服器 → Appche 硬體方面： (1) 桌上型 PC、筆記型電腦 (2) 數位相機、單眼相機 (3) 隨身碟 (4) 印表機
3.7 專題分工項目表
表 3-1 專題分工項目表 項目 林孟屏 張世俊 黃雅琳 彭惠君 訂定專題主題 ˇ ˇ ˇ ˇ 設定訪談內容 ˇ ˇ ˇ ˇ 訪談社區及拍攝 ˇ ˇ ˇ ˇ 計畫書-社區資料收集 ˇ ˇ ˇ ˇ 計畫書-彙整資料 ˇ ˇ ˇ ˇ 撰寫計畫書 ˇ ˇ ˇ ˇ 系統分析與設計 ˇ ˇ 網頁視覺與架構設計 ˇ 資料庫 ˇ 程式撰寫 ˇ 網站建置、整合 ˇ 架設伺服器 ˇ 網站修改 ˇ 書面資料收集 ˇ ˇ ˇ ˇ 書面資料整合 ˇ 書面資料修改 ˇ ˇ ˇ ˇ 撰寫使用說明書 ˇ 撰寫結案報告 ˇ ˇ ˇ ˇ 維護 ˇ ˇ第四章 專題成果
本章節將分五個小節來介紹專題成果，包含需求分析、系統分析、系統介紹、 使用者手冊，敘說如下：4.1 需求分析
4.1.1 問題描述 位於新竹市東大路康樂里的康樂社區，擁有許多豐富的自然資源與保存良好 的歷史古蹟，且鄰近許多觀光景點。初次來到康樂社區遊玩的旅客對這些歷史古 蹟與自然資源都很陌生，對於附近的旅遊景點也不太了解。 本專題的主要目的就是協助康樂社區架設一個全新的社區網站，讓更多人藉 由豐富的資訊、圖片及網站的介紹認識康樂社區及其特色，因此在此系統裡簡單 的介紹康樂社區與附近觀光景點之去處。 本來希望手工產品的訂單，提供資訊技術上的協助，但由於里長本身忙於公 事且認為很麻煩，反而會增加他的負擔，所以他希望手工產品皆保持人工化管 理，只要求我們幫忙他做網頁行銷的部份。 針對網頁行銷，里長對我們提出下列期望： 1、希望網站生動活潑。 2、希望介紹社區內的特色。 3、希望推廣社區內的手工產品。 4.1.2 功能性需求 ◎ 管理者主要包含以下功能需求： 1、管理最新消息 2、管理活動照 3、管理留言板 ◎ 使用者主要包含以下功能需求： 1、瀏覽關於社區 2、瀏覽最新消息 3、瀏覽社區特色 4、瀏覽活動劇照6、瀏覽交通指南 7、瀏覽觀光休閒 8、瀏覽趣味一下 9、瀏覽留言板 由以上需求描述，可以歸納出以下幾個事件： 1、管理者新增最新消息 2、管理者修改最新消息 3、管理者刪除最新消息 4、管理者新增活動劇照 5、管理者修改活動劇照 6、管理者刪除活動劇照 7、管理者新增留言板 8、管理者刪除留言板 9、管理者/瀏覽者瀏覽關於社區 10、管理者/瀏覽者瀏覽最新消息 11、管理者/瀏覽者瀏覽社區特色 12、管理者/瀏覽者瀏覽活動劇照 13、管理者/瀏覽者瀏覽社區導覽 14、管理者/瀏覽者瀏覽交通指南 15、管理者/瀏覽者瀏覽觀光休閒 16、管理者/瀏覽者瀏覽趣味一下 17、管理者/瀏覽者瀏覽留言板
根據上述事件，整理事件表如下： 表 4-1 事件表 事件 觸發器 來源 活動 回應 目的地 維護最新消息 新增需求 管理者 輸入資料 顯示成功畫面 管理者 維護最新消息 修改需求 管理者 修改資料 顯示成功畫面 管理者 維護最新消息 刪除需求 管理者 刪除資料 顯示成功畫面 管理者 維護活動劇照 新增需求 管理者 上傳照片 顯示成功畫面 管理者 維護活動劇照 修改需求 管理者 修改資料 顯示成功畫面 管理者 維護活動劇照 刪除需求 管理者 刪除照片 顯示成功畫面 管理者 維護留言板 新增需求 管理者 輸入資料 顯示成功畫面 管理者 維護留言板 刪除需求 管理者 刪除資料 顯示成功畫面 管理者 瀏覽關於社區 瀏覽需求 瀏覽者 瀏覽 關於社區 顯示關於社區 畫面 瀏覽者 瀏覽最新消息 瀏覽需求 瀏覽者 瀏覽 最新消息 顯示最新消息 畫面 瀏覽者 瀏覽社區特色 瀏覽需求 瀏覽者 瀏覽 社區特色 顯示社區特色 畫面 瀏覽者 瀏覽活動劇照 瀏覽需求 瀏覽者 瀏覽 活動劇照 顯示活動劇照畫面 瀏覽者 瀏覽社區導覽 瀏覽需求 瀏覽者 瀏覽 社區導覽 顯示社區導覽 畫面 瀏覽者 瀏覽交通指南 瀏覽需求 瀏覽者 瀏覽 交通指南 顯示交通指南 畫面 瀏覽者 瀏覽觀光休閒 瀏覽需求 瀏覽者 瀏覽 觀光休閒 顯示觀光休閒 畫面 瀏覽者 瀏覽趣味一下 瀏覽需求 瀏覽者 瀏覽 趣味一下 顯示趣味一下 畫面 瀏覽者 瀏覽留言板 瀏覽需求 瀏覽者 瀏覽 留言板 顯示留言板畫面 瀏覽者
4.1.3 非功能性需求 1、可用性： (1) 系統必須是低硬體需求，只要能夠上網便可以瀏覽，讓消費者不需多做升級 的動作。 (2) 對於網站必須有使用手冊。 2、可信度： (1) 系統的當機次數要控制在每年小於五次。 3、效能： (1) 管理者登入的過程必須小於十秒內完成。 (2) 每個網頁的切換必須控制在三秒內，避免讓瀏覽者等待太久。
4.2 系統分析
4.2.1 活動圖本專題之系統相關活動流程圖，如下圖所示：
4.2.2 網站系統使用案例圖
4.2.3 使用案例描述
Use Case Specification：關於社區 1. 名稱(Name) 瀏覽關於社區 1.1 簡述(Brief Description) 瀏覽者瀏覽關於社區之過程 2. 參與者(Actors) 瀏覽者 3. 前提(Pre-Conditions) 瀏覽者已經連結網路並開啟康樂首頁 4. 成功條件(Successful Post-Conditions) 成功進入關於社區之畫面 5. 失敗條件(Unsuccessful Post-Conditions) 網路連結沒有成功 6. 事件路徑(Flow of Events)
6.1 基本路徑(Typical Course of Events)
Actor 動作 系統回應 1.TUCBW：瀏覽者進入網站 2.系統顯示康樂首頁畫面 3.瀏覽者點選關於社區選項之歷史沿 革畫面 4. TUCEW：系統顯示歷史沿革畫面 6.2 其他/例外路徑(alternative/exceptional course) 6.2.1 點選社區組織選項 Step 3. 點選關於社區之社區組織選項 TUCEW：顯示關於社區組織畫面 6.2.2 點選歷任幹部選項 Step 3. 點選關於社區之歷任幹部選項 TUCEW：顯示關於歷任幹部畫面
Use Case Specification：最新消息 1. 名稱(Name) 瀏覽最新消息 1.1 簡述(Brief Description) 瀏覽者瀏覽最新消息之過程 2. 參與者(Actors) 瀏覽者 3. 前提(Pre-Conditions) 瀏覽者已經連結網路並開啟康樂首頁 4. 成功條件(Successful Post-Conditions) 成功進入最新消息之畫面 5. 失敗條件(Unsuccessful Post-Conditions) 網路連結沒有成功 6. 事件路徑(Flow of Events)
6.1 基本路徑(Typical Course of Events)
Actor 動作 系統回應
1.TUCBW：瀏覽者進入網站 2.系統顯示康樂首頁畫面
3.點選最新消息選項 4. TUCEW：系統顯示最新消息畫面
6.2 其他/例外路徑(alternative/exceptional course)
Use Case Specification：社區特色 1. 名稱(Name) 瀏覽社區特色 1.1 簡述(Brief Description) 瀏覽者瀏覽社區特色之過程 2. 參與者(Actors) 瀏覽者 3. 前提(Pre-Conditions) 瀏覽者已經連結網路並開啟康樂首頁 4. 成功條件(Successful Post-Conditions) 成功進入社區特色之畫面 5. 失敗條件(Unsuccessful Post-Conditions) 網路連結沒有成功 6. 事件路徑(Flow of Events)
6.1 基本路徑(Typical Course of Events)
Actor 動作 系統回應 1.TUCBW：瀏覽者進入網站 2.系統顯示康樂首頁 3.點選社區特色之社區特產選項 4. TUCEW：系統顯示社區特產畫面 6.2 其他/例外路徑(alternative/exceptional course) 6.2.1 點選歷史古蹟選項 Step 3. 點選社區特色之歷史古蹟選項 TUCEW：系統顯示歷史古蹟畫面 6.2.2 點選農村文物館選項 Step 3. 點選社區特色之農村文物館選項 TUCEW：系統顯示農村文物館畫面 6.2.3 點選康樂公園選項 Step 3. 點選社區特色之康樂公園選項 TUCEW：系統顯示康樂公園畫面
Use Case Specification：活動劇照 1. 名稱(Name) 瀏覽活動劇照 1.1 簡述(Brief Description) 瀏覽者瀏覽社區特色之過程 2. 參與者(Actors) 瀏覽者 3. 前提(Pre-Conditions) 瀏覽者已經連結網路並開啟康樂首頁 4. 成功條件(Successful Post-Conditions) 成功進入活動劇照之畫面 5. 失敗條件(Unsuccessful Post-Conditions) 網路連結沒有成功 6. 事件路徑(Flow of Events)
6.1 基本路徑(Typical Course of Events)
Actor 動作 系統回應
1.TUCBW：瀏覽者進入網站 2.系統顯示康樂首頁
3.點選活動劇照選項 4. TUCEW：系統顯示活動劇照畫面
6.2 其他/例外路徑(alternative/exceptional course)
Use Case Specification：社區導覽 1. 名稱(Name) 瀏覽社區導覽 1.1 簡述(Brief Description) 瀏覽者瀏覽社區特色之過程 2. 參與者(Actors) 瀏覽者 3. 前提(Pre-Conditions) 瀏覽者已經連結網路並開啟康樂首頁 4. 成功條件(Successful Post-Conditions) 成功進入社區導覽之畫面 5. 失敗條件(Unsuccessful Post-Conditions) 網路連結沒有成功 6. 事件路徑(Flow of Events)
6.1 基本路徑(Typical Course of Events)
Actor 動作 系統回應
1.TUCBW：瀏覽者進入網站 2.系統顯示康樂首頁
3.點選社區導覽選項 4. TUCEW：系統顯示社區導覽畫面
6.2 其他/例外路徑(alternative/exceptional course)
Use Case Specification：交通資訊 1. 名稱(Name) 瀏覽交通資訊 1.1 簡述(Brief Description) 瀏覽者瀏覽交通資訊之過程 2. 參與者(Actors) 瀏覽者 3. 前提(Pre-Conditions) 瀏覽者已經連結網路並開啟康樂首頁 4. 成功條件(Successful Post-Conditions) 成功進入交通資訊之畫面 5. 失敗條件(Unsuccessful Post-Conditions) 網路連結沒有成功 6. 事件路徑(Flow of Events)
6.1 基本路徑(Typical Course of Events)
Actor 動作 系統回應
1.TUCBW：瀏覽者進入網站 2.系統顯示康樂首頁
3.點選交通資訊選項 4. TUCEW：系統顯示交通資訊畫面
6.2 其他/例外路徑(alternative/exceptional course)
Use Case Specification：觀光休閒 1. 名稱(Name) 瀏覽觀光休閒 1.1 簡述(Brief Description) 瀏覽者瀏覽觀光休閒之過程 2. 參與者(Actors) 瀏覽者 3. 前提(Pre-Conditions) 瀏覽者已經連結網路並開啟康樂首頁 4. 成功條件(Successful Post-Conditions) 成功進入觀光休閒之畫面 5. 失敗條件(Unsuccessful Post-Conditions) 網路連結沒有成功 6. 事件路徑(Flow of Events)
6.1 基本路徑(Typical Course of Events)
Actor 動作 系統回應 1.TUCBW：瀏覽者進入網站 2.系統顯示康樂首頁 3.點選觀光休閒之一日遊選項 4. TUCEW：系統顯示一日遊畫面 6.2 其他/例外路徑(alternative/exceptional course) 6.2.1 點選十七公里海岸選項 Step 3. 點選觀光休閒之十七公里海岸選項 TUCEW：顯示十七公里海岸畫面 6.2.2 點選地中海風情選項 Step 3. 點選觀光休閒之地中海風情選項 TUCEW：顯示地中海風情畫面 6.2.3 點選港南風景區選項 Step 3. 點選觀光休閒之港南風景區選項 TUCEW：顯示港南風景區畫面 6.2.4 點選南寮漁港選項 Step 3. 點選觀光休閒之南寮漁港選項 TUCEW：顯示南寮漁港畫面
Use Case Specification：趣味一下 5.1 名稱（Name）： 瀏覽趣味一下 1.1 簡述（Brief Description）： 瀏覽者瀏趣味一下之過程 5.2 參與者（Actors）： 瀏覽者 5.3 前提（Pre-Conditions）： 瀏覽者已經連結網路並開啟康樂首頁 5.4 成功條件（Successful Post-Conditions）： 成功進入趣味一下之畫面 5.5 失敗條件（Unsuccessful Post-Conditions）： 網路連結沒有成功 5.6 事件路徑（Flow of Events）： 6.1 基本路徑 (Typical Course of Events)
Actor 動作 系統回應
1.TUCBW：瀏覽者進入網站 2.系統顯示康樂首頁
3.點選趣味一下選項 4. TUCEW：系統顯示趣味一下畫面
6.2 其它/例外路徑(alternative/exceptional course)：
Use Case Specification：留言板 1. 名稱（Name）： 瀏覽留言版 1.1 簡述（Brief Description）： 瀏覽者使用留言版之過程 2. 參與者（Actors）： 管理者 3. 前提（Pre-Conditions）： 瀏覽者已經連結網路並開啟康樂首頁 4. 成功條件（Successful Post-Conditions）： 成功進入留言版之畫面 5. 失敗條件（Unsuccessful Post-Conditions）： 網路連結沒有成功 6. 事件路徑（Flow of Events）： 6.1 基本路徑 (Typical Course of Events)
Actor 動作 系統回應 1.TUCBW：瀏覽者進入網站 2.系統顯示康樂首頁 3.點選留言版之選項 4 系統顯示留言版畫面 5.點選我要留言之選項 6.系統顯示我要留言之畫面 7.輸入我要留言之相關資料 8.點選送出選項 9. TUCEW：顯示新增成功之留言版畫 面 6.2 其它/例外路徑(alternative/exceptional course)： 6.2.1 留言板之回復 Step 5. 點選要回覆之主題 Step 6. 系統顯示要回覆之主題內容 Step 7. 輸入要回覆之內容 Step 8. 點選送出之選項 Step 9 . TUCEW：系統顯示回覆成功之留言版畫面
Use Case Specification：管理者專區 1. 名稱(Name) 管理者 1.1 簡述(Brief Description) 管理者管理最新消息之過程 1. 參與者(Actors) 管理者 3. 前提(Pre-Conditions) 管理者登入管理專區畫面 4. 成功條件(Successful Post-Conditions) 顯示最新消息之新增成功畫面 5. 失敗條件(Unsuccessful Post-Conditions) 最新消息沒有新增成功 6. 事件路徑(Flow of Events)
6.1 基本路徑(Typical Course of Events)
Actor 動作 系統回應 1.TUCBW：管理者登入管理者專區畫 面 2.系統顯示管理者登入畫面 3.輸入帳號密碼 4.驗證帳號密碼 5.帳號密碼正確 6.顯示登入成功畫面 7.點選管理最新消息選項 8.顯示最新消息管理畫面 9.點選新增最新消息選項 10.顯示新增最新消息畫面 11.輸入新增資料 12.確定新增資料 13.資料庫新增最新消息 14 .TUCEW：顯示新增成功畫面 6.2 其他/例外路徑(alternative/exceptional course) 6.2.1 管理者登入失敗 Step 5. 帳號密碼錯誤 Step 6. 重新輸入帳號密碼 6.2.2 管理者選擇修改選項 Step 9. 點選最新消息項目 Step 10. 點選修改選項 Step 11. 輸入修改內容
6.2.3 管理者選擇刪除選項 Step 10. 點選刪除選項 Step 11. 確定刪除最新消息 Step 12. 刪除資料庫最新消息 Step 13. 顯示刪除成功畫面
Use Case Specification：管理者專區 1. 名稱(Name) 管理者 1.1 簡述(Brief Description) 管理者管理活動劇照之過程 2. 參與者(Actors) 管理者 3. 前提(Pre-Conditions) 管理者登入管理專區畫面 4. 成功條件(Successful Post-Conditions) 顯示活動劇照之新增成功畫面 5. 失敗條件(Unsuccessful Post-Conditions) 活動劇照沒有新增成功 6. 事件路徑(Flow of Events)
6.1 基本路徑(Typical Course of Events)
Actor 動作 系統回應 1.TUCBW：管理者登入管理者專區畫 面 2.系統顯示管理者登入畫面 3.輸入帳號密碼 4.驗證帳號密碼 5.帳號密碼正確 6.顯示登入成功畫面 7.點選管理活動劇照選項 8.顯示活動劇照管理畫面 9.點選新增相簿選項 10.顯示新增相簿畫面 11.輸入新增相簿資料 12.確定新增相簿資料 13.資料庫新增相簿 14 .顯示新增相簿成功畫面 15.點選新增相片 16.顯示新增相片畫面 17.選擇欲新增的相片 18.點選開始上傳選項 19.資料庫新增相片 20. TUCEW：顯示新增照片成功畫面 6.2 其他/例外路徑(alternative/exceptional course) 6.2.1 管理者登入失敗 Step 5. 帳號密碼錯誤 Step 6. 重新輸入帳號密碼
Step 11. 刪除資料庫相簿 Step 12. 顯示刪除成功畫面
Use Case Specification：管理者專區 1. 名稱(Name) 管理者 1.1 簡述(Brief Description) 管理者管理留言版之過程 2. 參與者(Actors) 管理者 3. 前提(Pre-Conditions) 管理者登入管理專區畫面 4. 成功條件(Successful Post-Conditions) 顯示留言板之刪除成功畫面 5. 失敗條件(Unsuccessful Post-Conditions) 留言板沒有刪除成功 6. 事件路徑(Flow of Events)
6.1 基本路徑(Typical Course of Events)
Actor 動作 系統回應 1.TUCBW：管理者登入管理者專區畫 面 2.系統顯示管理者登入畫面 3.輸入帳號密碼 4.驗證帳號密碼 5.帳號密碼正確 6.顯示登入成功畫面 7.點選管理留言版選項 8.顯示留言板管理畫面 9.點選刪除選項 10.確定刪除留言 11. 刪除資料庫留言 12. TUCEW：顯示刪除成功畫面 6.2 其他/例外路徑(alternative/exceptional course) 6.2.1 管理者登入失敗 Step 5. 帳號密碼錯誤 Step 6. 重新輸入帳號密碼
4.2.4 循序圖
圖 4-7 循序圖-社區導覽
圖 4-10 循序圖-趣味一下
4.3 系統介紹
1、康樂社區首頁 首頁使用 flash 動畫方式呈現，包括 LOGO、按鈕及照片，並放上熱銷商品 及活動劇照，讓瀏覽者可以先瞭解康樂社區。 圖 4-16 系統介紹 (康樂社區首頁) 2、關於社區 介紹社區的歷史沿革、社區組織及歷任幹部，其主要目的是要讓里民及瀏覽 者更加了解社區的一切。圖 4-18 系統介紹 (關於社區-社區組織)
3、最新消息 讓里民及瀏覽者得到社區內最新的第一手資訊。 圖 4-20 系統介紹 (最新消息) 4、社區特色 介紹社區內的康樂公園、農村文物館、歷史古蹟、社區特產(包括手工產品、 手工肥皂及風味餐)，讓瀏覽者更了解社區的特色。
圖 4-22 系統介紹 (社區特色-農村文物館)
5、活動劇照 提供社區的活動照片讓瀏覽者透過這些照片更加了解社區的熱情及活力。 圖 4-24 系統介紹 (活動劇照) 6、社區導覽 提供社區內的地理環境及各景點的分佈位置，並標示出來，讓瀏覽者至社區 內觀光時，即可快速找到目標。
7、交通指南 提供明確的路線指引及停車資訊，並嵌入 google 地圖，讓瀏覽者可以更加 了解社區所在的地理位置。 圖 4-26 系統介紹 (交通指南) 8、觀光休閒 提供給瀏覽者最佳的一日遊行程及社區臨近觀光景點介紹並提供超連結及 圖片，讓瀏覽者可以更加了解附近之遊玩的好去處。 圖 4-27 系統介紹 (觀光休閒-一日遊行程)
圖 4-28 系統介紹 (觀光休閒-地中海風情)
圖 4-30 系統介紹 (觀光休閒-南寮漁港)
圖 4-31 系統介紹 (觀光休閒-十七公里海岸)
9、趣味一下
提供拼圖遊戲，讓瀏覽者休閒之於可動動腦力。
10、留言板 提供讓里民或瀏覽者發表及回覆之主題，並可寫下一些對社區的感 想與建議。 圖 4-33 系統介紹 (留言板) 11、管理者專區 提供管理者管理最新消息、社區活動及討論區之功能。
4.4 使用手冊
康樂社區網站一共有二種使用者：一般使用者及管理者。所以在此提供了二 種版本的使用手冊，方便使用者使用本網站 4.4.1 一般使用者使用手冊 1、進入「康樂社區」網頁的方法 (1) 開啟網際網路(最佳瀏覽器 firefox) 圖 4-35 一般使用者手冊 (開啟網際網路) 2、瀏灠「康樂社區」首頁 (1) 開啟康樂社區網站，請在網址列輸入 http://120.106.196.13/hhc。圖 4-36 一般使用者手冊 (康樂社區首頁-1) (2) 進入首頁後可看到網頁的九大主題：關於社區、最新消息、社區特色、活動 劇照、社區導覽、交通指南、觀光休閒、趣味一下、留言板。 圖 4-37 一般使用者手冊 (康樂社區首頁-2) 3、瀏灠「關於社區」網頁 (1) 在「康樂社區」首頁，點選「關於社區」，再點選「歷史沿革」，可觀看社區 的歷史沿革發展，點選下方之「TOP」可回到網頁最上方。
(2) 在「康樂社區」首頁，點選「關於社區」，再點選「社區組織」，可觀看社區 的組織圖，點選下方之「TOP」可回到網頁最上方。 圖 4-39 一般使用者手冊 (社區組織) (3) 在「康樂社區」首頁，點選「關於社區」，再點選「歷任幹部」，可觀看社區 歷任的幹部，點選下方之「TOP」可回到網頁最上方。 圖 4-40 一般使用者手冊 (歷任幹部)
4、瀏灠「最新消息」網頁 (1) 在「康樂社區」首頁，點選「最新消息」，可以看到社區發佈的最新消息。 圖 4-41 一般使用者手冊 (最新消息) 5、瀏灠「社區特色」網頁 (1) 在「康樂社區」首頁，點選「社區特色」，再點選「康樂公園」，可觀看康樂 公園的文字及照片，將滑鼠放置在右列小圖上，即可瀏覽大張的圖片。
(2) 在「康樂社區」首頁，點選「社區特色」，再點選「農村文物館」，可觀看農 村文物館的文字及照片，將滑鼠放置在右列小圖上，即可瀏覽大張的圖片。 圖 4-43 一般使用者手冊 (社區特色-農村文物館) (3) 在「康樂社區」首頁，點選「社區特色」，再點選「歷史古蹟」，可觀看歷史 古蹟的文字及照片，將滑鼠放置在右列小圖上，即可瀏覽大張的圖片。 圖 4-44 一般使用者手冊 (社區特色-歷史古蹟)
(4) 在「康樂社區」首頁，點選「社區特色」，再點選「社區特產」，可觀看社區 特產的文字及照片，點選中間橘色字體可直接連結到該手工產品的畫面。 圖 4-45 一般使用者手冊 (社區特色-社區特產-1) (5) 在「康樂社區」首頁，點選「社區特色」，再點選「社區特產」，可觀看社區 特產的文字及照片，點選中間橘色字體可直接連結到該手工產品的畫面，再 點選旁邊「TOP」可回到網頁最上方。
6、瀏灠「活動劇照」網頁 (1) 在「康樂社區」首頁，點選「活動劇照」，可觀看社區 97 年及 98 年的活動 相簿。 圖 4-47 一般使用者手冊 (活動劇照-觀看相簿) (2) 在「康樂社區」首頁，點選「活動劇照」，再點選相簿，可觀看相簿裡的照 片，點選照片，照片會放大顯示，相簿右上角會顯示此相簿裡有幾張相片。 圖 4-48 一般使用者手冊 (活動劇照-觀看相簿-2)
(3) 在「康樂社區」首頁，點選「活動劇照」，再點選相簿，點選照片，照片會 放大顯示，在照片上點選一下，可跳至下一張照片。 圖 4-49 一般使用者手冊 (活動劇照-觀看照片) 7、瀏灠「社區導覽」網頁 (1) 在「康樂社區」首頁，點選「社區導覽」，再點選下方之「點圖放大有詳細 說明」，可觀看社區導覽，介紹社區內景點。
(2) 在「康樂社區」首頁，點選「社區導覽」，再點選下方之「點圖放大有詳細 說明」，可觀看社區導覽，將滑鼠放在社區景點之小圓圈，可觀看景點介紹之 放大圖文及連結。 圖 4-51 一般使用者手冊 (社區導覽) 8、瀏灠「交通指南」網頁 (1) 在「康樂社區」首頁，點選「交通指南」，可查看從國道一號及西濱快速道 路到康樂社區之路線說明。 圖 4-52 一般使用者手冊 (交通指南-路線指南)
(2) 在「康樂社區」首頁，點選「交通指南」，下方有地圖，也可點選「檢視較 大的地圖」，將地圖放大觀看。 圖 4-53 一般使用者手冊 (交通指南-地圖) 9、瀏灠「觀光休閒」網頁 (1) 在「康樂社區」首頁，點選「觀光休閒」，再點選「一日遊行程」，一日遊行 程安排分為上午參觀康樂社區(細項行程需與里長預約)、中午可在康樂社區 用餐(社區風味餐需與里長預約)、下午可至臨近的南竂及十七公里海岸遊玩。
(2) 在「康樂社區」首頁，點選「觀光休閒」，可觀看社區臨近之知名景點，點 選「地中海風情」，可觀看地中海風情之圖文介紹，點選右邊小圖可觀看放大 之圖片。 圖 4-55 一般使用者手冊 (觀光休閒-地中海風情) (3) 在「康樂社區」首頁，點選「觀光休閒」，可觀看社區臨近之知名景點，點 選「港南風景區」，可觀看港南風景區之圖文介紹，點選右邊小圖可觀看放大 之圖片。 圖 4-56 一般使用者手冊 (觀光休閒-港南風景區)
