第9章 使用Div+CSS靈活布局網(wǎng)頁

1．結(jié)構(gòu)化標(biāo)準(zhǔn)語言

HTML是網(wǎng)頁的基本描述語言，設(shè)計HTML語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯(lián)系起來，形成有機(jī)的整體，不用考慮具體信息是在當(dāng)前電腦上還是在網(wǎng)絡(luò)的其他電腦上。

2．表現(xiàn)標(biāo)準(zhǔn)語言

CSS稱為層疊樣式表，英文是CascadingStyleSheets。目前遵循的是W3C于1998年5月12日發(fā)布的CSS2。W3C創(chuàng)建CSS目的是以CSS取代HTML表格式布局和其他表現(xiàn)的語言。

3．行為標(biāo)準(zhǔn)

DOM稱為文檔對象模型，英文全稱是DocumentObjectModel，是一種W3C頒布的標(biāo)準(zhǔn)，用于對結(jié)構(gòu)化文檔建立對象模型，從而使得用戶可以通過程序語言（包括腳本）來控制其內(nèi)部結(jié)構(gòu)。

9.1什么是網(wǎng)站標(biāo)準(zhǔn)網(wǎng)站標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由3部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分3個方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括HTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型，如W3CDOM、ECMAScript等。

9.2關(guān)于表格布局傳統(tǒng)表格布局方式實際上是利用了HTML中的表格元素（table）具有的無邊框特性，由于表格元素可以在顯示時使單元格的邊框和間距設(shè)置為0，所以可以將網(wǎng)頁中的各個元素按版式劃分放入表格的各單元格中，從而實現(xiàn)復(fù)雜的排版組合。

9.2.1表格布局的特點目前仍有一部分網(wǎng)站在使用表格布局，表格布局使用簡單，制作者只要將內(nèi)容按照行和列拆分，用表格組裝起來即可實現(xiàn)設(shè)計版面布局。9.2.2冗余的嵌套表格和混亂的結(jié)構(gòu)采用表格布局的頁面內(nèi)，為了實現(xiàn)設(shè)計的布局，制作者往往在單元格標(biāo)簽<td>內(nèi)設(shè)置高度、寬度和對齊等屬性，有時還要加入裝飾性的圖片，圖片和內(nèi)容混雜在一起，使代碼視圖顯得非常臃腫。復(fù)雜的表格使得設(shè)計極為困難，修改更加繁瑣，最后生成的網(wǎng)頁代碼除了表格本身的代碼，還有許多沒有意義的圖像占位符及其他元素，文件量龐大，最終導(dǎo)致瀏覽器下載解析速度變慢。而使用CSS布局則可以從根本上改變這種情況。CSS布局的重點不再放在表格元素的設(shè)計中，取而代之的是HTML中的另一個元素——Div，Div可以理解為“圖層”或是一個“塊”，Div是一種比表格簡單的元素，語法上只有從<Div>開始和</Div>結(jié)束，Div的功能僅僅是將一段信息標(biāo)記出來用于后期的樣式定義。

9.3關(guān)于DIV+CSS布局9.3.1什么是Web標(biāo)準(zhǔn)

Web標(biāo)準(zhǔn)，即網(wǎng)站標(biāo)準(zhǔn)。目前通常所說的Web標(biāo)準(zhǔn)一般指進(jìn)行網(wǎng)站建設(shè)所采用的基于HTML語言的網(wǎng)站設(shè)計語言。Web標(biāo)準(zhǔn)中典型的應(yīng)用模式是Div+CSS。實際上，Web標(biāo)準(zhǔn)并不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。9.3.2

Div+CSS的優(yōu)勢

CSS樣式表是控制頁面布局樣式的基礎(chǔ)，并真正能夠做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。相對傳統(tǒng)HTML的簡單樣式控制而言，CSS能夠?qū)W(wǎng)頁中的對象的位置排版進(jìn)行像素級的精確控制，支持幾乎所有的字體字號樣式，以及擁有對網(wǎng)頁對象盒模型樣式的控制能力，并能夠進(jìn)行初步頁面交互設(shè)計，是目前基于文本展示的最優(yōu)秀的表現(xiàn)設(shè)計語言。

