在dreamweaver中使用zen coding的方法_HTML/Xhtml_網頁製作

在我發表上一篇《Zen Coding: 一種快速編寫HTML/CSS程式碼的方法》之後，有網友表示不知道怎麼在Dreamweaver上使用zen coding插件。 OK，今天我就寫一篇詳細的教學來講述如何在DW中使用zen coding。如果你已經知道如何使用，可以不再閱讀這篇文章。

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

準備

安裝外掛程式之前，請確認你已經安裝了adobe Extention Manager，如果沒有安裝，請到Adobe官方下載安裝：

• DW CS3需要安裝Extention Manager 1.8版本，訪問下載頁面，或直接下載；
• 直接下載； 直接下載； 直接下載；

直接下載

；

直接下載； DW CS4需要安裝Extention Manager 2.0版本，訪問下載頁面

，或

直接下載

；

下載安裝
到
zen coding專案首頁

下載最新的zen coding 用於dreamweaver的插件，在該頁面的右側欄有下載列表，就是擴展名為mxp的那個。 （目前的版本是0.7，可以

點這裡下載，裡面有qianduan打包的一個版本，不過官方新版是0.7的了，推薦使用官方的。）。 下載完後，雙擊你下載的那個Zen Coding v.0.7.mxp檔案就可以直接安裝，很簡單。

安裝後重新啟動DW，然後你會在指令選單下發現zen coding子選單，如下圖：

這就表示已經能夠安裝成功了。

使用方法

zen coding的用法也是很簡單的，新建或是在任一html檔案中，切換到程式碼視圖，寫zencoding格式程式碼，例如:

複製代碼

代碼如下:


ul#nav>li*4>a

然後，勾選這行程式碼，按下快速鍵CTRL , 即可產生完整的HTML程式碼：

複製程式碼

複製程式碼

複製程式碼

複製程式碼複製程式碼複製程式碼代碼如下:

• a>

就這麼簡單。 修改Dreamweaver的快速鍵 或許你不習慣使用zen coding插件預設的這幾個快捷鍵，那麼你就可以很簡單的修改快捷鍵： 選擇「編輯」選單下的「快速鍵」子選單即可編輯快速鍵，介面如下圖： 快捷鍵那行顯示的是當前的快捷鍵，需要更改的話，將遊標移到按鍵後面的輸入框，然後直接按鍵盤上的你想使用的鍵即可，點擊“更改”按鈕，然後確定。 如果修改快捷鍵，請注意盡量不要和目前已經使用的快捷鍵衝突。 另外，預設的快捷鍵設定不能夠被修改，在你改的時候會提示，可以按照提示新建一個設定。