聯成電腦網頁設計教學：編輯網頁可即時預覽畫面-Sublime篇(二)
文、菜鳥編
這次要介紹給大家另一款套件，但比較不同的地方是不需要儲存就可立即看到更新後的效果。相信應該也很多人使用Chrome的開發工具來做除錯，或是更換CSS查看效果，但仍需要再去原始檔案修正編碼，不過有了這個套件，可直接在Chorme開發工具中修正，就會立刻修正Sublime上的編碼。
STEP1
安裝LiveStyle套件，至官網將軟體安裝在本機電腦上。
STEP2
開啟Emmet LiveStyle時，會偵測是否已經安裝Chrome及Sublime套件。
可點擊軟體圖示開啟安裝網頁，或透過Chrome商店安裝。
套件名稱：Emmet LiveStyle
下載位置：Chrome商店
安裝完成後，可以看到一個圖示。
STEP3
在Sublime部分可點擊軟體圖示，就會自動將套件安裝在Sublime上，或是手動來安裝，開啟Sublime編輯器後，按下「Ctrl+Shit+P」，接著輸入install package。
安裝套件視窗中，找出或是輸入「LiveSyle」，點擊安裝。
STEP4
將設計的網頁使用Chrome瀏覽器開啟
在Chrome瀏覽器中按下F12開啟開發工具，點選LiveStyle。
接著點擊Chome上的LiveStyle套件，並將原本的OFF調整成ON。
STEP5
馬上就偵測出此網頁中所有的CSS檔案，只要在Sublime將這些CSS檔案開啟，就可選取對應的CSS檔案，紅框處可設定單向或是雙向同步。
STEP6
從下面影片可以看到，不管是透過Chrome開發工具，或是Sublime都可同步修正CSS效果，修正的狀況馬上就可以看到，相當方便。
