Using zencoding in dreamweaver _ HTML/Xhtml _ webpage Creation

In many cases, there are many web pages developed with dreamweaver, because the visual interface is the best because it is really good. You are also familiar with it, but you are not very clear about how to use it. Here is a brief introduction. After I posted my previous article "Zen Coding: A quick way to write HTML/CSS code", some netizens said they do 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 skip this article.

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

Preparation

Before installing the plug-in, make sure that you have installed adobe Extention Manager. If not, download and install the plug-in from Adobe Official Website:

• DW CS3 needs to install Extention Manager 1.8 to access the download page or download it directly;
• Extention Manager needs to be installed for DW CS42.0Version, visit the download page, or download directly;

Download and install

Download the latest zen coding plug-in for dreamweaver on the zen coding project homepage. The download list is in the right column of the page, that is, the one with the extension of mxp. (The current version is 0.7. You can download it here. There is a qianduan package version, but the official version is 0.7. We recommend that you use the official version .).

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

Restart DW after installation, and then you will find the zen coding Sub-menu under the command menu, such:

This indicates that the installation is successful.
Usage
The usage of zen coding is also very simple. You can create or switch to the Code view in any html file and write the zencoding format code, for example:

The Code is as follows:

Ul # nav> li * 4>

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

The Code is as follows:

That's simple.

Modify the shortcut key of Dreamweaver

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

Select the shortcut menu under the "edit" menu to edit the shortcut key, as shown in the following figure:

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

If you modify the shortcut key, try not to conflict with the currently used shortcut key.

In addition, the default shortcut key setting cannot be modified. You will be prompted to create a new setting as prompted.