欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

小tip:如何在Dreamweaver中使用emmet(ZenCoding) 快捷键的修改 有大用 有大大用 有大大大用

shiping1 的头像
星期一, 2014-12-01 08:53 — shiping1

dreamweaver CS6 Emmet 插件重新封装版，解决安装Emmet出现“扩展'Emmet'不包含有效的签名。不会安装此扩展”的问题

请注意 dreamweaver CS 的版本号


附件 

这个不行  emmet.zip  


这个是OK的  emmet_for_cs6.zip     是dreamweaver扩展


小tip:如何在Dreamweaver中使用emmet(ZenCoding)

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=3666

一、emmet简单科普

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

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

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

div#test>ul.nav>li>a*5

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

据说，emmet支持各种编辑器，神器Notepad++支持, 神器他哥Sublime Text支持，坦克Eclipse也支持，哟，甚至牛郎Dreamweaver也支持！

虽众仙喜欢神器，我却依旧Dreamweaver粉。因此，我就讲讲如何在Dreamweaver中使用emmet.

二、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键无效 张鑫旭-鑫空间-鑫生活

没有效果！

人生尴尬，面面相觑一笑，全当没发生过……

为什么木有效果呢？

虽然说很多事情你想不通的时候，照照镜子就能明白。但是，这次，真不是镜子能解决的。

我们查看下排版相关快捷方式，哈哈，原来默认不是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+/, 弱弱地抬起眼皮，看着死板的屏幕，结果……

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

HTML片段示意

撒花，鞭炮！喜出望外~

但是，有人可能要耸肩了：“我喜欢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键，哇哦，眼前一亮……

效果出来啦！

HTML片段示意

撒花，鼓掌，眼泪横飚！

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

四、虽然只是形式，结语还是要滴

Dreamweaver, 作为牛郎的化身(梦织女)，本着简简单单勤勤恳恳地气质，我个人还是很亲睐的，搞搞小项目，文件管理什么的，还是很不赖的哦！

唉，瞬间没力气了，速速结尾。好好学习，天天向上！

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=3666

（本篇完）

如果您觉得本文的内容对您的学习有所帮助：
相关文章
分享到：4

标签： , , , , 

这篇文章发布于 2013年09月9日，星期一，21:41，归类于 css相关。 阅读 20511 次, 今日 4 次



