文档章节

如何在Dreamweaver中使用emmet(ZenCoding)

范怀念
 范怀念
发布于 2014/06/12 19:20
字数 1095
阅读 54
收藏 0

一、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, 作为牛郎的化身(梦织女),本着简简单单勤勤恳恳地气质,我个人还是很亲睐的,搞搞小项目,文件管理什么的,还是很不赖的哦!

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


© 著作权归作者所有

共有 人打赏支持
范怀念
粉丝 1
博文 5
码字总数 2802
作品 0
海口
SublimeText2编辑器和它的插件小结一下

1:安装下下载SublimeText2编辑器,去官方网站下载,我是下载的win64的绿色版本。 地址:http://www.sublimetext.com/2 2:在控制台输入命令来安装插件安装工具: 调用控制台的快捷键:ctrl ...

wjlmgqs
2015/07/08
0
0
前端开发利器-SublimeText 之 插件篇

Emmet 原 ZenCoding , 在新版ST中已经集成 快速书写html,css的利器,不多做介绍。谁用谁知道。 2. 格式化整理: jsFormat : 格式化js Tag : 格式化html Alignment : 对齐,格式化缩进,比如...

自由的灵魂
2013/07/31
0
1
安装Sublime text2及插件~

我记性不好,主要是整理出来写给自己留着的 o(>_<)o 去 http://www.sublimetext.com/ 下载下来然后安装 安装好了之后打开按ctrl + ` ,然后界面下方出现一个小框框了,之后把import urllib2,...

大勤快
2013/08/30
0
0
为gedit安装Zen Coding

首先将插件down下来。假设目标目录为~/local/ git clone git://github.com/aeischeid/zen-coding-gedit.git 创建用户的gedit的插件目录。 mkdir -p ~/.local/share/gedit/plugins 进入插件目...

RiRiRi
2012/12/30
0
0
ZenCoding更名为Emmet

Zen coding,想信大家早已听说了,一种快速编写HTML/CSS代码的方法。它使用仿CSS选择器的语法来快速开发HTML和CSS,和一般的编辑器中使用的“代码片段”概念不太一样,Zen coding使用动态的语...

VincentJiang
2013/03/15
0
4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

docker中安装了RabbitMQ后无法访问其Web管理页面

在官网找了"$ docker run -d --hostname my-rabbit --name some-rabbit -p 8080:15672 rabbitmq:3-management"这条安装命令,在docker上安装了RabbitMQ,,结果输入http://localhost:8080并不......

钟然千落
39分钟前
0
0
spring-cloud | 分布式session共享

写在前面的话 各位小伙伴,你们有福了,这一节不仅教大家怎么实现分布式session的问题,还用kotlin开发,喜欢kotlin的小伙伴是不是很开心! 以前在写Android的时候,就对客户端请求有一定的认...

冯文议
58分钟前
0
0
c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
今天
4
0
Shell | linux安装包不用选择Y/N的方法

apt-get install -y packageOR echo "y" | sudo apt-get install package

云迹
今天
2
0
Hadoop的大数据生态圈

基于Hadoop的大数据的产品圈 大数据产品的一句话概括 Apache Hadoop: 是Apache开源组织的一个分布式计算开源框架,提供了一个分布式文件系统子项目(HDFS)和支持MapReduce分布式计算的软件架...

zimingforever
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部