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

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

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

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

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

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

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

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

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