Adobe Dreamweaver主畫面提供了程式碼、設計、即時總共三種編輯模式，在此以內嵌JaveScript程式碼的html文件示範，具體說明如何切換不同模式，進而瞭解動態網頁呈現效果。

一、Dreamweaver編輯狀態

在Dreamweaver操作的主畫面，右上方是目前編輯狀態，包括「程式碼」、「分割」、「設計」三種，為了說明這些編輯狀態的差異，以兩個網頁文件作為範例，一個是有JavaScript動態程式碼，另外一個沒有。

二、設計與即時模式

將編輯狀態切換為「設計」時，可以看到畫面並沒有顯示程式碼，除了視覺化呈現之外，還可以在設計模式下直接輸入文字資料，類似於WordPress所見及所得的視覺化編輯器。另外注意到「設計」右邊可以下拉選單，除了目前的「設計」之外還有一個「即時」選項。

三、即時模式特性

切換到即時模式，跟設計模式一樣有視覺化的網頁呈現，並且會顯示目前所選取的html標籤，還有一些工具可以使用，例如在尺規上方有提示按加鍵即可以「新增媒體查詢」，這個在之後實際操作會更加熟悉其作用，在這裡只需重點式知道即時與設計模式之間的差異即可。

四、分割視窗檢視

延續上個步驟再點選「分割」之後，主操作畫面分成兩個視窗，一邊是設計或即時，另外一邊則是原始程式碼，此時在左右兩邊進行編輯都會同時更新。

五、JavaScript Html文件

在此之前的步驟是沒有JavaScript的html文件，現在切換到有JavaScript的html文件，先以程式碼作為編輯模式，關於這裡作為範例的JavaScript程式碼，可以參考贊贊小屋相關的文章。

六、JavaScript訊息視窗

將帶有JavaScript的Html文件切換到「即時」模式，畫面會立即跳出以JavaScript所編寫的動態即時視窗。

七、JavaScript網頁文字

在動態呈現JavaScript提示文字視窗之後，可以看到在「即時」編輯的狀態也能看到JavaScript所編寫的靜態網頁文字。

八、JavaScript設計模式

將這個帶有JavaScript的Html文件切換到「設計」模式，不僅沒有JavaScript動態視窗，在網頁上也看不到JavaScript的靜態文字。

Dreamweaver編輯模式

經過這篇文章實際操作測試之後，可以得知Dreamweaver即時模式是完全以瀏覽器解析網頁html的方式呈現，設計模式則是單純顯示html實質資料內容，這兩個模式再搭配原始程式碼編輯模式，並且必要時分割視窗檢視，設計網頁如果可以善加利用，一定可以提升作業效率。

每天學習，每天充電：Dreamweaver文章合集。