发表评论（目前27 条评论）

 

 

 

  1. 小武 说：
    2014年11月26日于14:55

    tab缩进还是可以用的

    回复
  2. Dero 说：
    2014年11月25日于18:41

    像大神学习网页开发，励志进入大公司

    回复
  3. sunshine 说：
    2014年07月4日于16:24

    我在网上看到这么一段：想让写好的 hello world ，想在外层再套一个div，只需按下【Ctrl+Shift+A】，在弹出的对话框中输入： div.wrap，回车。此标签就能自动被嵌套。
    甚至，我们可以玩的更炫一些，写好三行列表内容，全裸，此时没有任何标签。只需按下【Ctrl+Shift+A】，输入 ul>li* ，回车。这三行内容就能自动被ul li 嵌套起来。（不仅限于 li 列表哦）
    但是，实际中，【Ctrl+Shift+A】没办法弹出嵌套代码的对话框。是不是也是快捷键的问题？

    回复
  4. 涨姿势了 说：
    2014年05月13日于14:32

    涨姿势了

    回复
  5. 溪涧顽石 说：
    2014年03月7日于15:36

    涨姿势了

    回复
  6. 小鑫 说：
    2013年12月16日于15:06

    中间的配图出处是哪里?

    回复
  • 银狐 说：
    2013年12月5日于09:45

    不错，学习了。不过我还是喜欢sublime text

    回复
  • 有mac的吗 说：
    2013年10月31日于09:56

    请问mac版的 dw 怎么设置呢？

    回复
  • basemoz 说：
    2013年10月9日于07:28

    张兄 你是dw的粉啊 我前几年也是 不过去年之后接触了webstorm 就不一样了。强大的idea 代码纠错 着色 提示 无一不胜过dw ~ nodejs git 以及对比等，都很全面。真心属于前端开发神器！ 易用，提高开发速度与效率 。哦还有本地的历史代码查看，当然可以配合着Git 更加方便一些。强烈建议 尝试一下~ 当然小工具的话就subLime 了，

    回复
  • 轩枫 说：
    2013年10月4日于22:03

    哈哈，我想问的是，wordpress怎么在发表文章的时候，嵌入QQ表情？

    回复
  • xiaobaofengbao 说：
    2013年09月24日于11:13

    dw自带片段功能比这个好用多了，干吗还要整这个这么麻烦的东东？当初editplus整片段也是这个，超级麻烦也不太好用，还是dw自带的好用，代码片段都在snitteps文件夹下

    回复
  • 逍遥哥 说：
    2013年09月22日于09:52

    写个纯文字的代码也要dw，大柴小用啊。

    回复
  • Albert Yu 说：
    2013年09月12日于19:32

    看完这篇文章，直接的感悟就是：DW 真是个垃圾啊，一个 Emmet 都得这么折腾。既然阁下都知道 Sublime Text 是神器中的神器了，趁早换了吧。

    回复
  • Ken 说：
    2013年09月12日于10:34

    为什么我安装的时候显示，无法更新菜单，将不会安装该扩展呢？

    算了，还是用NP++吧

    回复
    • 513632026 说：
      2014年08月4日于09:08

      去 C:\Users\Administrator \AppData\Roaming\Adobe\Dreamweaver CS6\zh_CN\Configuration\Menus（Win7/Dw CS6），找到该目录下的 menus.xml 重新命名备份（例如menus.xml_bak）,接着重新进行安装。

      回复
    • chen 说：
      2013年09月13日于10:44

      我也遇到同样的问题！！！怎么回事？

      回复
  • Ken 说：
    2013年09月12日于10:29

    这个扩展不是只支持CS4么，6也可以了？

    回复
  • garfield 说：
    2013年09月12日于09:26

    幽默~

    回复
  • 大超超。 说：
    2013年09月10日于16:12

    2333333，已安装，这么好的扩展不用白不用~
    PS：最近使用AutoHotkey非常棒，可以试试改改tab键~~

    回复
  • Poko 说：
    2013年09月10日于10:56

    涨姿势了

    回复
  • 盛盛 说：
    2013年09月10日于09:48

    每次看写的技术问题，都好好笑，很轻松的氛围，轻松学到自己想要的。
    谢谢你

    回复

    • 来自 http://www.zhangxinxu.com/wordpress/2013/09/how-to-use-emmet-in-dreamweaver/

    让 Dreamweaver 支持 Emmet（原ZenCoding）


    鉴于某些原因，每个 Coder 所钟爱的 IDE 各不相同。而作为一个软件爱好者，我几乎所有 IDE 都使用过一段时间，目前是 Dreamweaver + Sublime Text 2 共用。不过不管你是普通的 Notepad++，文艺的 Sublime Text，还是二逼的Dreamweaver，甚至装逼的 Vim，有些插件总是必不可少的，例如大名鼎鼎的 zencoding（目前已改名 Emmet，并且很好的支持 DW）。

    Emmet 是一款快速编写 HTML/CSS 的工具，例如输入：

    ul.nav>li>a.n_$*6

    然后按下快捷键 Ctrl+E，即可生成如下一段代码：

    <ul class="nav">
    <li>
        <a href="" class="n_1"></a>
        <a href="" class="n_2"></a>
        <a href="" class="n_3"></a>
        <a href="" class="n_4"></a>
        <a href="" class="n_5"></a>
        <a href="" class="n_6"></a>
    </li>
</ul>

    看了这些代码是不是已经蠢蠢欲动了，更多规则可在文末下载附件查看。接下来谈谈 DW 如何安装这款插件。首先你要确定你的DW已经装上了扩展管理器（Extension Manager）,如何没有的话可以重新在安装DW时不要去掉扩展管理器前面的勾，或者到Adobe官网下载>>http://www.adobe.com/exchange/em_download/。

    emmet_01

    如果你已经安装的扩展管理器，只须要下载Emmet的DW插件http://download.emmet.io/dreamweaver/Emmet.zxp， 双击进行安装，看到提示后继续一步步下去，直到成功。如果此时提示菜单没有更新成功，则打开以下路径C:\Users\Administrator \AppData\Roaming\Adobe\Dreamweaver CS6\zh_CN\Configuration\Menus（Win7/Dw CS6），找到该目录下的 menus.xml 重新命名备份（例如menus.xml_bak）,接着重新进行安装。

    emmet_02

    注：解析 Emmet 规则默认是 Ctrl+E 不过由于 DW 自身快捷键太多，重复了。此时打开【编辑】-【快捷键】，然后选择 Dreamweaver Standard，接着再点击右边第一个按钮复制副本，名称随意。

    emmet_03

    然后再找到【菜单命名】下的【插入】，将【标签】的快捷键修改为其它，例如 Ctrl+R。

    emmet_04

    至此，你可以大胆的在 DW 中使用 Emmet了。不过 Emmet for DW 默认没有设置其它操作的快捷键，所以你也可以按这些操作，设置上一个编辑点，下一个编辑点等快捷键。这样就能够放弃鼠标更好的在代码快中的位置切换。

    emmet_05

    相关链接：

    转自：http://www.cnblogs.com/milly/p/emmet-for-dreamweaver.html

     
    您可能也喜欢：


    来自 http://www.k68.org/?p=1353

    附件大小
    Package icon emmet.zip111.17 KB
    文件 emmet_for_cs6.zip107.13 KB
    普通分类: 
    dreamweaver
    Powered by Drupal

    友情链接

    校园好文网

     www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2