【行動網頁規劃】Sublime Text2 安裝Emmet

Hi! 各位朋友大家好,我是小蔡老師,今天小蔡要先說明如何自己設立ㄧ些快速語法如同Dreamweaver系統相同立即輸入ㄧ些資訊就會自行跳出一程式碼格式

1.首先, 我們要先安裝Emmet,這邊我們採用自行安裝非透過系統安裝因為系統安裝不知為什麼會出現錯誤,下面是Emmet官方完整載點

官方網站: 官方站點

2.點選Download完整下載程式

3.開啟sublimetext2 → 點選Browse Pakages

4.進入Pakages → 將Emmet下載好完整複製丟入這個資料夾內就會自動安裝好了

5.點開Preferences(屬性)→ Pakage Setting(套件設定)就會看到Emmet套件正常安裝到軟體內
005

6.點開Emmet → Settings User(自訂模式) 先輸入以下內容,注意內部要先填寫 “html5”:語法內容 這樣以後在頁面輸入html5按下tab件才會自動顯示輸入的語法
006

7. 在書寫之前,其實跟平常語法相同,只要記住平常書寫原則在記得套件規則
a. \ :區隔
007
b. \n :斷行
008
c. \t :向後空一格
009

8.語法參考 放大觀看
010

9.檔案 → 開新頁面 →另存為”html”頁面
011

10.在新頁面輸入”html5″(Emmet自訂語法的自訂名稱)按下鍵盤tab
012

11.語法自動排列輸出
013

是不是很方便呢!希望大家會喜歡今天的內容優!
(BLOG 線上教學皆為雅朵美術工房所有&BLOG作品皆為設計者阿哲類所有 未經同意請勿盜連或者轉帖,違反者依法處理)

我想發問