Adobe Brackets 簡單使用圖文教程

Adobe Brackets是一款開源、簡潔強(qiáng)大的HTML、CSS和JavaScript集成開發(fā)環(huán)境,目前可用例如支持增加偵錯、瀏覽器特定CSS前綴、JSDoc注解等,下面小編簡單介紹Brackets的使用和設(shè)置:
一、項(xiàng)目設(shè)置
1、打開Brackets,整個(gè)界面很簡潔,頂部菜單欄只提供file > exit退出編輯器功能。左側(cè)為項(xiàng)目組織結(jié)構(gòu)的文件樹,使用Ctrl/Cmd+Shift+H可以呼出與關(guān)閉文件樹。右側(cè)為編輯區(qū),上部為工具欄,中部為文檔區(qū)域,下部為提示區(qū)域。
2、打開項(xiàng)目 使用File > Open Folder命令打開項(xiàng)目文件夾,左側(cè)文件樹項(xiàng)目名更新為項(xiàng)目文件夾名,文件樹更新為當(dāng)前項(xiàng)目的文件樹。
在項(xiàng)目名上單擊左鍵,彈出項(xiàng)目編輯菜單,編輯菜單會顯示歷史項(xiàng)目,以及項(xiàng)目編輯命令。
Open Folder命令:打開新的項(xiàng)目。
Project Settings命令:設(shè)置當(dāng)前項(xiàng)目的Web地址,在頁面調(diào)試預(yù)覽時(shí)會用到。
設(shè)置要求:必須是http://開頭的web地址。
如上圖,設(shè)置為http://127.0.0.1/demo/slide時(shí),在瀏覽器預(yù)覽時(shí),會通過web地址打開相應(yīng)的頁面。
如果沒有設(shè)置,會通過文件的盤符地址打開頁面。
二、文件編輯
在文件樹中點(diǎn)擊index.html,主區(qū)域打開index.html的文檔。
1、Brackest會檢測文檔是否符合html規(guī)范,如下圖提示,在20行有一個(gè)style樣式塊需要放在head節(jié)點(diǎn)里。
2、把光標(biāo)放在一個(gè)class或id屬性的標(biāo)簽名稱上,按下Ctrl/Cmd + E(“編輯”)或退出編輯。Brackets將搜索項(xiàng)目下所有CSS文件,然后打開一個(gè)內(nèi)嵌的編輯器嵌入在HTML文件中,可以讓你迅速修改CSS代碼。
當(dāng)前class/id標(biāo)簽有多處樣式定義時(shí),編輯窗口提供切換按鈕來切換顯示樣式,也可以使用Alt + Up/Down箭頭鍵切換。
需要注意的是,Brackets會檢測當(dāng)前html文檔以及項(xiàng)目下所有CSS文件來查找class/id樣式,即使某些CSS文件在當(dāng)前html文檔中未被引用到。
3、Brackets同樣支持對JS對象定義的快速預(yù)覽/編輯,把光標(biāo)放在一個(gè)js函數(shù)名稱上,按下Ctrl/Cmd + E(“編輯”)或退出編輯。
4、Brackets內(nèi)建取色器,提供RGBa、HEX、HSLa的顏色編碼形式。把光標(biāo)放在一個(gè)顏色編碼上,按下Ctrl/Cmd + E(“編輯”),退出取色器窗口需要使用Esc鍵。
三、即時(shí)預(yù)覽
Brackets提供網(wǎng)頁即時(shí)預(yù)覽功能。使用該功能時(shí),Brackets調(diào)用Chrome瀏覽器打開當(dāng)前頁面,此后修改html、css、javascript并保存后,所修改的內(nèi)容會即時(shí)響應(yīng)到瀏覽器中的頁面,無須手動刷新頁面。這是Brackets最大的一個(gè)亮點(diǎn),有兩個(gè)顯示器的coder有福了,可以分屏顯示Brackets和chrome,即時(shí)修改即時(shí)預(yù)覽,無需切換編輯器/瀏覽器和刷新頁面。
目前即時(shí)預(yù)覽功能的一些限制:
它僅適用于Chrome瀏覽器為目標(biāo)瀏覽器,你必須安裝Chrome。
它依賴于在Chrome瀏覽器中的遠(yuǎn)程調(diào)試功能,這是一個(gè)命令行標(biāo)志啟用。在Mac上,如果你已經(jīng)在使用Chrome瀏覽器,這時(shí)啟動“即時(shí)預(yù)覽”,Brackets將詢問你是否要重新啟動Chrome瀏覽器啟用遠(yuǎn)程調(diào)試功能。
只能同時(shí)對一個(gè)HTML文件進(jìn)行預(yù)覽 - 如果切換另一個(gè)HTML文件,Brackets將關(guān)閉原來的預(yù)覽。
四、部分快捷鍵
Ctrl/Cmd+Shift+H 可以呼出與關(guān)閉文件樹
Ctrl/Cmd + E 快速預(yù)覽/編輯 css樣式/javascript函數(shù)
Ctrl/Cmd + +/- 放大縮小編輯區(qū)字體大小
Ctrl/Cmd + 0 重置編輯區(qū)字體大小
Ctrl/Cmd + Alt + P 打開即時(shí)預(yù)覽功能
Ctrl/Cmd + / 行注釋
Ctrl/Cmd + Alt + / 塊注釋
注:css代碼、html代碼注釋時(shí)只能使用塊注釋快捷鍵
相關(guān)文章
Adobe Brackets for mac版 網(wǎng)頁開發(fā)工具 1.3 蘋果電腦版
Brackets 是 Adobe 的開源 HTML/CSS/JavaScript 集成開發(fā)環(huán)境。Brackets 當(dāng)前為Mac, Windows以及Linux (Debian/Ubuntu)提供最新穩(wěn)定版的二進(jìn)制發(fā)布, 源代碼托管在GitHub上2015-05-20Brackets for Mac(編輯器) V2.2.0 蘋果電腦版
Brackets for mac編輯器是一款可以在蘋果電腦MAC OS平臺上使用的支持Windows,Mac以及Linux操作系統(tǒng)的應(yīng)用,內(nèi)置HTML、CSS、以及JavaScript編碼,Brackets mac可以用于編寫2023-07-07- Brackets是一個(gè)Adobe公司發(fā)布的開源HTML/CSS/JavaScript集成開發(fā)環(huán)境2018-06-20
Adobe Brackets(HTML/CSS/JavaScript集成開發(fā)環(huán)境) v1.0 官方中文版
Brackets是由Adobe公司推出的一款免費(fèi)、開源且跨平臺的HTML/CSS/JavaScript集成開發(fā)環(huán)境 (web前端開發(fā)工具),其擴(kuò)展性強(qiáng)非常強(qiáng),軟件視圖面板比較簡潔2015-12-04