How to use Zen coding in Dreamweaver

After I published my last article “Zen Coding: A Quick Way to Write HTML/CSS Code”, some netizens said they didn’t 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 don't need to read this article any more.

Fortunately, I tested it on Dreamweaver CS3 and found that both Dreamweaver CS3 and CS4 support the Zen coding plug-in.

Prepare

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

DW CS3 requires the installation of Extension Manager version 1.8, visit the download page , or download directly ;
DW CS4 requires the installation of Extension Manager 2.0 , visit the download page , or download directly ;

Download and install

Go to the 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, which can be downloaded here . 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's 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 the installation has been successful.
How to use
The usage of Zen coding is also very simple. Create a new file or in any HTML file, switch to the code view and write Zencoding format code, for example:

Copy 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 plugin, 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 follows:

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

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 want to change them, and you can create a new setting according to the prompts.

<<: Pure CSS to change the color of the picture

>>: JavaScript to implement slider verification code