(轉)在Dreamweaver中使用emmet

http://www.zhangxinxu.com/wordpress/?p=3666

Dreamweaver中安裝emmet

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

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

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

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

3、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的縮進效果木有了哈！所以，間距，只能使用空格了呵，嚒嚒醬！本身權衡哈~