網頁設計, 網頁資源

ATOM 免費跨平台網頁編輯器,支援EMMET與即時預覽HTML畫面

2017/04/25
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
  一直以來梅干最常使用的網頁編輯器,除了Dreamweaver CC 2017以外,再來就是Sublime Text,一來是Sublime Text相當的輕巧,開啟速度快,同時也有許多外掛可進行擴充,讓Sublime Text在編輯網頁更加的方便,尤其是Emmet這隻外掛,更是讓梅干愛不釋手,同時也不會再有標籤忘了結尾的問題,但一直讓梅干感到比較困擾的是,當要預覽結果畫面時,就得開啟瀏覽器,並裝上LiveReload才能達到同步預覽。
  因此梅干找了好久了,發現ATOM編輯器的外掛,可將瀏覽器內嵌在軟體裡面,如此一來就能達到即時的預覽,同時也有許多的外掛可安裝,就連梅干最愛的EMMET也有,同時ATOM不但完全免費,且還跨平台無論是Windows、MAC、Liunx皆可使用,讓在編輯網頁更加的方便與快速,因此還沒用過ATOM的朋友,現在也一塊來看看囉!
ATOM
軟體名稱:ATOM
適用平台:Windows、MAC OSX、Liunx
適用性質:免費
軟體下載:atom.io

Step1
首先,進到ATOM後,點畫面中的「Download For Mac」鈕。
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
Step2
下載完畢後,再將「ATOM.app」放到「應用程式」中,再雙響將它開啟,而這就是ATOM的編輯畫面,與Sublime Text有些相似。
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
ATOM安裝外掛套件
Step3
比較好的一點是,ATOM在安裝外掛套件相當的簡單,只需點選「Preferences」選項
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
Step4
開啟後再點左邊的「Install」選項,接著將外掛名稱「Emmet」填入上方的輸入框中,再按後方的「Packages」鈕。
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
Step5
搜尋到後,再按後方的「Install」鈕。
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
Step6
當安裝完畢後,可到「Packages」中查看,而這邊梅干安裝了二隻外掛,分別為emmet與html preview。
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
ATOM使用介紹
Step7
一切都弄好後,就可開始來寫網頁啦!當開啟一個新檔案後,預設為文字模式,因此點右下的「Plain Text」
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
Step8
接著從輸入框中,輸入HTML再按Enter。
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
Step9
設定完畢後,再第一行輸入!
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
Step10
接著再按「Tab」鍵,立即就會產生出HTML基本網頁框架啦!
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
Step11
接著再來試試看emmet的快速產生法。
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
Step12
打完後,一樣按下Tab鍵,立即就會變成HTML碼,接著再按滑鼠右鍵,選擇「Preview HTML」
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面
Step13
接著右邊就可看到,即時的網頁畫面啦!還真的是挺方便的,如此一來就不用再開啟瀏覽器,在同一個軟體下,就可邊寫邊預覽結果畫面啦!
梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面