文/圖、菜鳥編

      Dreamweaver近年來不斷的提升功能,使得網頁設計師在工作上效率更加提升,這一次2017的改版,雖然有些地方讓人感覺與另一套開發工具有點相似,但也是造福了習慣使用Dreamweaver的使用者。這邊就先來介紹其中的兩個新功能。

 

一、即時預覽
      以往我們總是要在編輯完後,透過在瀏覽器中開起來查看實際在瀏覽器上的呈現方式。而在2017的版本中,提供了即時同步的方式,讓你立即查看在瀏覽器上的狀態。

      開啟方式也相當簡單,直接點擊在右下角的即時預覽按鈕。

 

      在跳出的視窗中可以看到,會列出你目前電腦上所安裝的瀏覽器,除此之外,也可在其他裝置上同步查看。

 

      首先先開啟內預設的瀏覽器Chrome,可直接點擊或是使用快速鍵F12來開啟。

 

      當在編碼上所做的動作,都會同步在瀏覽器上立即更新呈現。下圖為Adobe官方的展示,相信很容易就可以了解。

via GIPHY

 

      如果想要透過其他裝置查看,則需先確認裝置與所屬電腦是否在同一網路環境中,連線方式可透過QR Code或是URL。 

 

      接著在畫面中登入Adobe ID。

 

       在介面視窗中,可以看到目前有同步的裝置內容。

 

二、快速編輯
      以往我們要編輯CSS樣式,總是要在不同文件中查找所屬的樣式表,再來修改套用,在2017中則可直接快速的在下方呼叫出樣式表來修改。例如這邊想要針對ul標籤的樣式做修正 。  


 

      直接使用快速鍵「CTRL + E」 就可在下方呼叫出樣式表來。  

 

      而另一個快速鍵「CTRL + K」 則可在Dreamweaver中快速查詢CSS的屬性資訊。但此功能美中不足,是無法使用剛所陳述的CTRL+E 快速樣式表中使用,需在原始的CSS編碼中使用。

 

官方網站:http://www.lccnet.com.tw

FB粉絲團:https://www.facebook.com/lccnetzone

菜鳥救星:https://www.facebook.com/greensn0w

 

延伸閱讀

聯成電腦分享: 決戰E世代,搶進電子商務的黃金門票  

聯成電腦菜鳥救星:PhotoShop CC 2017新功能-範本選擇

聯成電腦菜鳥救星:Photoshop新功能-臉部感知工具

聯成電腦菜鳥救星:文字破碎效果 - illustrator 篇


 

文章標籤
創作者介紹

聯成電腦--在成長的路上彼此相伴

lccnetvip 發表在 痞客邦 PIXNET 留言(0) 人氣()