Dearmweaver CS6 如何添加emmet 插件

 一、关于emmet插件

  已经接触前端工具的小伙伴们早听说过这个插件的鼎鼎大名了吧,emmet可以说是前端工程师的利器,就连老牌dreamweaver 都可以支持,我们怎么好意思拒绝这个好东西呢?

有了它,即使姜老了还是可以那么辣的,可以省下很多功夫去布局,例如:在html页面中敲入:div#title>div.title_left+div.title_right>ul>li*5,然后按Tab键(dreamweaverCS6 需要自行设置),就会弹出以下代码:

 <div id="title">
<div class="title_left"></div>
<div class="title_right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

  是不是感到很爽很神奇的的感觉? 手痒了吧?

二、在dreamweaver CS6安装emmet扩展插件

1.首先, 现在dreamweaver CC 是目前最新版本,但是本篇以dreamweaver CS6为准。先安装dreamweaver CS6。注意:解压出来已经破解免安装的,会有点问题,安装emmet插件的时候会报错,会提示需要更高版本的。所以,请使用安装版来进行安装。http://www.frontopen.com/1179.html (供参考)请参考安装方法和破解就不一一说了,很简单的事情。

2.登陆http://emmet.io/download/

Dearmweaver CS6 如何添加emmet 插件

Dearmweaver CS6 如何添加emmet 插件

建议右键选择迅雷下载!

3.好了,现在万事俱备,只欠东风。我们要扩展插件,就需要一个先安装一个扩展管理:

EXTENSION MANAGER CS6

点开Adobe官网 http://www.adobe.com/ ,打开搜索:

Dearmweaver CS6 如何添加emmet 插件

Dearmweaver CS6 如何添加emmet 插件

Dearmweaver CS6 如何添加emmet 插件

安装就不说了,安装完之后,双击Emmet.zxp安装好,过程省略,这下子就大功告成了。

三、修改emmet快捷键

安装好之后,菜单栏"命令"--"Emmet",查看到“Expand-Abbraviation”的默认按键是Ctrl+e, 如果这时候我们兴高采烈去html页面敲一敲:div#title>div.title_left+div.title_right>ul>li*5,按下Ctrl+e, 会发现跳出下面这个东西:

Dearmweaver CS6 如何添加emmet 插件

这个是dreamweaver 默认标签选择器的快捷键 Ctrl+e, 所以我们要修改一下emmet的快捷键,“编辑”--“快捷键”--“命令”--“Emmet”,看到下图:

Dearmweaver CS6 如何添加emmet 插件

然后进行修改就行了,这里因为不想摒弃dreamweaver Tab缩进的功能,所以就设置Ctrl+/的快捷键,当然喜欢用Tab就设置Tab按键,看个人爱好习惯。

这下子我们输入:div#title>div.title_left+div.title_right>ul>li*5,按Ctrl+/,

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <div id="title">
<div class="title_left"></div>
<div class="title_right"></div>
</div>
<body>
<div id="title">
<div class="title_left"></div>
<div class="title_right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

千等万等终于等到你,千呼万唤始出来,有点苦尽甘来的感觉有木有!

大家安装会遇到各种各样的问题,千万不要放弃,正所谓“路漫漫其修远兮,吾将上下而求索”!

辛苦敲的,若是转载请注明出处。

上一篇:json&pickle


下一篇:Odoo前端页面模版渲染引擎——Jinja2用法教程