Dreamweaver是什麼?本文從DW主畫面所提供的3種編輯器模式,介紹這個HTML文件設計工具的特性,瞭解程式碼、設計、即時之間的差異,它如何動態呈現網頁效果。
目錄
Toggle一、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實質資料內容,這兩個模式再搭配原始程式碼編輯模式,並且必要時分割視窗檢視,設計網頁如果可以善加利用,一定可以提升作業效率。
歡迎報名相關課程:
Google Sheet記帳教學:如何用試算表編製財務報表