9.4塊元素和行內(nèi)元素HTML中的元素分為塊元素和行內(nèi)元素，通過CSS樣式可以改變HTML元素原本具有的顯示屬性，也就是說，通過CSS樣式的設(shè)置可以將塊元素與行內(nèi)元素相互轉(zhuǎn)換。9.4.1塊元素在HTML代碼中，常見的塊元素包括<Div>、<p>、<table>等，塊元素具有以下特點。（1）總是在新行上開始顯示。（2）行高以及頂和底邊距都可以控制。（3）如果不設(shè)置寬度，則會默認(rèn)為整個容器的100%；而如果設(shè)置了其寬度值，就會應(yīng)用所設(shè)置的寬度。9.4.2行內(nèi)元素當(dāng)display屬性的值被設(shè)置為inline時，可以把元素設(shè)置為行內(nèi)元素，塊元素具有以下特點。（1）和其他元素顯示在一行上。（2）行高以及頂邊距和底邊距不可以改變。（3）寬度就是它的文字或圖片的寬度，不可以改變。在常用的一些元素中，<span>、<a>、<img>、<b>、<font>、<input>等默認(rèn)都是行內(nèi)元素。

9.5在網(wǎng)頁中插入DivDiv與其他HTML標(biāo)簽一樣，是一個HTML所支持的標(biāo)簽。例如當(dāng)使用一個表格時，應(yīng)用<table></table>這樣的結(jié)構(gòu)一樣，Div在使用時也是同樣以<div></div>的形式出現(xiàn)。使用Div進(jìn)行網(wǎng)頁排版布局是現(xiàn)在網(wǎng)頁設(shè)計制作的趨勢，通過CSS樣式可以輕松控制Div的位置，從而實現(xiàn)許多不同的布局方式。9.5.1

Div是什么Div是一個容器。在HTML頁面中的每個標(biāo)簽對象幾乎都可以稱得上是一個容器，<div>文檔內(nèi)容</div>9.5.2如何在網(wǎng)頁中插入Div如果需要在網(wǎng)頁中插入Div，可以像插入其他的HTML元素一樣，只需在代碼中應(yīng)用<div></div>這樣的標(biāo)簽形式，將內(nèi)容放置其中，便可以應(yīng)用Div標(biāo)簽。

9.5.3

Div的嵌套

Div對象除了可以直接放入文本和其他標(biāo)簽，還可以多個Div標(biāo)簽進(jìn)行嵌套使用，最終的目的是合理的標(biāo)識出頁面的區(qū)域。單擊“插入”面板上的Div按鈕，彈出“插入Div”對話框。

9.6關(guān)于Div+CSS盒模型盒模型是CSS控制頁面時一個很重要的概念。只有很好地掌握了盒模型以及其中每個元素的用法，才能真正的控制頁面中的各個元素的位置。

9.6.1盒模型的概念

盒模型是由margin（邊界）、border（邊框）、padding（填充）和content（內(nèi)容）4部分組成的，此外，在盒模型中，還具備高度和寬度兩個輔助屬性。margin-topmargin-bottomborder-rightborder-leftborder-topborder-bottommargin-leftmargin-rightpadding-leftpadding-rightpadding-toppadding-bottomcontent9.6.2

margin（邊界）margin（邊界）用來設(shè)置頁面中元素和元素之間的距離，即定義元素周圍的空間范圍，margin屬性包含4個子屬性，分別是margin-top、margin-right、margin-bottom和margin-left，分別用于控制元素4周的邊距。動手實踐——定位網(wǎng)頁元素位置9.6.3

border（邊框）

border（邊框）是內(nèi)邊距和外邊距的分界線，可以分離不同的HTML元素，border屬性設(shè)置的是元素的最外圍。在網(wǎng)頁設(shè)計中，如果計算元素的寬和高，則需要把border計算在內(nèi)。border屬性有3個子屬性，分別是邊框樣式（border-style）、邊框?qū)挾龋╞order-width）和邊框顏色（border-color）。動手實踐——為網(wǎng)頁元素添加邊框最終文件：光盤\最終文件\第9章\9-6-2.html視頻：光盤\視頻\第9章\9-6-2.swf最終文件：光盤\最終文件\第9章\9-6-3.html視頻：光盤\視頻\第9章\9-6-3.swf9.6.4

padding（填充）在CSS中，可以通過設(shè)置padding屬性定義內(nèi)容與邊框之間的距離，即內(nèi)邊距。padding屬性值可以是一個具體的長度，也可以是一個相對于上級元素的百分比，但不可以使用負(fù)值。padding屬性可以為盒子定義上、右、下、左各邊填充的值，分別是padding-top（上填充）、padding-right（右填充）、padding-bottom（下填充）和padding-left（左填充）。動手實踐——控制Div中內(nèi)容位置9.6.5

