Adobe Dreamweaver CS4─增加新的即時檢視與輔助功能，簡化網頁編輯流程

這套網站建置工具發展至今，目前最新的版本是10，功能上變化不大，主要提供編輯上的輔助功能，改善網頁編輯的效率。其中，較受注目的是即時檢視與CSS相關功能。

從此版本的操作介面來看，使用環境總共可分為8種預設工作區模式。若是偏好較寬敞的設計空間，可以選擇設計人員精簡模式，並將選單縮成圖示。在程式碼與設計頁面的分割選單中，多了垂直分割的選項，可以配合寬螢幕顯示的設計環境。

即時檢視功能可增加預覽方便性
即時檢視功能是這次新增功能中最明顯的1項，相較於以往我們按下F12以瀏覽器預視網頁，現在我們可以在Dreamweaver內直接預覽網頁實際呈現的效果，而不需要再打開瀏覽器，並且，可以直接存取程式碼，例如修改程式碼，變更後可立即反應在顯示畫面上。

除了增加預覽的方便性，即時檢視還有一個不錯的優點，就是能夠凍結JavaScript，執行該功能後我們可以編輯其中的程式碼與CSS語法，重新整理網頁後即可觀看變更結果。此外，Dreamweaver還提供了即時程式碼檢視功能，可在與網頁互動時，進行動態變更。但要注意的是，該功能只有在即時檢視時可以使用。


Dreamweaver新增了即時檢視與即時程式碼功能。前者可讓我們在「瀏覽器」下，直接存取與編輯程式碼。而即時程式碼則是在「Dreamweaver」下顯示程式碼，兩者效果很類似。

加強CSS與Ajax相關功能
網頁製作時，我們也可利用Dreamweaver新提供的關連檔案（Related files）與程式碼導覽器。網頁中通常可能會包含多個外部程式語法檔案，利用新增的關連檔案功能，可將網頁所用到CSS與JavaScript等相關檔案一併開啟，以利編輯。而在編輯HTML區域時，滑鼠游標只要稍微停留不動（約三秒鐘時間），滑鼠游標的位置會出現一個圖示指示器，我們按一下這個按鈕，即啟動程式碼導覽器，從中顯示目前的CSS原始碼，並可以直接點選、編輯。此外，我們也可以在屬性面版中建立CSS規則，減少程式碼的撰寫，並且，不同於舊版本會新增出多餘的樣式。

在程式碼撰寫環境中，系統可以用反白標示出無效的程式碼，在資訊列顯示語法錯誤警告。此外，我們在編寫程式碼時，系統會跳出程式碼提示，對於開發Ajax與採用JavaScript Framework時很有幫助。

例如，在Spry這套Dreamweaver內所內建的Ajax框架套件上，開發人員能夠做出不同的互動式頁面，點選Spry標籤面版後，可以很直覺地製作出標籤頁面的效果。在這一版中，框架的應用還新增兩個不錯的設計，例如：HTML資料集（HTML data sets），在插入Spry功能表中選擇「Spry資料集」，我們可使用HTML表格來製作動態網頁－－只要照著系統提示的步驟點選，即可在網頁中讀入表格欄位中的資料，而且還可做出資料排序的動作，相當方便；而最下方新增的是「Spry工具提示」，可製作頁面操作的提示效果。

此外，在這一版本中，還有一個很特別的功能InContext Editing，可以在瀏覽器上直接修改允許的編輯區域。執行此功能之前，我們需先將網站在Adobe.com註冊，而修改網頁內容時，同樣也需要先登入該網站。文⊙羅正漢