首頁  >  文章  >  web前端  >  在dreamweaver中使用zen coding的方法_HTML/Xhtml_網頁製作

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

WBOY
WBOY原創
2016-05-16 16:41:322183瀏覽

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

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

準備

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

直接下載

直接下載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程式碼:

複製程式碼

複製程式碼

複製程式碼

複製程式碼複製程式碼複製程式碼代碼如下: 就這麼簡單。 修改Dreamweaver的快速鍵 或許你不習慣使用zen coding插件預設的這幾個快捷鍵,那麼你就可以很簡單的修改快捷鍵: 選擇「編輯」選單下的「快速鍵」子選單即可編輯快速鍵,介面如下圖: 快捷鍵那行顯示的是當前的快捷鍵,需要更改的話,將遊標移到按鍵後面的輸入框,然後直接按鍵盤上的你想使用的鍵即可,點擊“更改”按鈕,然後確定。 如果修改快捷鍵,請注意盡量不要和目前已經使用的快捷鍵衝突。 另外,預設的快捷鍵設定不能夠被修改,在你改的時候會提示,可以按照提示新建一個設定。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn