在dreamweaver中应用zen coding的方式

在我发布上1篇《Zen Coding: 1种迅速撰写HTML/CSS编码的方式》以后,有网友表明不知道道如何在Dreamweaver上应用zen coding软件。OK,今日我就写1篇详尽的实例教程来说述怎样在DW中应用zen coding。假如你早已了解怎样应用,能够已不阅读文章本文。

可喜的是,我在Dreamweaver CS3勤奋行了检测,证实Dreamweaver CS3和CS4全是适用Zen coding的这个软件的。

提前准备

安裝软件以前,请确定你早已安裝了adobe Extention Manager,假如沒有安裝,请到Adobe官方免费下载安裝:

  • DW CS3必须安裝Extention Manager 1.8版本号,浏览免费下载网页页面,或立即免费下载
  • DW CS4必须安裝Extention Manager 2.0版本号,浏览免费下载网页页面,或立即免费下载

免费下载安裝

zen coding新项目首页免费下载全新的zen coding 用于dreamweaver的软件,在该网页页面的右边栏有免费下载目录,便是拓展名为mxp的那个。(现阶段的版本号是0.7,能够点这里免费下载,里边有qianduan装包的1个版本号,但是官方新版是0.7的了,强烈推荐应用官方的。)。

免费下载完后,双击鼠标你免费下载的那个Zen Coding v.0.7.mxp文档便可以立即安裝,很简易。

安裝后重新启动DW,随后你就会在指令菜单下发现zen coding子菜单,以下图:

这就表明早已可以安裝取得成功了。
应用方式
zen coding的用法也是很简易的,新建或在任1html文档中,切换到编码主视图,撰写zencoding文件格式编码,例如:

拷贝编码
编码以下:

ul#nav>li*4>a

随后,选定这行编码,按下便捷键 CTRL + , 便可转化成详细的HTML编码:

拷贝编码
编码以下:

<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

就这么简易。

改动Dreamweaver的便捷键

也许你其实不习惯性应用zen coding软件默认设置的这几个便捷键,那末你便可以很简易的改动便捷键:

挑选“编写”菜单下的“便捷键”子菜单便可编写便捷键,页面以下图:

便捷键那行显示信息的是当今的便捷键,必须变更的话,将光标挪动到功能键后边的键入框,随后立即功能键盘上的你想应用的键便可,点一下“变更”按钮,随后明确。

假如改动便捷键,请留意尽可能不必和当今早已应用的便捷键矛盾。

此外,默认设置的便捷键设定不可以够被改动,在你改的情况下会提醒,能够依照提醒新建1个设定。