教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ]

又過完一個連假，進入了3月~不知道大家還記得上一回做的 Sublime Text 基本下載與安裝教學嗎？

需要複習的同學，可以點進上一篇教學再熟悉一下喔~

教學：Sublime Text 的安裝設定及入門操作 – [ 上篇 ]

這次我們要延續上一次的進度，也就是已安裝好的「 package control 」套件，現在就要利用它，來進行其他外掛的安裝作業的教學。

【步驟一】安裝「emmet」外掛教學

開啟Sublime Text 之後，先利用快速鍵 :「 Ctrl + Shift + P 」(如果是 Mac 電腦請將 Ctrl 改為 Command 即可) 叫出「 Command Palette 」面板，

接著輸入「 ins 」 關鍵字做搜尋，會出現選項之中有一個「 Package Control : Install Package 」 ，點選它就沒錯囉！

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-12

* 小提醒 : 假如輸入「 ins 」卻搜尋不到的話，就表示之前的「 Package Control 」套件並沒有安裝成功，請再重新安裝一次吧。

接下來，會出現另一個跟剛剛 「 Command Palette 」長得很像的指令面板，這時就輸入我們這次要安裝的外掛名稱「 emmet 」 做搜尋 :

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-13

出現的第一個選項，就是這次要安裝的主角了~

「 emmet 」(也就是 Zen Coding )主要作用，是只要在 HTML 或 CSS 文件中，輸入簡化的語法 + [Tab] 鍵，就可以完成一段程式碼，所以建議大家一定要安裝，這可是幫助我們省時的最佳工具！

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-14

點擊之後，在安裝的過程中，大家可以注意一下畫面左下方，這邊會顯示目前所處理中的狀態:

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-15

等安裝完成之後，會出現如下方圖示的訊息視窗，直接按右上角關閉即可。

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-16

【步驟二】安裝支援中文的外掛 – 「 Convert To UTF8 」教學

由於 Sublime Text 預設並沒有支援中文，所以我們接下來要裝的是這個外掛 :「 Convert To UTF8 」。

安裝步驟除了外掛名稱不同以外，其他過程與[步驟一]幾乎是一模一樣，需重新叫出「 Command Palette 」指令面板，此時會發現不用自己輸入就已經自動跳出「ins」選項(真是方便!)；再來也是只要輸入關鍵字，搜尋後就可找到並進行安裝囉 。

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-17

* 小提醒 : 每次要安裝一個新的外掛程式，步驟都是一樣的~所以建議大家要熟記這個呼叫指令面板的快速鍵，非常實用。

安裝完成之後，由於此外掛原本設定的中文自動辨識順序，簡體字會優先於繁體字，假如想要調整的話，請先至工具列 :

Preferences > Package Settings > ConvertToUTF8 > Settings – Default

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_1

將一整頁的原始設定全部選取並複製起來 :

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_2

接著，一樣點開工具列，但是這次要選擇的是下方「 Settings – User 」這個選項 :

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_3

貼上剛剛已複製的整頁文字，並將原本排在簡體字底下 BIG5 (繁中)的這一行，剪下改貼到第一行~

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_4

這樣就可以完成使用者的設定，讓中文辨識時繁體字會優先於簡體字了。

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_5

*小提醒 : 如果是整個檔案的編碼，想要更改成繁體中文或是其他語言選項，則可參考底下圖示。

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_6

【步驟三】開始建置一個 HTML 網頁教學

首先，大家可以在 Sublime Text 右下角的地方，找到一個快速選擇文件格式的小功能鍵 :

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-18

請從清單中搜尋並選擇「 HTML 」格式 :

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-19

接著，來體驗一下 「 emmet 」外掛的好用之處吧~

直接打上 「html:5」 (或是「!」也可以喔)，然後按[Tab]鍵做轉換:

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-20

哇~ 馬上就自動產生出 HTML5 的網頁架構了！很有效率吧！

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-21

以此類推，只要下對關鍵字 + [ Tab ] 鍵，就可以產出相對應的語法；大家可以依照圖示先用 h1 做練習 :

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-22

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-23

再多打幾個標籤練習看看，同樣都能利用 [ Tab ]鍵輕鬆完成轉換唷~

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-24

(除了圖示有列出的這幾項之外，還有”ul”、”li”、”img”…等，大家都可以自己試試看)

* 小提醒 : 假如想要外部附加 CSS 樣式表，也可以利用 「 link:css」 + [ Tab ] 鍵 :

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-25

快速完成囉！(請記得將 css 更改成正確的檔名喔)

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-26

其他 Sublime Text 的功能補充教學:

除了上述的基本操作之外，

這邊再補充幾點可供大家參考的小撇步；

  1. 右上角的縮圖功能 – 只要利用滑鼠點擊拖曳，可以就目前開啟中的檔案，做快速的跳段。
    (當語法寫到落落長的時候就會備感貼心啊~)CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-27

  2. 畫面分割快速鍵 – 如需要左右開弓同時比對編輯時，可利用快速鍵 「 Alt + Shift + 2 」，或是參考下方的圖示的工具選單位置。(需要分割更多畫面，就將數字”2″替換成其他數字即可。)CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-28*小提醒 : 在 windows 使用快速鍵時，會發生無法使用鍵盤右側數字鍵的情形，所以請改用英文區上方的那一排數字。

  3. 開啟側邊欄(Side Bar) : 若同時有多個資料夾或是檔案時，可開啟側邊欄方便直接管理跟編輯。(快速鍵 : 「 Ctrl + K + B 」直接做開啟跟關閉的切換)CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-30

  4. 檢視/解除已安裝的外掛 : 如下方圖示，須利用「 Package Control 」功能。CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-31
  5. 解除安裝之後，如果也想移除原先系統已產生的相關設定檔，則需要自行手動刪除。路徑為 : 工具列 > Preferences > Browse Packages ，點進去之後，找到「User」這個資料夾，就會看到內存的各個設定檔囉。

CSS 教學 - 網頁排版 Dreamweaver 網頁設計 Free Resource 好康報報 JavaScript 程式設計 RWD 響應式網頁 - 教學：Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-32

希望這次分享的 Sublime Text 基本介紹教學，能讓同學們在學習 HTML + CSS 方面，多了一種編輯器的選擇，只要多加練習、善用工具，一定可以增進自己的功力喔~   ^_^

 

當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！

 

熱門的文章

posted in CSS 教學 - 網頁排版, Dreamweaver 網頁設計, Free Resource 好康報報, JavaScript 程式設計, RWD 響應式網頁 and tagged , , , , , , .

留言功能已關閉。