网页设计中的notepad++结合Zen Coding快速编写HTML代码

notepad++结合Zen Coding快速编写HTML代码

经朋友介绍认识了Zen Coding一款快速编写HTML代码的插件,然后在google搜索一下其使用,让在下激动不以,今天特意写了一篇blog来跟大家一起分享。

Zen Coding其实是一款快速编写HTML,XML,XSL(或其他格式化语言)的编辑器插件,这个插件的实现了用缩写方式完成大量重复的书写工作。他的核心是一个强大的缩写引擎,掌握这些缩写技巧,给我们的编写代码带来极高的编写效率。他支持好多编辑器,如TextMate,UltraEdit,Notepad++等许多编写器,我们可以从http://code.google.com/p/zen-coding下载到相对应的编辑插件,然后我们把解压缩出来的文件,如下图:

放到你的Notepad++安装文件下的plugins目录下,在我的电脑中的程序安装地址是“C:\Program Files\Notepad++\plugins”(这个地址需要对应你的程序安装地址)。然后重新启动你的Notepad++编辑器就能看到菜单栏上增加了一项Zen Coding。如下图所示:

       这样我们在Notepad++编辑下就成功的安装好了Zen Coding的插件。

接着我们一起来看看Zen Coding如何使用,其实只要你对CSS的选择器比较熟悉,就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码,我们先来看一个简单的实例,首先在你的编辑器中输入下面一句代码

 

div#header>div#logo+ul.nav>li.item-$*5>a

 

接着按一下快捷键ctr+E,就会自动生成如下的HTML代码:

 

<div id="header">
    <div id="logo"></div>
    <ul class="nav">
        <li class="item-1"><a href=""></a></li>
        <li class="item-2"><a href=""></a></li>
        <li class="item-3"><a href=""></a></li>
        <li class="item-4"><a href=""></a></li>
        <li class="item-5"><a href=""></a></li>
    </ul>
</div>

 

这样是不是很神奇呀。你一定会问这是怎么实现的呢?在没搞清楚这是怎么回事的时候,你可能会相当的迷惑,不知道这是怎么一回事。没关系,我们先来看一下其在线演示,一起感受下zen-codingr的强大功能,请看其在线的DEMO演示

在打开的在线编辑中我们同样输入上面的那段代码:

 

div#header>div#logo+ul.nav>li.item-$*5>a

 

此时我们在按一下ctr+,就能看到转换的HTML代码

 

<div id="header">
    <div id="logo"></div>
    <ul class="nav">
        <li class="item-1"><a href=""></a></li>
        <li class="item-2"><a href=""></a></li>
        <li class="item-3"><a href=""></a></li>
        <li class="item-4"><a href=""></a></li>
        <li class="item-5"><a href=""></a></li>
    </ul>
</div>

 

此处的快捷方式是ctr+,而在我们的Notepad++中使用的是ctr+E,所以这里要提醒大家,在不同的编辑中的快捷方式是不一样的,感兴趣的朋友可以自己多研究一下,我们这里主要是针对在notepad++中如何使用zen coding。

在学习如何在notepad++中使用zen coding之前我们有必要先了解一下zen coding是一些基本规则,这样我们才能更好的在notepad++中应用zen coding来提高大家编定代码的效率。

Zend Coding书写规范

            E:表示元素,如p,div等,例如我们在编辑中输入:

 

p

 

按一下ctr+E,我们就能得到

 

<p></p>

 

E#name和E.name:这个是ID和Class属性,和CSS样式表定义ID和Class是一样的。#表示ID,.表示Class。例如定义一个ID为header的div,我们可以这样来书写:div#header,然后定义一个class我们可以写在div.region。我们一起先在编辑中输入:

 

div#header

 

然后展开,就成为:

 

<div id="header"></div>

 

div.region

 

展开就是:

 

<div class="region"></div>

 

当然我们同时可以将两者合并在一起,因为在我们编写代码时,常会碰到一个元素具有一个ID和多个Class名,那我们这里也可以简单方便的实现,大家一起来看下面的一个例子:

 

div#nav.menu.links.tab

 

同时我们来展开他:

 

<div id="nav" class="menu links tab"></div>

 

是不是我们这个div同时具有ID名nav和class名menu,links,tab呀,方便吧

E>E:表示父级嵌套子级:

 

div#header>h1#logog

 

<div id="header">
    <h1 class="logo"></h1>
</div>

 

我们还可以实现多级嵌套:

 

div#header>h1#logo>a

 

<div id="header">
    <h1 id="logo"><a href=""></a></h1>
</div>

 

E+E:同辈元素:

 

div#header>h1.site_name+p.site_solgan

 

<div id="header">
    <h1 class="site_name"></h1>
    <p class="site_solgan"></p>
</div>

 

给元素添加属性:给标签元素添加属性

 

a[title]

 

<a href="" title=""></a>

 

当然我们还可以给其加上属性值:

 

a[title="hello zen coding"]

 

<a href="" title="hello zen coding"></a>

 

