目前位置: 首頁 > Brackets使用教學 > Brackets-提升HTML代碼輸入速度的編輯器_BODY結構快速編輯

Brackets-提升HTML代碼輸入速度的編輯器_BODY結構快速編輯 超大 稍大 微大

ECSHOP 繁體中文版-響應式模板-虛擬主機::ECSHOP2.7.3繁體中文全支援-原來如此 發表於: 2015-08-13
Brackets 來編輯 body 的 HTML 代碼,加上有 Emmet 的協助,以目前來說算是最方便的編輯器了, Brackets 本身也都有自動提示和自動完成,所以不需要去特別記他,而 Emmet 對於HTML代碼讓你減少大量重複鍵入的工作,堪稱絕配,如果也能編輯 dwt 那就太好了。

上一篇說明了如何建立網頁基本結構,現在說說網頁煮的體部分,也就真正讓訪客看到的部分,同樣點擊側邊欄的 index.htm 開啟檔案,在右側的編輯區內輸入 ! (驚嘆號),然後按「Enter」,程式便自動輸入完整的 HTML5 網頁結構...
BODY結構快速編輯

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」,沒錯的話。應該像...

BODY結構快速編輯

主體結構是有了但是頁面還是空白的因為沒有放入任何文字或圖片,在新增內容之前,習慣先將每個區塊先定位好,並給予臨時的背景色以便區分,此時需要先在 css 目錄內建立 style.css 以便新增樣式,先連結CSS(A),然後將游標放在 Brackets body 標籤上,並按鍵盤的 Ctrl+E 或按右鍵開啟「快速編輯」(C),按「新增規則」輸入網頁的遇上樣式,再按一次可關閉「快速編輯」視窗

BODY結構快速編輯

id="header" 是頂部區域的專屬規則,而 class="block" 是整個網站的共用規則,你可以使用分割視窗來同時檢視 HTML 和 CSS 代碼,只要是編輯 HTML 頁面都可以按 Brackets 「閃電」圖示執行「即時預覽」(只需按一次即可,接下來都會自動更新預覽視窗)...

BODY結構快速編輯

Brackets 編輯 CSS 代碼時,若是遇到顏色設定時,可以按 Ctrl+E 調出調色版快速選擇顏色...

BODY結構快速編輯

如果你是使用 javascript 來控制 CSS 樣式時,若是無法即時預覽,請先存檔 Brackets 然後F5「重新整理」頁面即可...

BODY結構快速編輯 BODY結構快速編輯

只有本站虛擬主機會員才能對文章發表問題
如果你是本站虛擬主機會員請先至會員中心首頁綁定主機帳號
其他會員請至留言板提問!