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

　　一直以來梅干最常使用的網頁編輯器，除了Dreamweaver CC 2017以外，再來就是Sublime Text，一來是Sublime Text相當的輕巧，開啟速度快，同時也有許多外掛可進行擴充，讓Sublime Text在編輯網頁更加的方便，尤其是Emmet這隻外掛，更是讓梅干愛不釋手，同時也不會再有標籤忘了結尾的問題，但一直讓梅干感到比較困擾的是，當要預覽結果畫面時，就得開啟瀏覽器，並裝上LiveReload才能達到同步預覽。

　　因此梅干找了好久了，發現ATOM編輯器的外掛，可將瀏覽器內嵌在軟體裡面，如此一來就能達到即時的預覽，同時也有許多的外掛可安裝，就連梅干最愛的EMMET也有，同時ATOM不但完全免費，且還跨平台無論是Windows、MAC、Liunx皆可使用，讓在編輯網頁更加的方便與快速，因此還沒用過ATOM的朋友，現在也一塊來看看囉！

---

ATOM

---

Step1
首先，進到ATOM後，點畫面中的「Download For Mac」鈕。

---

Step2
下載完畢後，再將「ATOM.app」放到「應用程式」中，再雙響將它開啟，而這就是ATOM的編輯畫面，與Sublime Text有些相似。

---

ATOM安裝外掛套件
Step3
比較好的一點是，ATOM在安裝外掛套件相當的簡單，只需點選「Preferences」選項

---

Step4
開啟後再點左邊的「Install」選項，接著將外掛名稱「Emmet」填入上方的輸入框中，再按後方的「Packages」鈕。

---

Step5
搜尋到後，再按後方的「Install」鈕。

---

Step6
當安裝完畢後，可到「Packages」中查看，而這邊梅干安裝了二隻外掛，分別為emmet與html preview。

---

ATOM使用介紹
Step7
一切都弄好後，就可開始來寫網頁啦！當開啟一個新檔案後，預設為文字模式，因此點右下的「Plain Text」。

---

Step8
接著從輸入框中，輸入HTML再按Enter。

---

Step9
設定完畢後，再第一行輸入!。

---

Step10
接著再按「Tab」鍵，立即就會產生出HTML基本網頁框架啦！

---

Step11
接著再來試試看emmet的快速產生法。

---

Step12
打完後，一樣按下Tab鍵，立即就會變成HTML碼，接著再按滑鼠右鍵，選擇「Preview HTML」。

---

Step13
接著右邊就可看到，即時的網頁畫面啦！還真的是挺方便的，如此一來就不用再開啟瀏覽器，在同一個軟體下，就可邊寫邊預覽結果畫面啦！