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

1、1結(jié)構(gòu)化標(biāo)準(zhǔn)語言HTML是網(wǎng)頁的基本描述語言，設(shè)計(jì)HTML語言的目的是為了能把存放在一臺(tái)電腦中的文本或圖形與另一臺(tái)電腦中的文本或圖形方便地聯(lián)系起來，形成有機(jī)的整體，不用考慮具體信息是在當(dāng)前電腦上還是在網(wǎng)絡(luò)的其他電腦上。2表現(xiàn)標(biāo)準(zhǔn)語言CSS 稱為層疊樣式表，英文是Cascading Style Sheets。目前遵循的是W3C 于1998 年5 月12 日發(fā)布的CSS 2。W3C 創(chuàng)建CSS 目的是以CSS取代HTML 表格式布局和其他表現(xiàn)的語言。3行為標(biāo)準(zhǔn)DOM 稱為文檔對象模型，英文全稱是Document Object Model，是一種W3C 頒布的標(biāo)準(zhǔn)，用于對結(jié)構(gòu)化文檔建立對象模型，從而

2、使得用戶可以通過程序語言（包括腳本）來控制其內(nèi)部結(jié)構(gòu)。網(wǎng)站標(biāo)準(zhǔn)不是某一個(gè)標(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 個(gè)方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括HTML 和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型，如W3C DOM、ECMAScript 等。 傳統(tǒng)表格布局方式實(shí)際上是利用了HTML 中的表格元素（table）具有的無邊框特性，由于表格元素可以在顯示時(shí)使單元格的邊框和間距設(shè)置為0，所以可以將網(wǎng)頁中的各個(gè)元素按版式劃分放入表格的各單元格中，從而實(shí)現(xiàn)復(fù)雜的排版組合。

3、9.2.1表格布局的特點(diǎn)表格布局的特點(diǎn)目前仍有一部分網(wǎng)站在使用表格布局，表格布局使用簡單，制作者只要將內(nèi)容按照行和列拆分，用表格組裝起來即可實(shí)現(xiàn)設(shè)計(jì)版面布局。9.2.2冗余的嵌套表格和混亂的結(jié)冗余的嵌套表格和混亂的結(jié)構(gòu)構(gòu)采用表格布局的頁面內(nèi)，為了實(shí)現(xiàn)設(shè)計(jì)的布局，制作者往往在單元格標(biāo)簽 內(nèi)設(shè)置高度、寬度和對齊等屬性，有時(shí)還要加入裝飾性的圖片，圖片和內(nèi)容混雜在一起，使代碼視圖顯得非常臃腫。復(fù)雜的表格使得設(shè)計(jì)極為困難，修改更加繁瑣，最后生成的網(wǎng)頁代碼除了表格本身的代碼，還有許多沒有意義的圖像占位符及其他元素，文件量龐大，最終導(dǎo)致瀏覽器下載解析速度變慢。而使用CSS 布局則可以從根本上改變這種情況。C

4、SS 布局的重點(diǎn)不再放在表格元素的設(shè)計(jì)中，取而代之的是HTML 中的另一個(gè)元素Div，Div 可以理解為“圖層”或是一個(gè)“塊”，Div 是一種比表格簡單的元素，語法上只有從 開始和 結(jié)束， Div 的功能僅僅是將一段信息標(biāo)記出來用于后期的樣式定義。9.3.1什么是什么是Web標(biāo)準(zhǔn)標(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è)計(jì)語言。Web 標(biāo)準(zhǔn)中典型的應(yīng)用模式是Div+CSS。實(shí)際上，Web 標(biāo)準(zhǔn)并不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。9.3.2Div+CSS的優(yōu)勢的優(yōu)勢CSS 樣式表是控制頁面布局樣式的基礎(chǔ)，并真正能夠做到網(wǎng)頁表現(xiàn)

5、與內(nèi)容分離的一種樣式設(shè)計(jì)語言。相對傳統(tǒng)HTML 的簡單樣式控制而言，CSS 能夠?qū)W(wǎng)頁中的對象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，以及擁有對網(wǎng)頁對象盒模型樣式的控制能力，并能夠進(jìn)行初步頁面交互設(shè)計(jì)，是目前基于文本展示的最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。HTML中的元素分為塊元素和行內(nèi)元素，通過CSS樣式可以改變HTML元素原本具有的顯示屬性，也就是說，通過CSS樣式的設(shè)置可以將塊元素與行內(nèi)元素相互轉(zhuǎn)換。9.4.1塊元素塊元素在HTML 代碼中，常見的塊元素包括、 等，塊元素具有以下特點(diǎn)。（1）總是在新行上開始顯示。（2）行高以及頂和底邊距都可以控制。（3）如果不設(shè)置寬度，則會(huì)默認(rèn)為

