網頁設計-Brackets.jpg

Brackets 是 Adobe 新推出的網頁設計軟體

不得不誇獎,真是讓人驚豔,重點是免費,還有中文介面

從 FrontPage > Dreamweaver 到神器的 Sublime

在到現在的 Brackets,才兩天,就讓我跳槽過來了

當然兩套是各有優缺點

對我而言 Brakcets 的優點有:

1.有中文,我知道有人覺得這不是重點,但是我看到中文就是開心

2.真正的完全免費 ( sublime 會跳出購買訊息 )

3.套件已經有管理,不用在裝外掛的管理外掛,外掛的管理非常方便

4.現成的LiveStyle ( 改程式碼,畫面即時改變 )

5.最重要的,它可以直接讀 psd ( 鄉親呀~!! 寫過網頁的就知道,sublime 或 dw 跟 ps 間切換有多煩 )

 

這是我個人喜歡它的5個原因

接著就看影片,來體驗它的魅力吧!!(慢慢補完)

 

 

主程式 下載與安裝

 

01 下載Brackets主程式

官網:http://brackets.io

 

 

02 安裝 執行 Brackets

 

 

03 語言切換,繁體中文來啦!!

 

 

04 Brackets 介面介紹

 


 

外掛篇

 

01 Html Template

其實有好幾個範本可以選擇,這是其中一個最常見的

官網:https://github.com/talmand

 

 

02 Emmet

這個就是傳說中的網頁編輯神器了,這個年頭不會打emmet的,應該不能說自己是網頁設計師了

官網:http://emmet.io/download/

Github:https://github.com/sergeche

 

 

03 Brackets File Icons

這個外掛是從「Brackets Icons」來的

不過我比較喜歡這個的圖示,所以我選這個

Github:https://github.com/drewbkoch/Brackets-File-Icons

 

 

04 Beautify

讓程式碼整齊用的,如果沒有縮排的好習慣,這就要靠它了

使用方法:選擇程式碼>右鍵>Beautify

Github:https://github.com/brackets-beautify/brackets-beautify

 

 

05 Tabs-Custom Working

Bracket把頁籤鎖起來了,所以這個外掛是讓頁籤可以增加

Github:https://github.com/DH3ALEJANDRO/custom-work-for-brackets

 

 

06 HTML Designer for Brackets

非常強大的編輯器,有點像dreamweaver,不過更人性化

只是程式碼打習慣的,這個也不太會開起來,只是拿來做RWD還滿棒的

Github: https://github.com/swmitra/html-designer

 


 

快速鍵

 

官方快速鍵: https://github.com/adobe/brackets/wiki/Brackets-Shortcuts

 

01.Ctrl+/:一行註解(html & css 通用)

 .html <!--註解在這-->

 .css /*註解在這*/

02.Ctrl+\:區塊註解

03.Ctrl+D:拷貝一行

04.Ctrl+B:複選相同標籤

05.Ctrl+X:剪下一行

06.Ctrl+E:快速編輯

 

07.Ctrl+Shift+A:在選定的內容加上標籤

08.Ctrl+Shift+K:刪除前後標籤

09.Ctrl+Shift+D:刪除一行

10.Ctrl+Shift+↓↑:整行移動

arrow
arrow

    A-yao 發表在 痞客邦 留言(1) 人氣()