一、關於emmet插件
已經接觸前端工具的小伙伴們早聽說過這個插件的鼎鼎大名了吧，emmet可以說是前端工程師的利器，就連老牌dreamweaver 都可以支持，我們怎么好意思拒絕這個好東西呢？
有了它，即使姜老了還是可以那么辣的，可以省下很多功夫去布局，例如：在html頁面中敲入：div#title>div.title_left+div.title_right>ul>li*5，然后按Tab鍵(dreamweaverCS6 需要自行設置)，就會彈出以下代碼：
1 <div id="title">
2 <div class="title_left"></div>
3 <div class="title_right">
4 <ul>
5 <li></li>
6 <li></li>
7 <li></li>
8 <li></li>
9 <li></li>
10 </ul>
11 </div>
12 </div>
是不是感到很爽很神奇的的感覺？ 手癢了吧？
二、在dreamweaver CS6安裝emmet擴展插件
1.首先, 現在dreamweaver CC 是目前最新版本，但是本篇以dreamweaver CS6為准。先安裝dreamweaver CS6。注意：解壓出來已經破解免安裝的，會有點問題，安裝emmet插件的時候會報錯，會提示需要更高版本的。所以，請使用安裝版來進行安裝。http://www.frontopen.com/1179.html (供參考)請參考安裝方法和破解就不一一說了，很簡單的事情。
建議右鍵選擇迅雷下載！
3.好了，現在萬事俱備，只欠東風。我們要擴展插件，就需要一個先安裝一個擴展管理：
EXTENSION MANAGER CS6
點開Adobe官網 http://www.adobe.com/ ，打開搜索：
安裝就不說了，安裝完之后，雙擊Emmet.zxp安裝好，過程省略，這下子就大功告成了。
三、修改emmet快捷鍵
安裝好之后，菜單欄"命令"--"Emmet",查看到“Expand-Abbraviation”的默認按鍵是Ctrl+e, 如果這時候我們興高采烈去html頁面敲一敲：div#title>div.title_left+div.title_right>ul>li*5,按下Ctrl+e, 會發現跳出下面這個東西：
這個是dreamweaver 默認標簽選擇器的快捷鍵 Ctrl+e, 所以我們要修改一下emmet的快捷鍵，“編輯”--“快捷鍵”--“命令”--“Emmet”，看到下圖：
然后進行修改就行了，這里因為不想摒棄dreamweaver Tab縮進的功能，所以就設置Ctrl+/的快捷鍵，當然喜歡用Tab就設置Tab按鍵，看個人愛好習慣。
這下子我們輸入：div#title>div.title_left+div.title_right>ul>li*5，按Ctrl+/，
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文檔</title>
6 </head>
7
8 <div id="title">
9 <div class="title_left"></div>
10 <div class="title_right"></div>
11 </div>
12 <body>
13 <div id="title">
14 <div class="title_left"></div>
15 <div class="title_right">
16 <ul>
17 <li></li>
18 <li></li>
19 <li></li>
20 <li></li>
21 <li></li>
22 </ul>
23 </div>
24 </div>
25 </body>
26 </html>
千等萬等終於等到你，千呼萬喚始出來，有點苦盡甘來的感覺有木有！
大家安裝會遇到各種各樣的問題，千萬不要放棄，正所謂“路漫漫其修遠兮，吾將上下而求索”！
辛苦敲的，若是轉載請注明出處。