6、整個(gè)容器的100%；而如果設(shè)置了其寬度值，就會(huì)應(yīng)用所設(shè)置的寬度。9.4.2行內(nèi)元素行內(nèi)元素當(dāng)display 屬性的值被設(shè)置為inline 時(shí)，可以把元素設(shè)置為行內(nèi)元素，塊元素具有以下特點(diǎn)。（1）和其他元素顯示在一行上。（2）行高以及頂邊距和底邊距不可以改變。（3）寬度就是它的文字或圖片的寬度，不可以改變。在常用的一些元素中，、 等默認(rèn)都是行內(nèi)元素。 Div 與其他HTML 標(biāo)簽一樣，是一個(gè)HTML 所支持的標(biāo)簽。例如當(dāng)使用一個(gè)表格時(shí)，應(yīng)用這樣的結(jié)構(gòu)一樣，Div 在使用時(shí)也是同樣以 的形式出現(xiàn)。使用Div 進(jìn)行網(wǎng)頁排版布局是現(xiàn)在網(wǎng)頁設(shè)計(jì)制作的趨勢，通過CSS 樣式可以輕松控制Div 的位置，從而

7、實(shí)現(xiàn)許多不同的布局方式。9.5.1Div是什么是什么Div 是一個(gè)容器。在HTML 頁面中的每個(gè)標(biāo)簽對象幾乎都可以稱得上是一個(gè)容器，文檔內(nèi)容9.5.2如何在網(wǎng)頁中插入如何在網(wǎng)頁中插入Div如果需要在網(wǎng)頁中插入Div，可以像插入其他的HTML 元素一樣，只需在代碼中應(yīng)用 這樣的標(biāo)簽形式，將內(nèi)容放置其中，便可以應(yīng)用Div 標(biāo)簽。 9.5.3Div的嵌套的嵌套Div對象除了可以直接放入文本和其他標(biāo)簽，還可以多個(gè)Div標(biāo)簽進(jìn)行嵌套使用，最終的目的是合理的標(biāo)識(shí)出頁面的區(qū)域。單擊“插入”面板上的Div按鈕，彈出“插入Div”對話框。盒模型是CSS控制頁面時(shí)一個(gè)很重要的概念。只有很好地掌握了盒模型以及其中每

8、個(gè)元素的用法，才能真正的控制頁面中的各個(gè)元素的位置。 9.6.1盒模型的概念盒模型的概念 盒模型是由margin（邊界）、border（邊框）、padding（填充）和content（內(nèi)容）4 部分組成的，此外，在盒模型中，還具備高度和寬度兩個(gè)輔助屬性。margin-topmargin-bottomborder-rightborder-leftborder-topborder-bottommargin-leftmargin-rightpadding-leftpadding-rightpadding-toppadding-bottomcontent9.6.2margin（邊界）（邊界）margi

9、n（邊界）用來設(shè)置頁面中元素和元素之間的距離，即定義元素周圍的空間范圍，margin 屬性包含4 個(gè)子屬性，分別是margin-top、margin-right、margin-bottom 和margin-left，分別用于控制元素4 周的邊距。動(dòng)手實(shí)踐動(dòng)手實(shí)踐定位網(wǎng)頁元素位置定位網(wǎng)頁元素位置9.6.3border（邊框）（邊框）border（邊框）是內(nèi)邊距和外邊距的分界線，可以分離不同的HTML元素，border屬性設(shè)置的是元素的最外圍。在網(wǎng)頁設(shè)計(jì)中，如果計(jì)算元素的寬和高，則需要把border計(jì)算在內(nèi)。border屬性有3個(gè)子屬性，分別是邊框樣式（border-style）、邊框?qū)挾龋╞or

10、der-width）和邊框顏色（border-color）。動(dòng)手實(shí)踐動(dòng)手實(shí)踐為網(wǎng)頁元素添加邊框?yàn)榫W(wǎng)頁元素添加邊框最終文件：光盤最終文件第9章9-6-2.html 視頻：光盤視頻第9章9-6-2.swf最終文件：光盤最終文件第9章9-6-3.html 視頻：光盤視頻第9章9-6-3.swf9.6.4padding（填充）（填充）在CSS中，可以通過設(shè)置padding屬性定義內(nèi)容與邊框之間的距離，即內(nèi)邊距。padding屬性值可以是一個(gè)具體的長度，也可以是一個(gè)相對于上級(jí)元素的百分比，但不可以使用負(fù)值。padding屬性可以為盒子定義上、右、下、左各邊填充的值，分別是padding-top（上填充）

