網頁呈現方式

圖5-37 現況與模型對照：齊東街 13 號現況(左) RP 模型(右)

第三節 網頁呈現方式

雷射3D 掃瞄攝影，運用於齊東街的網頁，在網頁的建置上，期望，可以呈 現沒有門檻的使用狀況，因此，在網頁的頁面的設置上，有多方考量，例如：更 加淺顯易懂是為其一。另外，在網頁基本呈現的效果上，希望呈現比較有動態的 效果，因此，決定採用Macromedia Dreamweaver MX 和 Macromedia Flash MX 這兩套軟體互相搭配使用，讓網頁的呈現可以更為活潑，而不會過於呆板。

由於此網頁需要展現的內容，包含了許多軟體的應用，而且在主要內容表達 上牽涉到很多的點雲的呈現，致使得檔案往往過大，因此，在瀏覽的過程中，需 要等待非常長的時間，可是，為了品質的完善，所以，只好犧牲掉了使用者的時 間，故需要每位使用者，能多點耐心等待成果顯現。

網頁主要分為幾個部份呈現，首頁、計畫緣起、環境介紹、掃瞄技術介紹、

掃瞄成果展示、線檔圖面、點雲呈現五部份。每一個部份，會因為個別的內容與 需求，仍然會有和其相關內容連結的情況發生，以達到讓整個網頁內容的充實與 完整，如圖5-38 所示。

圖5-38 網頁架構圖

在網頁初期建置時，有很多事項必須要先仔細考量、省慎思考的，這樣才不 會導致後續網頁和資料新建及維護上的困難，以及如何讓使用者在使用上能夠更 加的得心應手，都是一些需要用心考量的地方。

一、網頁設計之考量點

在網頁建置前，應先有完整的規劃，和詳細而縝密的計畫，這樣才不會導致 後續網頁和資料新建及維護上的困難，如何讓使用者，以下是此網頁，在初期建 置過程中的考量重點：

1. 新舊使用者使用便捷性考量：

先讓進入瀏覽的使用者，對齊東街的沿革，有些許的瞭解，因此，有做了一 個簡單的首頁，如圖5-39 所示。

圖5-39 網頁首頁呈現 2. 軟體的應用：

由於，此網頁在點雲的後續應用的處理上，用到VRML 軟體，做點雲的環 繞呈現、用AutoCAD 描繪點雲，處理成一般建築界使用的平、立、剖面圖，將 其處理成3D 物件呈現。牽涉的軟體有三套。

3. 網頁架構設計：

在進入網頁正文內容之後，首先，會先看到在網頁的上方部分，有呈現此網 頁的標題「齊東街街廓及日式宿舍掃瞄」，接著在上列，有六個選項，可以選取，

分別為「計畫緣起」、「環境介紹」、「掃瞄技術介紹」、「掃瞄成果展示」、

「工作照片」、「聯絡我們」，每一個部分，均因應個別的需求，還會有其他部 分的相關連結，呈現在網頁左邊主要內容的呈現格中，再依其需求，再繼續做後 續的連結；在網頁右邊主要的內容呈現格中，在右下角的部分，有做一個此網頁 的名稱，讓使用者，可以瞭解到目前是在瀏覽哪一部份的網頁，以避免瀏覽上的

迷失。在網頁左下方列的地方，有四個網站可以連結，1、內政部建築研究所，2、

台灣科技大學，3、台灣科技大學建築系，4、台灣科技大學建築系 CAAD 研究 室，使用者可以針對自己的需求，繼續做下一個連結的動作，如圖5-40 所示。

圖5-40 網頁呈現架構圖 二、網頁內容介紹

(一) 首頁

在「齊東街街廓及日式宿舍掃瞄」此網頁的首頁的建置中，首先就是先大略 的用街廓平面圖的方式，讓使用者先對齊東街的輪廓有概略的描述，使其有齊東 街的大略瞭解，之後進入瀏覽網頁時會比較知道齊東街的資訊，如圖5-41 所示。

圖5-41 首頁呈現網頁

網頁標題區

網頁內文區

相關網頁 連結區 網頁內文 連結區

版權說明

(二) 計畫緣起

在計畫緣起這一頁中，向使用者，說明何謂文化資產，以及古蹟和歷史建築 基本資料的調查，和蒐集為最基本的工作。說明此研究是用3D 雷射掃瞄器，來 作為文化資產古蹟和歷史建築類的基本資料檔案建置的儀器，也是說明，此儀器 掃瞄出來的資料，將成為此網頁內容環繞的重心。提供各縣市政府、專業人員、

研究者及一般民眾使用豐富且正確的資料搜尋，進一歩更可作為文化創意產業之 使用素材，加強文化資產之使用及其附加價值，如圖5-42 所示。

圖5-42 計畫緣起呈現網頁 (三) 環境介紹

