一、关于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/

建议右键选择迅雷下载!

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

EXTENSION MANAGER CS6

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

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

三、修改emmet快捷键

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

这个是dreamweaver 默认标签选择器的快捷键 Ctrl+e, 所以我们要修改一下emmet的快捷键,“编辑”--“快捷键”--“命令”--“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>

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

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

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

Dearmweaver CS6 如何添加emmet 插件的更多相关文章

  1. MyElipse如何添加Emmet插件

    把这个jar文件放到myeclipse2014安装目录下dropins文件夹中,然后重启myeclipse即可. 可到window-->perferences里查看,如果成功则会看到emmet选 ...

  2. emmet插件快捷键:

    概念:emmet插件是用在编辑器里面的一个可以快速编写代码的插件,比如sublime text中,就可以用它来快速创建代码,本文主要是在sublime text的编辑器中做的测试代码. 一.html ...

  3. emmet插件学习,练习中遇到一些问题

    emmet插件学习:帮助提高敲代码效率的插件 参考文献:Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/1 ...

  4. Emmet插件比较实用常用的写法

    看了一些关于Emmet插件写法的文档,港真,怎么可以写这么长啊.其实知道几个大概要点加上实践基本就能上手写了啊 杂话 我前面有一篇[今天发现新大陆:haml和Emmet ],其实一开始的想法是写给自己 ...

  5. Emmet插件使用方法总结

    Emmet插件使用方法总结 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...

  6. Emmet插件

    p{font-size: 18px; color: #666;} body{background-color:#F3F3F3} .code{color:#3974C3;font-size: 14px; ...

  7. Emmet插件详解

    http://www.ithao123.cn/content-10512551.html   (webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器 [摘要:Emmet的前身 ...

  8. sublime text3中emmet插件的使用

    首先,想要快速编码需 要在编辑器中安装常用插件,下面是emmet插件的使用: html5文档结构的生成方式: 1).!+tab键 2).html:5 +tab键 头部head中meta字符集的生成: ...

  9. Netbeans 安装emmet插件

    一.下载插件 http://plugins.netbeans.org/plugin/48315/emmet 二.点击工具-> 插件 -> 已下载 -> 添加插件 ->(导入下载 ...

随机推荐

  1. 解决svn: Cannot negotiate authentication mechanism错误问题

    解决svn: Cannot negotiate authentication mechanism错误问题 作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/ ...

  2. iOS中如何呼出另一个应用

    我们经常会遇到在一个应用里面呼出另一个应用的需求,比如在文档里面点击地址,调用safari来打开网页:比如在文件浏览器里面点击某种文件,自动激活一个应用来打开文件. iOS里面对于这样的需求使用URL ...

  3. hdu 5115 Dire Wolf(区间dp)

    Problem Description Dire wolves, also known as Dark wolves, are extraordinarily large and powerful w ...

  4. javascript高级知识点——继承

    代码信息来自于http://ejohn.org/apps/learn/. 继承是如何工作的 function Person(){} function Ninja(){} Ninja.prototype ...

  5. lightoj 1038 Race to 1 Again

    题意:给一个数,用这个数的因数除以这个数,直到为1时,求除的次数的期望. 设一个数的约数有M个,E[n] = (E[a[1]]+1)/M+(E[a[2]]+1)/M+...+(E[a[M]]+1)/M ...

  6. 不要伤害指针(5)--void和void指针详解

    原文转载地址:http://blog.csdn.net/sunchaoenter/article/details/6587426 增加自己的想法,作为笔记. 1.概述 许多初学者对C/C++语言中的v ...

  7. Linux学习之tail命令

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但刷新, ...

  8. 如何使代码审查更高效【摘自InfoQ】

      代码审查者在审查代码时有非常多的东西需要关注.一个团队需要明确对于自己的项目哪些点是重要的,并不断在审查中就这些点进行检查. 人工审查代码是十分昂贵的,因此尽可能地使用自动化方式进行审查,如:代码 ...

  9. ajax调用后台Java

    //html部分 <input type='text' placeholder='用户名' id="username" name="username" c ...

  10. Kotlin Vertx

    Kotlin & Vertx Kotlin 是一门好语言,值得大家了解一下. Vertx 是一个好框架,也值得大家了解一下. Kotlin 写过js,也写过一点点go,主力一直是java.用了 ...