11、、padding-right（右填充）、padding-bottom（下填充）和padding-left（左填充）。動(dòng)手實(shí)踐動(dòng)手實(shí)踐控制控制Div中內(nèi)容位置中內(nèi)容位置9.6.5content（內(nèi)容）（內(nèi)容）從盒模型中可以看出中間部分是content（內(nèi)容），它主要用來顯示內(nèi)容，這部分也是整個(gè)盒模型的主要部分，其他如margin、border、padding所做的操作都是對content部分所做的修飾。對于內(nèi)容部分的操作，也就是對文、圖像等頁面元素的操作。最終文件：光盤最終文件第9章9-6-4.html 視頻：光盤視頻第9章9-6-4.swfDiv+CSS布局是一種比較新的網(wǎng)頁布局理念，完全有別

12、于傳統(tǒng)的布局方式。它將頁面首先在整體上進(jìn)行標(biāo)簽的分塊，然后對各個(gè)塊進(jìn)行CSS定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。9.7.1元素定位的元素定位的CSS屬性屬性在網(wǎng)頁設(shè)計(jì)制作中，定位就是精確的定義HTML元素在頁面中的位置，可以是頁面中的絕對位置，也可以是相對于父級(jí)元素或另一個(gè)元素的相對位置。在使用Div+CSS布局制作頁面的過程中，都是通過CSS的定位屬性對元素完成位置和大小的控制的。9.7.2relative（相對定位）（相對定位）如果對一個(gè)元素進(jìn)行相對定位，首先將出現(xiàn)在它所在的位置上，然后通過設(shè)置垂直或水平位置，讓這個(gè)元素相對于它的原始起點(diǎn)進(jìn)行移動(dòng)。另外，相對定位時(shí)，無論是否進(jìn)行移動(dòng)，元素

13、仍然占據(jù)原來的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他元素 。動(dòng)手實(shí)踐動(dòng)手實(shí)踐實(shí)現(xiàn)網(wǎng)頁元實(shí)現(xiàn)網(wǎng)頁元素相對定位素相對定位最終文件：光盤最終文件第9章9-7-2.html 視頻：光盤視頻第9章9-7-2.swf9.7.3absolute（絕對定位）（絕對定位）絕對定位是參照瀏覽器的左上角，配合top、right、bottom和left進(jìn)行定位的，如果沒有設(shè)置上述的4個(gè)值，則默認(rèn)的依據(jù)父級(jí)元素的坐標(biāo)原點(diǎn)為原始點(diǎn)。絕對定位可以通過top、right、bottom和left來設(shè)置元素，使其處在任何一個(gè)位置。動(dòng)手實(shí)踐動(dòng)手實(shí)踐實(shí)現(xiàn)網(wǎng)頁元素絕對定位實(shí)現(xiàn)網(wǎng)頁元素絕對定位9.7.4fixed（固定定位）（固定定位）固

