工具:Brackets

若不使用Dreamweaver有什麼工具可以幫忙,Brackets是Adobe提供免費的網站設計工具,讓許多前端開發人員人喜愛。

(一)軟體安裝

(二)相關設定

(A)切換語言

(B)基本操作

(1)「檔案→儲存」輸入檔案名稱必須包含副檔名

(2)Html檔案,其程式碼透過Emmet外掛協助,輸入【!】+【Tab】即可(如下圖)

(3)程式碼字體可透過「Ctrl」+「+」或「Ctrl」+「-」縮放

(4)編輯CSS需要設定顏色方法,如下圖



(5)透過【即時預覽】鈕,於Chrome即預覽結果。

(7)常用快速鍵

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

  • Ctrl+/:一行註解(html & css 通用)
  • Ctrl+\:區塊註解
  • Ctrl+D:拷貝一行
  • Ctrl+B:複選相同標籤
  • Ctrl+X:剪下一行
  • Ctrl+E:快速編輯
  • Ctrl+Shift+A:在選定的內容加上標籤
  • Ctrl+Shift+K:刪除前後標籤
  • Ctrl+Shift+D:刪除一行
  • Ctrl+Shift+↓↑:整行移動