網頁開發工具，相信大家都會想到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
延伸閱讀
留言列表