木屋工程資訊網之建置與開發

(1)

元培科技大學資訊管理系畢業專題

結案報告

木屋工程資訊網之建置與開發

(96 學年度四技)

組別代號:A13

指導老師:劉淑範老師

組長：陳立修(0931408022)

組員：李志孝(0931408024)

陳廷欣(0931408049)

蔡林忠次(0931408011)

李國彰(0931408012)

中華民國九十七年五月

(2)

摘要

在這資訊科技一日千里的時代，電腦與通訊網路的應用結合，加速了工作的效率知識取的等等之類，深深的影響我們的社會家庭各個層面，人與人之間的行為模式也變化了許多。早期不管是吃的喝的用的，都必須走出家裡，但是現在足不出戶照樣能完成許多事，只要有電腦網路，彈指之間就能滿足完成。本專題在於滿足住的需求，並推廣木屋的好，發揮現有的資訊技術，方便並滿足客戶，製造買賣雙方最大利益效率。本組使用工具為 MYSQL、PHP、DREAMWEAVER、FLASH、PHOTOIMPACT，作為開發工具，經過與楓清陽公司協商後，定出的主要功能有加入會員可定期收到 E-mail 最新消息資訊並有優惠價，熱門銷售排行，照片寫真，一些其他的相關產品，如木工書籍各種小藝品，保養維護用品，木屋和原木種類的知識介紹，還有常見的Ｑ＆Ａ，也提供線上估價為雙方節省不少路途上的來回時間，也有線上施工進度查詢，方便客戶隨時隨地了解施工進度，另外還有留言板供大家發問問題。而最後完成各功能建構，和本組收集起來的資料統整及楓清楊所提的的資訊，這將會是一個資料最齊全，功能服務最完善的木屋工程資訊網之建置與開發。關鍵字: 通訊網路、熱門銷售排行、線上報價、線上施工進度查詢

(3)

摘要... i 目錄... ii 表目錄………...iv 圖目錄………....v 第一章緒論... 1 1.1 背景與動機... 1 1.2 目的... 2 1.3 限制... 2 1.4 關鍵名詞定義... 2 第二章文獻探討... 4 2.1 木屋相關網頁分析... 4 2.2 網頁技術... 19 2.2.1 MYSQL 簡介 ... 19 2.2.2 PHP 簡介 ... 20 2.2.3 FLASH 簡介 ... 20 2.2.3 Photoimpact12 簡介 ... 21 2.2.5 Dreamweaver8 簡介 ... 22 第三章專題設計與規劃... 23 3.1 專案規劃目標... 23 3.2 系統開發方法... 24 3.3 系統需求... 25 3.4 專題設備... 26 3.5 專題時程規劃... 26 第四章專題成果... 28 4.1 需求分析………...28 4.1.1 問題描述………..28 4.1.2 使用者需求………..28 4.1.3 可行性分析………..28 4.1.4 系統的目標………..29 4.2 系統分析………...29 4.2.1 活動圖………..29 4.2.2 使用案例圖………..31 4.2.3 使用例案描述………..32 4.2.4 循序圖………..38 4.2.5 硬體架構圖………..51 4.3 系統介紹……….. 52

(4)

4.4 使用手冊………..………64

第五章結論………98

參考文獻... 99

(5)

表目錄

表 3- 1 軟體設備 ... 26 表 3- 2 硬體設備 ... 26 表 4- 1 使用案例 (木屋工程)... 32 表 4- 2 使用案例 (會員註冊)... 33 表 4- 3 使用案例 (會員登入)... 33 表 4- 4 使用案例 (修改會員資料)... 34 表 4- 5 使用案例 (實體寫真)... 34 表 4- 6 使用案例 (施工進度查詢)... 35 表 4- 7 使用案例 (木屋款式和相關產品)... 35 表 4- 8 使用案例 (線上報價)... 35 表 4- 9 使用案例 (留言板)... 36 表 4- 10 使用案例 (關於公司)... 36 表 4- 11 使用案例 (最新消息) ... 36 表 4- 12 使用案例 (後台木屋和相關產品)... 37 表 4- 13 使用案例 (後台施工進度查詢)... 37

(6)

圖目錄

圖 2- 1 正昌木業有限公司網站架構圖 ... 4 圖 2- 2 福泰木屋股份有限公司網站架構圖 ... 5 圖 2- 3 鉅隆木屋網站架構圖 ... 6 圖 2- 4 華信木屋設計網站架構圖 ... 7 圖 2- 5 王品木屋企業有限公司網站架構圖 ... 8 圖 2- 6 尚霖休閒傢俱館網站架構圖 ... 9 圖 2- 7 原木工仿網站架構圖 ... 10 圖 2- 8 惠宇木作工程網站架構圖 ... 11 圖 2- 9 美家木屋公司網站架構圖 ... 12 圖 2- 10 大司細木工網站架構圖 ... 13 圖 2- 11 東月堂創意設計有限公司網站架構圖 ... 14 圖 2- 12 建新屋林業工程團隊網站架構圖 ... 15 圖 2- 13 大和木屋網站架構圖 ... 16 圖 2- 14 張雲鵠木構建築網站架構圖 ... 17 圖 2- 15 晉風國際木屋景觀建材網站架構圖 ... 18 圖 3- 1 小木屋網站架構圖 ... 23 圖 3- 2 生命週期圖 ... 25 圖 3- 3 甘特圖 ... 27 圖 4-1 活動圖 ... 30 圖 4-2 使用案例圖 ... 31 圖 4-3 循序圖(實體寫真)... 38 圖 4-4 循序圖(木屋款式和相關產品)... 39 圖 4-5 循序圖(施工進度查詢)... 40 圖 4-6 循序圖(線上報價)... 41 圖 4-7 循序圖(售後服務)... 42 圖 4-8 循序圖(關於公司)... 43 圖 4-9 循序圖(最新消息)... 44 圖 4-10 循序圖(留言板)... 45 圖 4-11 循序圖(會員註冊) ... 46 圖 4-12 循序圖(會員登入)... 47 圖 4-13 循序圖(修改會員資料)... 48 圖 4-14 循序圖(新增類別)... 49 圖 4-15 循序圖(更新產品資料)... 50 圖 4-16 硬體架構圖 ... 51 圖 4-17 flash 動畫載入頁面 ... 52

(7)

圖 4-18 首頁 ... 53 圖 4-19 木屋知識 ... 54 圖 4-20 木屋知識解答 ... 54 圖 4-21 常用木屋建材 ... 55 圖 4-22 木屋實體寫真照 ... 56 圖 4-23 木屋款式 and 相關產品 ... 70 圖 4-24 施工進度查詢 ... 58 圖 4-25 線上報價 ... 59 圖 4-26 售後服務 ... 60 圖 4-27 關於公司 ... 61 圖 4-28 最新消息 ... 62 圖 4-29 留言板 ... 63 圖 4-30 flash 動畫載入頁面 ... 64 圖 4-31 首頁 ... 65 圖 4-32 木屋知識 ... 66 圖 4-33 木屋知識解答 ... 67 圖 4-34 常用木屋建材 ... 68 圖 4-35 木屋實體寫真照 ... 69 圖 4-36 木屋款式 and 相關產品………..70 圖 4-37 施工進度查詢 ... 71 圖 4-38 施工進度查詢填寫單 ... 75 圖 4-39 查看施工進度 ... 76 圖 4-40 加入會員 ... 錯誤! 尚未定義書籤。 圖 4-41 會員登入頁面 ... 錯誤! 尚未定義書籤。 圖 4-42 修改會員資料 ... 錯誤! 尚未定義書籤。 圖 4-43 施工進度查詢瀏覽畫面 ... 77 圖 4-44 施工進度查詢圖放大 ... 78 圖 4-45 線上報價 ... 79 圖 4-46 售後服務 ... 80 圖 4-47 售後服務留言板 ... 81 圖 4-48 關於公司 ... 82 圖 4-49 最新消息 ... 83 圖 4-50 留言板 ... 84 圖 4-51 新增留言 ... 85 圖 4-52 管理者登入 ... 86 圖 4-53 管理者登入畫面 ... 87 圖 4-54 管理會員帳號 ... 88 圖 4-55 管理施工進度查詢 ... 89

