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

大家好,今天飛肯要來分享的是一個跨平台的程式與文件編輯器 : 「 Sublime Text 安裝教學,相信各位就算沒有使用過,應該多少都有聽說過?對吧!

相較於普遍多人初學網頁時,會選擇使用的「 Dreamweaver 」軟體,「 Sublime Text 」 雖然介面非常的基本簡單,但最大的優勢就是它有著大量實用的外掛程式,每個人可以根據自己使用上的需求,安裝其所需的外掛,讓這套軟體更為完備且發揮更大的功效。

所以,只要能夠善用擴充套件的功能,且逐步熟悉上手之後,其實「 sublime Text 」是個可以大大提高網頁建置效率的好工具喔~

當然,最佛心的是這個軟體可提供免費下載使用,而且功能與付費版並無差別,那麼以下我們就來分享幾個基本的安裝步驟與設定,帶大家認識一下「 Sublime Text 」 吧~

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


【步驟一】下載及安裝 Sublime Text 教學

首先,請大家直接進入「 Sublime Text 」的官網(網址如下) :

https://www.sublimetext.com/

進入首頁之後,可於上方選單列找到”Download”,請點擊進入~

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


目前最新的版本為 「 Sublime Text 3 」,所以我們就直接下載這個版本吧~在這邊會看到有不同的載點連結,就請大家依照自己的電腦系統來選擇喔。

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

*小提醒:如果跟小編的電腦一樣為 Windows 系統,但是又不清楚自己的電腦是32位元還是64位元時,可一律點選圖示中紅色圓圈的這個 Windows 版本載點。


下載檔案之後,直接執行安裝動作即可。

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

在安裝完成之後(如下圖),大家就可以直接到「程式集」去開啟 Sublime Text 囉 。

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

開啟後的 Sublime Text 使用介面如下圖,真的是很簡潔耶~

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


【步驟二】Sublime Text 的外掛管理程式 – package control 教學

接下來,我們需要先安裝的第一個重要套件叫做「 package control 」,這個外掛管理程式主要可以提供我們搜尋並且安裝其他的 Sublime Text 外掛程式,同時,啟用或是移除時也會使用到,所以建議一定要先安裝喔。

在這邊要請大家先用瀏覽器,點進右方網址: https://packagecontrol.io/

點進網頁後,可以看到上頭列有許多受歡迎或是最新的其他外掛程式,等有空的時候大家可以慢慢研究;不過我們現在要繼續來做安裝的動作,所以請點擊「 Install Now 」按鈕。

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

接著,請先選取在「 Sublime Text 3 」 底下的這一大串安裝用的指令,將它們全部都複製下來。

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

小提醒 : 如果有人之前安裝的是 Sublime Text 2 版本的話,在這邊就要更改選擇 Sublime Text 2 下方的指令喔!


再來,請回到剛剛已開啟的 Sublime Text ,點開 上方工具列 > View > Show Console

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

在最下面 (如底下圖示) 的輸入視窗中,貼上剛剛複製的那段安裝指令,並按下 Enter 。

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

安裝完成後,請記得先關閉 Sublime ,然後再重新開啟一次。

*小提醒 : 假如安裝過程中,有跳出錯誤訊息的話,可以先忽略因為並不會影響安裝。


【步驟三】Command Palette – 指令面板教學

接下來,要介紹的是一個 Sublime Text 很重要的「 Command Palette 」功能,這個指令面板對於呼叫外掛或使用內建指令時都非常方便喔。

請大家先點進上方工具列 > Tools > Command Palette

(快速鍵為 : ” Ctrl + Shift + P “;假如使用的是 Mac 電腦,請將” Ctrl ” 鍵改為” Command “即可。)

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

接著,我們在視窗裡來搜尋看看” package control ” 吧,如果在上一個步驟有安裝成功的話,就會像下方圖示一樣被全部列出來喔~

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


[上篇] 暫時先做到這裡,這些簡單基本的安裝過程,大家應該都有跟上吧?

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

等[ 下篇 ]文章時,我們會再繼續介紹,如何安裝其他常用必備的外掛程式,以及如何用 Sublime Text 來建置一個網頁,希望對大家的網頁設計學習上能有所幫助喔~   ^_^

 

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

 

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

留言功能已關閉。