不过这里需要提醒大家一点,在展开之前,光标最好放在a[title=”hello zen coding”]的末尾。不然会造成不可想像的错误,大家可以自己尝试一下,就自然明白了。

E*N:多个相同元素的写法

 

div#nav>ul>li.item*5>a

 

<div id="nav">
    <ul>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
    </ul>
</div>

 

E*N$:按索引生成

 

ul>li.item-$*3

 

<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>

上面上一些Zen Coding的书写规范,当然更多的书写大家还可以参考ZenCodingCheatSheet.pdf文档,这里我就不全部阐述了。

到这里我们对zen coding有一定的了解了,也不会对一开始那一段如何产生代码感到迷惑不解了,接着我们就可以来一起看看zen coding在notepad++编辑中的应用了。

【Ctrl+E】展开缩写(Expand Abbreviation):例如前面那些例子,我们只要在notepad++编辑中输入如下代码:

div#header>(h1.logo>a)+ul.nav>li.item*5>a

 

我们只要按一下【Ctrl+E】,马上就能把上面的代码转换成如下的HTML代码

<div id="header">
    <h1 class="logo"><a href=""></a></h1>
    <ul class="nav">
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
    </ul>
</div>

 

需要提醒大家的一点是,我们上面中的括号的使用,在前面我们没有碰到过,这里加上这个括号是为控制其嵌套格式,如果我们不加上这个括号,那么生成出来的HTML是完全另外一们样子,大家可以在自己本地电脑上的编辑上尝试一下。你会恍然大悟的,同时也会知道他的更神奇之处。

【Ctrl+Shift+A】嵌套代码(Wrap with Abbreviation):如何说我们想在下面代码中的P标签外嵌套一个div.limiter

<div id="header">
    <p>Hello Zen Coding</p>
</div>

 

我们只需要在p标签的结束位置按【Ctrl+Shift+A】,在弹出的窗口中输入div.limiter,如下图所示:

       然后按回车【Enter】键,就会自动在p标签外嵌套一个div.limiter的div标签,如:

<div id="header">
    <div class="limiter">
        <p>Hello Zen Coding</p>
    </div>
</div>

 

一定要记住是在p标签的末尾,如果光标不在p标签的末尾,而是在p标签内容中的任何一个位置,那不div.limiter就不会嵌套在<p></p>外面,而是嵌套在Hello Zen Coding的外面。

还有一种更让你感兴趣的方法,我们在编辑中写几行没有任何标签的内容,但我想给每个没有标签的内容嵌套在ul列表中,如下所示

list1
list2
list3
list4
list5

 

我们在编辑器中按【Ctrl+A】选中这几行内容,然后按【Ctrl+Shift+A】在弹出的对话框中输入ul.menu>li.item*>a后按【Enter】键,就会生成如下代码

<ul class="menu">
    <li class="item"><a href="">list1</a></li>
    <li class="item"><a href="">list2</a></li>
    <li class="item"><a href="">list3</a></li>
    <li class="item"><a href="">list4</a></li>
    <li class="item"><a href="">list5</a></li>
</ul>

 

记得选中所有内容哟,我尝试了不选中内容是没有效果出现的哟。

下面我们一起来看几个常用的快捷方式

【Ctrl+Shift+D】选中代码块(Balance TagInward/Outward):选中当前光标所在的代码块,长按可以依次选中其父块代码。

【Ctrl+Alt+[,Ctrl+Alt+]】转到上一个/下一个编辑点:按下可以依次跳到可输入内容的编辑点,省去了不停按方向键或鼠标来定位编辑点的麻烦。

【Ctrl+Alt+M 】合并行(Merge Lines):将选中的多行代码合并为一行。压缩css、js代码为一行时,这个很方便。Ctrl+A,然后Ctrl+Alt+M,两下即可搞定,免去了动用压缩工具的麻烦。(当然这个只是简单地将代码合并为一行,并不能做更深入的代码压缩)

【Alt+/ 】添加、移除注释(Toggle Comment): 注释掉光标所在的代码块

【Ctrl+Shift+’ 】移除标签(Remove Tag):比如将

<div class="test">
    hello world
</div>

 

移除div标签,留下hello world。

【Ctrl+’ 】空标签转化(Split/Join Tag):比如将<div class=”test”></div>转化为<div class=”test”/>,反向亦可。

我们在这里介绍了一些快捷的使用,但常用的还是我们前面看到那几个生成HTML代码的两种【Ctrl+E】和【Ctrl+Shift+A】当然感兴趣的朋友可以依次去尝试。体会一下。

如果你对JS精通的话,你还可以改写plugins\NppScripting\includes\Zen Coding.js这个JS文件,让它按照你喜欢的编辑习惯,当然你不编写自己的缩写规则,也强烈建议您阅读一下这个JS文件,熟悉Zen Coding自带的一些缩写规则,让你编辑代码更快。

最后Zen Coding分为Zen Html和Zen Css两个部分,在这里我们主要一起探讨了Html部分,如果感兴趣的朋友可以去深入了解一下Zen Css部分

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/blog/32.html © w3cplus.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注