
對於許多從事網頁設計的朋友,還是最習慣使用Dreamweaver來編輯網頁,雖然說現在Dreamweaver CC2015內建終於支援了Bootstrap,就可快速的產生Bootstrap的標籤語法,當產生了這些標籤後,要再修改裡面的參數時,就得透過原始碼的方式進行調整,甚至要改變DIV區塊的堆疊時,相當的不方便。
而梅干最近在Adobe官方的blog中,看到官方已推出Dreamweaver CC 2017 beta的公測版本,讓大家下載體驗與試用,同時在影片中,讓梅干感到興趣的是,新版的右下角多了一個網頁的樹狀結構圖,透過這個樹狀圖,就可改變網頁的結構,甚至還可直接在原始碼模式預覽圖片縮圖,與編輯css樣式設定,這對於目前在設計網頁來說相當的方便,因此有在使用Dreamweaver的朋友,現在也一塊來看看2017版所帶來的便利。
Adobe Dreamweaver CC
Step1
進入下載頁面後,登入自己的Adobe ID帳密。

Step2
登入完成後,接著再點上方的Downloads。

Step3
接著選擇自已所需的版本,Windows是中文版,MAC是英文版,但一樣可將Windows版的語系檔複製過去就變中文了。

Step4
下載安裝完畢後,啟動後就可看到此次新版的界面更簡潔了。

Step5
若不習慣黑底,也可到偏號設定中,更改操作界面的顏色,向右拉就會變白色。

Step6
甚至連原始碼區也可更改成白色。

Step7
而此次新版的Dreamweaver終於內建也支援Emmet了,這樣在寫網頁就更加的方便。

Step8
除此之外在畫面的右下角,多了網頁的樹狀結構圖,透過這個樹狀圖,可用拖拉的方式改變網頁的結構,真的是超方便的,這個讓梅干相當的喜愛。

Step9
當然Dreamweaver CC 2017beta一樣也支援Bootstrap所有的元件,同時此次新的預覽模式,終於可較正確的看到版型區塊了。

Step10
同時在原始碼模式下,若滑到圖片路徑上方,也會秀出圖片縮圖。

Step11
甚至對著原始碼的樣式名稱,按滑鼠右鍵選擇Quick Edit選項。

Step12
立即就會開啟該樣式的所有設定,就可直接進行修改,不用再開啟外部的CSS檔,方便許多,此次改版加入許多便於編輯網頁的設計,因此有在使用Dreamweaver的朋友,也趕快來下載體驗一下囉!