(8)

圖 4-56 修改施工進度表 ... 90 圖 4-57 新增施工進度照片 ... 91 圖 4-58 管理木屋款式和相關產品 ... 92 圖 4-59 新增單筆產品 ... 93 圖 4-56 新增類別 ... 94 圖 4-61 修改產品資料 ... 95 圖 4-62 更新管理者密碼 ... 96 圖 4-63 管理留言板 ... 97

(9)

第一章緒論

1.1 背景與動機

隨著網路的興起，各行各業網路資訊化服務是必然的趨勢，網路所帶來的方便迅速提升人們工作效率，也減少實體店鋪的支出的成本。但虛擬終究不能完全取代實體，現場的溝通協調，眼見看得到，手摸得到，才是最真實可信的，所以我們在這以楓清楊木屋公司實體店面為主，虛擬網路為輔，相輔相成，提供有木屋需求的客戶最完善方便的網站。搜索國內網站木屋相關網站並不多不齊全，木屋資訊缺乏，加上大眾對木屋印象都不太好，推廣更不易，楓清楊木工師傅基於這理由想提供更完善更齊全的網站進而與小組合作，而我們的重點將放在線上報價與線上施工進度查詢，作出最符合客戶的需求。其實木屋不像我們在遊樂區看到的那樣不堪一擊好像快垮的樣子，簡單一句話，一分錢一分貨，遊樂區投資者在建築初期基於營運回收的風險，往往能省就省，房子也是能住就好，花費在木屋的經費有限，所以對房子的品質要求也就不知道如何控制，等到整個遊樂區完成一段時間，問題缺陷才慢慢浮現出來，這也就是大家常見到的木屋，這樣木屋怎麼可能壽命會長，有人說混凝土房屋比木屋好，這可不一定，混凝土的強度與潛變特性是持續進行的，同時風化也無時無刻在侵蝕，品質差一點的幾十年後室外也是會有些酥化產生，好一點的或許也會因為乾縮、地震、雨水侵蝕等等因素而龜裂或者滲水，混凝土一旦滲水就很難去根治，反觀木構造在幾年時間後，材料的變形就比較固定了，材質方面也較穩定，除非外力破壞，不然只要每隔好幾年好好檢查保養不會有問題的。現代的人注重育樂休閒生活品質各方面的提升，也重視居住環境，豐衣足食不再是基本條件，住的方面，遮風避雨當然還不夠，不僅安全、舒適、美觀、更要住的健康。根據醫學界及對木材有研究的人士在報導上的說法指出，木材有釋放對人體有益的芬多

(10)

精及自然透氣呼吸效果，也就是住在都市叢林中的人們到郊外活動、野營及公園晨跑運動所想獲得的新鮮空氣及自然氣息有益身體健康，所以住木屋的好處可真多。

1.2 目的

我們這次製作本專題的目地是在讓繁忙緊張的都市人可以透過小木屋更為接近大自然，本網站提供在線上就可以了解小木屋從無到有的製作過程，在家裡也可以上網詢問業者，自己想要建製小木屋的樣式款式，並且方便客戶線上估價和查詢施工進度。透過本站簡單且多元的操作畫面，讓使用者在這邊可以更容易的上手，自己衡量自己想要的木屋款式。站所提供的主要重點功能如下: １、線上初步的估價２、24 小時提供線上瀏覽３、提供客戶施工進度線上查詢４、木屋實體照片供參考５、木屋的一些專業知識保養方法資訊６、利用本站的留言功能，可讓大家互相交流小木屋的使用心得

1.3 限制

本專題留言版只開放給會員發問，是為了避免雜七雜八的廣告，或是一些不當的發言情形，還有本專題初步預期要加入虛擬實境，但是由於之前完全沒接觸過，對這領域完全不熟析，而且時間不多的壓力下，經過大家評估討論，暫時放棄，是想等到網站有一定的知名度、瀏覽度高，再去學習這項技術放上去，最後這專題才算真正完整。

1.4 關鍵名詞定義

本專題用到以下重要的幾個名詞，茲分別定義如下：

(11)

通訊的網路，就能與全世界各個角落聯繫。

2、熱門銷售排行:從產品銷售率來統計出最受歡迎產品的排行榜。

3、線上報價：消費者可以在家透過網頁就可以直接在本站依照自己的需求選購建造屬於自己的小木屋省去必須到現場估價的麻煩。

(12)

第二章文獻探討

2.1 木屋相關網頁分析

木屋在台灣尚未蓬勃發展，因為一般大眾先入為主的錯誤觀念總是認為木造的容易著火、結構容易損毀等等之類的，所以比起鋼筋混泥土較不受親睞，而且又沒有良好的木屋知識服務平台，推廣宣傳極不易，有相關介紹的網站並不多，也只有幾個少數服務介紹較齊全，我們這裡提供幾個較具代表性的網站作比較分析。 網站名稱：正昌木業有限公司（請參考附錄 1） 網址：http://www.woodhouse.kong.tw/[1] 網站架構：圖 2- 1 正昌木業有限公司網站架構圖網站優點： 1. 首頁動畫設計很獨特，展現出木屋的味道，尤其是雙格式出現動畫。 2. 網頁格式設計非常良好，每一張圖片都排得很整齊，畫面簡單明瞭，不會很複雜。正昌木業有限公司關於我們最新消息設計作品服務項目木屋介紹聯絡我們

(13)

網站缺點： 1. 不常更新相關木屋的資料。 2. 施工方面有部份詳細不完全，沒附上施工過程的圖片。 3. 只註明介紹木屋優點，卻沒介紹真正的安全性知識。本文討論建議： 1. 必須要常常更新完善的資料。 2. 提供安全性防治的知識，以確保木屋的安全。 網站名稱：福泰木屋股份有限公司（請參考附 2） 網址：http://www.fautai.com.tw/[2] 網站架構：圖 2- 2 福泰木屋股份有限公司網站架構圖網站優點： 1. 介紹施工過程及建築材質的重要性很詳細。 2. 有多樣化的木屋樣本、細部…等木屋建材。網站缺點： 1. 首頁沒放入動畫，而且只放中間的格式。福泰木屋首頁福泰簡介客戶群介紹木屋樣本施工法介紹建構材質介紹聯絡我們

(14)

2. 網站整個方面都只放中間，而且格式不規律。 3. 太多於介紹木屋的外觀性，沒提到木屋優缺點及安全性。本文討論建議： 1. 首頁方面要加入動畫，以增加趣味。 2. 網站必須要採用展開性，格式方面必須要排列整齊。 3. 不要太多注重外觀性，要提供木屋專業知識及技術。 網站名稱：鉅隆木屋（請參考附錄 3） 網址：http://www.glhs.com.tw/[3] 網站架構：圖 2- 3 鉅隆木屋網站架構圖網站優點： 1. 有提供相關木屋的影片，讓人們了解木屋建造過程的重要性。 2. ３６０度實景來展現出周圍真實環境的一面。 3. 建構材質介紹及施工法介紹更詳細，更專業。鉅隆木屋關於鉅隆木屋３６０度實景樣本介紹施工法介紹參考範例建構材質介紹客戶群介紹聯絡我們

(15)

