《網頁設計與制作（第2版）》第8章 使用CSS+Div布局

互聯網上各種網站都要通過最基本的網頁進行呈現，如何布局頁面以便能夠更好地表現內容和吸引讀者，也就成為了網站設計開發(fā)人員關注的技術話題。CSS+Div是WEB設計標準，是一種網頁布局方法。與傳統的表格（table）布局方法不同，CSS+Div可以實現網頁的頁面內容與表現形式的分離。本章將介紹使用CSS+Div布局網頁的基本方法。第8章使用CSS+Div布局學習目標了解CSS盒子模型的基本含義。掌握插入Div標簽的方法。掌握使用CSS+Div技術布局網頁的方法。8.1.1CSS盒子結構8.1.2CSS盒子屬性8.1.3關于Div和Span8.1.4關于id和class8.1 CSS盒子模型8.1.1CSS盒子結構W3C組織建議把網頁上的所有對象都放在一個盒子中，一個盒子通常是由盒子中的內容content（包括寬度width和高度height）、盒子的邊框border、盒子邊框與內容之間的距離padding（稱為填充或內邊距）、盒子與盒子之間的距離margin（稱為邊界或外邊距）構成的。在定義盒子寬度和高度的時候，要考慮到填充、邊框和邊界的存在。這樣，整個盒子模型在網頁中所占的寬度（高度）是：content+padding+border+margin。盒子的實際寬度（高度）是content+padding+border。盒子模型有兩種，分別是標準W3C盒子模型和IE盒子模型。在兩種不同模型網頁里，定義了相同CSS屬性的元素顯示效果是不一樣的。標準W3C盒子模型如圖所示。其范圍包括margin、border、padding、content，并且content部分的寬度和高度不包含border和padding部分。在標準W3C盒子模型中，盒子寬度=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)，盒子高度=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)。8.1.1CSS盒子結構IE盒子模型如圖所示，其范圍也包括margin、border、padding、content，但與標準W3C盒子模型不同的是，IE盒子模型content部分的寬度和高度包含了border和pading部分。在IE盒子模型中，盒子寬寬=width+(margin-left)+(margin-right)，盒子高度=height+(margin-top)+(margin-bottom)。8.1.2CSS盒子屬性CSS盒子屬性包括margin、border、padding和content。border（邊框），是內邊距和外邊距的分界線，可以分離不同的HTML元素，包括border-top（上邊框）、border-bottom（下邊框）、border-left（左邊框）和border-right（右邊框），有3個屬性，分別是border-style（樣式）、border-width（粗細）和border-color（顏色）。padding（填充），也稱邊距或空白、補白，用來定義內容與邊框之間的距離，包括padding-top（上填充）、padding-bottom（下填充）、padding-left（左填充）和padding-right（右填充）。margin（邊界），也稱外邊距，用來設置頁面元素與元素之間的距離，定義元素周圍的空間范圍，包括margin-top（上邊界）、margin-bottom（下邊界）、margin-left（左邊界）和margin-right（右邊界）。content（內容），盒子模型中必需的部分，用以存放文字、圖像等元素。在給元素設置background-color背景顏色時，IE作用的區(qū)域為content+padding，而Firefox作用的區(qū)域則是content+padding+border。body是一個特殊的盒子，它的背景顏色會延伸到margin部分?？梢酝ㄟ^設置width和height來控制content的大小，對于同一個盒子，可以分別設置每個邊的border、padding和margin。8.1.3 關于Div和SpanDiv標簽實際上是一種區(qū)隔標記，用來為HTML文檔內大塊（block-level）的內容提供結構和背景。Div的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的。在Div標記之間可以放置其他一些HTML元素，然后使用CSS相關屬性將Div容器標記中的元素作為一個獨立對象進行修飾，不會影響其他HTML元素。大部分Div標記都可以使用Span標記代替，但Div標簽是一個塊級元素（block），它的內容會自動地開始一個新行，而Span標簽是一個行內元素（inline），其前后不會發(fā)生換行。Div標記可以包含Span標記元素，但Span標記一般不包含Div標記。換行是Div固有的惟一格式表現，Span沒有固定的格式表現。當對Span應用樣式時，它才會產生視覺上的變化。如果不對Span應用樣式，那么Span元素中的文本與其他文本不會任何視覺上的差異?？梢詾镾pan應用id或class屬性，這樣既可以增加適當的語義，又便于對Span應用樣式?？梢詫iv通過class或id應用額外的樣式，使其作用會變得更加有效。實際上，在網頁設計中，對于較大的塊可以使用Div完成，而對于具有獨特樣式的單獨HTML元素，可以使用Span標記完成。8.1.4 關于id和class在使用CSS樣式時，經常會用id和class來選擇調用CSS樣式屬性。class在CSS中叫“類”，在同一個頁面可以無數次調用相同的類樣式。id表示標簽的身份，是標簽的惟一標識。在CSS里id在頁面里只能出現一次，即使在同一個頁面里調用相同的id多次仍然沒有出現頁面混亂錯誤，但為了W3C及各個標準，大家也要遵循id在一個頁面里的惟一性，以免出現瀏覽器兼容問題。例如，在文件頭定義了一個id名稱樣式“#tstyle”，在正文中通過id引用了一次，除了這一次，不能再繼續(xù)引用了。因此，在頁面中凡是需要多次引用的樣式，需要定義成類樣式，通過class進行多次調用，凡是只用一次的樣式，可以定義成id名稱樣式，當然也可以定義為類樣式。一個元素還可以應用多個類，如<divclass="sidebar1pstyle

