以前在網頁設計和修改免費網頁樣板的時候最常使用的編輯器是Adobe
Dreamweaver，不但開啟時要等到睡著，在排版上不如人意，在編譯執行時對於特定語法(例如動態)也不能即時呈現。
使用 sublime Text後， sublime
Text的好處是在做網頁設計時可以將你需要的功能以套件(Plugin)的方式快速安裝，上述所有問題在其套件強大的火力支援下都能立刻解決了，高下立判。喔！對了，除此之外他的撰寫介面提供許多華麗又漂亮的版型，在撰寫時視覺上非常享受呢！
接下來將介紹以下內容：
Sublime Text 的安裝
Sublime Text 操作教學
Sublime Text 超實用外掛介紹
Sublime Text 的安裝
首先進入官網依自己作業系統的版本選擇下載即可進行安裝，安裝過程簡單，過程中應該不會有困難。
Sublime Text 操作教學
接著幾乎零延遲的打開 Sublime Text
在預設的使用者介面中，包含中央的編輯區，中央右側為全文件的縮小版(目前沒有文字)，當程式碼眾多時，以滑鼠快速瀏覽十分方便。
在左方為目錄管理欄，可以在「File」選擇要開啟檔案或資料夾，管理起來很方便，若看不順眼也可以「Ctrl+K+B」快速收起。
Sublime Text 超實用外掛介紹
前面提及 Sublime Text 的套件火力強大，以下開始一一介紹：
Package Control：安裝Package Control是為了要安裝更多套件
Package Control是用來顯示、下載、安裝、管理所有網路上支援 Sublime Text 的功能套件。
萬事起頭難，第一步的步驟比較多，請依序執行工具列的「View」→「Show Console」控制台選項(或快捷鍵Ctrl+`
)，用來開啟視窗下方的控制台視窗，並貼上Package
Control官網中的指令：
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
安裝完成顯示「Please restart Sublime Text to finish
installation」，接著關閉軟體再重新啟用就可以了。之後要安裝任何套件的起手式皆為「Preferences」→「Package
Control」，或是直接以快捷鍵ctrl+shift+P，接著輸入「Install
Package」即可開始選擇想要安裝的套件喔！
Emmet：時間就是金錢，減少撰寫時間
若您想要建一個html的基本結構輸入
!
後按Tab即可產生
Document
還有幾組常用的如：
div>ul>li
按下Tab就會變成
用順後可以加速很多，減少許多開發時間。
參考文件：http://docs.emmet.io/abbreviations/syntax/
Color Highlighter：顏色在您面前無所遁形
可即時顯示你所打出來的顏色編碼。
Color Picker：直接使用Sublime挑選顏色吧
運用快捷鍵Ctrl+Shift+C來選色，超級方便，再搭配上面的套件根本變成色彩學達人。
SideBarEnhancements
(圖片取自官方Github)
原本內建的SideBar選項很少，安裝此套件功能馬上升級。
BracketHighlighter：不再找的到「{」找不到「}」
可以更清楚的標示相對應Tag，可以從default-setting中修改想要的樣式。
LiveReload：即時更新網頁設計時的更改狀態，不用再按F5重新整理拉！
我認為是必裝的套件，可節省非常多時間。您需要自行下載檔案放進package中，因為在sublime搜尋到的是舊版的，將造成無法使用的狀況。
下載完後重新啟動 sublime ，輸入：
Ctrl+Shift+P
LiveReload: Enable/disable plugins
Enable – SimpleReload
接著需要在瀏覽器中也要安裝，依您使用的瀏覽器進入http://livereload.com/extensions/ 選擇，若是Chrome的要特別注意，要將「允許存取檔案網址」打勾。
之後只要開啟sublime Text 的同時點下右上方的鈕即可進行連結，之後只要一存檔，網頁不須重新整理即可變換成新樣式！
學習網頁設計時，若有好用的開發工具，在學習的速度上絕對事半功倍，大家一起加油吧！
延伸閱讀：設計門外漢也能「看出」好的電商文案設計
原文出處：本文轉載自合作媒體 人育資訊
嚴禁抄襲，若欲轉載，敬請註明出處「SmartM」並附上原文連結。
歡迎各大媒體交換文章連結。
圖片來源：主圖、縮圖:Jeffrey Zeldman(C.C. Licensed)
加入SmartM粉絲團，更多電商訊息等你關注 https://www.facebook.com/smartm.tw
↧