登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

istyles

貌似非要取个名字,就叫istyles吧。

 
 
 

日志

 
 

zen coding 让我们飞  

2011-05-16 16:08:45|  分类: 工作笔记 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
工作有好几年了,都用Dreamweaver(以下称Dw)开发,曾经有过几次想换个轻量级IDE的想法,但最终因为太过习惯于依赖Dw的一些功能而转换失败。前几天永清说你可以试试 notepad++ +zen coding,于是就安装熟悉了几天,这东西的确不错!以前总觉得利用Dw自动完成功能开发页面(结构、样式)的效率是No.1,了解zen coding以后,哥羞涩了......
可以这样说,熟练使用后对开发效率的提升那可真的不是一星半点!

zen coding 是什么?
zen coding由Sergey Chikuyonok开发,它是为HTML和CSS提供高速编码环境的一款插件,针对不同的IDE提供不同的版本,最新版本0.72(2011年3月13日更新)。

zen coding 怎么用?
下载对应你IDE的最新版本zen coding,按说明安装完毕,新建HTML文件测试:

输入div
Ctrl+E 展开
得到<div></div>

输入div#head
Ctrl+E 展开
得到<div id="head"></div>

输入div#head>div.logo
Ctrl+E 展开
得到<div id="head">
           <div class="logo"></div>
       </div>

输入div#head>div.logo+ul.nav>li*3
Ctrl+E 展开
得到<div id="head">
           <div class="logo">
           </div>
               <ul class="nav">
                   <li></li>
                   <li></li>
                   <li></li>
               </ul>
       </div>

输入ul.tab>li.list_$*3
Ctrl+E 展开
得到<ul class="nav">
           <li class="list_1"></li>
           <li class="list_2"></li>
           <li class="list_3"></li>
       </ul>

从文档复制到编辑器如下格式内容-全选
内容1
内容2
内容3
Ctrl+Shift+A 包裹 ,在弹出输入框内键入 ul.nav>li.list_$*
得到<ul class="nav">
           <li class="list_1">内容1</li>
           <li class="list_2">内容2</li>
           <li class="list_3">内容3</li>
       </ul>

输入mt
Ctrl+E 展开
得到 margin-top:;

呵呵,有点感觉了吧? 其实远不止这些,更多关于HTML、CSS的简写展开规则,请抱着你的好奇心阅读zen coding的wiki

下面简单说说如何在Dreamweaver中使用zen coding
下载后解压 Zen.Coding-Dreamweaver.v0.7.2.zip   120 KB

打开Dreamweaver  -   命令   -   扩展管理   -   安装   -   选择Zen Coding v.0.7.2.mxp    -    确定

zen coding 让我们飞 - Cat - istyles

重启Dreamweaver ,点击”命令“就可以看到zen coding的选单了,鼠标移动上去,可以查看各功能的快捷键;

zen coding 让我们飞 - Cat - istyles
 
我目前只在CS5.5上做过测试,默认的“包裹”快捷键与Dreamweaver自身快捷键有冲突,
需要重设一下(编辑  -  快捷键)
 
  评论这张
 
阅读(1336)| 评论(2)

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018