欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 >

如何在Dreamweaver中使用emmet(ZenCoding)插件

发布时间:2016-07-23  编辑:杨雨个人博客网站   点击:   

Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发。早在2009年,Sergey Chikuyonok写过一篇文章,提出编写HTML和CSS的新方法。这一革命性的插件指的就是Zen Coding,经过很多开发者多年来的努力与帮助,现在已达到了一个新的水平。也就是今天所说的Emme插件。

在这篇文章中,我们将要学习如何在Dreamweaver中使用emmet(ZenCoding)插件,至于使用方法我曾经写过一篇文章,如《何使用Emmet语法来生成HTML和CSS代码》以及介绍篇《Brackets 编辑器》可以过去看看
由于本人使用的是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, 作为牛郎的化身(梦织女),本着简简单单勤勤恳恳地气质,我个人还是很亲睐的,搞搞小项目,文件管理什么的,还是很不赖的哦!

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

 

 

emmet快速编辑HTML以及CSS的缩写请查看:

下载 API表直击官网文档

本文地址:http://itbyc.com/web/2281.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1