在Dreamweaver CS6中使用Emmet 提高代码编写效率

[ez-toc]

一、Emmet简单科普

emmet前身是zen coding. 我是通过接触sublime Text而认识的。

其作用之一是快速编写HTML片段，比方说下面截图所示的HTML代码：

只要下面这点东西+Tab键就可以了！

div#test ul.nav li a*5

此技能如果勤加练习，假以时日，必有大成。拯救世界的和平就交给你了，骚年！

据说，Emmet支持各种编辑器，神器Notepad++支持, 神器他哥Sublime Text支持，坦克Eclipse也支持，哟，甚至古董的Dreamweaver CS6也支持！

虽众仙喜欢VS CODE等神器，但学校授课让教DW CS6，所以我们不得不继续使用Dreamweaver。因此，我就讲讲如何在Dreamweaver中使用Emmet.

二、Dreamweaver中安装Emmet

我目前使用的是Dreamweaver CS6, 因此，就以这个版本举例示意。至于其他版本是不是也是这样，就不知道了.

安装下载地址：看这篇文章 详解Dreamweaver CS6安装石皮解的方法

如果你已经安装了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重新找个快捷键。

四、修改Emmet快捷键

依次打开【编辑】-【快捷键】

打开的面板中，依次展开：【Commands】-【 Emmet】，然后选中【Expand Abbreviation】，如下图所示：

点击【Press key:】后面的空白窗格, 然后按下Ctrl+/ ,如下图所示（也可以定义自己喜欢的快捷键哦），然后点击change按钮，再点击OK：

over~

下面，我们怀揣着平静地心情，copy下面这一段字符：

div#test ul.nav li a*5

然后，有气无力地按下Ctrl+/, 弱弱地抬起眼皮，看着死板的屏幕，结果

我了个擦！居然立马大阅兵的节奏，排排站了！

撒花，鞭炮！喜出望外~

但是，有人可能要耸肩了： 我喜欢Tab键触发，我就是喜欢，我就是习惯~

(*^__^*) 嘻嘻 尊敬的顾客，您要的商品 Tab触发 已经发货，请注意阅读下面的文字进行查收：

在任意位置，敲下【 Tab】三个字母, 然后【复制】到剪切板上；

点击【Press key:】后面的空白窗格, 然后【粘贴】，如下图所示：

点击change，点击ok，over~

下面，试探性地书写如下内容：

div#test ul.nav li a*5

然后，满怀希望地按下Tab键，哇哦，眼前一亮

效果出来啦！

撒花，鼓掌，眼泪横飚！

但是别高兴地太早，虽然emmet展开管用了，但是，原本Tab的缩进效果木有了哈！因此，间距，只能使用空格了呵，自己权衡~

如果一切准备就绪之后，发现页面属性面板没有显示，或显示不全，那么你或许需要看下这篇文章：