在環境介紹這一頁中，對使用者說明齊東街的古蹟和歷史，本計畫，是掃瞄 都市街廓(block)內景觀，目的在：建構歷史建築及周遭環境的精確數位記錄，以 都市景觀現況資訊，為擷取的對象，運用3D 掃瞄器，記錄其間的實體及活動，

擷取街廓內建物、植栽、開放空間等靜態景觀，配合市民生活中之人、車、物流 等動態景觀，建構一外觀描述模型，其高精度之都市生活與環境資訊系統。

內容介紹以齊東街為範圍，掃瞄忠孝東路二段、濟南路一段、金山南路一段、

杭州南路一段圍繞街廓內現況，各日式住宅位置等，如圖5-43 所示。

圖5-43 環境介紹呈現網頁 (四) 掃瞄技術介紹

在掃瞄技術介紹這一頁中，所呈現的內容包括：

1.介紹何謂 3D 雷射掃瞄 2.整體的掃瞄規劃，

3.後續掃瞄的前置作業上，需配合實際的環境狀況，如測站的規劃分析、接 合點的設置計畫、高點測站的架設…等，如圖 5- 44 所示。

圖5- 44 掃瞄技術介紹呈現網頁 (五) 掃瞄成果展示

1. 線檔圖面

點雲檔案在使用AutoCAD 描繪之後，在 AutoCAD 軟體中，可經由發佈 (publish)的功能，將檔案發佈成 DWF 的格式檔案，然後，經由 ActiveX 物件程 序模型，展現於網頁瀏覽器上。(本站使用新 DWFX 格式，可更快速且穩定的呈 現圖面)

DWF(Design Web Format)及 DWFX 是 Autodesk 公司所研發出來的一種可以

Design Review 是 AutoCAD 讓 DWF 格式檔，可以在瀏覽器上運行的程式，

在使用者發佈DWF 檔案時，可以將模型、圖層、圖塊、視角等連帶發佈，這樣 在瀏覽器上使用Design Review 時，可以依照需求，做不同方式的呈現。

藉由Design Review 程式，可以做到以下五點(Autodesk Design Review 說明 檔)： 後，依序可以點擊相關的圖面，進入Design Review 瀏覽的頁面，用移動物件、

視窗縮放、量測距離、塗鴉等功能，做相關圖面之檢視和列印。

2. 點雲呈現

點雲呈現這一頁的網頁，在外觀點雲呈現方面，分為二個部分：外觀點雲〝點〞

呈現、外觀點雲〝面〞呈現、剖面點雲〝點〞呈現，利用此三種不同方式的呈現，

如圖5-45 所示。

圖5-45 點雲呈現網頁 (六) 聯絡我們

當使用者瀏覽網頁時，發現了網頁無法顯示或是需要更進一步的資訊時，可 聯絡我們，留下E-mail 或其他的聯絡方式，本研究室會盡快回覆使用者的問題，

解決使用者的疑慮。

圖5- 46 聯絡我們呈現網頁 三、點雲呈現網頁外部網路測試

點雲呈現裡面，所展示的點雲物件，是以 VRML 格式製作，除便於使用者，

可以在網路上瀏覽外，也可以讓使用者，在瀏覽的過程中，更為順暢。但是，由 於本研究掃瞄出來的物件的檔案大小，從2MB 到 700MB 不等，使用者在每一 次檔案瀏覽的過程中，需要等待的時間，也不一定，因此，在外部網頁的測試，

是必要的。本次，在外部網路的測試過程中，採用的電腦規格，如表5- 5 所示。

過程中，以點呈現的方式，測試了6 個檔案、以面呈現的方式，測試了 1 個檔案、剖面點呈現的方式，測試了1 個檔案，在測試之後發現，由於 VRML 檔的顯像必須將檔案完整預載後方可報行，故等待下載的時間較久，但在進行旋 轉瀏覽時，轉動起來都很順暢，因此，本網站以開新Windows 的方式進行，下 載資料的同時，可瀏覽web 中的其他內容，所以，使用者在等待的過程中，不 會有不耐煩的情形產生。在〝面〞的方式，呈現的過程中，只要大於30 萬面的 物件，等待的時間都要1 分鐘以上，在接近 100 萬的面的數量的時候，甚至，要 等待4 分鐘以上網頁才會有物件呈現，而且，在瀏覽時非常不順暢，因此，建議 要瀏覽用〝面〞的方式呈現的網頁使用者，必需要有一定的耐心等待。

建議不論是使用〝點〞的方式或是〝面〞的方式，來瀏覽的使用者，只要電 腦的RAM 在 1GB 以上（越大越好），且配備有獨立顯示卡，旋轉物件的效能 都將有所提升。

表5- 5 外部網路測試連結速度，採用電腦規格表 CPU Intel Core2 Due 1.86GHz

RAM 3.0G

顯示卡 NVIDIA Geforce 7600GS 網路速度 Cable Modem 2M/256K

第六章 結論與建議