標籤:
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:
- Edit → Keyborad Shortcuts…
- 開啟的面板中,一次展開:Commands → emmet,然後選中Expand Abbreviation,如所示:
- 在下面的空白框框focus, 然後按下Ctrl+/ ,如所示(我個人喜歡Ctrl+/,您可以定義自己喜歡的快速鍵哦),然後點擊change按鈕,再點擊OK:
- over~
下面,我們懷揣著平靜地心情,copy下面這一段字元:
div#test>ul.nav>li>a*5
然後,有氣無力地按下Ctrl+/, 弱弱地抬起眼皮,看著死板的螢幕,結果……
我了個擦!居然立馬大閱兵的節奏,排排站了!
撒花,鞭炮!喜出望外~
但是,有人可能要聳肩了:“我喜歡Tab鍵觸發,我就是喜歡,我就是習慣”,你這個……不來賽(滬語)~
(*^__^*) 嘻嘻……尊敬的顧客,您要的商品“Tab觸發”已經發貨,請注意閱讀下面的文字進行查收:
- 在任意編輯器任意位置,寫下如下三個字母 –
Tab, 然後複製到剪下板上;
- Edit → Keyborad Shortcuts…
- 開啟的面板中,一次展開:Commands → emmet,然後選中Expand Abbreviation,如所示:
- 在下面的空白框框focus, 然後右鍵粘貼,如所示:
- 點擊change,點擊ok,over~
下面,試探性地書寫如下內容:
div#test>ul.nav>li>a*5
然後,滿懷希望地按下Tab鍵,哇哦,眼前一亮……
效果出來啦!
撒花,鼓掌,眼淚橫飆!
但是別高興地太早,雖然emmet展開管用了,但是,原本Tab的縮排效果木有了哈!因此,間距,只能使用空格了呵,嚒嚒醬!自己權衡哈~
(轉)在Dreamweaver中使用emmet