DIVCSS網(wǎng)頁布局初級教程(一)

1、第一天XHTML CSS基礎(chǔ)知識歡迎大家學習十天學會web標準，也就是我們常說的DIV+CSS。不過這里的DIV+CSS是一種錯誤的叫法，建議大家還是稱之為web標準。學習本系列教程需有一定html和css基礎(chǔ)，也就是指您之前做過網(wǎng)頁，會用表格布局。如果您剛開始學習網(wǎng)頁制作，不知道什么是表格布局及html和css，建議您先去充電，否則學習本教程會非常吃力或者根本就聽不懂。由于時間關(guān)系，本教程只講解一些基礎(chǔ)知識，讓您從原來的表格布局跨入到web標準（div+css）布局，會使用web標準制作出常見的頁面，這也達到了本教程的目的。本教程多以實例形式循序漸進講解，實例涉及到哪些關(guān)鍵點或難點就講解什么

2、，較少講解概念。因為概念這些東西很難說明白，或者說明白你也不一定能聽懂，聽懂了也不一定能理解。所以把概念留給大家以后再深入研究。由于章節(jié)關(guān)系，沒有把css和css hack單獨分出，只是在用到的時候穿插入講解了。html基礎(chǔ)和css基礎(chǔ)只在第一節(jié)中介紹了幾點重要的。下面我們開始第一天的學習一、xhtml css基礎(chǔ)知識首先說一下我們這節(jié)課的知識點1 文檔類型2 語言編碼3 html標簽4 css樣式5 css優(yōu)先級6 css盒模型組成1）文檔類型當我們用dreamweaver新建一下html格式文檔時，查看源代碼，會發(fā)現(xiàn)代碼最上部有如下這句話：這句話標明本文檔是過渡類型，另外還有框架和嚴格類型

3、，目前一般都采用過渡類型，因為瀏覽器對XHTML的解析比較寬松，允許使用HTML4.01中的標簽，但必須符合XHTML的語法。許多朋友在制作頁面時，往往喜歡把這句刪除掉，在這里建議大家一定要保留這句話，刪除它后可能引起某些樣式表失效或其它意想不到的問題。2）語言編碼接下來我們還會發(fā)現(xiàn)這樣一句話：它標示文檔的語言編碼。就像我們平時所說的漢語、英語一樣。這里的gb2312告訴瀏覽器，本文檔采用簡體中文編碼；還有一種常用的編碼是UTF-8編碼，它是國際通用的編碼。不管我們采用哪種編碼，有一點就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣，要不就會出現(xiàn)亂碼。3）html標簽html標簽在頁面

4、中都必須結(jié)束。成對的標簽以“/標簽名”結(jié)束，有些單一的標簽在本身的結(jié)尾打上/來結(jié)束，這是xhtml代碼編寫的規(guī)范。成對的標簽：. . . 單一的標簽：.還需說明一點的是按xhtml規(guī)范，標簽必須用小寫。4）css樣式加載css樣式有以下四種 外部樣式 內(nèi)部樣式 行內(nèi)樣式 導入樣式這種形式是把css單獨寫到一個css文件內(nèi)，然后在源代碼中以link方式鏈接。它的好處是不但本頁可以調(diào)用，其它頁面也可以調(diào)用，是最常用的一種形式。這種形式是內(nèi)部樣式表，它是以結(jié)尾，寫在源代碼的head標簽內(nèi)。這樣的樣式表只能針對本頁有效。不能作用于其它頁面。內(nèi)部樣式這種在標簽內(nèi)以style標記的為行內(nèi)樣式，行內(nèi)樣式只針

