Adobe Brackets 網頁編輯的新選擇

網頁的編輯有時候並不一定需要一套很大型的軟體,因為網頁畢竟是由HTML標籤結構串連CSS樣式表,再加上Javascript或ASP、PHP等程式語言構成,嚴格講完全是純文字化的文件,除了後端語言需要搭配伺服器服務之外,網頁就只是一個純文字文件,只要有心,哪怕是在餐廳都可以拿張餐巾紙來開始創作網頁(當然還要有些能力)。

因此網頁的編輯器,有時候並不一定需要用大型的所見即所得(What You See Is What You Get-WYSIWYG)軟體來建構(例如:Dreamweaver…等),其實近年來Dreamweaver也在積極的瘦身,把一些不常用多餘的功能給刪除,不過軟體還是具備有相當的份量也不易取得,所以業界會使用一些純文字的編輯器來編輯網頁,例如:Sublime Text、Atom、Light Table以及本篇文章的主角Brackets,這類的編輯器如果要拿來編輯網頁,應該需具備以下的特點:

  1. 具備多平台版本:網頁設計師有可能在Windows、Mac、Linux上工作,所以必須具備這些平台的版本。
  2. 支援網頁的多種語法:必須支援網頁上HTML、CSS、Javascript、jQuery、PHP、SQL…等多種語法。
  3. 擁有許多的外掛:除了自己單打獨鬥之外,外掛也是這樣的文字編輯器不可或缺的。
  4. 快速穩定:開啟快速、操作上穩定,也是他跟大型的WYSIWYG軟體重大區隔處。
  5. 簡單使用:不需花太多的時間去學習,因為畢竟是文字編輯器。

關於上述的四套文字編輯器:Sublime Text、Atom、Light Table和Brackets,國外網站「SitePoint」在2014年9月針對各平台、多個不同的項目做了一次比較,基本條件如下:

作業系統:

  • Windows 8.1
  • Mac OS X 10.8
  • Lubuntu 14.04

軟體版本:

  • Sublime Text 3
  • Atom 0.123
  • Brackets 0.42
  • Light Table 0.6.7

結果如下:

項目贏家
軟體介面Brackets
語法支援Sublime Text
易於使用Brackets
速度與穩定性Sublime Text
原始功能(未安裝外掛)Sublime Text
網頁特殊支援Brackets
外掛與擴充功能Sublime Text
自定和維護功能Atom
未來Atom
總評Sublime Text

Sublime Text拿下五個項目的贏家;接下來是Brackets的三項與Atom的兩項。

從上述的結果可以觀察的出來:

  1. 難怪Sublime Text是目前許多人偏好使用的網頁文字編輯器。
  2. Brackets也不容小覷。

尤其文中提到雖然在總評上Sublime Text是贏家,但Brackets也在積極的發展,甚至也支援非常多原Sublime Text的熱門外掛,該文章底下的回文裡面也有非常多的設計師說他們已經開始使用Brackets,所以這篇文章就跟大家分享一下Brackets的魅力。

Brackets是由Adobe開發的一個開放原碼的網頁編輯器,目前具有多國語言的支援也是免費下載使用,大家可以到Brackets的官方網頁下載與安裝,也具有跨平台的特色。

Brackets 官網截圖

Brackets 官網截圖

軟體安裝後的介面如下是英文版的介面

Brackets 安裝後畫面
Brackets 安裝後畫面

可以由Debug/Switch Language來切換為繁體中文的語言

Brackets 切換軟體語系
Brackets 切換軟體語系

下圖標示說明:

  1. 資料夾或檔案內容:開啟資料夾後可以看到一整個資料夾內的檔案和其他資料夾。
  2. 分割視窗切換:可以切換分割視窗的位置。
  3. 檔案內容撰寫:主要撰寫網頁程式的區域。
  4. 即時預覽:目前支援Chrome的即時預覽,撰寫網頁時即時預覽的內容會同步更新,不需再按存檔與預覽功能。
  5. 外掛與佈景主題安裝:安裝外掛和佈景主題來擴充程式功能與改變外觀。
Brackets 軟體介面說明
Brackets 軟體介面說明

接下來可以考慮先搜尋並安裝一些好用的外掛,我安裝的外掛有:

  • Autosave Files on Window Blur
  • Beautify
  • Brackets SASS
  • Brackets Snippets (by edc)
  • CodeOverview
  • Emmet
  • JSCompiler2
Brackets 安裝外掛
Brackets 安裝外掛

其中在Sublime Text中非常知名的Emmet在Brackets也有,因此我們可以在一份空白的文件輸入一個驚歎號後按下TAB鍵來產生HTML5的文件範本。

Brackets Emmet 外掛操作
Brackets Emmet 外掛操作

接下來就進入網頁開發的部分,當然在輸入標籤的時候會自動幫你產生封閉標籤,另外還有程式碼的提示。

Brackets CSS 樣式名稱提示
Brackets CSS 樣式名稱提示

另外還有屬性提示,以及快速編輯器(Ctrl+E)

Brackets CSS 顏色選擇
Brackets CSS 顏色選擇
Brackets CSS 顏色選取器
Brackets CSS 顏色選取器

如果你已經是使用Sublime Text的高手,相信Brackets的開發介面一定不陌生,可以先來看看自己常用的外掛是不是有支援,如果你習慣用所見即所得的軟體開發不妨試著改變看看,一定可以讓你網頁的功力有所提升,以下提供一些官方視訊教學供大家參考。

