利用div 标签划分网页区块.pptVIP

利用 CSS 與Div 標籤劃分網頁版面 第 3 堂課 本堂課重點 3-1 認識 HTML 與 CSS 3-2 利用 Div 標籤劃分網頁區塊 3-3 利用 CSS 定義區塊屬性 3-1 認識 HTML 與 CSS 上一堂課製作的「˙極簡˙Simple Design Studio」網站首頁 (index.html), 因為包含的元素很少很單純, 只有背景、一張 LOGO 圖片、兩行文字, 所以只需用基本的功能就可製作完成。不過若是要製作兩欄式, 甚至多欄式這類劃分成很多區塊的網頁時, 就必須搬出 Dreamweaver 更深入的功能『CSS』 與 『Div 標籤』。 認識 HTML 與 CSS 不過在實際使用『CSS』與『Div 標籤』之前, 我們有必要先認識 HTML 與CSS, 因為網頁其實就是由「HTML」架構而成的, 而「CSS」可用來美化與編排「HTML」, 至於兩者是怎麼影響網頁的視覺效果, 就是本節要告訴你的重點。了解 HTML 與 CSS 的相互關係, 之後在規劃網頁版面時才不會一頭霧水。 認識 HTML 認識 CSS 認識 HTML 使用 Dreamweaver 製作網頁, 大部分都是在設計檢視模式中進行編輯動作, 因為這是最直接也最方便的方式, 插入什麼元素就看到什麼元素, 可清楚看出實際網頁會呈現的結果。其實切換到程式碼檢視模式也可以編輯網頁, 只不過映入眼簾的盡是些程式碼, 但網頁原本就是由這些程式碼所組成的啊！這些程式碼即為HTML (Hyper Text Markup Language), 一種用來描述網頁結構的語法, 其中由 與 包在一起的就稱為『標籤』, 也就是 HTML 的結構形式。 認識 HTML 認識 HTML 認識 HTML 請按下歡迎畫面新增區的 HTML 項目開啟一個新的空白網頁 (或執行『檔案/開新檔案』命令, 在新增文件交談窗中選擇空白頁面/HTML/無), 接著要帶你演練一個簡單的小例子, 以了解 HTML 標籤與網頁畫面的呈現究竟有什麼呼應關係。 請切換到可同時檢視設計畫面與程式碼的分割檢視模式, 目前編輯區的左上角有插入點不斷閃爍, 而程式碼中的 body 與 /body 之間也有一個插入點, 在 body 與 /body 這組標籤之間就是用來配置網頁內容的大本營： 認識 HTML 認識 HTML 請在編輯區中輸入 Dreamweaver CS3, 可發現程式碼中的 body 與 /body 之間也會出現剛剛輸入的文字；再按下 Enter 鍵, 可看到程式碼中的文字被 p 與 /p 標籤包圍起來, 代表為一個段落。 認識 HTML 認識 HTML 認識 HTML 假如繼續做其他編輯動作, 都會有相對應的標籤語法產生。也就是說, 我們所看到的網頁內容, 其實都是由 HTML 標籤架構而成的, 這就是網頁構成的基本規則。 不過 HTML 標籤非常多, 例如插入圖片會出現 img 標籤、標題文字則是h1～h6、插入表格會出現 table 標籤、條列項目則是 ul 與 li、…等, 這麼多突然要一次全部背起來簡直是天方夜譚；而且利用設計檢視模式編輯時, 根本不會去注意究竟插入的元素是屬於什麼標籤。 認識 HTML 其實, 記不起來也沒關係,因為你只要將元素選起來 (或將插入點置於元素中), 然後在編輯區下方狀態列檢視, 最後顯示的即是其隸屬的標籤。 本堂課並不是要你馬上學會 HTML 語法, 只要你知道怎麼找出網頁元素所對應的 HTML 標籤即可, 唯有如此才能進一步將標籤套用 CSS。 認識 HTML 認識 CSS 網頁架構是由 HTML 標籤 (例如：body、h1、p、img、…等) 所組成, 但是既定的 HTML 標籤樣式有限, 例如開啟一個新網頁, 背景顏色一定是白色, 且輸入的文字都會是黑色略大的樣子、設定超連結的文字會變成藍色並出現底線、…等。不過設計網頁不可能永遠只用白底黑字來呈現, 必須針對不同主題適時地變化視覺呈現, 有鑑於此, W3C 協會頒布了一套 CSS 規則, 用來擴展 HTML 的功能, 使設計者可以更隨心所欲地編排版面。 認識 CSS CSS 的全名為 Cascading Style Sheets, 中文可譯為串接樣式表, 是一種用來描述網頁外觀樣式的語法。CSS 可說是網頁設計的精髓, 不僅可重新定義HTML 標籤原有的樣式, 還可自行定義規則並套用在網頁中各種可見的元素(文字、圖片、表格、表單、…等) 上；透過 CSS 豐富靈活的設定, 網頁即可跳脫傳統 HTML 的束縛, 輕易設計出更有變化的網頁。 認識 CSS 認識 CSS 在 Dreamweaver 中使用 CSS 不必在程式碼檢視模式下自己輸入 CSS 語法, 只要在屬性面