网络编程
位置:首页>> 网络编程>> 网页设计>> Zen Coding: 一种快速编写HTML/CSS代码[译](5)

Zen Coding: 一种快速编写HTML/CSS代码[译](5)

作者:神采飞扬 来源:前端观察 发布时间:2009-12-16 12:53:00 

标签:工具,html,css,Zen,Coding

总结

很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做,还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档 以及源代码以寻找你的问题的答案。希望你喜欢Zen Coding!

附:Zen coding的具体用法

遗憾的是, 本文原作者并没有说明zen coding的具体用法,神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例,其它编辑器平台暂不描述,如有疑问可以在评论中与前端观察的网友交流。

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的,所以,Zen Coding也是支持Eclipse的,只是需要一个EclipseMonkey插件的支持,Aptana已经封装了这个插件,所以如果你使用Aptana,下面的第一步可以跳过。

  1. 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如果你使用Aptana,可跳过这一步)

  2. 在你的当前工作去创建一个顶级的项目,给它命名,比如,就叫zencoding

  3. 在新创建的项目中创建scripts文件夹

  4. 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:

  5. 安装之后,Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项:

  • Aptana版的官方插件是基于MAC机的,如果你用的是Windows,需要手动更改快捷键(在每个文件头部的注释片段中更改)

  • 官方的文件编码有点儿乱,修改官方js的时候,请注意编码问题,修改不当会造成相关功能的丢失;

DreamWeaver

好消息是,现在已经有了Zen coding for DreamWeaver插件,坏消息是,该插件支持的功能很少,只支持展开缩写功能。而且默认的快捷键是无效的。只能在“命令”菜单中点击操作。另外,没有测试该插件是不是只支持CS4版本。不过比较好的是,作者将本插件的源码也放出了,你可以自定义一个Dreamweaver的插件。

事实上,官方的DW插件在Windows下有点儿bug,就是会出现空白的行,我简单的修正了下,重新编译了个包,在本机测试没问题,感兴趣的童鞋可以下载尝试:http://www.boxcn.net/shared/c71z7×7sfe

原作者介绍:

Sergey Chikuyonok是一位俄罗斯的前端开发工程师和作者,他在优化方面有很大的热情:从图片、JavaScript效果到工作流程和节省时间的编码。访问他的主页他的Twitter

译自:Smashing Magazine

中文:Zen Coding: 一种快速编写HTML/CSS代码的方法

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com