Adobe推出免費好用的網頁編輯器Brackets

梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
  隨著網頁技術更新的速度愈來愈快,使得Dreamweaver也慢慢的不符所需,當使用HTML5與CSS3來開發網頁時,即便是在Dreamweaver CC版本的設計模式下,也無法正常的顯示網頁的版型,最後還是只能透過瀏覽器,才能顯示最終的網頁效果,這也是讓許多從事網頁設計的朋友,紛紛的投向Sublime Text的懷抱裡,雖然它非免費軟體,但卻可永久試用,甚至升級成正式版也相當的便宜,同時Sublime Text還有強大的擴充元件可使用。
  所以梅干現在也都用Sublime Text來設計網頁,且也將常用一些網頁範本,建立成短code的方式,只要輸入一些短code就會自動產生出自已常用的網頁標籤,真是超方便的,再搭配LiveReloa更加快整個網頁的開發速度,但最近梅干在網路上,無意間發現到,Adobe的研究室也有推出免費版的網頁編輯軟體Brackets,雖然沒有DW的圖形化界面,但功能與Sublime Text有幾分的神似,甚至還有LiveReload的功能相當的方便,且還支援Win/MAC平台使用,經梅干實用一陣子後,發現還真的蠻好用的,只差目前的擴充套件少了點,因此身為網頁設計人員,不妨也一塊來看看囉!
Brackets:
軟體名稱:Brackets
軟體性質:免費
軟體語言:英文
支援平台:Win/MAC
軟體下載:http://brackets.io/

Brackets安裝與應用:
當進入下載頁面後,再選擇目前電腦平台的安裝檔。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
安裝完畢,雙響啟用後,可看到畫面相當的簡潔,以側是專案的目錄結構,中間是編輯區,右上分別有二個鈕,一個是即時預覽,另一個是擴充元件。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
當點一下右上的閃電,就會立即開啟瀏覽器,目前只能用於Chrome瀏覽器。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
這時只要在Brackets編輯網頁,在不用儲存的情況下,瀏覽器也會同步顯示結果畫面 。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
甚至點選網頁中的html標籤,在瀏覽器也會即時的將,目前所選的區塊標示出來 。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
當編輯CSS檔,對著色碼按右鍵,選擇Quick Edit選項。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
接著就會開啟調色盤,可進行選色 ,真是超方便的,就不用再開影像軟體來進行選色了。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
Brackets安裝外掛:
點右側第二個按鈕圖示,就會跳出目前可安裝的擴充套件。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
而Brackets有個必裝的套件,那就是網頁的範本,首先進到Brackets-HTML-Templates外掛頁面,點一下右下角的Download鈕,將套件下載回來。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
接著點上方的Help / Show Extenslons Folder選項。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
接著會看到二個資料夾,進入user資料後,將剛下載回來的擴充套件,貼到裡面去 。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
以後當要建立基本網頁範本時,在開新檔案後,點選上方功能選單的Edit,在最下方就會看到HTML Template的選項。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
接著在下拉選單中,就可選擇所需的HTML範本。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
這樣就會快速產生了,與Sublime TEXT一樣。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
Brackets建立專案:
甚至點左邊的Getting Started,再點Open Folder選項,就可建立自已的專案目錄。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》
接著左邊就會秀出整個專案的清單列表了。
梅問題-Adobe推出免費好用的網頁編輯器《Brackets》

相關文章

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 8 梅留言

  • 第3梅
    Show 說道:

    請問Brackets有在同頁上視窗分割的套件嗎?
    就是上半部跟下半部分割成兩個視窗..不知道要用什麼關鍵字找>"<

    先感謝回覆

    回應:
    你指的應該是下方是顯示psd的圖檔嗎?
  • 第2梅
    Eric 說道:

    請問怎麼輸入斷行,一般是按shift+enter,我找了好多關鍵字都找不到相關內容

  • 第1梅
    asdf 說道:

    其實它算是多國語言的軟體,可以在上方工作列倒數第二個(debug)中切換各國語言