How to use Zen coding in DW

After I published an article on "Zen coding: A quick way to write html/css code," some netizens said they did not know how to use Zen coding plug-ins on the Dreamweaver. OK, today I'm going to write a detailed tutorial on how to use Zen coding in the DW. If you already know how to use it, you can no longer read this article.

Thankfully, I tested on Dreamweaver CS3, proving that Dreamweaver CS3 and CS4 are the plug-ins that support Zen coding.

Get ready

Before installing the plugin, make sure you have Adobe extention Manager installed, and if not, go to the Adobe official download installation:

• DW CS3 need to install extention Manager version 1.8, access the download page , or download directly ;
• DW CS4 need to install extention Manager 2.0 version, visit the download page , or download directly ;

Download installation

Download the latest Zen coding for Dreamweaver in the Zen Coding Project Home page, which has a download list on the right-hand side of the webpage, the one with the extension MXP. (The current version is 0.5, you can click here to download directly ).

After downloading, double-click on the download of the Zen Coding.mxp file can be directly installed, very simple.

After installation, restart DW, and then you will find the Zen Coding submenu under the Command menu, as shown below:

This means that it has been able to install successfully.

How to use

The use of Zen coding is also very simple, new or in any HTML file, switch to Code view, write zencoding format code, such as:

Ul#nav>li*4>a

Then, select this line of code and press the shortcut key CTRL + to generate the complete HTML code:

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

It's as simple as that.

To modify a Dreamweaver shortcut key

Perhaps you are not used to using the Zen coding plug-in default shortcuts, then you can easily modify the shortcut keys:

You can edit the shortcut keys by selecting the "Shortcut" submenu under the Edit menu, which is shown below:

Shortcut key that line shows the current shortcut key, need to change, the cursor moved to the button behind the input box, and then directly on the keyboard you want to use the key, click the "Change" button, and then determine.

If you modify the shortcut keys, be careful not to conflict with the shortcut keys that are currently in use.

In addition, the default shortcut key settings can not be modified, you will be prompted when you change, you can follow the prompts to create a new setting.