在dreamweaver中使用zen coding的方法

2020-03-24 18:32:15

字體：大中小

供稿：網(wǎng)友

在我發(fā)表上一篇《Zen Coding: 一種快速編寫HTML/CSS代碼的方法》之后，有網(wǎng)友表示不知道怎么在Dreamweaver上使用zen coding插件。OK，今天我就寫一篇詳細(xì)的教程來講述如何在DW中使用zen coding。如果你已經(jīng)知道如何使用，可以不再閱讀本文。

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

準(zhǔn)備
安裝插件之前，請確認(rèn)你已經(jīng)安裝了adobe Extention Manager，如果沒有安裝，請到Adobe官方下載安裝： DW CS3需要安裝Extention Manager 1.8版本，點(diǎn)這里下載，里面有qianduan打包的一個版本，不過官方新版是0.7的了，推薦使用官方的。）。下載完后，雙擊你下載的那個Zen Coding v.0.7.mxp文件就可以直接安裝，很簡單。安裝后重啟DW，然后你就會在命令菜單下發(fā)現(xiàn)zen coding子菜單，如下圖：這就說明已經(jīng)能夠安裝成功了。
使用方法
zen coding的用法也是很簡單的，新建或者在任一html文件中，切換到代碼視圖，編寫zencoding格式代碼，比如:

復(fù)制代碼代碼如下:
ul#nav li*4 a

然后，選中這行代碼，按下快捷鍵 CTRL + , 即可生成完整的HTML代碼：

復(fù)制代碼代碼如下:
ul id="nav"
li a href="" /a /li
li a href="" /a /li
li a href="" /a /li
li a href="" /a /li
/ul

就這么簡單。
修改Dreamweaver的快捷鍵或許你并不習(xí)慣使用zen coding插件默認(rèn)的這幾個快捷鍵，那么你就可以很簡單的修改快捷鍵：選擇編輯菜單下的快捷鍵子菜單即可編輯快捷鍵，界面如下圖：快捷鍵那行顯示的是當(dāng)前的快捷鍵，需要更改的話，將光標(biāo)移動到按鍵后面的輸入框，然后直接按鍵盤上的你想使用的鍵即可，點(diǎn)擊更改按鈕，然后確定。如果修改快捷鍵，請注意盡量不要和當(dāng)前已經(jīng)使用的快捷鍵沖突。另外，默認(rèn)的快捷鍵設(shè)置不能夠被修改，在你改的時候會提示，可以按照提示新建一個設(shè)置。
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：Dreamweaver制作錨點(diǎn)鏈接的小技巧

下一篇：dreamweaver怎么制作鼠標(biāo)經(jīng)過圖片變換的效果-_Dre