網站缺點： 1. 首頁位置偏向左上角，其他部份都沒用處。 2. 首頁沒放入動畫方面，網站整個方面帶來感覺是死板的。 3. 其他部份都沒提到重要的資料，例如安全性考量…等。本文討論建議： 1. 首頁方面必須矯正位置，並展開性的網頁。 2. 網站整個方面必須要帶給很自然的感覺。 3. 其他部份要更新資料。 網站名稱：華信木屋設計（請參考附錄 4） 網址：http://www.homeplan.com.tw/[4] 網站架構：圖 2- 4 華信木屋設計網站架構圖華信木屋設計公司簡介木屋工法介紹木構建材銷售安全性作品介紹小木屋特區與我們聯絡相關聯結

(16)

網站優點： 1. 首頁動畫技術更專業，更生動。 2. 網站方面採用改變創新方式來設計。 3. 整個網站都有木屋的味道，接近大自然的樂趣。 4. 每一個項目介紹很詳細，連安全性考量都具備。網站缺點： 1. 缺少一部份重要更新資料。 2. 沒有提供會員登錄及留言板討論，無法掌握每個人的想法。本文討論建議： 1. 提供更新資料及改善網站。 2. 提供設定會員登錄及留言版。 網站名稱：王品木屋企業有限公司（請參考附錄 5） 網址：http://wang-pin.myweb.hinet.net/index.htm[5] 網站架構：王品木屋首頁最新消息產品成品瀏覽最新案例建材簡介施工流程木屋特色除蟲防治工程熱泵熱水系統

(17)

這個網站除了架構之外，還附設(內容)和(連絡我們) 網站優點： 1. 介紹每一個產品多種樣化，走向木屋多樣化發展，增進接觸大自然的機會。 2. 有介紹除蟲防治工程，以確保木屋安全。 3. 包含外國進品的木材拆解過程，容易了解如何建造過程及技術拆解。網站缺點： 1. 大部份的資料放在首頁，大多於的文字在密集。 2. 有提出相關的價錢，卻無法掌握真正價錢是多少。 3. 首頁方面的格式排列太亂。本文討論建議： 1. 首頁不要太多於文字密集，改採用放圖片格式。 2. 首頁方面要放入動畫，以增添的樂趣。 3. 必須要把格式排列整齊及分類的內容。 網站名稱：尚霖休閒傢俱館（請參考附錄 6） 網址：http://sunleisure.com.tw/front/bin/home.phtml/[6] 網站架構：圖 2- 6 尚霖休閒傢俱館網站架構圖這個網站除了架構之外，還附設商品項目（包含木屋及建材）尚霖休閒傢俱館公司簡介購物流程需求購物車聯絡我們會員及經銷商專區

(18)

網站優點： 1. 有購物車功能和購物流程說明，他的訂購方法有很多比較方便。 2. 有會員功能。 3. 商品項目分類成很多種以方便購買。 4. 會說明所有產品特性和功能。 5. 有教木製，金屬及其他家具如何保養。網站缺點： 1. 背景都是一片空白，感覺空蕩蕩，沒什麼內容，不容易吸引人。 2. 庭院造景互聯網還在設立當中。本文討論建議： 1. 背景改採用多樣化的圖形，以增添樂趣。 2. 首頁方面必須要加入動畫。 3. 有些部份必須要提早完成，妥善計畫。 網站名稱：原木工仿（請參考附錄 7） 網址：http://www.wood-house.com.tw/[7] 網站架構：圖 2- 7 原木工仿網站架構圖原木工仿首頁公司簡介服務項目產品介紹裝潢實景我們的店聯絡我們

(19)

網站優點： 1. 首頁 FLASH 作的不錯，有吸引人想點進去看的樣子。 2. 網頁格式方面排列很整齊，有放許多相關木屋的圖片。網站缺點： 1. 顏色不夠鮮豔，太單調。 2. 項目分類太少。 3. 沒提到重要的資料，如：安全性、建材特質、建材過程的記錄。本文討論建議： 1. 背景方面要改採用隨和性，展現出木屋的風格。 2. 必須要提出安全性、建材特質、建材過程方面都要考量。 網站名稱：惠宇木作工程（請參考附錄 8） 網址：http://www.webmaker.com.tw/woodworker/index.html[8] 網站架構：圖 2- 8 惠宇木作工程網站架構圖網站優點： 1. 網頁佈置簡單明瞭惠宇木作工程關於惠宇服務項目惠宇優勢工地實績

(20)

網站缺點： 1. 沒有成果實績照片可供參考，難了解施工品質，顧客較難取信。 2. 對於惠宇也只說明他的經營觀，說自己認真負責，會讓客戶滿意再滿意，但要如何負責讓客戶滿意，施工流程等等之類的沒有具體說明。 3. 網頁整個方面太單調了，沒放入木屋的圖片本文討論建議： 1. 要取得客戶的信任的話，必須要提供木屋製作過程的實績照片 2. 提供完善的建材特質及安全性防治，可提升服務品質 3. 網頁必須要設定項目分類及超連結，首頁必須要加入動畫。 網站名稱：美家木屋公司（請參考附錄 9） 網址：http://www.meijia.com.tw/[9] 網站架構：圖 2- 9 美家木屋公司網站架構圖網站優點： 1. 對於公司地址不清楚者有地圖可查看公司位址 2. 網頁佈置簡單明瞭網站缺點： 1. 網站並沒有太多服務。互動性蠻差的。美家木屋公司關於美家木屋特色木屋瀏覽聯絡美家

(21)

2. 關於美家網站沒做太多介紹，所以也就不清楚，沒辦法了解該公司，不如直接去該公司洽談了解自己所需的。本文討論建議： 1. 必須要提供服務品質，提高互動性。 2. 關於美家提供一些資料，讓客戶了解該公司。 網站名稱：大司細木工（請參考附錄 10） 網址：http://www.dastool.com.tw/introduction.html[10] 網站架構：圖 2- 10 大司細木工網站架構圖這個網站除了架構之外，還附設目錄分類的功能網站優點： 1. 對於木工想要有更深層的了解有相關書籍光碟影帶可訂購。 2. 項目分類相當清楚。 3. 產品除了圖片可參考，還有列出詳細規格，解說。 4. 有新聞消息。大司細木工首頁新聞目錄相本工房問題聯絡

(22)

網站缺點： 1. 對於大司公司沒多做簡介及介紹。 2. 網頁整個方面太單調了，顏色分配不對。本文討論建議： 1. 要做註明的簡介及介紹，讓客戶了解。 2. 首頁要加入動畫，以增添樂趣。 網站名稱：東月堂創意設計有限公司（請參考附錄 11） 網址：http://www.ismoon.net/index.htm[11] 網站架構：圖 2- 11 東月堂創意設計有限公司網站架構圖網站優點： 1. 有加盟的優勢，公司會提供完整的人員訓練與技術指導。 2. 每個月還會在雜誌，網路，各大媒體刊登廣告，以增加各店來客數量及提升公司東月堂創意設計首頁關於東月堂產品專區多彩多流明系列創意原木傢俱及設計原木製材與加工木材二三事展售中心及加盟購買與服務

(23)

形象。 3. 有很多的樣本，完成實品和圖面照片可幫助客戶增加靈感與意見，還有專門設計師設計解說。網站缺點： 1. 沒設定會員登錄。 2. 沒有留言版功能可詢問問題。本文討論建議： 1. 提供會員登錄，讓客戶有意願加入會員。 2. 要設留言板，以方便客戶有回答的權利。 網站名稱：建新屋林業工程團隊（請參考附錄 12） 網址：http://www.woods58168.com[12] 網站架構：圖 2- 12 建新屋林業工程團隊網站架構圖這個網站除了架構之外，還附設木構造、合板、木製品、地板等四種事業部網站優點： 1. 所有的建設材料都有完整的說明特性和功能。 2. 有把所有材料的規格尺吋都有列出表。 3. 所有工程依所用的材料來區分開來，以便按需求來訂購。 4. 產品規格需求表作的非常詳細。建新屋林業工程團隊產品介紹產品規格需求表廠商作品介紹參考資料

