How to use Zen coding in Dreamweaver

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:

<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 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

Recommend

Pure CSS code to achieve flow and dynamic line effects

Ideas: An outer box sets the background; an inner...

Tutorial on installing VMWare15.5 under Linux

To install VMWare under Linux, you need to downlo...

A very detailed summary of communication between Vue components

Table of contents Preface 1. Props, $emit one-way...

MySql knowledge points: transaction, index, lock principle and usage analysis

This article uses examples to explain the princip...

Share JS four fun hacker background effect codes

Table of contents Example 1 Example 2 Example 3 E...

5 solutions to CSS box collapse

First, what is box collapse? Elements that should...

Detailed explanation of JavaScript BOM composition and common events

Table of contents 1. BOM 2. Composition of BOM 2....

Detailed explanation of MySQL DEFINER usage

Table of contents Preface: 1.Brief introduction t...

HTML imitates Baidu Encyclopedia navigation drop-down menu function

HTML imitates the Baidu Encyclopedia navigation d...

Detailed explanation of the process of zabbix monitoring sqlserver

Let's take a look at zabbix monitoring sqlser...

JavaScript custom calendar effect

This article shares the specific code of JavaScri...

Tutorial on installing mysql5.7.36 database in Linux environment

Download address: https://dev.mysql.com/downloads...