2017年4月24日 星期一

ATOM 免費跨平台網頁編輯器,支援EMMET與即時預覽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頁面



from 梅問題.教學網 https://www.minwt.com/webdesign-dev/html/17373.html

沒有留言:

張貼留言