在我发表上一篇《Zen Coding: 一种快速编写HTML/CSS代码的方法》之后,有网友表示不知道怎么在Dreamweaver上使用zen coding插件。OK,今天我就写一篇详细的教程来讲述如何在DW中使用zen coding。如果你已经知道如何使用,可以不再阅读本文。

可喜的是,我在Dreamweaver CS3上进行了测试,证明Dreamweaver CS3和CS4都是支持Zen coding的这个插件的。

准备

安装插件之前,请确认你已经安装了adobe Extention Manager,如果没有安装,请到Adobe官方下载安装:

下载安装

zen coding项目主页下载最新的zen coding 用于dreamweaver的插件,在该页面的右侧栏有下载列表,就是扩展名为mxp的那个。(目前的版本是0.5,可以点这里直接下载)。

下载完后,双击你下载的那个zen coding.mxp文件就可以直接安装,很简单。

安装后重启DW,然后你就会在命令菜单下发现zen coding子菜单,如下图:

这就说明已经能够安装成功了。

使用方法

zen coding的用法也是很简单的,新建或者在任一html文件中,切换到代码视图,编写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插件默认的这几个快捷键,那么你就可以很简单的修改快捷键:

选择“编辑”菜单下的“快捷键”子菜单即可编辑快捷键,界面如下图:

快捷键那行显示的是当前的快捷键,需要更改的话,将光标移动到按键后面的输入框,然后直接按键盘上的你想使用的键即可,点击“更改”按钮,然后确定。

如果修改快捷键,请注意尽量不要和当前已经使用的快捷键冲突。

另外,默认的快捷键设置不能够被修改,在你改的时候会提示,可以按照提示新建一个设置。

如何在Dreamweaver中使用zen coding的更多相关文章

  1. 如何在Dreamweaver中使用emmet

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3666 一.emmet ...

  2. Visual Studio 2012中使用Zen Coding,写html的神器!

    点工具 -扩展和更新的联机库中 找到以下俩插件 安装后重新启动 新建一个html文件.将下行代码拷贝到页面里. div>(header>div)+(section>ul>li. ...

  3. 结合Zen Coding快速编写HTML代码(sublime text2篇)

    首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...

  4. Sublime Text 2+Zen Coding

    自己长期使用editplus做代码编辑,使用过DW,还是习惯前者的使用环境.好友推荐,试试新的编码工具——Sublime Text 2.在代码制作过程中,最主要的是1)快速复制的模式化工作  2)零碎 ...

  5. vim 中 也可以 直接安装 emmet 直接使用zen coding 生成 l指定个数的 lorem ipsum文字.

    超链接的写法: 当作为链接的文字, 比较长时, 整个作为链接 就显得不是 很适合. 可以取其中的某一个单词 作为 超链接的 关键字:如: click here to continue emmet中如何 ...

  6. 使用Emmet(前身Zen Coding)加速Web前端开发

    Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章 ...

  7. Zen Coding 快速编写HTML/CSS代码的实现

    在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...

  8. zen coding一个牛的不行的html和css开发工具

    zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...

  9. 我也来谈谈使用Zen Coding快速开发html和css原理

    zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...

随机推荐

  1. Android清理设备内存具体完整演示样例(一)

    MainActivity例如以下: package come.on; import android.app.Activity; import android.content.Context; impo ...

  2. zoj3640(概率dp)

    题目连接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4808 题意: 一个吸血鬼,每次可以随机的选择n个洞中的任意一个,如果 ...

  3. hdu3240 Counting Binary Trees

    Counting Binary Trees Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...

  4. 京东商城招聘自动调价系统架构师 T4级别

    岗位级别:T4 岗位职责: 1.负责自动调价系统的架构设计 2.负责自动调价的预测.相关性算法设计 3.核心代码编写,代码review 任职要求: 1.熟悉数据挖掘.机器学习理论和算法 2.熟悉海量数 ...

  5. Mac下配置Cocos2d-x3.1环境

    一.前期准备 1.ADT:百度下就OK 2.NDK:百度下就OK 3.ANT: http://124.254.47.39/download/55152992/78533365/4/zip/57/132 ...

  6. MYSQL经常使用命令列表

    MYSQL经常使用命令列表 1.系统管理 mysql -h主机地址 -uusername -p 连接MYSQL(在mysql/bin) exit 退出MYSQL命令 mysqladmin -uuser ...

  7. http://fonts.googleapis.com/css?打开很慢解决方案

    最近, 在写一个demo的时候突然发现加载超级慢, 寻找之下发现了"罪魁祸首", 系引用了http://fonts.googleapis.com/css. 接着在网上看到有网友反映 ...

  8. org.jsoup.select.Selector

    org.jsoup.select.Selector CSS-like element selector, that finds elements matching a query. Selector ...

  9. VMware GSX Server 3.2.1 Build 19281免费下载

    VMware GSX Server 3.2.1 Build 19281免费下载 评论2   字号:大中小 订阅 VMware官方下载: For Windows 版系统:http://download3 ...

  10. HibernateReview Day1 - Introduction

    Hibernate已经学过去大概有半个月了,然后默默的忘掉了……所谓Practice makes perfect. 我尽力重新拾起来. 1.什么是ORM 在介绍Hibernate之前,我们先学习下OR ...