How to Install Zen Coding in Dreamweaver

The Zen Coding package is a set of free tools designed to speed up website design in HTML, HyperText Markup Language and CSS, or Cascading Style Sheet, code. Distributed by Google, Zen Coding is available as a plug-in application for many website design programs, including Adobe Dreamweaver. To add Zen Coding in Dreamweaver, download the plug-in package and install it with the Adobe Extension Manager tool.

Instructions

1. Launch your Web browser and go to the Zen Coding download page at Codes.google.com.

2. Find the latest version of Zen Coding for Dreamweaver toward the top of the page. The Dreamweaver version has the MXP file extension in the file name details in the right-hand column.

3. Click the “Download” button with the green arrow icon next to Zen Coding for Dreamweaver. Click “Save” in the download window. Set a save location on your computer, or use the default save location, which is usually the “My Downloads” or “Downloads” library folder. The download usually takes less than a minute.

4. Double-click the downloaded file to launch the Adobe Extension Manager.

5. Click the “Accept” button in the Adobe Extension Manager dialog box to agree to the terms and conditions, which you can read in the text pane in the center of the dialog box.

6. Wait for the Adobe Extension Manager to install the Zen Coding plug-in and display the file name next to “Dreamweaver” in the "Products" column.

7. Click the “Enable” check box to complete the procedure and exit the Adobe Extension Manager by clicking “File” followed by “Exit.”

Tips & Warnings

• Once you’ve installed the plug-in, access Zen Coding by clicking “Command” in the main Dreamweaver menu, followed by “Zen Coding” in the drop-down menu.

References

• Zen Coding: A New Way of Writing HTML and CSS Code
• Adobe Extension Manager CS5: About the Extension Manager

Resources

• Zen Coding: Downloads
• Adobe Extension Manager CS5: Product Support