如何在Dreamweaver中使用zen coding

在我發表上一篇《Zen Coding: 一種快速編寫HTML/CSS代碼的方法》以後，有網友表示不知道怎麼在Dreamweaver上使用zen coding插件。OK，今天我就寫一篇詳細的教程來說述如何在DW中使用zen coding。若是你已經知道如何使用，能夠再也不閱讀本文。css

可喜的是，我在Dreamweaver CS3上進行了測試，證實Dreamweaver CS3和CS4都是支持Zen coding的這個插件的。html

準備

安裝插件以前，請確認你已經安裝了adobe Extention Manager，若是沒有安裝，請到Adobe官方下載安裝：web

• DW CS3須要安裝Extention Manager 1.8版本，訪問下載頁面，或者直接下載；
• DW CS4須要安裝Extention Manager 2.0版本，訪問下載頁面，或者直接下載；
• cs6  須要安裝Adobe Extension Manager CS6  http://www.adobe.com/cn/exchange/em_download/

下載安裝

到zen coding項目主頁下載最新的zen coding 用於dreamweaver的插件，在該頁面的右側欄有下載列表，就是擴展名爲mxp的那個。（目前的版本是0.5，能夠點這裏直接下載）。測試

下載完後，雙擊你下載的那個zen coding.mxp文件就能夠直接安裝，很簡單。google

安裝後重啓DW，而後你就會在命令菜單下發現zen coding子菜單，以下圖：spa

這就說明已經可以安裝成功了。插件

使用方法

zen coding的用法也是很簡單的，新建或者在任一html文件中，切換到代碼視圖，編寫zencoding格式代碼，好比:3d

ul#nav>li*4>a

而後，選中這行代碼，按下快捷鍵 CTRL + , 便可生成完整的HTML代碼：code

<ul id="nav">
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
</ul>

就這麼簡單。htm

修改Dreamweaver的快捷鍵

或許你並不習慣使用zen coding插件默認的這幾個快捷鍵，那麼你就能夠很簡單的修改快捷鍵：

選擇「編輯」菜單下的「快捷鍵」子菜單便可編輯快捷鍵，界面以下圖：

快捷鍵那行顯示的是當前的快捷鍵，須要更改的話，將光標移動到按鍵後面的輸入框，而後直接按鍵盤上的你想使用的鍵便可，點擊「更改」按鈕，而後肯定。

若是修改快捷鍵，請注意儘可能不要和當前已經使用的快捷鍵衝突。

另外，默認的快捷鍵設置不可以被修改，在你改的時候會提示，能夠按照提示新建一個設置。