Dreamweaver CC安裝Emmet套件,實現在Dreamweaver下也可使用Emmet

梅問題-Emmet套件也支援Dreamweaver CC

  有不少網頁設計的朋友,還是習慣使用Dreamweaver來編輯網頁,雖然一樣也是都在原始碼模式來輸入相關的標籤語法,但好處就是Dreamweaver可切換視窗模式,上方是顯示原始碼,下方則顯示設計畫面,因此在編輯時,可第一時間了解目前所編輯區塊的變化性,但有用過Sublime Text的朋友,應該對於Emmet這套件不陌生,透過Emmet可快速的產生HTML的標籤外,還可快速的產生CSS的語法,相當的方便好用。


  雖然這套件支援的編輯器也相當多,甚至也支援Dreamweaver,也推出擴充元件,但雙響安裝套件時,一直出現版本不符的問題,但明明已是最新版了,這也讓梅干研究了好久, 終於找到解決辦法,並將它給裝起來了,現在終於可在Dreamweaver下使用Emmet啦!因此有使用Dreamweaver的朋友,也趕快來安裝一下囉!


Emmet:

套件名稱:Emmet
支援版本:Dreamweaver CS6+
套件下載:https://github.com/emmetio/dreamweaver#readme
套件官網:http://emmet.io/

Step1
進入下載頁面後,點一下Emmet.zxp
梅問題-Emmet套件也支援Dreamweaver CC


Step2
下載完畢雙響後,則會出現這個錯誤畫面,還真讓梅干感到相當的納悶。
梅問題-Emmet套件也支援Dreamweaver CC


Step3
接著打開 「終端機」,再輸入下方的指令後,背面後就會自動開啟Adobe套件管理視窗,同時終端機也會出現已完成的訊息,這樣就安裝完畢了,這只能說好奇特的安裝方法。

/Applications/Adobe\ Extension\ Manager\ CC/Adobe\ Extension\ Manager\ CC.app/Contents/MacOS/Adobe\ Extension\ Manager\ CC -install mxi="~/Downloads/Emmet/Emmet.mxi"

梅問題-Emmet套件也支援Dreamweaver CC


Step4
接著再開啟Dreamweaver,並切到原始碼模式,立馬來測試看看,直接輸出Emmet的編碼規則。
梅問題-Emmet套件也支援Dreamweaver CC


Step5
輸入完畢後,再按Tab鍵,哈~立即就產生出剛所輸入的HTML的標籤結構啦!就不用每天div打個不停啦!對Emmet有興趣的朋友,也可到好友男丁的網站中,有更多關於Emmet的教學喔!!
梅問題-Emmet套件也支援Dreamweaver CC



相關文章

Adobe Dreamweaver CS6以上版本全面支援Bootstrap

Adobe Dreamweaver CS6以上版本全面支援Bootstrap

Adobe Dreamweaver CC 2017-beta測試版搶先用

Adobe Dreamweaver CC 2017-beta測試版搶先用

Dreamweaver CC2015限定-與PSD檔更緊密結合,網頁切版排版更快速

Dreamweaver CC2015限定-與PSD檔更緊密結合,網頁切版排版更快速

Dreamweaver 視覺化的編輯與設計 WordPress 佈景主題

Dreamweaver 視覺化的編輯與設計 WordPress 佈景主題

《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具

《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    reico 說道:

    sorry 是梅”干“老師

  • 第1梅
    reico 說道:

    請問梅乾老師

    用mac下載Emmet.zxp 後發現電腦無法辨識要用什麼軟體開啟該怎麼進行下一步呢? 謝謝您!

    回應:
    要先安裝Adobe套件模組,就可執行zxp檔