Dreamweaver教學:瞭解程式碼、設計、即時三種編輯模式

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

一、Dreamweaver編輯狀態

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

Dreamweaver教學:瞭解程式碼、設計、即時三種編輯模式 1

二、設計與即時模式

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

Dreamweaver教學:瞭解程式碼、設計、即時三種編輯模式 3

三、即時模式特性

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

Dreamweaver教學:瞭解程式碼、設計、即時三種編輯模式 5

四、分割視窗檢視

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

Dreamweaver教學:瞭解程式碼、設計、即時三種編輯模式 7

五、JavaScript Html文件

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

Dreamweaver教學:瞭解程式碼、設計、即時三種編輯模式 9

六、JavaScript訊息視窗

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

Dreamweaver教學:瞭解程式碼、設計、即時三種編輯模式 11

七、JavaScript網頁文字

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

Dreamweaver教學:瞭解程式碼、設計、即時三種編輯模式 13

八、JavaScript設計模式

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

Dreamweaver教學:瞭解程式碼、設計、即時三種編輯模式 15

Dreamweaver編輯模式

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

每天學習,每天充電:Dreamweaver文章合集