(24)

網站缺點： 1. 無報價表以評價。 2. 網頁內容的連結選項、圖片、名稱都重復使用，感覺網頁都一樣沒什麼改變容易誤認是一樣的內容。本文討論建議： 1. 網頁整個方面必須要分開使用，儘量更新不一樣的內容 2. 提供初步報價表來評價。 網站名稱：大和木屋（請參考附錄 13） 網址：http://www.dahoo.url.tw/[13] 網站架構：圖 2- 13 大和木屋網站架構圖網站優點：大和木屋首頁木屋工程實績景觀工程實績屋頂型式門窗建材衛浴設備陽台露台施工作法友好連結關於我們

(25)

2. 所有圖片有介紹完整木屋製作工程的經過。網站缺點： 1. 網頁上有些連結方面的內容還沒做好。 2. 網頁上左邊的格式背景太單調了。 3. 有一些地方無法顯示圖片。本文討論建議： 1. 網頁上左邊的格式背景採用隨和性。 2. 網頁上有些連結方面儘速修復。 3. 有一些地方的圖片重新上傳。 網站名稱：張雲鵠木構建築（請參考附錄 14） 網址：http://myweb.hinet.net/home5/lcc5826/index.htm[14] 網站架構：圖 2- 14 張雲鵠木構建築網站架構圖網站優點： 1. 施作前做連接位置的照片還有地板施作情形的照片都有附上，有完工還有施工照片。網站缺點： 1. 網頁過於單調，沒有太多吸引人的地方。本文討論建議： 1. 計數器還未修復張雲鵠木構建築公司簡介施工照片完工照片內政部建築研究計畫報告聯絡我們

(26)

2. 網站功能服務太少，不能線上報價訂購。 網站名稱：晉風國際木屋景觀建材網（請參考附錄 15） 網址：http://woody.idv.tw/[15] 網站架構：圖 2- 15 晉風國際木屋景觀建材網站架構圖這個除了架構之外，還附設成為會員及檜木浴缸系列這兩種功能網站優點： 1. 有網路估價和後勤維修-付費諮詢，還可以同業木工加盟。 2. 有監工顧問服務，不過並非一般監工，他提供之監造顧問服務將提供，多年來的技術經驗，彈性的服務方式可以由業主決定現場服務日數，業主可以隨時解除此項服務(以日為單位)，待需要時再派員前往。主要在於避免瞎子摸象、濫用浪費材料、工程延誤與錯誤施工，將施工可能發生的問題與延誤降到最低的程度以確保構造物的最高品質。網站缺點： 1. 有些圖片開不起來。 2. 網頁開啟很慢。本文討論建議： 1 還有 DIY 供料專區，如果可以把工具使用方式圖文說明一下會更好。張晉風國際木屋景觀建材網公司簡介建材事業部木屋事業部檜木浴缸系列 DIY 供料專區

(27)

規畫與期許 我們的網站主要採用創新的方式展現出獨特風格及木屋味道，我們一組收集很多相關木屋的資料及網站，再加上挑選十五個網站來分析優點與缺點，針對我們的網站如何運用策略來引起客戶消費的慾望及設計趣味的動畫，同時還考慮如何設計完善的功能，以方便提供給客戶們查詢。

2.2 網頁技術

 2.2.1MYSQL[23]

 2.2.2PHP[24]

 2.2.3FLASH[25]

 2.2.4PHOTOIMPACT12[26]

 2.2.5Dreamweaver8[27]

2.2.1

MYSQL 簡介 MySQL 是一個快速、多執行緒（multithread）、多使用者且功能強大的關聯式資料庫管理系統（relational database management system, RDBMS），可以與 C、C++、Java、 Perl、PHP 等語言很容易的連結，可以運行於多種平台上，例如：Solaris、RedHat、Linux、 FreeBSD、OS/2、Windows ... 等等。MySQL 並不是一個 Open Source 的計劃，因為其版權在某些情況下是需要付費的，例如將它與其他產品包裝販售。不過，大體上來說，個人及非營利單位使用它是免費的，而 MySQL 所收取的授權費主要來協助 MySQL 研發所需，使 MySQL 得以更加茁壯。在 MySQL 中並不常用 GUI 介面，但是也因為這個原因讓它在各個平台都適用，在某些平台上當要遠端登入時，使用的是文字模式，這時這個文字模式就發揮它的效用，相較於其他同級資料庫的介面，或許會不適應，但是經過一段時間後會發現，不使用 GUI 介面能夠使 SQL 語法用的更熟練。

(28)

 它便宜（通常是免費）。  它的網路承載比較少。  它經過高度最佳化（Highly Optimized）。  應用程式透過它做起備份來比較簡單。  它為各種不同的資料格式提供彈性的介面。  它較好學，且操作簡單。  它標榜的是，你負擔得起的客戶支援

2.2.2

PHP 簡介 PHP（“PHP: Hypertext Preprocessor”，超文件預處理器的字母縮寫）是一種被廣泛應用的開放源代碼的多用途腳本語言，它可嵌入到 HTML 中，尤其適合 WEB 開發。 PHP 使用原因正因為 PHP 是免費的，因此任何人都可以訪問 PHP WEB 站點，下載完整的源代碼，而且學習容易與法簡單，類似Ｃ語言，有經驗的可以輕鬆上手，另外 PHP 可以編譯成具有與許多資料庫相連接的函數。 PHP 與 MySQL 就是現在絕佳的組合。還可以自己編寫外圍的函數取間接存取資料庫。更重要的是用 PHP 編寫的代碼執行起來會更快，能實現同樣功能的 PHP 代碼，不用改變就可以在不同的 WEB 伺服器上、不同的操作系統下執行。就憑這一點，你就已經有足夠的理由選擇 PHP。

2.2.3

FLASH 簡介 Flash 是 Macromedia 公司開發的網頁多媒體製作軟體，向量繪圖與動畫編輯功能，簡易地製作連續動畫、互動按鈕、繪圖與音效在您的網頁中使用！可以不需要任何程式腳本即可在網頁中增加互動式多媒體。互動式的動畫和影音同步效果使網頁繪圖更加生動活潑，使用了 Flash 製作的任何物件，皆可以時間軸與動態路徑 (Path-Based) 的動畫設計方式，由淺入深，容易學習與使用！ Flash 提供了很棒的線上教學。只有以向量為基礎的 Flash 多媒體，才能流暢地呈現在 Internet 上，即使放大縮小也不降低本身品質。

(29)

FLASH 使用原因１、使用向量式圖形技術來製作動畫，它使檔案容量較小（因為向量圖形是使用數學函數來記錄圖形中的屬性）；而且將向量圖放大或縮小，也不會失真，最重要的是檔案容量也不會改變。２、可為網頁配上悅耳動聽的音效，而且是以 MP3 的音樂壓縮格式壓縮，可大幅降低聲音所佔據的檔案容量，也可保有高品質的音質。〔可匯入 WAV (Windows)的聲音檔〕。３、採用 Stream 資料流傳送方式，在檔案下載的同時即可流暢的播放，不須等到資料全部下載完畢才能觀看動畫。４、提供 Actions 指令設定環境，可使網頁作到極佳的互動性。５、為了讓使用者可以在完成動畫之後，立即看到動畫在網頁中的效果，Flash 可直接將動畫出版成網頁，產生 HTML。６、具有抗鋸齒的功能，可讓文字或影像的邊緣都非常平滑。

