一、关于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. java 书籍推荐 JavaEE程序员必读图书大推荐

    java 书籍推荐 JavaEE程序员必读图书大推荐 转自:http://www.cnblogs.com/xlwmin/articles/2192775.html 下面是我根据多年的阅读和实践经验,给 ...

  2. Linux学习（一）：linux更改ip地址命令_更改DNS_更改默认网关_更改子网掩码_主机名

    如何使用命令来更改linux的IP .DNS .子网掩码,在虚拟机(vitrualBox)上添加一个Linux的虚拟机; 安装方法:http://pan.baidu.com/s/1sjJPhP7 安装 ...

  3. hdu 5583 Kingdom of Black and White（模拟，技巧）

    Problem Description In the Kingdom of Black and White (KBW), there are two kinds of frogs: black fro ...

  4. mysql中多个字段共同确定唯一性

    create table tbl_table ( id integer not null auto_increment, fname varchar(255), lname varchar(255), ...

  5. 关于优化性能<主要是速度方面>的个人心得 【转】

    一个web项目后期的维护主要在于性能方面.数据吞吐量一旦增大各种bug都出来了.那些通过硬件<数据库分表,数据库主从分离,读写分离>等的一些手段此处就不多说了.本文主要在编码方面做一个性能 ...

  6. 读取系统执行状态的shell脚本

    近期在学习shell.老大让写一个读取系统配置信息的脚本当作练习和工作验收,我就写了这么一个脚本,读取操作系统,内核,网卡,cpu,内存,磁盘等信息,目的是让看的人一眼就能看出这台机子的配置以及眼下的 ...

  7. Hibernate 报错：this project is not a myeclipse hibernate project . assuming hibernate 3 cap

    问题描述:  web 项目中 打开 hibernate.cfg.xml 文件时 提示:The project is not a myEclipse hibernate project. 并且:在 db ...

  8. html系列教程--input label

    <input> 标签:用于提交用户输入数据的文本框. input属性: 1.checked:用于checkbox,radio等元素,确定是否选中,true/false 2.disabled ...

  9. ES6笔记③

    1.查找关键字  includes(); 返回布尔值 //①:includes -->代替-->indexof-->返回布尔值 var str = "769909303&q ...

  10. 为什么析构函数要加visual？

    一般来说,有使用visual的类,其析构函数都需要加上visual,这是为什么呢? 因为使用多态时,一般都是由基类指针来使用派生类的,在删除这个派生类对象时也一样,由基类指针来调用, 可以想象,如果析 ...