(轉)在Dreamweaver中使用emmet

標籤：

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

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的縮排效果木有了哈！因此，間距，只能使用空格了呵，嚒嚒醬！自己權衡哈~

(轉)在Dreamweaver中使用emmet