７、加強與支援點陣式圖形處理 (Enhanced Bitmap Support)，使之可旋轉及拉長等功能。

2.2.3

Photoimpact12 簡介 Ulead PhotoImpact12 大革新，從數位相片編修、影像繪圖、網頁設計到創意分享輸出及多媒體管理，是您影像處理的最佳幫手，讓影像有看頭、創意大不同。全新一代的 PhotoImpact12 擁有超多專業處理影像的特效與技術，操作介面簡單且容易上手，獨家創意影像範本讓您的數位影像生活化，提供 130 組影像範本，輕鬆將您的數位相片置換合成，製作各式名片、賀卡、月曆、明信片、CD 標籤，甚至您可以發揮創意設計，做出酷炫具個人風格的影像範本，直接列印輸出或 Blog 分享給親朋好友；智慧小幫手提供相片編修、網頁部落格設計或 DVD 選單製作的數位學習，直接連結進入您所需要的工具進行操作；簡單易懂的快速修片模式給初學者及經常需要編修數位相片的使用者，快速且自動化的編修您的數位影像，如數位曝光、自動白平衡、減少雜訊、移除紅眼…等功能，全螢幕雙重檢視您編修的數位相片，打造專業高品質的數位影像。此外

PhotoImpact12 支援更多專業數位相機的 RAW 檔，高效能的 RAW 編輯器可輕鬆調整其曝光、色溫、白平衡…等編修特效，完全符合攝影師對影像編修的專業需求。

PhotoImpact12 豐富您的影像創作樂趣，精彩多樣化的影像呈現，是一套讓創意夢想實現的影像編修軟體。

(30)

Photoimpact12 使用原因適合初學入門，簡單易懂的操作介面可以快速編修，在編輯影像時，有智慧小幫手會指引您完成基本和進階的相片編輯，並且可自動消除數位相機在室內或夜景模式所產生的雜點，讓原始的細緻影像瞬間重視，還可直接拖拉物件調整文字大小，並且做出各種環繞、彎曲及扭曲 2D 與 3D 文字，甚至加上框線、陰影，設計出無可比擬的文字花樣。不需要了解複雜的程式設定及指令，PhotoImpactR 12 內建網頁範本可自己任意調整設計，建立精彩豐富、創意活潑的網頁。

2.2.5

Dreamweaver8 簡介 Macromedia Dreamweaver 是一套功能強大而介面人性化的網頁編輯軟體及管理工具，它值得我們學習的地方，不只在於軟體本身的優點，更在於它與其他軟體的相容整合，功能的全方位延伸，與目前網際網路的多媒體化及動態資料庫的結合。學習此套軟體來當做我們進入網路專業領域的入門根基軟體是最適合不過了！如果我們設計一個複雜的電子商務 (E-Commerce) 網站，可以用 Dreamweaver 來維護管理，如果我們設計一個多媒體形式 (Mulitimedia) 的網站，如 Shockwave Flash 多媒體格式、 DHTML，而 Dreamweaver 也可以發揮最完整的支援整合。 Dreamweaver8 使用原因他採用將世界級設計與程式碼編輯器合而為一的工具。可隨著使用者技巧的提升及網路技術的演進，為使用者提供支援和引導，並協助他們快速輕鬆地採用新技術與方式。統一的 CSS 面板可提供一種強大而簡單的方式，讓您了解套用至內容中的樣式階層, 並提供快速存取功能，讓您輕鬆進行修改，而不需瀏覽大量程式碼, 透過不斷嘗試和錯誤來完成修改，並可從 Macromedia Dreamweaver Exchange 取得超過 800 個免費下載的擴充功能。

(31)

第三章專題設計與規劃

3.1 專案規劃目標

本專題是以消費者角度來構想各種可能需要的服務，來提供各種實際需求功能，經我們討論分析，我們把各相關網站的優點集合加以運用，設計出更完善的網站功能，我們把它分為主要十一項： HOME首頁木屋知識 FLASH動畫首頁木屋常用建材實體寫真木屋款式and相關產品施工進度查詢線上估價售後服務關於公司留言板最新消息圖 3- 1 小木屋網站架構圖

(32)

對於木屋網站所分類的項目裡之中幾項還會再細分，下面就是對於這十一項做個大概解釋說明： 1、關於公司:對公司做個簡單介紹經歷，公司地址圖，有 E-MAI 與公司聯絡的管道。 2、最新消息:提供最新促銷熱門商品資訊 3、會員登入:加入會員可以定期收到 E-MAIL 最新消息，會員可享有優惠價。 4、木屋款式 and 相關產品:有的點閱率排行、一些木工相關的桌椅涼亭等等。 5、實體寫真:成果照片。 6、木屋常用建材:詳細說明各種木材特性用途介紹。 7、木屋知識:解說木屋該有的基本認知、認識，如何保養，一般大眾常會遇到的問題 Q&A 等等。 8、施工進度查詢:提供客戶方便線上查詢進度。 9、線上估價:由於客戶可能遍佈各地，無法一一到府解說，為了解省時間給客戶方便，故提供線上初步估價參考。 10、售後服務:售後維修與技術諮詢服務。 11、留言板:可以發問問題。

3.2 系統開發方法

系統開發方法有系統開發生命週期法、雛型法、螺旋式、階段式、漸增式、同步模式，本系統所採用的是開發生命週期法。系統發展生命週期 (System Development Life Cycle; SDLC) 是一有組織的方式用來開發一個企業的資訊系統。 [7]SDLC 又稱為瀑布模式 (Waterfall Model)，它將系統發展的流程分為幾個階段來進行。系統開發生命週期法包含系統規劃、系統分析、系統設計、系統建置、系統運行與支援，若在某階段發生問題，可回溯至前面的階段(如下圖 3-1)。各階段的介紹如下：１、系統規劃階段的目的是執行木屋相關知識和木屋網站調查進行可行性研究的工作。２、系統分析本專題網站要提供什麼樣的功能，功能需要裡的線上施工進度查詢和線上報價是我們的重點以及非功能需求則要做到會員資料的保密和查核。３、系統設計階段的目的在於產生能夠滿足新系統所有已經確認的需求的一份建設藍圖。

(33)

做系統安裝。５、系統運行與支援把有錯誤的更正，或是增加新的機能。圖 3- 2 生命週期圖

3.3 系統需求

非功能需求：１、操作性需求 1.1 瀏覽者可利用此系統了解更多的相關知識。 1.2 系統採用下拉式選單以便瀏覽者查看所需的知識，要明確清楚。 2、安全性需求 2.1 會員資料保密並且做查核。 3、效能需求 3.1 系統允許多個使用者同時登入。 4、文化與政治需求 4.1 不需要特別的文化及政治需求。功能需求： 1. 關於公司：簡單的介紹公司的位置、公司的發展史、公司的老闆。 2. 最新消息：提供最快最新最重要的資料給大家知道。 3. 會員管理：系統設計系統分析系統規劃系統建置系統運行與支援

(34)

3.1 系統必須要有管理會員資料的機制，會員們也可以在任何時刻修改基本資料。 3.2 必須是本站會員的身份登入到系統，才可以在留言版發表問題與文章。 4.木屋款式 and 相關產品：選擇想要的木屋款式和有關於木工的周邊產品，像木頭做的信箱、櫃子、椅子、桌子等等。 5.實體寫真：現在社會都講求看到真品的感覺，讓消費者有一個概念雛形。 6.施工進度查詢：讓客戶方便在有電腦或是可以上網的地方就能看到目前所做的進度，而不用大老遠跑去查看，就可以輕鬆的得知，省時又方便。 7.線上報價：可以先在網路上即時知道目前哪種款式哪種木屋蓋好大概要花多少錢，可以先馬上知道，然後再考慮要不要蓋，也可以貨比三家，這樣也不用怕被騙。

