Adobe Brackets 簡單使用圖文教學_HTML/Xhtml_網頁製作

Adobe Brackets是一款開源、簡潔強大的HTML、CSS和JavaScript整合開發環境，支援增加外掛程式以提供額外的功能擴展，目前可用的外掛程式例如支援增加偵錯、瀏覽器特定CSS前綴、 JSDoc註解等，以下小編簡單介紹Brackets的使用與設定：

軟件名稱：

Adobe Brackets v1.4 官方英文安裝版

軟件大小：

32MB

更新時間：

2015-08-04

　　一、項目設定

　　1、開啟Brackets，整個介面很簡潔，頂部選單列只提供file > exit退出編輯器功能。左側為專案組織結構的檔案樹，使用Ctrl/Cmd Shift H可以呼出與關閉檔案樹。右側為編輯區，上部為工具欄，中部為文件區域，下部為提示區域。

　　

 

　　2、開啟專案 使用File > Open Folder指令開啟專案資料夾，左側檔案樹專案名稱更新為專案資料夾名，檔案樹更新為目前專案的檔案樹。

　　

 

　　在項目名稱上點選左鍵，彈出項目編輯選單，編輯選單會顯示歷史項目，以及項目編輯指令。

　　

 

　　Open Folder指令：開啟新的專案。

　　Project Settings指令：設定目前專案的Web位址，在頁面偵錯預覽時會用到。

　　設定要求：必須是http://開頭的web位址。

　　

 

　　如上圖，設定為http://127.0.0.1/demo/slide時，瀏覽器預覽時，會透過web位址開啟對應的頁面。

　　

 

　　如果沒有設置，會透過檔案的盤符位址開啟頁面。

　　

 

　　二、文件編輯

　　在檔案樹中點選index.html，主區域開啟index.html的文件。

　　

 

　　1、Brackest會偵測文件是否符合html規範，如下圖提示，在20行有一個style樣式區塊需要放在head節點裡。

　　

　　2、把遊標放在一個class或id屬性的標籤名稱上，按下Ctrl/Cmd E(「編輯」)或退出編輯。 Brackets將搜尋專案下所有CSS文件，然後開啟一個內嵌的編輯器嵌入在HTML檔案中，可以讓你快速修改CSS程式碼。

　　目前class/id標籤有多處樣式定義時，編輯視窗提供切換按鈕來切換顯示樣式，也可以使用Alt Up/Down箭頭鍵切換。

　　要注意的是，Brackets會偵測目前html文檔以及項目下所有CSS檔案來找出class/id樣式，即使某些CSS檔案在目前html文檔中未被引用到。

　　3、Brackets同樣支援對JS物件定義的快速預覽/編輯，把遊標放在一個js函數名稱上，按下Ctrl/Cmd E(“編輯”)或退出編輯。

　　4、Brackets內建取色器，提供RGBa、HEX、HSLa的顏色編碼形式。把遊標放在一個顏色編碼上，按下Ctrl/Cmd E(“編輯”)，退出取色器視窗需要使用Esc鍵。

　　三、即時預覽

　　Brackets提供網頁即時預覽功能。使用此功能時，Brackets呼叫Chrome瀏覽器開啟目前頁面，此後修改html、css、javascript並儲存後，所修改的內容會即時回應到瀏覽器中的頁面，無須手動刷新頁面。這是Brackets最大的亮點，有兩個顯示器的coder有福了，可以分割畫面顯示Brackets和chrome，即時修改即時預覽，無需切換編輯器/瀏覽器和刷新頁面。

　　目前即時預覽功能的一些限制：

　　它只適用於Chrome瀏覽器為目標瀏覽器，你必須安裝Chrome。

　　它依賴在Chrome瀏覽器中的遠端偵錯功能，這是一個命令列標誌啟用。在Mac上，如果你已經在使用Chrome瀏覽器，這時啟動“即時預覽”，Brackets將詢問你是否要重新啟動Chrome瀏覽器啟用遠端偵錯功能。

　　只能同時對一個HTML文件進行預覽 - 如果切換另一個HTML文件，Brackets將關閉原來的預覽。

　　四、部分快速鍵

　　Ctrl/Cmd Shift H 可以呼出與關閉檔案樹

　　Ctrl/Cmd E 快速預覽/編輯 css樣式/javascript函數

　　Ctrl/Cmd /- 放大縮小編輯區字體大小

　　Ctrl/Cmd 0 重置編輯區字體大小

　　Ctrl/Cmd Alt P 開啟即時預覽功能

　　Ctrl/Cmd / 行註解

　　Ctrl/Cmd Alt / 區塊註解

　　註：css程式碼、html程式碼註解時只能使用區塊註解快速鍵