第9章Div+CSS網頁布局技術網頁設計與制作案例實戰教程9.1.1

什么是Web標準Web標準即網頁標準，是指有關于全球資訊網各個方面的定義和說明的正式標準以及技術規范。網頁主要由結構、表現和行為三部分組成，對應的標準也分三方面：1.結構結構用于對網頁中用到的信息進行分類與整理。結構標準語言主要包括XHTML和XML。2.表現表現用于對信息進行版式、顏色和大小等形式進行控制。表現標準語言主要包括CSS。3.行為行為是指文檔內部的模型定義及交互行為的編寫，用于編寫交互式的文檔。行為標準主要包括DOM和ECMAScript。9.1.2

Div概述Div全稱為DIVision，即劃分，用于在頁面中定義一個區域，使用CSS樣式控制Div元素的表現效果。Div可以將復雜的網頁內容分割成獨立的區塊，一個Div可以放置一個圖片，也可以顯示一行文本。簡單來講，Div就是容器，可以存放任何網頁顯示元素。Div具有以下3個優點：(1)節省頁面代碼(2)加快網頁瀏覽速度(3)便于網站推廣9.1.3創建Div在使用Div布局網頁前需要現在網頁中創建Div區塊，在Dreamweaver中，用戶可以在“代碼”視圖中添加<div></div>標簽創建Div，也可以通過執行“插入”命令或通過“插入”面板插入Div。9.1.4實操案例：琳瑯首飾本案例將以琳瑯首飾網頁的制作為例，介紹Div和CSS的應用。目錄Contents9.1

CSS與Div布局基礎9.2

CSS布局方法9.3

課堂實戰9.4

課后練習9.2.1盒子模型盒子模型時CSS樣式布局的重要概念，掌握盒子模型及其使用方法，才可以真正地控制頁面中的各種元素。盒子模型是指將頁面中的各個元素及其周圍的空間看成一個盒子，該盒子占據著一定的頁面空間。用戶可以通過調整盒子的邊框和距離等參數，來調節盒子的位置。一個盒子模型由內容（content）、邊框（border）、填充（padding）和空白邊（margin）這4個部分組成。9.2.2外邊距設置margin屬性可以設置外邊距，margin邊界環繞在該元素的content區域四周。若margin的值為0，則margin邊界與border邊界重合。margin屬性接受任何長度單位，可以使用像素、毫米、厘米和em等，也可以設置為auto（自動）。常見做法是為外邊距設置長度值，允許使用負值。9.2.3外邊距合并外邊距合并是指當兩個垂直外邊距相遇時，他們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。在實踐中對網頁進行布局時，它會造成許多混淆。以下3種情況都有可能出現外邊距合并的現象：當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上/或下外邊距也會發生合并。外邊距甚至可以與自身發生合并。假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們也會發生合并。9.2.4內邊距設置CSS中的padding屬性控制元素的內邊距。padding屬性定義元素邊框與元素內容之間的空白區域，接受長度值或百分比值，但不允許使用負值。若希望所有h1元素的各邊都有5像素的內邊距，代碼描述如下：h1{padding:5px;}9.2.5實操案例：時刻餐廳本案例將練習制作時刻餐廳網頁，對Div和CSS的應用進行介紹。目錄Contents9.1

CSS與Div布局基礎9.2

CSS布局方法9.3

課堂實戰9.4

課后練習9.3課堂實戰飛揚咖啡本案例將練習制作飛揚咖啡網頁，對Div和CSS的創建與應用進行介紹。目錄Contents9.1

CSS與Div布局基礎9.2

CSS布局方法9.3

課堂實戰9.4

課后練習9.4課后練習1.湖江船業根據所學內容制作湖江船業網頁。2.安居養老根據所學內容