《與頁面布局》PPT課件.ppt

第19章 CSS與頁面布局,使用CSS布局頁面和傳統(tǒng)的使用表格布局頁面有很大的區(qū)別。使用CSS布局頁面時(shí)，要注意很多問題，例如元素的居中問題、圖文混排問題、元素的浮動(dòng)問題、寬度的計(jì)算問題、高度的擴(kuò)展問題等。下面詳細(xì)講解使用CSS進(jìn)行頁面布局的知識(shí)。,19.1 CSS頁面布局簡介,本節(jié)主要講解使用CSS布局頁面的基礎(chǔ)知識(shí)，其中包括CSS布局頁面的優(yōu)點(diǎn)、CSS頁面布局的基本思想等。,19.1.1 CSS布局頁面的優(yōu)點(diǎn),1網(wǎng)站瀏覽者的好處 由于頁面代碼量減少，文件下載速度更快。同時(shí)，瀏覽器顯示頁面的速度也更快。 由于清晰的語義結(jié)構(gòu)，使得內(nèi)容能被更多的用戶（包括部分殘障人士）所訪問。 由于實(shí)現(xiàn)了結(jié)構(gòu)和表現(xiàn)相分離，內(nèi)容能被更多的設(shè)備（包括手機(jī)、打印機(jī)等）所訪問。 由于樣式文件的獨(dú)立性，用戶選擇自己喜歡的界面變得更容易。,19.1.1 CSS布局頁面的優(yōu)點(diǎn),2網(wǎng)站擁有者的好處 由于代碼變得更簡潔和組件用得更少，使得維護(hù)變得很容易。 由于對帶寬要求的降低，節(jié)約了成本。 由于頁面結(jié)構(gòu)清晰的語義性，使得搜索引擎的搜索變得更容易。,19.1.2 CSS布局頁面的基本思想,CSS布局頁面的基本思想，就是實(shí)現(xiàn)網(wǎng)頁結(jié)構(gòu)和表現(xiàn)相分離。 內(nèi)容、結(jié)構(gòu)和表現(xiàn)是一個(gè)網(wǎng)頁必不可少的組成部分，其中內(nèi)容是頁面?zhèn)鬟_(dá)信息的基礎(chǔ)，表現(xiàn)使得內(nèi)容的傳達(dá)變得更加明晰和方便，而結(jié)構(gòu)則是內(nèi)容和表現(xiàn)之間的紐帶，內(nèi)容、結(jié)構(gòu)和表現(xiàn)的具體含義如下所示。 內(nèi)容：是指網(wǎng)頁實(shí)際要傳達(dá)的信息，包括文本、圖片、音樂、視頻、數(shù)據(jù)、文檔等。其中不包括修飾的圖片、背景音樂等。,19.2 定義文檔結(jié)構(gòu),在W3C推薦的Web標(biāo)準(zhǔn)中，推薦使用過渡的XHTML文檔作為CSS布局頁面的文檔，具體操作如下所示。,19.3 CSS樣式的優(yōu)先級,在頁面中，定義CSS樣式有三種形式：一種為只對該文檔的CSS樣式；一種為附加的CSS樣式；還有一種為使用style屬性定義的CSS樣式。其中前兩種定義CSS樣式的方法，在第18章中已經(jīng)講解過了。下面講解使用style屬性定義的CSS樣式的內(nèi)容，以及三種方式的優(yōu)先級。 1使用style屬性定義CSS樣式,19.3 CSS樣式的優(yōu)先級,2CSS樣式的優(yōu)先級,19.4 頁面屬性與CSS樣式,在文檔中，頁面屬性的部分參數(shù)，會(huì)使用CSS樣式進(jìn)行定義，其中包括外觀、標(biāo)題、鏈接等選項(xiàng)。頁面屬性的樣式會(huì)定義在文檔的頭部，如圖,19.5 水平居中,在大多數(shù)頁面中，頁面的內(nèi)容都居中顯示，如果頁面中未定義任何屬性或添加相應(yīng)的元素，頁面元素就會(huì)以頁面的左上角為基準(zhǔn)顯示。下面分別講解在傳統(tǒng)布局和CSS布局中，定義頁面元素居中的方法。,19.5.1 傳統(tǒng)布局中定義內(nèi)容水平居中,在傳統(tǒng)布局中，一般通過使用元素定義頁面內(nèi)容水平居中，元素是由兩個(gè)部分組成的，分別是開始標(biāo)簽和結(jié)束標(biāo)簽。 在文檔中，將開始標(biāo)簽放在元素之后，結(jié)束標(biāo)簽放在元素之前，這樣由元素包含的內(nèi)容，將水平居中顯示。,19.5.2 使用CSS定義內(nèi)容水平居中,使用CSS定義內(nèi)容水平居中有兩種方法：一種是使用文本對齊屬性；另一種是使用邊界屬性。下面講解具體的制作方法。 1使用文本對齊屬性定義居中,19.5.2 使用CSS定義內(nèi)容水平居中,2使用邊界屬性定義居中 使用邊界屬性定義頁面內(nèi)容水平居中時(shí)，要將邊界屬性定義在需要水平居中的元素之中，具體操作如下所示。,19.6 浮動(dòng)與清除,在使用CSS布局的頁面中，一般不使用AP Div進(jìn)行頁面的布局。多數(shù)頁面都使用浮動(dòng)屬性進(jìn)行頁面元素的布局。但是不同的瀏覽器，對浮動(dòng)的解釋并不相同。有時(shí)候?yàn)榱艘@示某種效果，還要使用清除浮動(dòng)屬性，使元素某個(gè)方向不能含有浮動(dòng)元素。,19.6.1 浮動(dòng)元素與固定元素,在CSS布局中，如果為元素定義了浮動(dòng)屬性，元素會(huì)從元素所在行中分離出來，在另一個(gè)層次中按照浮動(dòng)的參數(shù)顯示，而在浮動(dòng)元素之后的非浮動(dòng)元素，會(huì)忽略浮動(dòng)元素繼續(xù)顯示，但是IE瀏覽器和常用的Firefox瀏覽器對這個(gè)屬性的解釋并不相同。下面通過示例，講解浮動(dòng)元素后面含有非浮動(dòng)元素的顯示效果。具體操作如下所示。,19.6.2 兩個(gè)浮動(dòng)元素,在CSS布局中，含有浮動(dòng)屬性的元素，會(huì)顯示在一個(gè)相對獨(dú)立的層次中。所以當(dāng)兩個(gè)浮動(dòng)元素并列在一起時(shí)，元素?zé)o法重疊顯示，后插入的元素會(huì)按照前一個(gè)元素定義的屬性值，顯示在相應(yīng)的位置。具體操作如下所示。,19.6.3 多個(gè)浮動(dòng)元素,在CSS布局中，如果并列插入多個(gè)浮動(dòng)元素，每個(gè)后插入的元素的顯示位置，要參照前面元素定義的屬性值，具體操作如下所示。,19.6.4 浮動(dòng)元素和父元素,在CSS布局中，如果一個(gè)元素中包含浮動(dòng)元素，在IE瀏覽器中，浮動(dòng)元素會(huì)撐開父元素，在Firefox中浮動(dòng)元素會(huì)浮動(dòng)在父元素上，下面是元素中包含浮動(dòng)元素的示例，具體操作如下所示。,19.6.5 清除浮動(dòng)元素,在CSS布局中，如果浮動(dòng)元素后面緊跟浮動(dòng)元素，那么浮動(dòng)元素就會(huì)同行顯示，直到浮動(dòng)元素寬度之和超出父元素寬度為止。如果在浮動(dòng)元素后面緊跟固定元素，或者浮動(dòng)元素包含在父元素之中，則在IE瀏覽器和Firefox瀏覽器中會(huì)顯示不同的效果。使用清除浮動(dòng)屬性，可以調(diào)整浮動(dòng)元素的顯示效果，具體操作如下所示。,19.7 計(jì)算元素的寬度,在使用CSS定義元素的大小時(shí)，元素的寬度是由寬度、邊框、填充、邊界等幾個(gè)部分組成的，在元素的不同部分中，顯示的內(nèi)容也不同。下面進(jìn)行詳細(xì)講解。,19.7.1 元素寬度的計(jì)算,在CSS中所有的文檔元素都會(huì)生成一個(gè)矩形框，這個(gè)矩形框由以下幾個(gè)部分組成：邊界、邊框、填充、寬度、高度。其具體組成如圖所示。,19.7.2 元素各個(gè)部分的作用,元素各個(gè)部分，包括寬度、高度、邊框、填充、邊界等，各自顯示的內(nèi)容以及作用各不相同，下面分別進(jìn)行介紹。 寬度和高度：在寬度和高度構(gòu)成的矩形框中，顯示的是元素的內(nèi)容部分。其中包括文本、圖像、視頻等內(nèi)容。 填充：是內(nèi)容與邊框之間的部分，顯示元素的背景顏色或者背景圖像。,19.7.3 嵌套元素之間的距離,嵌套元素，當(dāng)同時(shí)定義父元素的“填充”屬性，同時(shí)定義了子元素的“邊界”屬性時(shí)，兩個(gè)元素邊框間的距離和兩個(gè)元素是否定義了大小有關(guān)，下面分別進(jìn)行介紹。 1元素未定義大小 在父元素和子元素中定義“邊框”樣式，如圖所示。,19.7.3 嵌套元素之間的距離,2定義子元素的寬度 在子元素中定義“方框”樣式，如圖所示。,19.7.3 嵌套元素之間的距離,3定義子元素的寬度同時(shí)定義父元素的寬度,19.8 自適應(yīng)的問題,自適應(yīng)的問題分為兩個(gè)方面：一方面是水平自適應(yīng)；另一方面是垂直自適應(yīng)。水平自適應(yīng)要涉及到很多具體的因素，使用得較少；垂直自適應(yīng)在動(dòng)態(tài)頁面中經(jīng)常用到，下面進(jìn)行詳細(xì)講解。,19.8.1 什么叫自適應(yīng),自適應(yīng)主要指的是自適應(yīng)瀏覽器不同的分辨率、自適應(yīng)高度、自適應(yīng)寬度。其中，當(dāng)自適應(yīng)瀏覽器的分辨率不同時(shí)，主要使用百分比來布局。由于使用的技巧和要注意的問題都比較復(fù)雜，本書將不做講解。下面講解自適應(yīng)高度的問題。 自適應(yīng)高度的意思是元素隨著內(nèi)容的增加而自動(dòng)增高（包括元素之間的互相影響的適應(yīng)問題）。例如其中一個(gè)元素中的內(nèi)容增加，另一個(gè)元素的背景也隨之增加。,19.8.2 水平自適應(yīng),實(shí)現(xiàn)水平自適應(yīng)主要有兩種方法：一種是使用寬度值定義百分比的方法；另一種是使用水平方向上絕對定位的方法。下面分別講解。 1采用百分比布局,19.8.2 水平自適應(yīng),2采用絕對定位布局 采用絕對定位可以使元素固定在瀏覽器窗口的某個(gè)位置。所以，可以通過絕對定位的方法固定各列元素。下面是使用絕對定位布局的示例，具體操作如下所示。,19.8.3 兩列的垂直自適應(yīng),兩列的垂直自適應(yīng)主要分為兩種情況：一種是其中一列中內(nèi)容固定；另一種是兩列中任何一列的內(nèi)容都不固定。下面分別講解。 1一列內(nèi)容固定的自適應(yīng),19.8.3 兩列的垂直自適應(yīng),2兩列完全自適應(yīng) 并列的兩列中，背景不同，同時(shí)每一列的內(nèi)容也不固定?？梢栽谇短椎腄iv標(biāo)簽中使用負(fù)的邊界值來實(shí)現(xiàn)，具體操作如下所示。,19.8.4 三列完全垂直自適應(yīng),三列完全垂直自適應(yīng)是指任何一列的內(nèi)容都不固定，同時(shí)三列內(nèi)容有各自不同的背景的情況。,19.8.5 使用背景圖像的垂直自適應(yīng),如果在元素中使用背景圖像，可以很簡單地完成高度上的自適應(yīng)，具體操作如下所示。,19.9 瀏覽器和兼容問題,瀏覽器及兼容問題是使用CSS布局時(shí)經(jīng)常遇到的問題，其主要原因是各種瀏覽器對CSS的支持程度不同，同時(shí)每種瀏覽器又有其自身特有的處理方法，所以如果要使制作的網(wǎng)頁能兼容各種瀏覽器，就要了解各個(gè)瀏覽器的特性，同時(shí)會(huì)使用一定的技巧。,19.9.1 各種瀏覽器簡介,現(xiàn)在用來瀏覽網(wǎng)頁的瀏覽器有很多種，其中使用得比較多的是IE瀏覽器、Firefox瀏覽器等。同時(shí)還有Netscape和Opera等其他的瀏覽器。下面分別進(jìn)行簡單介紹。 1IE瀏覽器 IE瀏覽器全稱是Internet Explorer，是微軟公司發(fā)布的免費(fèi)瀏覽器。由于直接綁定在Windows操作系統(tǒng)之中，所以無須下載安裝。由于發(fā)布的先后不同，有IE 4.0/5.0/5.5/6.0等很多版本，目前最新的是IE 7.0版本。,19.9.1 各種瀏覽器簡介,2Firefox瀏覽器 Firefox瀏覽器又稱為火狐瀏覽器，是Mozilla基金會(huì)與眾多志愿者所開發(fā)的，現(xiàn)在也有很多的使用者。,19.9.1 各種瀏覽器簡介,3Netscape Navigator網(wǎng)景瀏覽器 網(wǎng)景瀏覽器是Netscape通信公司開發(fā)的瀏覽器，提供了在不同操作系統(tǒng)中使用的免費(fèi)版本，在Unix用戶群中的使用率較高。,19.9.1 各種瀏覽器簡介,4Opera瀏覽器 Opera瀏覽器是由Opera Software ASA出品的一款網(wǎng)絡(luò)瀏覽器。同時(shí)支持Windows、移動(dòng)電話等很多平臺(tái)，同時(shí)也支持中文、英文等很多語言。,19.9.2 兼容瀏覽器的原則,各種瀏覽器在廣大用戶中的使用率并不相同，同時(shí)每個(gè)站點(diǎn)面對的瀏覽群體也存在差別，所以兼容的問題也會(huì)比較復(fù)雜。總體來講，關(guān)于頁面要兼容哪些瀏覽器的問題，主要遵循以下幾個(gè)原則。 1使用者的需要,19.9.3 解決兼容問題的原理,由于CSS樣式以及頁面各種元素在不同瀏覽器中的表現(xiàn)不同，解決兼容性問題一般可以遵循以下兩個(gè)原理。 1使用CSS hack,19.9.3 解決兼容問題的原理,2盡量使用兼容屬性 因?yàn)椴⒉皇撬械腃SS屬性都存在兼容的問題，所以如果使用所有瀏覽器都能理解一致的屬性，那么兼容的問題也就不存在了。 但是如果要實(shí)現(xiàn)這樣的兼容要考慮的因素相應(yīng)的會(huì)更多。因?yàn)槊吭黾右环N要兼