14、定定位和絕對定位比較相似，它是絕對定位的一種特殊形式，固定定位的容器不會(huì)隨著滾動(dòng)條的拖動(dòng)而變化位置。在視線中，固定定位的容器位置是不會(huì)改變的。固定定位可以把一些特殊效果固定在瀏覽器的視線位置。動(dòng)手實(shí)踐動(dòng)手實(shí)踐實(shí)現(xiàn)網(wǎng)頁元素固定定位實(shí)現(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.5float（浮動(dòng)定位）（浮動(dòng)定位）除了使用position進(jìn)行定位外，還可以使用float定位。float定位只能在水平方向上定位，而不能在垂直方向上定位。float

15、屬性表示浮動(dòng)屬性，它用來改變元素塊的顯示方式。浮動(dòng)定位是CSS排版中非常重要的手段。浮動(dòng)的框可以左右移動(dòng)，直到它外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊緣。動(dòng)手實(shí)踐動(dòng)手實(shí)踐實(shí)現(xiàn)網(wǎng)頁元素浮動(dòng)定位實(shí)現(xiàn)網(wǎng)頁元素浮動(dòng)定位9.7.6空白邊疊加空白邊疊加空白邊疊加是一個(gè)比較簡單的概念，當(dāng)兩個(gè)垂直空白邊相遇時(shí)，它們將形成一個(gè)空白邊。這個(gè)空白邊的高度是兩個(gè)發(fā)生疊加的空白邊中的高度的較大者。動(dòng)手實(shí)踐動(dòng)手實(shí)踐空白邊疊加在網(wǎng)頁中的應(yīng)用空白邊疊加在網(wǎng)頁中的應(yīng)用最終文件：光盤最終文件第9章9-7-5.html 視頻：光盤視頻第9章9-7-5.swf最終文件：光盤最終文件第9章9-7-6.html 視頻：光盤視頻第9章9-7-

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

17、。9.8.3網(wǎng)頁元素浮動(dòng)布局網(wǎng)頁元素浮動(dòng)布局在Div+CSS布局中，浮動(dòng)布局是使用最多，也是常見的布局方式，浮動(dòng)的布局又可以分為多種形式。1兩列固定寬度布局2兩列百分比寬度布局3兩列右列寬度自適應(yīng)布局4兩列固定寬度居中布局5三列浮動(dòng)中間列寬度自適應(yīng)布局9.8.4流體網(wǎng)格布局流體網(wǎng)格布局隨著網(wǎng)絡(luò)及移動(dòng)設(shè)備的迅速發(fā)展，現(xiàn)在越來越多的人可以隨時(shí)隨地的使用各種移動(dòng)設(shè)備瀏覽網(wǎng)頁，為了滿足各種不同設(shè)備對網(wǎng)頁的瀏覽，在Dreamweaver CC中新增了流體網(wǎng)格布局的功能，該功能主要是針對目前流行的智能手機(jī)、平板電腦和桌面電腦三種設(shè)備。通過創(chuàng)建流體網(wǎng)格布局頁面，可以使頁面能夠適應(yīng)3種不同的設(shè)備，并且可以隨時(shí)

18、在3種不同的設(shè)備中查看頁面的效果。動(dòng)手實(shí)踐動(dòng)手實(shí)踐制作商場網(wǎng)站制作商場網(wǎng)站IPAD頁面布局頁面布局最終文件：光盤最終文件第9章9-8-4.html 視頻：光盤視頻第9章9-8-4.swf一個(gè)典型的網(wǎng)頁中通常都會(huì)包含頭部、頁腳、導(dǎo)航、主體內(nèi)容和側(cè)邊內(nèi)容等區(qū)域。針對這情況，HTML5中引入了與文檔結(jié)構(gòu)相關(guān)聯(lián)的網(wǎng)頁結(jié)構(gòu)元素。在Dreamweaver CC是為了能夠使設(shè)計(jì)者能夠輕松的在網(wǎng)頁中插入HTML5結(jié)構(gòu)元素，在“插入”面板中新增了“結(jié)構(gòu)”選項(xiàng)卡，通過單擊“結(jié)構(gòu)”選項(xiàng)卡中的按鈕，即可快速在網(wǎng)頁中插入相應(yīng)的HTML5結(jié)構(gòu)元素。9.9.1頁眉頁眉頁眉通常用于定義網(wǎng)頁的介紹信息內(nèi)容，在HTML5中新增了標(biāo)簽，使用該標(biāo)簽可以在網(wǎng)頁中定義網(wǎng)頁的頁眉部分。9.9.2頁腳頁腳頁腳通常用于定義網(wǎng)頁文檔的版底信息，包括設(shè)計(jì)者信息、文檔的創(chuàng)建日期以及聯(lián)系方式等。在HTML5中新增了標(biāo)簽，使用該標(biāo)簽可以在網(wǎng)頁中定義網(wǎng)頁的頁腳部分。9.9.3Navigation導(dǎo)航是每個(gè)網(wǎng)頁中都包含的重要元素之一，通過網(wǎng)站導(dǎo)航可以在網(wǎng)站中各頁面之間進(jìn)行跳轉(zhuǎn)。在在HTML5中新增了標(biāo)簽，使用該標(biāo)簽可以在網(wǎng)頁中定義網(wǎng)頁的導(dǎo)航部分。9.9.4章節(jié)章節(jié)在網(wǎng)頁文檔中常常需要定義章節(jié)等特定的區(qū)域。在HTML5中新增了標(biāo)簽，使用該標(biāo)簽可以在網(wǎng)頁中定義章節(jié)、頁眉、頁腳或文檔中的其他部分。9.9.5文章文章網(wǎng)