文、菜鳥編

這次要介紹給大家另一款套件,但比較不同的地方是不需要儲存就可立即看到更新後的效果。相信應該也很多人使用Chrome的開發工具來做除錯,或是更換CSS查看效果,但仍需要再去原始檔案修正編碼,不過有了這個套件,可直接在Chorme開發工具中修正,就會立刻修正Sublime上的編碼。

 

STEP1

安裝LiveStyle套件,至官網將軟體安裝在本機電腦上。

 

STEP2
開啟Emmet LiveStyle時,會偵測是否已經安裝ChromeSublime套件。

可點擊軟體圖示開啟安裝網頁,或透過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效果,修正的狀況馬上就可以看到,相當方便。

 

 

 

 

官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

 

延伸閱讀

聯成電腦分享:美編晉升設計師的決勝點

聯成電腦菜鳥救星:編輯網頁可即時預覽畫面-Sublime篇(一)

聯成電腦菜鳥救星:不會網頁後端 也可自製網頁表單

聯成電腦菜鳥救星:Typeform讓你用messenger回答問卷

聯成電腦菜鳥救星:虛擬一個新的作業環境吧PART1

文章標籤
創作者介紹

聯成電腦--在成長的路上彼此相伴

lccnetvip 發表在 痞客邦 PIXNET 留言(0) 人氣()