3.4 專題設備

表 3- 1 軟體設備軟體方面

作業系統：Microsoft Windows XP Professional 開發工具軟體：資料庫：MY SQL 網頁設計：PHP、Dreamweaver 8 繪圖軟體：PHOTOIMPACT 12 動畫軟體：FLASH 表 3- 2 硬體設備硬體方面電腦主機、掃瞄器、數位相機、印表機、電腦螢幕、滑鼠、鍵盤…..

3.5 專題時程規劃

(35)

(36)

第四章專題成果

4.1 需求分析

4.1.1 問題描述

搜索國內網站木屋相關網站並不多不齊全，木屋資訊缺乏，加上大眾對木屋印象都不太好，推廣更不易，楓清楊木工師傅基於這理由想提供更完善更齊全的網站進而與小組合作，而我們的重點將放在線上報價與線上施工進度查詢，作出最符合客戶的需求。

4.1.2 使用者需求

隨著網路的興起，各行各業網路資訊化服務是必然的趨勢，網路所帶來的方便迅速提升人們工作效率，也減少實體店鋪的支出的成本。但虛擬終究不能完全取代實體，現場的溝通協調，眼見看得到，手摸得到，才是最真實可信的，所以我們在這以楓清楊木屋公司實體店面為主，虛擬網路為輔，相輔相成，提供有木屋需求的客戶最完善方便的網站。

4.1.3 可行性分析

1、

操作性需求

1.1 瀏覽者可利用此系統了解更多的相關知識。 1.2 系統採用下拉式選單以便瀏覽者查看所需的知識，要明確清楚。 2、

安全性需求

2.1 會員資料保密並且做查核。 3、

效能需求

(37)

4、

文化與政治需求

4.1 不需要特別的文化及政治需求。

4.1.4 系統的目標

我們這次製作本專題的目地是在讓繁忙緊張的都市人可以透過小木屋更為接近大自然，本網站提供在線上就可以了解小木屋從無到有的製作過程，在家裡也可以上網詢問業者，自己想要建製小木屋的樣式款式，並且方便客戶線上估價和查詢施工進度。透過本站簡單且多元的操作畫面，讓使用者在這邊可以更容易的上手，自己衡量自己想要的木屋款式。

4.2 系統分析

本章包括有活動圖、使用案例圖、硬體架構圖

4.2.1 活動圖

活動圖(如圖 4-1)的目的，在於塑模系統整理的流程。一般來說，用來塑模企業處理的執行的過程。基本上，活動圖很像流程圖，你可以流程圖的一種推廣。活動圖提供給設計一個視覺化的工具，可以用來動態功能、檢驗使用案例描述、發掘使用案例的情節、案例執行時的其他路徑。

(38)

木屋工程動畫首頁關於公司留言板首頁最新消息施工進度查詢常用木屋建材木屋知識線上報價留言板實體寫真木屋款式 an d相關產品售後服務木屋款式涼亭桌椅其他圖 4-1 活動圖

(39)

4.2.2使用案例圖

使用案例塑模的重點在於，利用圖形的方式來討論系統所應提供的功能，對系統的功能提供一個清晰的輪廓。使用案例圖(如圖 4-2)從高層次的觀點描繪系統功能，並且將系統功能視覺化，也就是說，這個模型適合用來與計劃相關之管理階層人員解說系統功能。楓清楊木屋資訊網關於公司最新消息木屋常用建材實體寫真留言板線上報價施工進度查詢售後服務木屋款式和相關產品會員登入非會員會員註冊會員刪除會員管理者圖 4-2 使用案例圖

(40)

4.2.3 使用例案描述

使用案例(如表 4-1~表 4-11)的定義：「一個系統執行並且產生可觀察且對使用者有

價值的結果之一序列動作的描述」。所以使用案例是動作的描述，並且它還是一序列動

作的描述。使用案例描述系統行為的執行步驟，並且包含過程中的可能發生狀況。

表 4-1 使用案例 (木屋工程)

Use Case Name：木屋工程 ID：1 Importance Level：High

Primary Actor：瀏覽者(會員、非會員) Use Case Type：明細，必需 Brief Description：瀏覽者可在網路得到的木屋知識、報價、進度查詢。 Trigger：瀏覽者點連結

Type：外部

Normal Flow of Events： 1. 瀏覽者點首頁 FLASH 進入網站。 2. 瀏覽者得到木屋的相關知識。 a. 關於公司。 b. 最新消息。 c. 木屋款式 and 相關產品。 d. 實體寫真。 e. 線上報價。 f. 施工進度查詢。

(41)

表 4-2 使用案例 (會員註冊)

Use Case Name：會員註冊 ID：10 Importance Level：

Primary Actor：非會員、系統 Use Case Type：明細，必需

Stakeholders and interests：非會員-成為會員。

系統-收到會員註冊的要求，建立一筆新的會員資料。 Brief Description：非會員可以藉由註冊使自己成為網站的會員。

Trigger：瀏覽者註冊 Type：外部

Normal Flow of Events：

1. 非會員點選會員註冊。 2. 非會員輸入欲申請的帳號密碼及個人資料。 3. 填寫木屋申請單 4. 非會員點選確定送出申請資料。 5. 系統收到會員註冊的要求。 6. 系統建立一筆新的會員資料。表 4-3 使用案例 (會員登入)

Use Case Name：會員登入 ID：11 Importance Level：

Primary Actor：會員、系統 Use Case Type：明細，必需

Stakeholders and interests：會員-使用會員權限。系統-收到登入的要求。 Brief Description：會員可以藉由登入來查詢進度。 Trigger：會員登入

Type：外部

1. 會員輸入帳號密碼進行登入。

2. 系統收到要求登入的帳號密碼。

3. 系統進行驗證。

4. 系統確認帳號密碼正確。

(42)

表 4-4 使用案例 (修改會員資料)

Use Case Name：修改會員資料 ID：12 Importance Level：High

Primary Actor：會員、系統 Use Case Type：明細，必需

Stakeholders and interests：會員-修改個人基本資料。系統-收到會員修改的資料。 Brief Description：會員可以藉由登入來修改個人基本資料。 Trigger：修改會員資料

Type：外部

1. 會員輸入帳號密碼進行登入。 2. 系統收到要求登入的帳號密碼。 3. 矽統合對帳號密碼。 4. 系統確認帳號密碼正確。 5. 會員登入成功。 6. 會員點選修改基本資料。 7. 會員修改資料。 8. 會員點選確定送出。 9. 系統收到會員要求修改的資料。 10. 系統針對要求修改的會員資料進行更新。 11. 系統更新資料完成。 12. 系統傳送修改成公訊息給會員。表 4-5 使用案例 (實體寫真)

Use Case Name：實體寫真 ID：5 Importance Level：High

Primary Actor：瀏覽者 Use Case Type：明細，必需

Brief Description：瀏覽者可以在網路上看到真實木屋的照片。 Trigger：瀏覽者點連結

Type：外部

1. 瀏覽者點首頁進入網站。 2. 瀏覽者點選實體寫真選項。

(43)

表 4-6 使用案例 (施工進度查詢)

Use Case Name：施工進度查詢 ID：7 Importance Level：High

Primary Actor：瀏覽者(會員) Use Case Type：明細，必需

Brief Description：會員在網路上可以隨時看到木屋的施工進度。 Trigger：會員點連結

Type：外部

1. 會員點首頁進入網站。

2. 會員點選施工進度查詢選項。 a.點選日期

b.選擇照片觀看

表 4-7 使用案例 (木屋款式和相關產品)

Use Case Name：木屋熱門款式 ID：4 Importance Level：High

Brief Description：想知道有哪些木屋款式和一些木工相關產品 Trigger：瀏覽者點連結

