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...

32,163 Responses

  1. Ninjajda表示:

    Nowadays, it is rare to find such an honest and open view of existing problems https://000-google-09.s3.eu-north-1.amazonaws.com/id-10.html
    Like 716

  2. netykiC表示:

    Для многих клиентов вопрос, как настроить роутер через GPON, становится насущным при замене провайдера или модернизации оборудования. Настройка GPON-роутера Ростелеком нуждается в правильных настроек, чтобы устройство функционировало бесперебойно и обеспечивало скоростное соединение. Получить подробности о том, [url=https://netgate-kiev.blogspot.com/ ]Ростелеком gpon как подключить роутер на netgate-kiev.blogspot.com [/url] можно по ссылке на сайте, который подробно объясняет этот процесс. Также важно знать, как подключить роутер к GPON, чтобы избежать проблем с сетью.

    Если вы намереваетесь установить свой роутер к GPON-модему, необходимо следовать точным инструкциям. Нередко клиенты задумываются, как установить GPON роутер МТС или Ростелеком, чтобы создать сеть в доме или офисе. Подключение GPON через стандартный роутер также возможно, однако для этого нужно учесть особенности совместимости оборудования.

    Источник: [url=https://netgate-kiev.blogspot.com/ ]https://netgate-kiev.blogspot.com/ [/url]

    по вопросам Как подключить gpon к роутеру keenetic ultra – обращайтесь в Телеграм wws36

  3. Moneyupa表示:

    A very important post that makes you think about many serious things in life https://000-google-09.s3.eu-north-1.amazonaws.com/id-10.html
    Like 4281

  4. RogerFaf表示:

    https://fastpillseasy.com/# where can i buy erectile dysfunction pills

  5. RogerFaf表示:

    https://fastpillsformen.com/# Viagra generic over the counter

  6. Jacobwaync表示:

    The 1win promo code: MAX500WIN. This 1Win bonus code 2025 rewards new players with a 500% bonus up to $1025. Valid codes for receiving bonuses without a deposit for new and old users. Hurry to get them today! Activate the promo code 1win and get a generous welcome bonus of up to 500% on your first four deposits.

    [url=https://www.bondhuplus.com/read-blog/120565]1win free bonus code today[/url]

  7. наркологическая скорая помощь москва http://www.justforum.bestforums.org/viewtopic.php?f=26&t=4785 .

  8. Charlesbot表示:

    http://maxpillsformen.com/# cialis for sale

  9. Boydmm表示:

    The author raises really important questions that concern absolutely each of us today https://000-google-09.s3.eu-north-1.amazonaws.com/id-10.html
    Like 5063

  10. RogerFaf表示:

    https://fastpillsformen.com/# Viagra tablet online

  11. BrettTIT表示:

    cheap viagra: buy viagra online – Cheap generic Viagra

  12. RogerFaf表示:

    https://maxpillsformen.com/# Buy Tadalafil 20mg

  13. Wolfkrw表示:

    In the modern world, such posts are becoming increasingly relevant and important for everyone https://000-google-09.s3.eu-north-1.amazonaws.com/id-10.html
    Like 2755

  14. Kingpjj表示:

    The author touched on exactly those issues that worry most thinking people now https://000-google-09.s3.eu-north-1.amazonaws.com/id-10.html
    Like 3972

  15. Charlesbot表示:

    https://maxpillsformen.com/# Buy Cialis online

  16. Barrybib表示:

    Cialis 20mg price in USA: Generic Cialis without a doctor prescription – Cialis over the counter

  17. скорая наркологическая помощь в москве http://www.justforum.bestforums.org/viewtopic.php?f=26&t=4785/ .

  18. Shadowout表示:

    Thank you to the author for the courage to talk about such things openly and honestly, this is worthy of respect https://000-google-09.s3.eu-north-1.amazonaws.com/id-10.html
    Like 179

  19. Donaldabula表示:

    Cheap Cialis MaxPillsForMen.com Buy Tadalafil 20mg

  20. BrettTIT表示:

    erectile dysfunction medicine online: FastPillsEasy – erectile dysfunction medicine online

  21. Risingebk表示:

    It is very important that such posts appear that make you think about serious things https://000-google-09.s3.eu-north-1.amazonaws.com/id-10.html
    Like 9184

  22. Lordqiu表示:

    After reading this post, you begin to understand how deep the problem touched upon by the author is https://000-google-09.s3.eu-north-1.amazonaws.com/id-10.html
    Like 9686

  23. Donaldabula表示:

    Buy Tadalafil 10mg MaxPillsForMen.com buy cialis pill

  24. вызвать наркологическую помощь [url=http://klin.0pk.me/viewtopic.php?id=4428/]http://klin.0pk.me/viewtopic.php?id=4428/[/url] .

發佈留言

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