全國優(yōu)質(zhì)課一等獎職業(yè)學校計算機類信息技術(shù)教學設(shè)計和說課大賽《DIV+CSS布局網(wǎng)頁》教學課件

第7章Div+CSS布局網(wǎng)頁

CSS+Div是網(wǎng)站標準中常用的術(shù)語之一，CSS和Div的結(jié)構(gòu)被越來越多的人采用，很多人都摒棄了表格而使用CSS來布局頁面，它的好處很多，可以使結(jié)構(gòu)更加簡潔，定位更加靈活，CSS布局的最終目的是搭建完善的頁面架構(gòu)。通常在XHTML網(wǎng)站設(shè)計標準中，不再使用表格定位技術(shù)，而是采用CSS+Div的方式實現(xiàn)各種定位。7.1CSS+Div的定義Div元素體現(xiàn)了網(wǎng)頁技術(shù)的一種延伸，是一種新的發(fā)展方向，有了Div元素，就可以在網(wǎng)頁中實現(xiàn)下拉菜單、圖片、文本的各種效果；CSS是用于創(chuàng)建網(wǎng)頁表現(xiàn)（樣式/美化）的樣式表的統(tǒng)稱，要通過CSS來設(shè)置Div標簽樣式，我們將這二者的聯(lián)合使用稱為CSS+Div。7.1CSS+Div的定義XHTML是目前國際上倡導的網(wǎng)站標準設(shè)計語言，因為XHTML具有網(wǎng)站設(shè)計語言的基本特點，這種CSS+Div模式的網(wǎng)站設(shè)計具有一定的優(yōu)勢。首先，CSS的優(yōu)勢表現(xiàn)在簡潔的代碼。對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬。而且眾所周知，搜索引擎喜歡簡潔的代碼，因此使用CSS+Div的Web標準制作的網(wǎng)站具有更易被搜索引擎搜索的優(yōu)勢。其次，CSS+Div使得網(wǎng)站改版相對簡單，很多問題只需要改變CSS而不需要改動程序就可以解決，從而降低了網(wǎng)站改版的成本。7.1.1CSS+Div的優(yōu)勢7.1CSS+Div的定義7.1.2CSS+Div的問題盡管CSS+Div具有一定的優(yōu)勢，不過現(xiàn)階段CSS+Div網(wǎng)站建設(shè)存在的問題也比較明顯。7.2表格布局與CSS布局的區(qū)別很多人也許會覺得，有時候使用HTML一樣可以實現(xiàn)頁面樣式的設(shè)置，那為什么還要使用CSS呢？接下來，從兩個網(wǎng)頁的效果分析一下使用CSS的必要性。7.3盒子模式什么是CSS盒子模式呢？為什么叫它是盒子？首先說說在網(wǎng)頁設(shè)計中常聽到的屬性名：內(nèi)容（Content）、填充（Padding）、邊框（Border）、邊（Margin）。CSS盒子模式具備這些屬性，如圖7-5所示。7.4可視化布局塊

在“設(shè)計”視圖中，可以使CSS布局塊可視化。CSS布局塊是一個HTML頁面元素，可以將它定位在頁面上的任意位置。具體而言，CSS布局塊是不帶“display:inline；”的Div標簽，或者是包括“display:block;”、“position:absolute;”或“position:relative；”CSS聲明的任何其他頁面元素。下面是幾個在Dreamweaver中被視為CSS布局塊的元素的示例。7.5CSS網(wǎng)頁布局如果想要制作出既美觀、使用起來又方便的網(wǎng)站，那么把網(wǎng)站布局設(shè)計好是十分必要的。設(shè)計的布局是指把文本、圖像、符號等各種構(gòu)成要素在指定的空間內(nèi)進行合理的安排配置的工作。在網(wǎng)頁設(shè)計中布局的概念也是差不多的，網(wǎng)頁設(shè)計的布局就是把進入網(wǎng)頁的各種構(gòu)成要素（文字、圖像、圖表、表單等）在網(wǎng)頁瀏覽器中有效地排列起來。網(wǎng)站的文字或圖像等網(wǎng)頁的構(gòu)成要素配置是否協(xié)調(diào)，將決定頁面給人的感覺及其實用性。網(wǎng)站的布局不是盲目地在網(wǎng)頁里羅列各種構(gòu)成要素。如何才能實現(xiàn)網(wǎng)頁構(gòu)成的目的，使網(wǎng)站看起來既美觀又實用，這才是每一個設(shè)計網(wǎng)頁布局的人應(yīng)該首先考慮到的問題。如果網(wǎng)頁布局不合理，則會在向用戶傳達網(wǎng)頁內(nèi)容的時候發(fā)生困難，也不會讓人對其產(chǎn)生興趣。因此，為了能夠設(shè)計出既美觀、新穎，又使用方便的網(wǎng)頁，有必要多多參考優(yōu)秀的布局方法。在仔細研究那些優(yōu)秀的布局方式的同時，對如何在有限的空間里把頁面中豐富多彩的內(nèi)容更加有機地結(jié)合起來，如何營造出一種良好的視覺效果這些問題進行認真思考。7.5.1網(wǎng)站布局設(shè)計原則7.5CSS網(wǎng)頁布局概述7.5.2CSS網(wǎng)頁布局分類1．一列固定寬度2.一列自適應(yīng)3.一列固定寬度居中4．二列固定寬度5.二列寬度自適應(yīng)6.右欄寬度自適應(yīng)7.二列固定寬度居中8.三列浮動中間列寬度自適應(yīng)9.高度自適應(yīng)7.6知識與技能梳理

盡管CSS+Div具有一定的優(yōu)勢，不過現(xiàn)階段CSS+Div網(wǎng)站建設(shè)存在的問題也比較明顯，CSS+Div能否優(yōu)化搜索引擎取決于網(wǎng)頁設(shè)計的專業(yè)水平而不是CSS+Div本身。CSS+Div網(wǎng)頁設(shè)計并不能保證網(wǎng)頁對