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

30,010 Responses

  1. feqjgjnri表示:

    Vanessa redgrave. Resolution. Xena warrior princess. Diction. What is the temperature. Beet. Whitney houston songs. Boat. How old was elvis when he met priscilla. https://2480.g-u.su/

  2. JosephFam表示:

    prednisone cream over the counter: can you buy prednisone in canada – 20mg prednisone

  3. vmukdpvrn表示:

    Psychopath. Wagner. Sudan. Abraham. Portsmouth. The atlantic. Sinus bradycardia. Aura meaning. John hopkins. https://2480.g-u.su/

  4. cknbbxopz表示:

    Musk. Rfk. Earwig. Adenosine. Caitlin clark. Virgil. https://2480.g-u.su/

  5. fhpgdtixy表示:

    Hanuman. Percentage calculator. Jennifer esposito. Saint patricks day. Death valley national park. 30 degrees c to f. https://2480.g-u.su/

  6. สร้างเว็บไซต์ระดับมืออาชีพด้วยเทมเพลตฟรีและปรับแต่งได้มากกว่า 100
    แบบ พร้อมฟีเจอร์อีคอมเมิร์ซอันทรงพลังเพื่อเพิ่มยอดขายของคุณ เริ่มต้นเส้นทางธุรกิจออนไลน์ของคุณวันนี้ด้วยการตีกลับออนไลน์และทำให้เว็บไซต์ของคุณทำงานได้อย่างรวดเร็ว

    Look into my blog post :: เล่นคาสิโนออนไลน์ได้เงินจริงหรือไม่ 100%

  7. tuipmnxqo表示:

    Pregnancy. Mississippi burning. Liberal. Congratulations. Terminal. Schitts creek. https://2480.g-u.su/

  8. dquqmwpur表示:

    Heat movie. Automotive industry. Everybody loves raymond. Now. Obamacare. Zero. Odell beckham jr.. John krasinski movies and tv shows. https://2480.g-u.su/

  9. divlgpfdf表示:

    Ruminate. Leaked. Esoteric. Tropic thunder cast. Omaha nebraska. Kingsman: secret service. Pat sajak. The joker. Bubble tea. https://2480.g-u.su/

  10. JosephFam表示:

    medication neurontin: buy gabapentin online – neurontin pill

  11. deybprzff表示:

    Incredible. Chris elliott. Honeycomb. Van morrison. Brad pitt movies. Pomeranian. Condescending. Cunning. https://2480.g-u.su/

  12. jlulxstij表示:

    Don quixote. Taboo. Mormon. Wizard. Brooklyn. Seal. https://2480.g-u.su/

  13. cumciptmq表示:

    Young guns. Home alone 4. Misogynistic meaning. English premier league. Friends cast. Dominica. ChloГ« sevigny. Queen charlotte. https://2480.g-u.su/

  14. online casino表示:

    Welcomes , fellow patron . I found your pensive observations on the blog article
    most perceptive .

    Your standpoint on the topic is considerably praiseworthy
    .

    As you strike me as to have a ardent fascination in the area,
    I will extend an request for you to uncover the universe of ‘918KISS’.

    This very portal offers a expansive collection of captivating material
    that accordingly suit members having diverse hobbies .

    I think you would discover the community at ‘918KISS’ as being simultaneously insightful and cognitively
    captivating .

    I encourage you to consider aligning with us and imparting your unparalleled
    analyses to the uninterrupted dialogues . Hopeful for possibly
    accepting you on board .

    my page; online casino

  15. JosephFam表示:

    buying neurontin without a prescription: order neurontin online – neurontin without prescription

  16. seasonvar表示:

    Beau biden. Harvard president. Pelosi. Mean median mode. Pause. Melena. Triangle. Oz in a pound. The giving tree. https://20242025.g-u.su/

  17. seasonvar表示:

    Big george foreman. Manta ray. Chameleon. Nympho. New york time. Solange knowles. Harvey weinstein. https://20242025.g-u.su/

  18. seasonvar表示:

    Stoic. Jackie kennedy. Ms word. Wolf spider. Gothic. Piratebay. Tim walz. Treaty of versailles. Ole. https://20242025.g-u.su/

  19. Профессиональный сервисный центр по ремонту компьютеров и ноутбуков в Москве.
    Мы предлагаем: ремонт macbook air в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  20. Hdrrzb表示:

    purchase absorica without prescription – buy deltasone 40mg pill buy deltasone 10mg online

  21. Если вы искали где отремонтировать сломаную технику, обратите внимание – сервис центр в воронеже

  22. JosephFam表示:

    ventolin australia: Ventolin inhaler – ventolin pharmacy uk

  23. seasonvar表示:

    Rodeo. Cry macho. Zeitgeist. Phoenix suns. Amazing synonym. Bradley cooper movies. Andrew. Calvin klein. Nolan arenado. https://20242025.g-u.su/

  24. Hey, I think your blog might be having browser compatibility
    issues. When I look at your blog in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that,
    wonderful blog!

    Feel free to visit my homepage; emperors vigor tonic reviews

  25. seasonvar表示:

    Fern. Hamas. Virgin mary. Pesos. Kanji. 2024 solar eclipse. https://20242025.g-u.su/

  26. Kupit_azPi表示:

    Заказать качественный бетон в Нижнем Новгороде, Купить качественные бетонные смеси в Нижнем Новгороде, по доступным ценам, Заказать качественный бетон у проверенных поставщиков в Нижнем Новгороде, Бетонные заводы в Нижнем Новгороде: широкий выбор, Купить бетон оптом в Нижнем Новгороде: лучшие предложения, по выгодной цене, Заказать качественный готовый бетон в Нижнем Новгороде, с высоким уровнем сервиса
    заказать бетон в нижнем новгороде заказать бетон в нижнем новгороде .

  27. seasonvar表示:

    Paganism. Parmesan. Kamikaze. Meghan markle. Fiscal year. Usb. George wendt. Chivalry. Hot spot. https://20242025.g-u.su/

  28. seasonvar表示:

    Foo fighters. Toni morrison. John ross. Tomatoes. Milwaukee. Hannibal. Bronx tale. Provincetown. https://20242025.g-u.su/

  29. JosephFam表示:

    neurontin 800 mg tablets best price: neurontin 200 mg – buy generic neurontin

發佈留言

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