content（內(nèi)容）從盒模型中可以看出中間部分是content（內(nèi)容），它主要用來顯示內(nèi)容，這部分也是整個盒模型的主要部分，其他如margin、border、padding所做的操作都是對content部分所做的修飾。對于內(nèi)容部分的操作，也就是對文、圖像等頁面元素的操作。最終文件：光盤\最終文件\第9章\9-6-4.html視頻：光盤\視頻\第9章\9-6-4.swfDiv+CSS布局是一種比較新的網(wǎng)頁布局理念，完全有別于傳統(tǒng)的布局方式。它將頁面首先在整體上進(jìn)行<div>標(biāo)簽的分塊，然后對各個塊進(jìn)行CSS定位，最后再在各個塊中添加相應(yīng)的內(nèi)容。9.7.1元素定位的CSS屬性在網(wǎng)頁設(shè)計制作中，定位就是精確的定義HTML元素在頁面中的位置，可以是頁面中的絕對位置，也可以是相對于父級元素或另一個元素的相對位置。在使用Div+CSS布局制作頁面的過程中，都是通過CSS的定位屬性對元素完成位置和大小的控制的。

9.7

Div+CSS布局定位9.7.2

relative（相對定位）如果對一個元素進(jìn)行相對定位，首先將出現(xiàn)在它所在的位置上，然后通過設(shè)置垂直或水平位置，讓這個元素相對于它的原始起點進(jìn)行移動。另外，相對定位時，無論是否進(jìn)行移動，元素仍然占據(jù)原來的空間。因此，移動元素會導(dǎo)致它覆蓋其他元素。動手實踐——實現(xiàn)網(wǎng)頁元素相對定位最終文件：光盤\最終文件\第9章\9-7-2.html視頻：光盤\視頻\第9章\9-7-2.swf9.7.3

absolute（絕對定位）絕對定位是參照瀏覽器的左上角，配合top、right、bottom和left進(jìn)行定位的，如果沒有設(shè)置上述的4個值，則默認(rèn)的依據(jù)父級元素的坐標(biāo)原點為原始點。絕對定位可以通過top、right、bottom和left來設(shè)置元素，使其處在任何一個位置。動手實踐——實現(xiàn)網(wǎng)頁元素絕對定位9.7.4

fixed（固定定位）固定定位和絕對定位比較相似，它是絕對定位的一種特殊形式，固定定位的容器不會隨著滾動條的拖動而變化位置。在視線中，固定定位的容器位置是不會改變的。固定定位可以把一些特殊效果固定在瀏覽器的視線位置。動手實踐——實現(xiàn)網(wǎng)頁元素固定定位最終文件：光盤\最終文件\第9章\9-7-3.html視頻：光盤\視頻\第9章\9-7-3.swf最終文件：光盤\最終文件\第9章\9-7-4.html視頻：光盤\視頻\第9章\9-7-4.swf9.7.5

float（浮動定位）除了使用position進(jìn)行定位外，還可以使用float定位。float定位只能在水平方向上定位，而不能在垂直方向上定位。float屬性表示浮動屬性，它用來改變元素塊的顯示方式。浮動定位是CSS排版中非常重要的手段。浮動的框可以左右移動，直到它外邊緣碰到包含框或另一個浮動框的邊緣。動手實踐——實現(xiàn)網(wǎng)頁元素浮動定位9.7.6空白邊疊加空白邊疊加是一個比較簡單的概念，當(dāng)兩個垂直空白邊相遇時，它們將形成一個空白邊。這個空白邊的高度是兩個發(fā)生疊加的空白邊中的高度的較大者。動手實踐——空白邊疊加在網(wǎng)頁中的應(yīng)用最終文件：光盤\最終文件\第9章\9-7-5.html視頻：光盤\視頻\第9章\9-7-5.swf最終文件：光盤\最終文件\第9章\9-7-6.html視頻：光盤\視頻\第9章\9-7-6.swf在網(wǎng)頁制作的過程中，首先需要對網(wǎng)頁進(jìn)行布局，網(wǎng)頁布局的形式多種多樣，例如居中的網(wǎng)頁布局，居右的網(wǎng)頁布局，兩列的網(wǎng)頁布局，3列的網(wǎng)頁布局等，通過CSS樣式的設(shè)置能夠輕松的實現(xiàn)各種不同效果的網(wǎng)頁布局。9.8.1