fontstyle">，這個新的類命名結構帶來了更高的靈活性。8.2使用簡單的CSS+Div布局8.2.1

教學案例━━把握好你的生活8.2.2

插入Div標簽8.2.3

關于CSS布局塊8.2.4

關于CSS排版理念8.2.1

教學案例━━把握好你的生活將素材文檔復制到站點文件夾下，然后使用CSS+Div設置頁面，在瀏覽器中的顯示效果如圖8-3所示。8.2.2 插入Div標簽插入Div標簽的方法是，選擇菜單命令【插入】/【布局對象】/【Div標簽】，打開【插入Div標簽】對話框，進行參數設置即可。8.2.3 關于CSS布局塊CSS布局塊是不帶有屬性設置“display:inline”的Div標簽，或者是含有“display:block”、“position:absolute”或“position:relative”CSS聲明的任何其他頁面元素。在DreamweaverCS6中，Div標簽、指定了絕對或相對位置的圖像、指定了“display:block”樣式的a標簽、指定了絕對或相對位置的段落等都被視為CSS布局塊。出于可視化呈現的目的，CSS布局塊不包含內聯元素（也就是代碼位于一行文本中的元素）或段落之類的簡單塊元素。DreamweaverCS6為每個CSS布局塊可視化助理呈現的可視化內容包括：CSS布局外框、CSS布局背景、CSS布局框模型。DreamweaverCS6提供了多個可視化助理供查看CSS布局塊。例如，在設計時可以為CSS布局塊啟用布局外框、布局背景和布局框模型。將鼠標指針移動到布局塊上時，也可以查看顯示有選定CSS布局塊屬性的工具提示。8.2.3 關于CSS布局塊查看CSS布局外框、布局背景和布局框模型的方法是，選擇菜單命令【查看】/【可視化助理】/【CSS布局外框】或【CSS布局背景】、【CSS布局框模型】。也可通過單擊【文檔】工具欄上的（可視化助理）按鈕，在彈出的下拉菜單中選擇使用CSS布局塊可視化助理選項。8.2.4 關于CSS排版理念CSS排版是一種很新的排版理念，完全有別于傳統的排版習慣。它將頁面首先在整體上進行Div標記的分塊，然后設計各塊的位置，并對各個塊進行CSS定位，最后再在各個塊中添加相應的內容。通過CSS排版的頁面，更新十分容易，甚至是頁面的拓撲結構，都可以通過修改CSS屬性來重新定位。首先可以將所有頁面內容用一個的大Div容器包裹起來，指定該Div的id名稱為container或類似的名稱，這個id在整個頁面中是惟一的。接著創(chuàng)建相應的CSS樣式對該Div容器進行控制，包括設置容器的寬度、左右邊界。通?？梢园炎笥疫吔缇O置為“auto”，來使Div居中顯示。在這個Div大容器內，可以根據劃塊再插入相應的Div標簽，并使用CSS樣式進行位置控制。復雜一些的包括頁眉、主體和頁腳3個部分，主體部分又可以分為左右、左中右、上下、上中下，形式可以相互嵌套。8.3 使用復雜的CSS+Div布局8.3.1

