文/圖、菜鳥編
Dreamweaver近年來不斷的提升功能,使得網頁設計師在工作上效率更加提升,這一次2017的改版,雖然有些地方讓人感覺與另一套開發工具有點相似,但也是造福了習慣使用Dreamweaver的使用者。這邊就先來介紹其中的兩個新功能。
一、即時預覽
以往我們總是要在編輯完後,透過在瀏覽器中開起來查看實際在瀏覽器上的呈現方式。而在2017的版本中,提供了即時同步的方式,讓你立即查看在瀏覽器上的狀態。
開啟方式也相當簡單,直接點擊在右下角的即時預覽按鈕。
在跳出的視窗中可以看到,會列出你目前電腦上所安裝的瀏覽器,除此之外,也可在其他裝置上同步查看。
首先先開啟內預設的瀏覽器Chrome,可直接點擊或是使用快速鍵F12來開啟。
當在編碼上所做的動作,都會同步在瀏覽器上立即更新呈現。下圖為Adobe官方的展示,相信很容易就可以了解。
如果想要透過其他裝置查看,則需先確認裝置與所屬電腦是否在同一網路環境中,連線方式可透過QR Code或是URL。
接著在畫面中登入Adobe ID。
在介面視窗中,可以看到目前有同步的裝置內容。
二、快速編輯
以往我們要編輯CSS樣式,總是要在不同文件中查找所屬的樣式表,再來修改套用,在2017中則可直接快速的在下方呼叫出樣式表來修改。例如這邊想要針對ul標籤的樣式做修正 。
直接使用快速鍵「CTRL + E」 就可在下方呼叫出樣式表來。
而另一個快速鍵「CTRL + K」 則可在Dreamweaver中快速查詢CSS的屬性資訊。但此功能美中不足,是無法使用剛所陳述的CTRL+E 快速樣式表中使用,需在原始的CSS編碼中使用。
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w
延伸閱讀
聯成電腦菜鳥救星:PhotoShop CC 2017新功能-範本選擇
聯成電腦菜鳥救星:文字破碎效果 - illustrator 篇