網頁開發 網頁設計

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

2017/04/24

梅問題-ATOM 免費跨平台網頁編輯器,支援即時預覽HTML頁面

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頁面