在我發(fā)表上一篇《Zen Coding: 一種快速編寫(xiě)HTML/CSS代碼的方法》之后，有網(wǎng)友表示不知道怎么在Dreamweaver上使用zen coding插件。OK，今天我就寫(xiě)一篇詳細(xì)的教程來(lái)講述如何在DW中使用zen coding。如果你已經(jīng)知道如何使用，可以不再閱讀本文。
可喜的是，我在Dreamweaver CS3上進(jìn)行了測(cè)試，證明Dreamweaver CS3和CS4都是支持Zen coding的這個(gè)插件的。
準(zhǔn)備
安裝插件之前，請(qǐng)確認(rèn)你已經(jīng)安裝了adobe Extention Manager，如果沒(méi)有安裝，請(qǐng)到Adobe官方下載安裝：
- DW CS3需要安裝Extention Manager 1.8版本，訪(fǎng)問(wèn)下載頁(yè)面，或者直接下載；
- DW CS4需要安裝Extention Manager 2.0版本，訪(fǎng)問(wèn)下載頁(yè)面，或者直接下載；
下載安裝
到zen coding項(xiàng)目主頁(yè)下載最新的zen coding 用于dreamweaver的插件，在該頁(yè)面的右側(cè)欄有下載列表，就是擴(kuò)展名為mxp的那個(gè)。（目前的版本是0.7，可以點(diǎn)這里下載，里面有qianduan打包的一個(gè)版本，不過(guò)官方新版是0.7的了，推薦使用官方的。）。
下載完后，雙擊你下載的那個(gè)Zen Coding v.0.7.mxp文件就可以直接安裝，很簡(jiǎn)單。
安裝后重啟DW，然后你就會(huì)在命令菜單下發(fā)現(xiàn)zen coding子菜單，如下圖：
這就說(shuō)明已經(jīng)能夠安裝成功了。
使用方法
zen coding的用法也是很簡(jiǎn)單的，新建或者在任一html文件中，切換到代碼視圖，編寫(xiě)zencoding格式代碼，比如:
ul#nav>li*4>a
然后，選中這行代碼，按下快捷鍵 CTRL + , 即可生成完整的HTML代碼：
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
就這么簡(jiǎn)單。
修改Dreamweaver的快捷鍵
或許你并不習(xí)慣使用zen coding插件默認(rèn)的這幾個(gè)快捷鍵，那么你就可以很簡(jiǎn)單的修改快捷鍵：
選擇“編輯”菜單下的“快捷鍵”子菜單即可編輯快捷鍵，界面如下圖：
快捷鍵那行顯示的是當(dāng)前的快捷鍵，需要更改的話(huà)，將光標(biāo)移動(dòng)到按鍵后面的輸入框，然后直接按鍵盤(pán)上的你想使用的鍵即可，點(diǎn)擊“更改”按鈕，然后確定。
如果修改快捷鍵，請(qǐng)注意盡量不要和當(dāng)前已經(jīng)使用的快捷鍵沖突。
另外，默認(rèn)的快捷鍵設(shè)置不能夠被修改，在你改的時(shí)候會(huì)提示，可以按照提示新建一個(gè)設(shè)置。