教學案例━━人生哲理小故事8.3.2使用預設計的CSS+Div布局8.3.3

插入流體網格布局Div標簽8.3.4

Div標簽的居中、浮動和清除方式8.3.5

正確認識CSS+Div布局8.3.1教學案例━━人生哲理小故事將素材文檔復制到站點文件夾下，然后使用CSS+Div設置頁面，在瀏覽器中的顯示效果如圖8-21所示。7.3.1教學案例━━人生就像一條河7.3.2 創(chuàng)建CSS樣式表文件在DreamweaverCS6中，創(chuàng)建外部樣式表文件主要有兩種方式。一種是在當前網頁文檔中創(chuàng)建CSS樣式時，在打開的【新建CSS規(guī)則】對話框的【規(guī)則定義】下拉列表中選擇【（新建樣式表文件）】，打開【將樣式表文件另存為】對話框來創(chuàng)建樣式表文件。此時創(chuàng)建的樣式表文件自動鏈接到當前打開的網頁文檔。8.3.2 使用預設計的CSS+Div布局使用預設計的CSS+Div布局創(chuàng)建網頁的方法是，選擇菜單命令【文件】/【新建】，打開【新建文檔】對話框，然后依次選擇【空白頁】/【HTML】選項。8.3.2 使用預設計的CSS+Div布局8.3.3 插入流體網格布局Div標簽創(chuàng)建流體網格布局的方法是，選擇菜單命令【文件】/【新建流體網格布局】，打開【新建文檔】對話框。媒體類型的中央顯示的是網格中列數的默認值，要自定義設備的列數，可根據需要編輯該值。如果要相對于屏幕大小設置頁面寬度，可以百分比形式設置屏幕寬度，還可更改欄間距寬度，欄間距是兩列之間的空間。8.3.3 插入流體網格布局Div標簽創(chuàng)建的頁面效果。8.3.3 插入流體網格布局Div標簽可以將Div標簽中的文本刪除，輸入適合自己的內容，如果需要繼續(xù)插入Div標簽，可以將鼠標光標置于前一個Div標簽的后面，或選中前一個Div標簽，然后選擇菜單命令【插入】/【布局對象】/【流體網格布局Div標簽】。8.3.4

Div標簽的居中、浮動和清除方式使用Div標簽對頁面進行布局，通常在【方框】分類中將左右邊界均設置為“auto（自動）”來保證頁面內容的居中顯示。Div標簽通常也是自動換行的，如果要使在一行顯示多個Div塊，必須對這幾個Div標簽設置浮動方式，在【方框】分類中主要使用“l(fā)eft（左對齊）”或“right（右對齊）”兩個選項?？梢栽O置它們在父容器內同時向左浮動或同時向右浮動。如果一行容納不下，它們會自動到下一行。在設計時，一般是一行同時容納固定數量的Div標簽，它們的寬度都是提前計算好的。如果在父容器內的上一行中，浮動顯示了幾個Div標簽，如果要在下一行中顯示其他Div標簽，而且讓它們不再隨著上一行的Div標簽浮動，應在下一行第一個Div標簽中設置【清除】選項，通常將其值設置為“both”，這樣比較安全，可以保證能夠達到目的。對于“l(fā)eft”或“right”選項，讀者可以使用其來測試效果，以便可以更清楚地知道應該在哪種情況使用。為了讓當前的Div標簽不再隨其上面的Div標簽浮動，可在當前Div標簽的樣式中設置清除選項為“both”，這個技巧讀者需要注意使用。8.3.4

Div標簽的居中、浮動和清除方式8.3.5 正確認識CSS+Div布局CSS+Div是目前網頁頁面布局的主流技術，它具有諸多優(yōu)點。(1) 頁面載入速度快。由于將大部分頁面代碼寫在了CSS中，使得頁面體積變得更小。將頁面獨立成更多的區(qū)域，在打開頁面的時候，逐層加載，使得加載速度加快。(2) 易于維護和改版。由于使用了CSS+Div方法，將頁面內容和表現形式分離，結構清晰、精簡，使得在修改頁面的時候，直接到CSS里修改相應的樣式即可，這樣更有效率也更方便，同時也不會破壞頁面其他部分的布局樣式。(3) 保持視覺的一致性。CSS+Div最重要的優(yōu)勢之一就是保持視覺的一致