如何在Dreamweaver中使用emmet(ZenCoding)

一、emmet簡單科普

emmet前身是zen coding. 我是通過接觸sublime Text而認識的。

其作用之一是快速編寫HTML片段，比方說下面截圖所示的HTML代碼：

只要下面這點東西+Tab鍵就可以了！

div#test>ul.nav>li>a*5

此技能如果勤加練習，假以時日，必有大成。拯救世界的和平就交給你了，騷年！

據說，emmet支持各種編輯器，神器Notepad++支持, 神器他哥Sublime Text支持，坦克Eclipse也支持，喲，甚至牛郎Dreamweaver也支持！

雖衆仙喜歡神器，我卻依舊Dreamweaver粉。因此，我就講講如何在Dreamweaver中使用emmet.

二、Dreamweaver中安裝emmet

我目前使用的是Dreamweaver CS6, 因此，就以這個版本舉例示意。至於其他版本是不是也是這樣，就不知道了，掃瑞啊~~

官方下載
下載去官方，及時又可靠，輕輕地地點擊這裏：http://emmet.io/download/ 或者直接狠狠地點擊這裏：Emmet.zxp

如果你已經安裝了Adobe的Extension Manager(擴展管理器)，直接雙擊安裝就可以啦！如果木有，點擊這裏下載。

一路“是”和“接受”到底（忽略某認證警告），然後，就裝好啦！重啓，over~

三、emmet在Dreamweaver中的使用

此時，我們興高采烈地新建一個HTML文檔，用激動而顫抖的雙手敲下：

div#test>ul.nav>li>a*5

然後，大手一揚，泰山壓頂之勢按下Tab鍵，於是，噹噹噹當……

……屁效果都木有——

人生尷尬，面面相覷一笑，全當沒發生過……

爲什麼木有效果呢？

雖然說很多事情你想不通的時候，照照鏡子就能明白。但是，這次，真不是鏡子能解決的。

我們查看下排版相關快捷方式，哈哈，原來默認不是Tab, 而是Ctrl+E啊！

於是，再次，興高采烈地，用激動而顫抖的雙手敲下：

div#test>ul.nav>li>a*5

然後，眼睛像盯着女神的胸一樣盯着Ctrl+E鍵，並按下。滿心期待擡起頭，看到的是，噹噹噹當……

……這是哪根蔥啊？

標籤選擇器，哦，no! 說好的HTML生成呢？

一研究，發現，快捷鍵衝突了，Ctrl+E快捷鍵是Dreamweaver默認的標籤選擇器彈框快捷鍵，該死！怎麼破？很簡單，給emmet重新找個快捷鍵。

如下step：

1. Edit → Keyborad Shortcuts…
   
2. 打開的面板中，一次展開：Commands → emmet，然後選中Expand Abbreviation，如下圖所示：
   
3. 在下面的空白框框focus, 然後按下Ctrl+/ ,如下圖所示（我個人喜歡Ctrl+/，您可以定義自己喜歡的快捷鍵哦），然後點擊change按鈕，再點擊OK：
   
4. over~

下面，我們懷揣着平靜地心情，copy下面這一段字符：

div#test>ul.nav>li>a*5

然後，有氣無力地按下Ctrl+/, 弱弱地擡起眼皮，看着死板的屏幕，結果……

我了個擦！居然立馬大閱兵的節奏，排排站了！

撒花，鞭炮！喜出望外~

但是，有人可能要聳肩了：“我喜歡Tab鍵觸發，我就是喜歡，我就是習慣”，你這個……不來賽（滬語）~

(*^__^*) 嘻嘻……尊敬的顧客，您要的商品“Tab觸發”已經發貨，請注意閱讀下面的文字進行查收：

1. 在任意編輯器任意位置，寫下如下三個字母 – Tab, 然後複製到剪切板上；
2. Edit → Keyborad Shortcuts…
   
3. 打開的面板中，一次展開：Commands → emmet，然後選中Expand Abbreviation，如下圖所示：
   
4. 在下面的空白框框focus, 然後右鍵粘貼，如下圖所示：
   
   
5. 點擊change，點擊ok，over~

下面，試探性地書寫如下內容：

div#test>ul.nav>li>a*5

然後，滿懷希望地按下Tab鍵，哇哦，眼前一亮……

效果出來啦！

撒花，鼓掌，眼淚橫飈！

但是別高興地太早，雖然emmet展開管用了，但是，原本Tab的縮進效果木有了哈！因此，間距，只能使用空格了呵，嚒嚒醬！自己權衡哈~

本文轉自：張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]  ：http://www.zhangxinxu.com/wordpress/?p=3666