Brackets 簡介

即時預覽開發

Javascript除錯

You may also like...

28,414 Responses

  1. Boostaro表示:

    Great post. I am facing a couple of these problems.

  2. Lhaneevige表示:

    В нашем обществе, где диплом – это начало отличной карьеры в любой сфере, многие стараются найти максимально быстрый путь получения образования. Наличие официального документа переоценить попросту невозможно. Ведь именно он открывает дверь перед всеми, кто желает вступить в сообщество квалифицированных специалистов или учиться в каком-либо ВУЗе.
    В данном контексте наша компания предлагает быстро получить любой необходимый документ. Вы сможете заказать диплом, и это будет удачным решением для человека, который не смог завершить обучение, утратил документ или хочет исправить плохие оценки. диплом изготавливается аккуратно, с особым вниманием ко всем нюансам. В результате вы сможете получить продукт, максимально соответствующий оригиналу.
    Преимущества данного подхода заключаются не только в том, что вы сможете максимально быстро получить свой диплом. Весь процесс организовывается комфортно, с профессиональной поддержкой. От выбора требуемого образца документа до консультаций по заполнению личных данных и доставки по России — все под абсолютным контролем квалифицированных специалистов.
    Для всех, кто ищет быстрый и простой способ получения необходимого документа, наша компания может предложить выгодное решение. Приобрести диплом – значит избежать продолжительного обучения и не теряя времени переходить к достижению собственных целей: к поступлению в университет или к началу успешной карьеры.
    http://www.diploman-russiyan.com

  3. MarvinRoave表示:

    generic doxycycline buy doxycycline online doxycycline 100 mg

  4. MarvinRoave表示:

    buy amoxicillin online without prescription amoxicillin generic amoxicillin 500 mg where to buy

  5. Henryfet表示:

    54 prednisone: prednisone 2 5 mg – prednisone 21 pack

  6. Billyved表示:

    https://zithromaxa.store/# buy zithromax without presc

  7. Passando para a melhor casa de apostas 1win

  8. Richardorele表示:

    how much is amoxicillin prescription: buy amoxicillin 500mg – can you purchase amoxicillin online

  9. Melhor site de apostas 1win

  10. MarvinRoave表示:

    50 mg prednisone tablet prednisone over the counter south africa prednisone 20 tablet

  11. Charleselila表示:

    where to get amoxicillin over the counter: amoxicillin 500mg price – cost of amoxicillin prescription

  12. MarvinRoave表示:

    zithromax cost order zithromax over the counter zithromax for sale usa

  13. MarvinRoave表示:

    buy doxycycline buy cheap doxycycline generic doxycycline

  14. GichardPheve表示:

    В нашем обществе, где диплом – это начало успешной карьеры в любой сфере, многие ищут максимально быстрый и простой путь получения качественного образования. Факт наличия документа об образовании трудно переоценить. Ведь именно он открывает двери перед любым человеком, который хочет начать трудовую деятельность или учиться в ВУЗе.
    В данном контексте наша компания предлагает максимально быстро получить этот необходимый документ. Вы можете купить диплом старого или нового образца, и это становится отличным решением для всех, кто не смог закончить образование, потерял документ или хочет исправить плохие оценки. дипломы производятся аккуратно, с максимальным вниманием ко всем нюансам, чтобы на выходе получился документ, 100% соответствующий оригиналу.
    Преимущество подобного решения заключается не только в том, что можно быстро получить диплом. Процесс организовывается комфортно, с нашей поддержкой. От выбора необходимого образца до точного заполнения персональных данных и доставки по России — все под полным контролем качественных специалистов.
    Для всех, кто хочет найти быстрый и простой способ получить требуемый документ, наша компания предлагает отличное решение. Заказать диплом – значит избежать продолжительного обучения и сразу переходить к своим целям, будь то поступление в университет или старт карьеры.
    http://www.diploman-russiyan.com

  15. Adsskz表示:

    dapoxetine citizen – aurogra mankind cialis with dapoxetine soak

  16. Henryfet表示:

    buy neurontin uk: neurontin 800 mg tablet – prescription price for neurontin

  17. Billyved表示:

    http://doxycyclinea.online/# buy cheap doxycycline online

  18. MarvinRoave表示:

    neurontin 600 neurontin cost australia discount neurontin

  19. Отличный сайт! Тут Вы можете найтиновые сервера майнкрафт

  20. Charleselila表示:

    amoxicillin price canada: over the counter amoxicillin – cost of amoxicillin prescription

  21. MarvinRoave表示:

    zithromax buy online no prescription zithromax zithromax over the counter canada

  22. Billyved表示:

    http://zithromaxa.store/# zithromax purchase online

  23. Недорого купить диплом
    купить диплом специалиста https://www.diplom-msk.ru/ .

  24. Charleselila表示:

    doxycycline hydrochloride 100mg: buy cheap doxycycline – purchase doxycycline online

  25. Henryfet表示:

    buy doxycycline online without prescription: buy doxycycline 100mg – buy doxycycline online

  26. MarvinRoave表示:

    amoxicillin 500 coupon generic amoxicillin online generic amoxicillin

  27. Henryfet表示:

    prednisone daily: buy 10 mg prednisone – prednisone online

  28. Billyved表示:

    https://amoxila.pro/# buy amoxil

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。