《Sublime Text外掛》Emmet&HTML Boilerplate二隻外掛,讓你快速產生HTML5網頁範本

梅問題-網設工具-《Sublime Text》二隻外套件讓你快速產生HTML5網頁範本
  Sublime Text應該是目前許多網頁設計師,必備的網頁編輯器之一,除了擁有許多的外掛套件外,再來就是可橫跨平台,同時還有提示詞與高亮的原始碼,讓在編輯網頁更加的方便,但Sublime Text不像Dreamweaver,建立一個新檔案後,就可自動產生基本的HTML架構,因此就得自已手動打,其實現在不用這麼麻煩啦!現在只要安裝二隻外掛套件後,就可快速的產生HTML5的網頁範本啦!至於怎麼用,現在就一塊來看看吧!

自動產生HTML5網頁外掛1-Emmet:
Step1
開啟Sublime Text後,按ctrl(command)+shift+p,並輸入Install Package
梅問題-網設工具-《Sublime Text》二隻外套件讓你快速產生HTML5網頁範本
Step2
接著輸入emmet
梅問題-網設工具-《Sublime Text》二隻外套件讓你快速產生HTML5網頁範本
Step3
這樣就安裝完畢了。
梅問題-網設工具-《Sublime Text》二隻外套件讓你快速產生HTML5網頁範本
Step4
接著開啟新檔案,並點右下的文字,將模式切換成HTML
梅問題-網設工具-《Sublime Text》二隻外套件讓你快速產生HTML5網頁範本
Step5
再對著頁面輸入,html:5  ! 
梅問題-網設工具-《Sublime Text》二隻外套件讓你快速產生HTML5網頁範本
Step6
接著再按鍵盤上的Tab鍵,就會自動產生出HTML5的網頁範本啦!
梅問題-網設工具-《Sublime Text》二隻外套件讓你快速產生HTML5網頁範本
自動產生HTML5網頁外掛2-HTML Boilerplate:
Step7
重覆步驟1,並輸入HTML Boilerplate
梅問題-網設工具-《Sublime Text》二隻外套件讓你快速產生HTML5網頁範本
Step8
一樣開新檔案,將右下切換成HTML模式,並於畫面輸入htmlboiler
梅問題-網設工具-《Sublime Text》二隻外套件讓你快速產生HTML5網頁範本
Step9
再按Tab鍵,一樣的除了產生HTML5的網頁範本外,還加入了Viewport以及GoogleAnalytics的碼。
梅問題-網設工具-《Sublime Text》二隻外套件讓你快速產生HTML5網頁範本

相關文章

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟





回應本篇 »

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

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

共 5 梅留言

  • 第2梅
    不二蘭 說道:

    我有個疑問~
    http://i.imgur.com/iRFqblq.jpg
    好想沒辦法點開看預覽?

  • 第1梅
    不二蘭 說道:

    請問,
    是否可以再詳細教學~?
    越詳細越好~
    謝謝您。

    回應:
    請問您是指那一個部分~~

近期講座

近期講座

更多講座