首頁 > web前端 > html教學 > Adobe Brackets 簡單使用圖文教學_HTML/Xhtml_網頁製作

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

WBOY
發布: 2016-05-16 16:37:22
原創
2138 人瀏覽過

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程式碼註解時只能使用區塊註解快速鍵

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板