Brackets-提升HTML代碼輸入速度的編輯器_BODY結構快速編輯
2015-08-13
328
相關文章
用 Brackets 來編輯 body 的 HTML 代碼，加上有 Emmet 的協助，以目前來說算是最方便的編輯器了， Brackets 本身也都有自動提示和自動完成，所以不需要去特別記他，而 Emmet 對於HTML代碼讓你減少大量重複鍵入的工作，堪稱絕配，如果也能編輯 dwt 那就太好了。
主體結構是有了但是頁面還是空白的因為沒有放入任何文字或圖片，在新增內容之前，習慣先將每個區塊先定位好，並給予臨時的背景色以便區分，此時需要先在 css 目錄內建立 style.css 以便新增樣式，先連結CSS（A），然後將游標放在 Brackets body 標籤上，並按鍵盤的 Ctrl+E 或按右鍵開啟「快速編輯」（C），按「新增規則」輸入網頁的遇上樣式，再按一次可關閉「快速編輯」視窗 點擊圖片可以放大檢視
id="header" 是頂部區域的專屬規則，而 class="block" 是整個網站的共用規則，你可以使用分割視窗來同時檢視 HTML 和 CSS 代碼，只要是編輯 HTML 頁面都可以按 Brackets 「閃電」圖示執行「即時預覽」（只需按一次即可，接下來都會自動更新預覽視窗）... 點擊圖片可以放大檢視
在 Brackets 編輯 CSS 代碼時，若是遇到顏色設定時，可以按 Ctrl+E 調出調色版快速選擇顏色... 點擊圖片可以放大檢視
如果你是使用 javascript 來控制 CSS 樣式時，若是無法即時預覽，請先存檔 Brackets 然後F5「重新整理」頁面即可... 點擊圖片可以放大檢視
點擊圖片可以放大檢視
上一篇說明了如何建立網頁基本結構，現在說說網頁煮的體部分，也就真正讓訪客看到的部分，同樣點擊側邊欄的 index.htm 開啟檔案，在右側的編輯區內輸入 ! （驚嘆號），然後按「Enter」，程式便自動輸入完整的 HTML5 網頁結構...
點擊圖片可以放大檢視
在 Brackets 右側的編輯區的 body 標籤內輸入
(#header.block>#logo.fl+#top.fr)^(#nav>ul>(li.mainmenu>a[href=javascript:void(0); rel=menu$]{menu$}>ul#menu$>li.submenu>a)*3)+#content>p^#footer>p
然後按「TAB」，沒錯的話。應該像...
點擊圖片可以放大檢視
主體結構是有了但是頁面還是空白的因為沒有放入任何文字或圖片，在新增內容之前，習慣先將每個區塊先定位好，並給予臨時的背景色以便區分，此時需要先在 css 目錄內建立 style.css 以便新增樣式，先連結CSS（A），然後將游標放在 Brackets body 標籤上，並按鍵盤的 Ctrl+E 或按右鍵開啟「快速編輯」（C），按「新增規則」輸入網頁的遇上樣式，再按一次可關閉「快速編輯」視窗 點擊圖片可以放大檢視
id="header" 是頂部區域的專屬規則，而 class="block" 是整個網站的共用規則，你可以使用分割視窗來同時檢視 HTML 和 CSS 代碼，只要是編輯 HTML 頁面都可以按 Brackets 「閃電」圖示執行「即時預覽」（只需按一次即可，接下來都會自動更新預覽視窗）... 點擊圖片可以放大檢視
在 Brackets 編輯 CSS 代碼時，若是遇到顏色設定時，可以按 Ctrl+E 調出調色版快速選擇顏色... 點擊圖片可以放大檢視
如果你是使用 javascript 來控制 CSS 樣式時，若是無法即時預覽，請先存檔 Brackets 然後F5「重新整理」頁面即可... 點擊圖片可以放大檢視
點擊圖片可以放大檢視
如果你對Brackets-提升HTML代碼輸入速度的編輯器_BODY結構快速編輯有任何問題請到討論區發帖。