圖/文:菜鳥編

      網頁開發工具,相信大家都會想到Dreamweaver這套編輯軟體,市面也有很多好用的編輯器,但不管如何,都有本身的特色與便利性。鳥編是本身就習慣Dreamweaver的操作方式,加上從CC 2015版之後多了更多便利的功能,也讓小編更愛不釋手。

 

       基本上初學網頁的新手,一定是慢慢從刻標籤開始。這一點鳥編也是相當認同,就是因為一個一個英文字母慢慢刻,就會有比較深刻的映象。但如果你已經脫離了菜鳥階段,開始有能力開發網頁,刻字的速度真的就決定你下班的時間。這樣是為什麼一堆網頁開發工具盛大的原因。

      今天鳥編要介紹的是讓編輯相當快速的一套工具,讓你編輯上速度跟法拉利的馬一樣。

工具介紹:Emmet
工具說明:可快速的產生HTML的標籤外,也可快速的產生CSS語法,相當便利。
傳送門:http://goo.gl/ARdGVZ

       本身支援的開發工具將當多,如果你是Dreamweaver CC 2015的話,本身內建就已經安裝好套件了喔。鳥編這邊以安裝Dreamweaver為例。

 

安裝方式非常簡單,直接點選Emmet.zxp來安裝,檔案也非常小喔。

 

接著就會出現Adobe的擴充管理工具,直接點擊接受即可。
 


安裝完畢後就可在Dreamweaver的擴充功能上看到Emmet。

 

       恭喜你,工具都已經備妥了。有一部好的跑車,當然也要有好的操作技術啦。所以如果想要了解Emmet的操作方式,可以參考男丁格爾喔。

       現在我們就先來體驗一下法拉利帶來的快感吧,例如鳥編要在div標籤內新增一個P段落,內容含一個h1標籤的「這是菜鳥救星教學」,一般我們KEY的方式會如下:
 


       但使用Emmet只需以  div>p>h1{這是菜鳥救星教學} +”tab鍵” 就可自動生成,好處就是將語法編輯好後,最後再以tab鍵來完整生成。如果當你發現按下tab鍵沒有出現預期的效果,一般都是語法宣告或使用錯誤造成。

 

所以記得先花點時間去了解一下Emmet如何使用喔,相信以後你的編輯速度也會提升許多。

官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

 

延伸閱讀

聯成電腦菜鳥救星:誰說學程式很無聊

聯成電腦菜鳥救星:用PS製作棒球線縫效果文字

聯成電腦菜鳥救星:你知道取出word中所有圖片的方法嗎?

, , , , , , , , ,

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