Div高度自適應(yīng)高度值可以使用百分比進(jìn)行設(shè)置，但是直接使用height:100%;不會顯示效果的，這與瀏覽器的解析方式有一定關(guān)系，如圖為實現(xiàn)高度自適應(yīng)的CSS代碼，在瀏覽器中預(yù)覽該頁面，可以看到Div高度自適應(yīng)的效果。9.8.2網(wǎng)頁內(nèi)容居中布局居中的網(wǎng)頁設(shè)計目前在網(wǎng)頁布局的應(yīng)用中非常廣泛，所以如何在CSS中讓設(shè)計居中顯示是大多數(shù)開發(fā)人員首先要學(xué)習(xí)的重點之一。

9.8常用Div+CSS布局方式9.8.3網(wǎng)頁元素浮動布局在Div+CSS布局中，浮動布局是使用最多，也是常見的布局方式，浮動的布局又可以分為多種形式。1．兩列固定寬度布局2．兩列百分比寬度布局3．兩列右列寬度自適應(yīng)布局4．兩列固定寬度居中布局5．三列浮動中間列寬度自適應(yīng)布局9.8.4流體網(wǎng)格布局

隨著網(wǎng)絡(luò)及移動設(shè)備的迅速發(fā)展，現(xiàn)在越來越多的人可以隨時隨地的使用各種移動設(shè)備瀏覽網(wǎng)頁，為了滿足各種不同設(shè)備對網(wǎng)頁的瀏覽，在DreamweaverCC中新增了流體網(wǎng)格布局的功能，該功能主要是針對目前流行的智能手機(jī)、平板電腦和桌面電腦三種設(shè)備。通過創(chuàng)建流體網(wǎng)格布局頁面，可以使頁面能夠適應(yīng)3種不同的設(shè)備，并且可以隨時在3種不同的設(shè)備中查看頁面的效果。動手實踐——制作商場網(wǎng)站IPAD頁面布局最終文件：光盤\最終文件\第9章\9-8-4.html視頻：光盤\視頻\第9章\9-8-4.swf一個典型的網(wǎng)頁中通常都會包含頭部、頁腳、導(dǎo)航、主體內(nèi)容和側(cè)邊內(nèi)容等區(qū)域。針對這情況，HTML5中引入了與文檔結(jié)構(gòu)相關(guān)聯(lián)的網(wǎng)頁結(jié)構(gòu)元素。在DreamweaverCC是為了能夠使設(shè)計者能夠輕松的在網(wǎng)頁中插入HTML5結(jié)構(gòu)元素，在“插入”面板中新增了“結(jié)構(gòu)”選項卡，通過單擊“結(jié)構(gòu)”選項卡中的按鈕，即可快速在網(wǎng)頁中插入相應(yīng)的HTML5結(jié)構(gòu)元素。

9.9插入HTML5結(jié)構(gòu)元素9.9.1

頁眉頁眉通常用于定義網(wǎng)頁的介紹信息內(nèi)容，在HTML5中新增了<header>標(biāo)簽，使用該標(biāo)簽可以在網(wǎng)頁中定義網(wǎng)頁的頁眉部分。9.9.2頁腳頁腳通常用于定義網(wǎng)頁文檔的版底信息，包括設(shè)計者信息、文檔的創(chuàng)建日期以及聯(lián)系方式等。在HTML5中新增了<footer>標(biāo)簽，使用該標(biāo)簽可以在網(wǎng)頁中定義網(wǎng)頁的頁腳部分。9.9.3

Navigation導(dǎo)航是每個網(wǎng)頁中都包含的重要元素之一，通過網(wǎng)站導(dǎo)航可以在網(wǎng)站中各頁面之間進(jìn)行跳轉(zhuǎn)。在在HTML5中新增了<nav>標(biāo)簽，使用該標(biāo)簽可以在網(wǎng)頁中定義網(wǎng)頁的導(dǎo)航部分。9.9.4

章節(jié)在網(wǎng)頁文檔中常常需要定義章節(jié)等特定的區(qū)域。在HTML5中新增了<section>標(biāo)簽，使用該標(biāo)簽可以在網(wǎng)頁中定義章節(jié)、頁眉、頁腳或文檔中的其他部分。9.9.5文章網(wǎng)頁中常常出現(xiàn)大段的文章內(nèi)容，通過文章結(jié)構(gòu)元素可以將網(wǎng)頁中大段的文章內(nèi)容標(biāo)識出來，使網(wǎng)頁的代碼結(jié)構(gòu)更加整齊。在HTML5中新增了<article>標(biāo)簽，使用該標(biāo)簽可