Type：外部

1. 瀏覽者點首頁進入網站。

2. 瀏覽者點選木屋款式和相關產品選項。

表 4-8 使用案例 (線上報價)

Use Case Name：線上報價 ID：8 Importance Level：High

Brief Description：瀏覽者可以在網路上大概知道木屋預估花費。 Trigger：瀏覽者點連結

Type：外部

1. 瀏覽者點首頁進入網站。 2. 瀏覽者點選線上報價選項。

(44)

表 4-9 使用案例 (留言板)

Use Case Name：留言板 ID：9 Importance Level：High

Brief Description：會員可經由留言板來發表意見或是問問題，也可以發表文章。 Trigger：瀏覽者點選文章

Type：外部

1. 瀏灠者點首頁進入網站。 2. 瀏灠者者點選留言版選項。 a.瀏覽者選發表意見 (1).點選我要發表。 (2).輸入意見。 (3).點選確定送出。表 4-10 使用案例 (關於公司)

Use Case Name：關於公司 ID：2 Importance Level：High

Primary Actor：瀏覽者(會員、非會員) Use Case Type：明細，必需

Brief Description：瀏覽者可以在網路上知道公司的位置、發展史、老闆、聯絡

方式等等。

Trigger：瀏覽者點連結 Type：外部

1. 瀏覽者點首頁進入網站。 2. 瀏覽者點選關於公司選項。

表 4-11 使用案例 (最新消息)

Use Case Name：最新消息 ID：3 Importance Level：High

Primary Actor：瀏覽者(會員、非會員) Use Case Type：明細，必需 Brief Description：瀏覽者可以在網路上得知最新最快的消息。 Trigger：瀏覽者點連結

Type：外部

1. 瀏覽者點首頁進入網站。 2. 瀏覽者點選最新消息選項。

(45)

表 4-12 使用案例 (後台木屋和相關產品)

Use Case Name：後台管理 ID：2 Importance Level：Hight

Primary Actor：管理者 Use Case Type：明細，必須。

Brief Description：管理者放上產品做更新或修改。 Trigger：管理者登入

Type：內部

Normal Flow of Events： 1.管理者頁面登入。 2.執行產品的新增修改類別或資訊。

表 4-13 使用案例 (後台施工進度查詢)

Use Case Name：後台施工進度查詢 ID：2 Importance Level：Hight

Primary Actor：管理者 Use Case Type：明細，必須。

Brief Description：管理者根據會員填寫的施工申請單，放上圖片寫資料 Trigger：管理者登入

Type：內部

Normal Flow of Events： 1.管理者頁面登入。 2.查看會員寫的申請單 3.放上照片寫入資料，

(46)

4.2.4 循序圖

循序圖(如圖 4.-3~圖 4-15)是顯示使用者與系統之間的互動。實體寫真瀏覽者(會員和非會員) 實體寫真照片點選圖片可放大觀賞木屋實體照圖 4-3 循序圖(實體寫真)

(47)

木屋款式和相關產品

瀏覽者(會員和非會員)

木屋款式和相關產品

可在網路上選購相關產品意者可洽公司

(48)

瀏覽者(會員) 查詢進度看圖查詢進度(限會員) 管理者寫入資料放上圖片管理者寫入日期放上圖片施工進度查詢圖 4-5 循序圖(施工進度查詢)

(49)

瀏覽者線上報價可在網路上做估價線上報價收信 pop收信瀏覽者管理者回信圖 4-6 循序圖(線上報價)

(50)

瀏覽者(會員和非會員) 了解售後服務程序了解售後服務流程售後服務觀看問題留言發問問題發表問題觀看問題留言圖 4-7 循序圖(售後服務)

(51)

關於公司

可了解公司簡介，位址和聯絡方式

(52)

4.2.5 硬體架構圖

硬體架構圖(圖 4-16)的主要目的是用來呈現節點在執行時的配置，以及存在於各節點 中的元件。所謂的節點指的就是硬體。換句話說，部署圖呈現了系統的硬體配置靜態的觀點。以及在各項硬體中執行的軟體元件。在節點之間我們以直線連結，用來表示它們有溝通的關聯性。圖 4-16 硬體架構圖

(60)

4.3 系統介紹

畫面功能與目的：進入「楓清揚木屋資訊網」網站首頁前，秀出一部 flash 動畫，在 flash 裡有許多元件來組成一部動畫，本站採用匯入 flash 檔來製作 html 全螢幕，展現全螢幕的效果(如圖 4-17 所示)。

(61)

畫面功能與目的：這是「楓清揚木屋資訊網」的首頁，畫面上有些留言板、木屋知識、常用木屋建材、實體寫真、木屋款式 and 相關產品、施工進度查詢…等功能，畫面中央是描述更新一些功能(如圖 4-18 所示)。

(62)

畫面功能與目的：木屋知識有一些問題及常識、針對木屋優缺點來比較，可以選任一個問題，會出現木屋解答的頁面(如圖 4-19 所示) (如圖 4-20 所示)。

圖 4-19 木屋知識

(63)

畫面功能與目的：常用木屋建材裡提供一些木材的資料及規格、有組裝木屋的圖示解說(如圖 4-21 所示)。

(64)

畫面功能與目的：實體寫真裡製作跟相簿類似的頁面，放置木屋圖片後，會看到所有的照片，可以任點一張照片，會有放大的效果(如圖 4-22 所示)。

(65)

畫面功能與目的：木屋款式 and 相關產品裡有不時會更新一些產品、提供客戶來觀看產品，若要估價的話，請聯絡楓清揚木屋官方(如圖 4-23 所示)。

(66)

畫面功能與目的：施工進度查詢裡有分為加入會員、申請表單、查詢進度…等功能 (如圖 4-24 所示)。

(67)

畫面功能與目的：客戶有需要訂材料的話，可以在線上報價來評估有需求及資料，填完資料會寄給官方，官方會主動聯鉻客戶詳細說明。沒必要的時候請勿亂輸入，否則會聯絡不到客方及資料錯誤(如圖 4-25 所示)。

(68)

畫面功能與目的：從訂單過程到施工完成後，如果有疑問的話，請到售後服務觀看說明，也可以填一些問題給官方知道(如圖 4-26 所示)。

(69)

畫面功能與目的：關於公司提供地圖、地址、電話及簡介(如圖 4-27 所示)。

(70)

畫面功能與目的：最新消息裡會放一些最近的消息，提供給客戶了解官方的情況(如圖 4-28 所示)。

(71)

畫面功能與目的：任何人可以在留言板留言，但禁止灌水，攻擊對方，本站設計一些限制攻擊的語氣，請安心留言(如圖 4-29 所示)。

(72)

4.4 使用手冊

操作說明：flash 動畫跑完之後點 ENTER(如圖 4-30 所示)

圖 4-30 flash 動畫載入頁面

(73)

操作說明：首頁有各功能的連結(如圖 4-31 所示)

(74)

木屋知識操作說明：任點選一個疑問的問題(如圖 4-32 所示)

圖 4-32 木屋知識按

(75)

操作說明：會跳到所選擇項目的回答(如圖 4-33 所示)

(76)

常用木屋建材操作說明：介紹一些木屋常用的建築材料及規格(如圖 4-34 所示)

(77)

木屋實體寫真照操作說明：選擇想看的木屋寫真照片點選後會跳出視窗放大(如圖 4-35 所示)

圖 4-35 木屋實體寫真照按

(78)

畫面功能與目的：木屋款式 and 相關產品裡有不時會更新一些產品、提供客戶來觀看產品，若要估價的話，請聯絡楓清揚木屋官方(如圖 4-36 所示)。

(79)

施工進度查詢操作說明：這是「施工進度查詢」的登入畫面，必須先加入會員才可打帳號和密碼後進入(如圖 4-37 所示)。

