本節書摘來自異步社群《adobe dreamweaver cc經典教程》一書中的第1 章，第1.2節，作者：【美】adobe公司 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
dreamweaver分别為編碼員和設計人員提供了專用的環境，還提供了一個把這二者混合在一起的複合選項。
1.2.1 “設計”視圖
“設計”視圖在dreamweaver工作區中着重顯示其所見即所得的編輯器，它非常接近（但并非完美）地描繪了web頁面在浏覽器中的樣子。要激活“設計”視圖，可以單擊“文檔”工具欄中的“設計”按鈕（如圖1-2所示）。大多數html元素和css（cascading style sheet，層疊樣式表）格式化效果都可以在“設計”視圖内正确地呈現，而動态内容和互動性則有重大的差别，比如連結行為、視訊、音頻、jquery建構、某些表單元素等。
1.2.2 “代碼”視圖
“代碼”視圖在dreamweaver工作區中隻着重顯示html代碼以及各種提高代碼編輯效率的工具。要通路“代碼”視圖，可以單擊“文檔”工具欄中的“代碼”按鈕（如圖1-3所示）。
1.2.3 “拆分”視圖
“拆分”視圖提供了一個複合工作區，允許同時通路設計和代碼。在其中一個視窗中所做的更改都會即時在另一個視窗中進行更新。要通路“拆分”視圖，可以單擊“文檔”工具欄中的“拆分”按鈕（如圖1-4所示）。dreamweaver預設将垂直拆分工作區。
也可以通過在“檢視”菜單中禁用“垂直拆分”選項，水準地拆分螢幕（如圖1-5所示）。
1.2.4 “實時”視圖
為了加快開發現代web站點的程序，dreamweaver還包括了第四種顯示模式，稱為“實時”視圖（如圖1-6所示），它提供了大多數動态效果和互動性的類似于浏覽器的預覽狀态。無論何時打開一個html檔案，都可以通過單擊文檔視窗頂部的“實時”按鈕随時通路“實時”視圖。當激活“實時”視圖時，大多數html代碼将像在實際的浏覽器中那樣工作，進而允許預覽和測試大多數應用程式。當“實時”視圖處于活動狀态時，将不能編輯“設計”視圖視窗中顯示的内容。此時，仍然可以修改“代碼”視圖視窗中的内容和層疊樣式表。要檢視任何修改，必須使用出現在文檔視窗頂部的“重新整理”（sx.tif）圖示或者按下f5鍵重新整理“設計”視圖視窗。
1.2.5 “實時代碼”
“實時代碼”是隻要激活“實時”視圖就可用的html代碼查錯顯示模式。要通路“實時代碼”，可以激活“實時”視圖，然後單擊文檔視窗頂部的“實時代碼”按鈕。當激活時，“實時代碼”将會顯示html代碼，就像它出現在internet上真實的浏覽器中一樣（如圖1-7所示）。“代碼”視窗将互動式地呈現對元素、屬性和樣式所做的修改。
1.2.6 “檢查”模式
“檢查”模式是隻要激活了“實時”視圖就可用的css查錯顯示模式。它與“css設計器”內建在一起，可以通過把滑鼠光标移到web頁面内的元素上，識别應用于頁面内的内容的css樣式。“設計”視圖視窗将高亮顯示目标元素，并會顯示應用于該元素或者被它繼承的相關css規則。無論何時打開了一個html檔案，都可以單擊“實時”按鈕，然後單擊文檔視窗頂部的“檢查”按鈕，随時通路“檢查”模式（如圖1-8所示）。