《網(wǎng)頁設(shè)計與制作（第2版）》第8章 使用CSS+Div布局

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

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

教學(xué)案例━━把握好你的生活8.2.2

插入Div標(biāo)簽8.2.3

關(guān)于CSS布局塊8.2.4

關(guān)于CSS排版理念8.2.1

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

教學(xué)案例━━人生哲理小故事8.3.2使用預(yù)設(shè)計的CSS+Div布局8.3.3

插入流體網(wǎng)格布局Div標(biāo)簽8.3.4

Div標(biāo)簽的居中、浮動和清除方式8.3.5

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

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

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