圖 4-37 施工進度查詢輸入

(80)

會員登入操作說明：這是給使用者「加入會員」的資料表單(如圖 4-38 所示)

圖 4-38 加入會員輸入

(81)

操作說明：會員登入後進入的頁面(如圖 4-39 所示)。

圖 4-39 會員登入頁面按

(82)

操作說明：會員登入後，再修改會員的資料(如圖 4-40 所示)

圖 4-40 修改會員資料輸入

(83)

操作說明：會員登入後，可以申請施工進度表單(如圖 4-41 所示)

圖 4-41 施工進度查詢填寫單輸入

(84)

操作說明：申請施工表單後，可以觀看施工進度表(如圖 4-42 所示)

圖 4-42 查看施工進度按

(85)

操作說明:：施工進度的瀏覽畫面，點選圖片可放大(如圖 4-43 所示)

圖 4-43 施工進度查詢瀏覽畫面按

(86)

操作說明：點選任一張圖片放大，會顯示另一張圖(如圖 4-44 所示)

(87)

線上報價操作說明：必須先填寫線上報價單的資料(如圖 4-45 所示)

圖 4-45 線上報價輸入

(88)

售後服務操作說明：售後服務的一些程序流程並且可留言發問(如圖 4-46 所示)

(89)

操作說明:：如果有疑問的話，可以到售後服務留言版來問問題(如圖 4-47 所示)

圖 4-47 售後服務留言板輸入

(90)

操作說明：關於公司介紹及簡介(如圖 4-48 所示)

(91)

操作說明:：可觀看一些最新消息(如圖 4-49 所示)

(92)

操作說明:：瀏灠者可以觀看留言板、也可以留言、悄悄話(如圖 4-50 所示)

圖 4-50 留言板按

(93)

操作說明：這是輸入留言的地方，可以填暱、表情、是否悄悄話，如果不想公開的話，那可以不用輸入信箱及即時通。有很多功能讓你選擇想用的字型(如圖 4-51 所示)。

圖 4-51 新增留言輸入

(94)

後台操作說明：這是後台管理，必須有管理者來登入(如圖 4-52 所示)

圖 4-52 管理者登入輸入

(95)

操作說明:：管理者登入後，會看到一些管理的功能(如圖 4-53 所示)

圖 4-53 管理者登入畫面按

(96)

操作說明:：管理者可以刪除會員、觀看會員的資料(如圖 4-54 所示)

(97)

操作說明:：管理者可以新增施工照片、修改施工照片及刪除資料(如圖 4-55 所示)

圖 4-55 管理施工進度查詢按

(98)

操作說明:：點選修改/查看，可以看到管理施工進度表(如圖 4-56 所示)

圖 4-56 修改施工進度表按

(99)

操作說明：點選新增/修改後，可以放施工照片，並說明進度過程(如圖 4-57 所示)

圖 4-57 新增施工進度照片輸入

(100)

操作說明：木屋款式和相關產品後台頁面(如圖 4-58 所示)

(101)

操作說明：新增單筆產品頁面，輸入完資料按下按鈕產品新增成功(如圖 4-59 所示)

圖 4-59 新增單筆產品輸入

(102)

操作說明：新增類別畫面可自行輸入要新增的類別名稱(如圖 4-60 所示)

圖 4-60 新增類別輸入

(103)

操作說明:：修改產品的資料(如圖 4-61 所示)

圖 4-61 修改產品資料

(104)

操作說明：管理者更改密碼(如圖 4-62 所示)

圖 4-62 更新管理者密碼輸入

(105)

操作說明：管理者可以觀看對方的悄悄話、回覆對方的留言，也可以刪除留言 (如圖 4-63 所示)

(106)

第五章結論

拜休閒風氣倡導，近年有許多農場逐漸轉型經營休閒產業，在農場內建旅館，蓋度假木屋，不但吸引都市人前往度假住宿，也走出台灣另一種觀光產業型態，木屋逐漸開始盛行，網路風潮帶動一波波電子商務的風氣與商機，促使木屋業者走向數位化的時代，現在已經有越來越多的木屋網站，讓木屋市場競爭變的更加激烈，因此網站架設功能和操作性也變的更加重要。  系統完成之目標本專題針對木屋資訊系統，做了會員登入系統、施工進度查詢、線上估價等等，本專題的重點施工進度查詢，調查相關業者稀少有此功能，如有也稍嫌不完善，非會員一般瀏覽者都可以進入看到所有客戶的進度照片，我們將為此加強，設計合理，方便且快速達到客戶需要。  未來發展方向因高科技商務時代，什麼都需要便利，將來如果加入線上購物車系統，只要把你想買的木屋相關產品東西放入車上，木屋工程網就會馬上幫你出貨，而且很快就可以收到東西，省時又便利，況且現在木屋工程業還沒有那麼熱門，是值得投入的一環，也可以加上 FLASH 的一些小遊戲，讓你瀏覽網頁無樂趣，還可以加入如果製作木屋 DIY 過程的知識，讓需要想自己動手蓋木屋的人，可以輕鬆 DIY，只需要購買材料即可，對有錢有閒的消費者，也是一種樂趣，相信會更多消費者好奇這方面的資訊，讓木屋工程網站更充實更多利。

(107)

參考文獻

[1]杉魁居家生活館,http://www.fountlea.com.tw/ [2]丞懋木造有限公司,http://www.sunlist.com.tw/ [3]均旺興業有限公司,http://www.168a.com.tw/woodhouse/ [4]美家木屋公司,http://www.meijia.com.tw/ [5]張雲鵠木構建築,http://myweb.hinet.net/home5/lcc5826/index.htm [6]正昌木業有限公司,http://www.woodhouse.kong.tw/ [7]福泰木屋股份有限公司,http://www.fautai.com.tw/ [8]鉅隆木屋,http://www.glhs.com.tw/ [9]王品木屋企業有限公司,http://wang-pin.myweb.hinet.net/index.htm [10]華信木屋設計,http://www.homeplan.com.tw/ [11]原木工仿,http://www.wood-house.com.tw/ [12]勝巧企業有限公司,http://www.s-q.com.tw/front/bin/home.phtml [13]惠宇木作工程,http://www.webmaker.com.tw/woodworker/index.html [14]大司細木工,http://www.dastool.com.tw/introduction.html [15]雅室裝潢工程行,http://yase.myweb.hinet.net/index.htm [16]晉楓國際木屋景觀建材網,http://woody.idv.tw/ [17]大和木屋,http://www.dahoo.url.tw/ [18]尚霖休閒傢俱館,http://sunleisure.com.tw/front/bin/home.phtml/ [19]建新屋林業工程團隊,http://www.woods58168.com/ [20]東月堂創意設計有限公司,http://www.ismoon.net/index.htm [21]美林林業有限公司,http://www.meilinwood.com.tw/ [22]高宇木造樓梯扶手,http://www.kaoyeu.com.tw/index.htm [23] http://taiwan.cnet.com/builder/backend/story/0,2000027264,20019624-2,00.htm網站建構 [24] http://www.bonny.idv.tw/cgi-bin/lb5000/printpage.cgi?forum=21&topic=4兔兔電腦論壇 [25] http://www.twisu.com.tw/軟體大學 [26] http://www.ulead.com.tw/pi/features.htm友立資訊 [27] http://www.adobe.com/tw/products/dreamweaver/?promoid=BINRADOBE

(108)

附錄

附錄 1

(109)

附錄 3

(110)

附錄 5

(111)

附錄 7

(112)

附錄 9

(113)

附錄 11

(114)

附錄 13

(115)

木屋工程資訊網之建置與開發

元培科技大學資訊管理系畢業專題

結案報告