How to use zen coding in dreamweaver_HTML/Xhtml_webpage production

After I published my last article "Zen Coding: A quick way to write HTML/CSS code", some netizens expressed that they did not know how to use the zen coding plug-in on Dreamweaver. OK, today I will write a detailed tutorial on how to use zen coding in DW. If you already know how to use it, you can stop reading this article.

The good news is that I tested it on Dreamweaver CS3, which proved that both Dreamweaver CS3 and CS4 support the Zen coding plug-in.

Get ready

Before installing the plug-in, please make sure you have installed Adobe Extention Manager. If not, please download and install it from Adobe official website:

• DW CS3 needs to install Extention Manager version 1.8, visit the download page, or download directly;
• DW CS4 needs to install Extention Manager 2.0 version, visit the download page, or directly download ;

Download and install

Go to zen coding project homepage to download the latest zen coding plug-in for dreamweaver. There is a download list in the right column of the page, which is the one with the extension mxp. (The current version is 0.7, you can click here to download , there is a version packaged by qianduan, but the official new version is 0.7, it is recommended to use the official one.).

After downloading, double-click the Zen Coding v.0.7.mxp file you downloaded to install it directly. It is very simple.

Restart DW after installation, and then you will find the zen coding submenu under the command menu, as shown below:

This means that the installation has been successful.
How to use
The usage of zen coding is also very simple. Create a new one or switch to the code view in any html file and write zencoding format code, such as:

Copy the code

The code is as follows:

ul#nav>li*4>a

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

Copy code

The code is as follows:

• 
  

It’s that simple.

Modify Dreamweaver shortcut keys

Maybe you are not used to using the default shortcut keys of the zen coding plug-in, then you can easily modify the shortcut keys:

Select the "Shortcut Keys" submenu under the "Edit" menu to edit the shortcut keys. The interface is as shown below:

The shortcut key row displays the current shortcut key. If you need to change it, move the cursor to the input box behind the key, then directly press the key you want to use on the keyboard, click the "Change" button, and then Sure.

If you modify the shortcut keys, please be careful not to conflict with the currently used shortcut keys.

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