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:
Download and installGo 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. 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 keysMaybe 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
Ideas: An outer box sets the background; an inner...
To install VMWare under Linux, you need to downlo...
Table of contents Preface 1. Props, $emit one-way...
1. px px is the abbreviation of pixel, a relative...
This article uses examples to explain the princip...
Table of contents Example 1 Example 2 Example 3 E...
First, what is box collapse? Elements that should...
Table of contents 1. BOM 2. Composition of BOM 2....
Table of contents 1. Download MySQL 2. Unzip the ...
Table of contents Preface: 1.Brief introduction t...
HTML imitates the Baidu Encyclopedia navigation d...
Let's take a look at zabbix monitoring sqlser...
This article shares the specific code of JavaScri...
Download address: https://dev.mysql.com/downloads...
Unzip the file into a directory This is the direc...