艺灵设计

全部文章
×

给DreamweaverCs6安装Emmet插件经验

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2015-03-26 10:08:11 - 阅: - 评:2 - 积分:0

摘要:
  一篇介绍给Dreamweaver Cs6安装Emmet插件经验的文章,快来给你的DW安装上Emmet吧,安装后编写代码飞一样的快.....

本文融合了http://www.itxueyuan.org/view/6317.html http://www.cnblogs.com/milly/p/emmet-for-dreamweaver.html 的经验。

最近在折腾那个Sublime Text(以下简称:ST),折腾了几天了,感觉还是Dreamweaver(以下简称:DW)要好用些。准确来说应该是:自己还没有把那个ST摸熟。

相对而言,初学者使用DW的要占多数,而默认的DW在编写代码这块,效率太低了,真的太低了!比如说:我想实现20个li的布局,就算你是复制粘贴li,也需要点时间吧。那么有没有更快速高效的方法呢?答案是肯定的。那就是--Emmet(原名是:Zen Coding,后改名成Emmet)

不得不说,Emmet是一款能够快速提高编写Xhtml+Css的利器,还拿刚才的例子来讲,其实我们可以这样:

Emmet编写20个li

  1. ul>li*20

然后按下EnterCtrl+E等自己设置的快捷键后即可实现效果。

怎么样,是不是很快速高效?!赶快来装个试试吧,duang~的一下速度就提高了。

由于看官们手中的Dreamweaver是从各个渠道进行下载的,当然也存在部分看官无法成功安装这个Emmet插件。所以艺灵会献上一个完整的可安装插件的Dreamweaver。当然了,安装教程也是要分享出来的,毕竟这个不像绿色版那样双击就可以运行的。

一、安装Dreamweaver

1.1、下载

网盘地址:http://pan.baidu.com/s/1sjT14cP ,配图:艺灵网盘下载Dreamweaver包含破解补丁及Emmet插件建议看官都下载下来,毕竟艺灵已将需要的东西全都收集在了一起,用着也方便嘛。

1.2、安装流程

1.建议看官先进行断网,因为等会要绕过检测注册机制;
2.双击Dreamweaver CS6 简体中文版.exe ,选择一个盘符进行解压软件。解压完后会,一般情况下会出现一个提示,如图: 点击“忽略”就可以了。
3.接下来是选择界面,直接点击“安装”,不要点击试用;配图: 4.接着点击“接受”,配图: 5.接下来是填写序列号了,任选一个即可。

Dreamweaver cs6 序列号

  1. 1325-0949-2080-9819-3777-3230
  2. 1325-0160-5283-9851-2671-8951

配图: 6.接下来是连网界面,直接点击“稍后连接”,配图: 7.接下来是选择安装盘符,自己选择,配图: 8.如果在安装过程中正在使用ps等软件,会有如图提示: 在关闭ps前,建议看官要保存哦~
9.接下来就是安装了,等待安装完成即可。完成时会有提示,配图: 10.此时会先弹出一个要验证序列号的窗口,配图: 直接点击“稍后验证”便是;因为等会我们会用安装补丁,打完补丁后就可以绕过验证啦!
11.接下来会有一个弹窗,艺灵我是点击了“全选”,然后确定。看官可根据自己需求进行选择。配图:

至此,Dreamweaver的安装就到此结束,接下来是补丁操作。

二、安装Dreamweaver补丁

打开我们刚从艺灵网盘中下载的文件夹,找到Dreamweaver CS6 破解补丁和说明.rar 并解压,解压后配图: 如果看官的电脑是32位,就打开x86,复制里面的amtlib.dll粘贴到安装Dreamweaver的根目录下,替换原amtlib.dll即可。64位系统用x64即可。配图:

好了,补丁也打完了,接下来是安装Emmet了。

三、安装Emmet插件

如果看官是使用艺灵上面提供的安装包进行安装,一切都会很顺利。如果是从其它地方弄的安装包,可能会出现以下问题。下面会对出现的问题进行一些说明。

3.1、安装扩展管理器不可用问题

1.如果想要安装Emmet插件,我们的Dreamweaver必须要有扩展管理器(Extension Manager)才行。

打开Dreamweaver软件,点击“命令”--扩展管理,配图: 如果出现如下图提示,那就要重新安装“扩展管理器”了。配图:

我们直接去Adobe官网下载,链接:http://www.adobe.com/exchange/em_download/ 。当然了,直接重装Dreamweaver也是可以的,建议重装。

3.2、正式安装Emmet插件

1.双击文件夹中的Emmet.zxp,点击接受。配图: 2.如果出现下图:给dreamweaver安装Emmet时出错则表示看官需要重装dreamweaver了;
3.正确的时候会出现如图所示: 不用管他,直接点击“安装”;
4.继续点击安装;配图: 5.当出现如下界面时表示安装成功。配图:

3.3、安装Emmet插件失败的解决方法

可能也会存在安装失败的情况,这个时候我们需要手动修改下。找到路径:C:\Users\Administrator \AppData\Roaming\Adobe\Dreamweaver CS6\zh_CN\Configuration\Menus ,复制menus.xml一份并修改名字,例如:menus.xml_bak,配图:安装Emmet失败时修改Menus.xml然后接着按上面的步骤重新安装Emmet

四、使用Emmet

4.1 修改快捷键

由于解析Emmet规则默认是Ctrl+E,由于Dreamweaver自身快捷键太多,并且与Ctrl+E有冲突,所以我们要进行修改快捷键。

1.打开dreamweaver--点击“编辑”--点击“快捷键”--点击右边第一个按钮复制副本--点击确定。配图:修改Emmet快捷键上2.然后再找到【菜单命令】下的【插入】,将【标签】的快捷键修改为其它,例如 Ctrl+R。这里艺灵补充一点,在修改快捷键时可能会修改不成功,提示报错,如图: 这个时候我们要注意了,直接粘贴是没有用的,要先按下Ctrl(不要松)再按下R才能成功添加快捷键!然后点击“更改”--确定即可。配图:

至此,看官就可以大胆的在 dreamweaver 中使用 Emmet了。
相关链接:
DW插件及Emmet规则速查表:http://files.cnblogs.com/milly/Emmet_for_DW.zip
Emmet官网: http://emmet.io/

资源下载

  1. DreamweaverCs6+Emmet.zip 

----------完----------

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/xwzj/2015-03-26/254.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: Dreamweaver Cs6 Emmet Zen Coding Sublime Text Dreamewaver快捷键

上一篇: 打印行程单那点事儿   下一篇: CSS布局之淘宝双飞翼布局

评论区