電商網頁設計不求人：編輯神器 Sublime Text

以前在網頁設計和修改免費網頁樣板的時候最常使用的編輯器是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