5、對標簽內(nèi)的元素有效，因其沒有和內(nèi)容相分離，所以不建議使用。import url("/css/global.css"鏈接樣式是以import url標記所鏈接的外部樣式表，它一般常用在另一個樣式表內(nèi)部。如layout.css為主頁所用樣式，那么我們可以把全局都需要用的公共樣式放到一個global.css的文件中，然后在layout.css中以import url("/css/global.css"的形式鏈接全局樣式，這樣就使代碼達到很好的重用性。5）css優(yōu)先級 id優(yōu)先級高于class 后面的樣式覆蓋前面的 指定的高于繼承 行內(nèi)樣式高于內(nèi)部或外部樣式 總

6、結(jié)：單一的(id高于共用的(class，有指定的用指定的，無指定則繼承離它最近的6）css盒模型組成css盒模型是本節(jié)教程的重點。前面幾個知識點，如果您會用表格布局的話，就非常好理解和掌握了。這里的盒模型是和table布局的一個不同點。學習web標準，首先要弄懂的就是這個盒模型，這就是DIV排版的核心所在。傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網(wǎng)頁內(nèi)容，改用CSS排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。這種排版方式的網(wǎng)頁代碼簡潔，表現(xiàn)和內(nèi)容相分離，維護方便，能兼容更多的瀏覽器，比如PDA設(shè)備也能正常瀏覽。那么它為什么叫盒子呢？先說說我們在網(wǎng)頁設(shè)計中常聽

7、的屬性名：內(nèi)容(content、填充(padding、邊框(border、邊界(margin， CSS盒子模式都具備這些屬性。 我們可以把它想像成現(xiàn)實中上方開口的盒子，然后從正上往下俯視，邊框相當于盒子的厚度，內(nèi)容相對于盒子中所裝物體的空間，而填充呢，相當于為防震而在盒子內(nèi)填充的泡沫，邊界呢相當于在這個盒子周圍要留出一定的空間，方便取出。是不是這樣就很容易理解盒模型了。所以整個盒模型在頁面中所占的寬度是由左邊界+左邊框+左填充+內(nèi)容+右填充+右邊框+右邊界組成，而css樣式中width所定義的寬度僅僅是內(nèi)容部分的寬度，這是許多朋友容易搞混的地方這里的邊界我們也稱之為：外邊距、外補??；填充也叫：

8、內(nèi)邊距、內(nèi)補丁。如果現(xiàn)在您對CSS盒模型理解還不夠透徹，繼續(xù)往下看，后來的章節(jié)會都會應用到盒模型實例。二、如何開始學習web標準？1）有HTML和CSS基礎(chǔ)學習本系列教程前，要求您有一定的html和css基礎(chǔ)，制作過網(wǎng)頁，會用表格進行網(wǎng)頁布局，這樣學習起來才會很輕松。如果您對這些還不懂，建議先學習這些知識，然后再來學習本教程。2）轉(zhuǎn)變觀念在以前我們制作網(wǎng)站時，總是習慣于先考慮外觀、顏色、字體及布局等所有表現(xiàn)在頁面上的內(nèi)容。但外觀并不是最重要的，相反最終用戶在訪問網(wǎng)頁時的體驗才是優(yōu)先要考慮的。一個由divcss布局且結(jié)構(gòu)良好的頁面可以通過css定義成任何外觀，在任何網(wǎng)絡設(shè)備上（包括手機、PDA和

9、計算機）上以任何外觀表現(xiàn)出來，而且用divcss布局構(gòu)建的網(wǎng)頁以夠簡化代碼，加快顯示速度。所以要想學好divcss，首先要轉(zhuǎn)變觀念，需要拋棄傳統(tǒng)的表格(Table布局方式，采用層(DIV布局，并且使用層疊樣式表(CSS來實現(xiàn)頁面的外觀。給網(wǎng)站瀏覽者更好的體驗。3）多動手、多動腦說到這點，有點小兒科了，就像我們上小學時老師常常教我們的那樣。為什么我在這里也做為一點列出來呢，我是通過評論發(fā)現(xiàn)，有些同學提的問題太沒水平了，稍微動下腦筋就明白了，或者自己動手一試就知道了，但他就懶得試。舉個簡單的例子，拿瀏覽器兼容來說吧，你寫個樣式之后，在IE和火狐分別打開看一下不就明白了，但就是不去做。還有一個同學留

10、言要我把一個實例中的圖片打包發(fā)給他，我一看代碼，就用到一張圖片，無語了，有你留言的這個時間，自己也早把圖片下載下來了。所以在這里告誡大家，一定要多動手、多動腦，不要怕麻煩。另外在學習完一節(jié)教程后，一定要自己做一遍實例，這樣能更快掌握。第二天 一列布局今天我們開始學習十天學會web標準(div+css的一列布局，包含以下幾種形式： 一列固定寬度 一列固定寬度居中 一列自適應寬度 一列自適應寬度居中 一列二至多塊布局前一節(jié)我們回顧了xhtml基礎(chǔ)和css基礎(chǔ)部分，今天我們正式開始使用網(wǎng)頁制作軟件adobe公司出品的dreamweaver來開始網(wǎng)頁設(shè)計之旅。相信之前您已經(jīng)用過這個軟件了，具體怎么使用

11、我就不講了。為了照顧部分朋友，今天課程的css部分我們是以可視化生成方式，不過建議大家能手寫的盡量還是手寫，這樣有助于提高效率。一、一列固定寬度我們先看一下一列固定寬度，首先要新建一個頁面：注意：這里的文檔類型是過渡型，目前我們采用這種寬松驗證方式。接下來在頁面中插入一個div標簽，我們可以點擊工具欄的“插入DIV標簽”按鈕，在打開的對話框中ID項給這個div命一下名，我們給它起個名叫l(wèi)ayout（名稱根據(jù)自己需要命名）。插入div后，在右側(cè)的css樣式面板中，定義id為layout的樣式，確定后在打開的css編輯對話框的方框選項中設(shè)計寬度500，高度300。為了看清楚起見，我們把這個div設(shè)

12、置個背景色，這樣就能預覽出大小和位置了。這里選擇高級，然后在選擇器中填寫：#layout，如果是選中div后，再點擊添加，它會自動添加上。因為是定義ID，所以前面需要加#，后面會有id和class的詳細講解我們預覽一下，看看在IE中的顯示效果，一列固定寬度就這樣做成了，簡單吧！CSS代碼及在IE中顯示如下：提示：可以先修改部分代碼后再運行二、一列固定寬度居中一列固定寬度居中和一列固定寬度相比，我們要解決的問題就是居中。這里我們用到css的外邊距屬性：margin。在IE6及以上版本和標準的瀏覽器當中，當設(shè)置一個盒模型的的margin:auto;時，可以讓這個盒模型居中。我們下邊在css樣式表中

13、加上這個屬性看看效果：#layout height: 300px; width: 400px; background: #99FFcc; margin: auto; 在dreamweaver的設(shè)計視圖中我們選中看看，是不是已經(jīng)居中了，我們再在IE下預覽一下，同樣居中。提示：可以先修改部分代碼后再運行三、一列自適應寬度自適應寬度是相對于瀏覽器而言，盒模型的寬度隨著瀏覽器寬度的改變而改變。這時要用到寬度的百分比。當一個盒模型不設(shè)置寬度時，它默認是相對于瀏覽器顯示的。我們把剛才的固定寬度例子中的寬度去掉看看：#layout height: 300px; background: #99FFcc;有些朋

14、友可能要問了，那為什么還有那么寬的白邊呢？這個是由body默認的外邊距造成的。當我們不用任何樣式表進行定義時，body，h1h6，ul等元素默認有外邊距或其它樣式的。這里我們在css樣式中增加一項：body margin:0;，就可以把body默認的外邊距去掉，這時再預覽一下，白邊就沒了。body margin: 0px; #layout height: 300px; background: #99FFcc;這里的選擇器類型是新手朋友最容易迷糊的地方，類：是指定義一個class，可以多個對象引用；標簽：指對默認的html標簽進行重新定義，如可以定義bodymargin:0，意思是 將body的

15、外邊距設(shè)置為0，h2color:#f00是將所有h2標簽的文字顏色設(shè)置為紅色；高級它把ID和偽類放到一塊了，是一個設(shè)置不合理的地方，在cs4版本中已經(jīng)分開了。ID是以#開始，id只能作用于一個對象，不能作用于多個對象，優(yōu)先級高于class，這是id和class的區(qū)別。偽類會在第九節(jié)時詳細講解如果我們需要按瀏覽器的80%顯示，那么設(shè)置寬度為80%，當改變?yōu)g覽器窗口大小時，盒模型的寬度也會跟著改變。提示：可以先修改部分代碼后再運行四、一列自適應寬度居中同樣和固定寬度居中一樣，我們只需要設(shè)置div的外邊距為auto即可實現(xiàn)居中了。body margin: 0px; #layout margin:au

16、to; height: 300px; background: #99FFcc; width: 80%; 提示：可以先修改部分代碼后再運行五、一列二至多塊布局一般的網(wǎng)站整體可以分為上中下結(jié)構(gòu)，即：頭部、中間主體、底部。那么我們可以用三個div塊來劃分，分別給它們起名為：頭部（header）、主體（maincontent）、底部（footer）。采用固定寬度居中的方式，代碼如下：body margin:0; padding:0;#header margin:5px auto; width:500px; height:80px; background:#9F9;#main margin:5px au

17、to; width:500px; height:400px; background:#9FF;#footer margin:5px auto; width:500px; height:80px; background:#9f9;為了便于區(qū)分，在背景項里設(shè)置了背景色，這里不在貼圖。依此類推，把另外兩個div塊給置好，整個效果就出來了。這是一個大多數(shù)網(wǎng)站采用的上中下布局結(jié)構(gòu)。提示：可以先修改部分代碼后再運行許多朋友在問：為什么兩個相鄰的容器中間的間距不是10px，而是5px呢？按照我們正常的理解，認為應該是兩個值相加，其實這里是兩個合并后取最大值。用css手冊中的話說：塊級元素的垂直相鄰外邊距會合

18、并，而行內(nèi)元素實際上不占上下外邊距。行內(nèi)元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。允許指定負的外邊距值，不過使用時要小心（有關(guān)塊級元素和行內(nèi)元素的概念在下一節(jié)講到）。六、小結(jié)本節(jié)課涉及到以下知識點：1、CSS可視化生成、格式化本教程便于新手學習，采用dw的css可視化生成方式，熟練后的朋友盡量手寫，這樣可以提高工作效率。目前來說，希望常用的大家都能記住。關(guān)于css的格式化，指css的排版方式，細心的朋友已發(fā)現(xiàn)，我在這里貼出的css代碼，每個類或ID都是寫在一行的?？赡苣愕倪€是分成多行，怎么把它們弄到一行上呢？請看下面的代碼和圖示：body margin:0;padding:0;#header margin:5px auto;width:500px;height:80px;background:#9F9;#main margin:5px auto;width: