Div+css網(wǎng)頁(yè)排版課件

Div+css網(wǎng)頁(yè)排版

課程目標(biāo)

?為什么要使用div+css樣式來(lái)排版

?理解CSS盒子模型

?轉(zhuǎn)變思路

?實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)分離

?熟悉工作流程

為什么要使用div+css樣式來(lái)排版

?如果你想嘗試一下不用表格來(lái)排版網(wǎng)頁(yè)，而是用CSS來(lái)排版你的

網(wǎng)頁(yè)，也就是常聽(tīng)的用DIV來(lái)編排你的網(wǎng)頁(yè)結(jié)構(gòu)，又或者說(shuō)你想

學(xué)習(xí)網(wǎng)頁(yè)標(biāo)準(zhǔn)設(shè)計(jì)，再或者說(shuō)你的上司要你改變傳統(tǒng)的表格排版

方式，提高企業(yè)競(jìng)爭(zhēng)力，那么你一定要接觸到的一個(gè)知識(shí)點(diǎn)就是

CSS的盒子模式，這就是DIV排版的核心所在，傳統(tǒng)的表格排版

是通過(guò)大小不一的表格和表格嵌套來(lái)定位排版網(wǎng)頁(yè)內(nèi)容，改用

CSS排版后，就是通過(guò)由CSS定義的大小不一的盒子和盒子嵌套

來(lái)編排網(wǎng)頁(yè)。因?yàn)橛眠@種方式排版的網(wǎng)頁(yè)代碼簡(jiǎn)潔，更新方便，

能兼容更多的瀏覽器，比如PDA設(shè)備也能正常瀏覽，所以放棄自

己之前鐘愛(ài)的表格排版也是值得的，更重要的是CSS排版網(wǎng)頁(yè)的

優(yōu)勢(shì)遠(yuǎn)遠(yuǎn)不只這些

Div+css排版網(wǎng)頁(yè)的優(yōu)點(diǎn)

?網(wǎng)頁(yè)代碼簡(jiǎn)潔

?更新方便

?能兼容更多的瀏覽器

理解css盒子模型

?什么是css的盒子模式呢？為什么叫它是盒子?

先說(shuō)說(shuō)我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中常聽(tīng)的屬性名：內(nèi)容

(content)>填充(padding)、邊框(border)、邊

界(margin),CSS盒子模式都具備這些屬性。

這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻?lái)理解,

日常生活中所見(jiàn)的盒子也具有這些屬性，所以叫它盒子模式。那么內(nèi)容

就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損壞而

添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說(shuō)

明盒子擺放的時(shí)候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同時(shí)

也為了方便取出嘛。在網(wǎng)頁(yè)設(shè)計(jì)上，內(nèi)容常指文字、圖片等元素，但是

也可以是小盒子（DIV嵌套），與現(xiàn)實(shí)生活中盒子不同的是，"八生一活.

中的東西一般不能大于盒子，否則盒子會(huì)被撐壞的，而CSS盒子具有彈

性，里面的東西大過(guò)盒子本身最多把它撐大，但它不會(huì)損壞的。填充只

有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小

和顏色之分，我們又可以理解為生活中所見(jiàn)盒子的厚度以及這個(gè)盒子是

用什么顏色材料做成的,邊界就是該盒子與其它東西要保留多大距離。

十e一/I.5-1-一I./rt-r、n

在現(xiàn)實(shí)生活中，假設(shè)我們?cè)谝粋€(gè)廣場(chǎng)上，把不同大小和顏色的盒子，以

一定的間隙和順序擺放好，最后從廣場(chǎng)上空往下看，看到的圖形和結(jié)構(gòu)

就類(lèi)似我們要做的網(wǎng)頁(yè)版面設(shè)計(jì)了，如下圖。

轉(zhuǎn)變我們的思路

?傳統(tǒng)的前臺(tái)網(wǎng)頁(yè)設(shè)計(jì)是這樣進(jìn)行的：根據(jù)要求，先考慮好主色調(diào)，要用

什么類(lèi)型的圖片，用什么字體、顏色馨等，然后再用Photoshop這類(lèi)軟

件自由的畫(huà)出來(lái)，最后再切成小圖，再不自由的通過(guò)設(shè)計(jì)-HTML生成頁(yè)

面，改用CSS排版后，我們要轉(zhuǎn)變這個(gè)思想，此時(shí)我們主要考慮的是頁(yè)

面內(nèi)容的語(yǔ)義和結(jié)構(gòu)，因?yàn)橐粋€(gè)強(qiáng)CSS控制的網(wǎng)頁(yè)，等做好網(wǎng)頁(yè)后，你

還可以輕松的調(diào)你想要的網(wǎng)頁(yè)風(fēng)格，況且CSS排版的另外一個(gè)目的是讓

代碼易讀，區(qū)塊分明，強(qiáng)化代碼重用，所以結(jié)構(gòu)很重要。如果你想說(shuō)我

的網(wǎng)頁(yè)設(shè)計(jì)的很復(fù)雜，到后來(lái)能不能實(shí)現(xiàn)那樣的效案？我要告訴你的是,

如果用CSS實(shí)現(xiàn)不了的效果，一般用表稱(chēng)也是很難實(shí)現(xiàn)的，因?yàn)镃SS的

控制能力實(shí)在是太強(qiáng)大了，順便說(shuō)一點(diǎn)的是用CSS排版有一個(gè)很實(shí)用的

好處是，如果你是接單做網(wǎng)站的，如果你用了CSS排版網(wǎng)頁(yè)，做到后來(lái)

客戶(hù)有什么不滿(mǎn)意，特別是色調(diào)的話(huà)，那么改起來(lái)就相當(dāng)容易，甚至你

還可以定制幾種風(fēng)格的CSS文件供客戶(hù)選擇，又或者寫(xiě)一個(gè)程序?qū)崿F(xiàn)動(dòng)

態(tài)調(diào)用，讓網(wǎng)站具有動(dòng)態(tài)改變風(fēng)格的功能。

實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)分離

?在真正開(kāi)始布局實(shí)踐之前，再來(lái)認(rèn)識(shí)一件事一

—結(jié)構(gòu)和表現(xiàn)相分離，這也用css布局的特色

所在，結(jié)構(gòu)與表現(xiàn)分離后，代碼才簡(jiǎn)潔，更新

才方便，這不正是我們學(xué)習(xí)css的目的所在嗎?

?舉個(gè)例來(lái)說(shuō)P是結(jié)構(gòu)化標(biāo)簽，有P標(biāo)簽的地方

表示這是一個(gè)段落區(qū)塊，margin是表現(xiàn)屬性，

我要讓一個(gè)段落右縮進(jìn)2字高，有些人會(huì)想到

加空格，然后不斷地加空格，但現(xiàn)在可以給P

標(biāo)簽指定一個(gè)CSS樣式：P{text-indent:2em;},

這樣結(jié)果body內(nèi)容部分就如下，這沒(méi)有外加

任何表現(xiàn)控制的標(biāo)簽：

margin

?如果提供全部四個(gè)參數(shù)值，將按上一右一下一

左的順序作用于四邊。

如果只提供一個(gè)，將用于全部的四邊。

如果提供兩個(gè)，第一個(gè)用于上一下，第二個(gè)用

如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左

一右，第三個(gè)用于下。

用css排版

?<styletype="text/css">

<!—

#photoListimg{

height:80;

width:100;

margin:5pxauto;

}

—>

</style><divid="photoList">

<imgsrc="01jpg"/>

<imgsrc="02jpg"/>

<imgsrc="03.jpg"/>

<imgsrc=n04.jpgH/>

<imgsrc="05jpg"/>

</div>

不用css排版

?<imgsrc="01.jpg"width="100"height="80"

align="middle”/>

<imgsrc=,,02.jpg"width="100"height="80"

align-'middle"/>

<imgsrc="03.jpg"width="100"height="80"

align=Hmiddle"/>

<imgsrc="04.jpg"width二“100”height="80"

align="middle”/>

<imgsrc="05ojpg"width=“100"height="80"

align="middle”/>

?容部分代碼簡(jiǎn)單吧，如果還有更多的圖片列表的話(huà)，

那么第一種CSS布局方法就更有優(yōu)勢(shì)，我打人比喻你

好理解：我在BODY向你介紹一個(gè)人，我只對(duì)你說(shuō)他

是一個(gè)人，至于他是二個(gè)什么樣的人工有多高，是男

是女，你去CSS那里查下就知道。這樣我在BODY的

工作就簡(jiǎn)單了，也就是說(shuō)BODY的代碼就簡(jiǎn)單了。如

果BODY有一個(gè)團(tuán)隊(duì)人在那里，我在CSS記錄一項(xiàng)就

行了，這有點(diǎn)像Flash軟件里的元件和實(shí)例的概念，不

同的實(shí)例共享同一個(gè)元件，這樣動(dòng)畫(huà)文件就不大工，

把這種想法移到CSS網(wǎng)頁(yè)設(shè)計(jì)中，就是代碼不復(fù)親，

網(wǎng)頁(yè)文件體積小能較快被客戶(hù)端下載了。

SI理解cs履例去微我們的思路齷工幃程

嗾你騁試一下不用黑格來(lái)？噪施崩一下不睚格來(lái)感娜鴕一下不用精來(lái)瞰你杷韶一可用翻東

赫頤，而覷css新版軸極限，而是用css來(lái)解瓣勢(shì)版顫，“用css耕雕的械豳，酸用CSS林麟的

冏頁(yè)?也睚常聽(tīng)楣m悚蒯頤，也睚翻悚酬頤，蝴是常所踏瓜慌醐胸，也就是新的用。比簿I排

軸顫將構(gòu)，又蠕說(shuō)你睥;你的頌觸,又幅說(shuō)虢豹岫限觸,又或那膊利柳網(wǎng)除何，又或若說(shuō)你熠學(xué)習(xí)

版標(biāo)般計(jì)，國(guó)域說(shuō)血司順標(biāo)㈱計(jì)，再睇說(shuō)你的上司項(xiàng)標(biāo)準(zhǔn)如?，再或者說(shuō)軸上司獨(dú)標(biāo)準(zhǔn)蚓，再或醐施上司

要撤轆舜嫉格娜方式，理要澈軸施然格廨旅，袋夏栩支傳輜林觸方式，提爵城敬鋤林㈱方式，提

蹄業(yè)競(jìng)多加般你一靈雅的畿業(yè)競(jìng)爭(zhēng)加舷你一定妻都融業(yè)竟勃，舷你一走要翻!聯(lián)瞧物，舷你一定期觸

螂一個(gè)如辿潮融懶好也勤一蝕陽(yáng)澈郭^的曾嬲H個(gè)如觸瞠C磷舒盤(pán)魏產(chǎn)解點(diǎn)就是位觸翎

型，擊曲版桃帆正，佳轆I型，山畫(huà)版的祓心所在，骸的型，d）肅版的網(wǎng)所憶駿的如山浦掘籟I廨，牖的

懿芹健淵處不W）表格粕表解，般醐大MW幅加表鄢^是通過(guò)大小不一緘格和精排版題必小不一解格加

表格嵌歌魂》版前內(nèi)容，而表格將客來(lái)磁并版限內(nèi)容，而表微確定的幡顏內(nèi)容，而都健蕊位排版網(wǎng)頁(yè)內(nèi)容，而

改用css懶后，腱麗由css定改用css排版后，就是通過(guò)艇混改用CSS洋版后，就國(guó)迪過(guò)由CS淀改用CS辨版后，就是遁過(guò)由CS淀

文獻(xiàn)標(biāo)W盒子儺子犍來(lái)義的處不一的好德子嶺來(lái)義的大小不一的窩子粕盒子嵯來(lái)義的大小不一儺子和宣子惕考來(lái):

的卿5?翩豳.翩顏,胡頤.

padding

?設(shè)置對(duì)象四邊的補(bǔ)丁邊距

?如果提供全部四個(gè)參數(shù)值，將按上一右一下一

左的順序作用于四邊。

如果只提供一個(gè)，將用于全部的四條邊。

如果提供兩個(gè)，第一個(gè)用于上一下，第二個(gè)用

如果提供:個(gè)，第一個(gè)用于上，第二個(gè)用于左

一右，第三個(gè)用于下

border

?邊框

border:1pxdashed#fffff

上面的代碼表示邊框的粗細(xì)為1像素，虛線(xiàn)，顏色為

白色

?Line-height:1.5em表示行高為1.5個(gè)字體大小

?Text-indent:2em表示首行縮進(jìn)2個(gè)字體

熟悉工作流程

?在真正開(kāi)始工作之前我們腦海中要形成這樣一種思想:

表格是什么我不知道，在內(nèi)容部分我不能讓它再出現(xiàn)

表凱控制標(biāo)轉(zhuǎn)，如：font、color>height、width>

align等標(biāo)簽不能再出現(xiàn)，（簡(jiǎn)單說(shuō)工祚前先洗腦，忘

掉以亂的一慣做法L音燧式和便用余新的方添），我

不是單純的用DIV來(lái)實(shí)哺非版尚嵌套，DIV是塊級(jí)元素,

而像P也是塊級(jí)元素，例如要分出幾個(gè)文字內(nèi)容塊，

不是一定要用DIV才叫DIV排版，不是“vdiy>文字塊

一v/div>vdiv>文字塊二v/div>vdiv>文字塊三v/div>”,

而用“vp>文字塊一v/p>vp>文字塊二v/p>vp>文字塊

三V/p>”更合適。

熟悉工作流程

?用DIV+CSS設(shè)計(jì)思路是這樣的:

?1.用div來(lái)定義語(yǔ)義結(jié)構(gòu)；

?2?然后用CSS來(lái)美化網(wǎng)頁(yè)，如加入背景、線(xiàn)條

邊框、對(duì)齊屬性等；

?3.最后在這個(gè)CSS定義的盒子內(nèi)加上內(nèi)容，如

文字、圖片等（沒(méi)有表現(xiàn)屬性的標(biāo)簽），下面

大家跟我一起來(lái)做一個(gè)實(shí)例加深對(duì)這個(gè)步驟的

理解。先看結(jié)果圖：

-X2.—

刖ri

如果你想叁成一下不用表格來(lái)徘版網(wǎng)7（，而是用cmsx排國(guó)倘回衣，也就是靠聽(tīng)的用DM來(lái)編拍粽的網(wǎng)頁(yè)片構(gòu),R4若也傷噌學(xué)工網(wǎng)頁(yè)

標(biāo)注設(shè)計(jì)，再五者記你的上司要你改變傳統(tǒng)的表格排版方式，稼高企業(yè)竟今力，卻以傷一定要接觸到用一個(gè)知識(shí)點(diǎn)就是C$S的盒子模型，div

琲版的核心所J，傳統(tǒng)羽表珞排版是圓大小不一的表格彳」表珞嵌后泳定任科版網(wǎng)網(wǎng)內(nèi)容，而改月css排版后，就是遇過(guò)右css定義的大小

不的盒了和G了枳套末螭井網(wǎng)文，區(qū)為用這件方式排版的網(wǎng)頁(yè)代碼信泄」更新才更，能就零更下的瀏覽器，比如PDA設(shè)安由能正常瀏覽，

所以放棄自己之前忡愛(ài)的表格排版也是值得的，更重要的是CE2排版網(wǎng)慶由忱勢(shì)遠(yuǎn)近不只這些，本人亡這里不多說(shuō)，自己可以去交我相美信

息.

理解CSS盒子模型

什么是CS3的盒子模型呢？為什么叫它是盒子？先說(shuō)說(shuō)我們?cè)诰W(wǎng)頁(yè)核計(jì)牛常聽(tīng)的扈?生名：內(nèi)容（coiteg、崖充（pedding）、邊也

（bcde^邊界（mwrgin）,而C3S盒子哽型都具各這些屋性，這些屋性我?‘n可以把E轉(zhuǎn)移到我們E常生活中的盒子（箱子）上未理解，E莒生

沿中切見(jiàn)的金子也具有遼些感性，加以叫E部子模型，那公內(nèi)寫(xiě)就是荔子旦裝的未加：而填充就老怕盒子里裝正東西（貴五的）毀壞由摩加

的泡沫或者其它抗麥的楣料；邊框就是浣亍本身了；至于過(guò)界川說(shuō)明搐子擺放的時(shí)候由不能主都只在一起，要留一后隙民持通風(fēng)，同時(shí)也

為了方?更或出嘛.正網(wǎng)頁(yè)族上二，內(nèi)容常指文字'、幻片等元素，但是也可以是小盒子cDM嵌套）.與現(xiàn)實(shí)上活中盒子不同的是>現(xiàn)實(shí)生活中

的東西一縱小行大十盒子.否如:含金*蟠汽的，面。3￡盒工具有彈性.里EI的東西大過(guò)找盤(pán)子本身像務(wù)把物屋大.我不會(huì)不抵.填充只有寬

度屜性，可以至解為生活中盒子里的抗宸加料厚型，而邊槎有大小和顏色之分，我門(mén)又可以理解為生涪中所見(jiàn)盒子的厚度以及這個(gè)盒子是，書(shū)

什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離.在現(xiàn)實(shí)生活中，我們正一個(gè)廠場(chǎng)上，把不同大刁疝顏色的盒子，以一定

的間隙和成序擺放好，最后小廠場(chǎng)上空往下看，看到的圖形和笫構(gòu)就類(lèi)似我（要做的網(wǎng)頁(yè)版面設(shè)計(jì)了.現(xiàn)在對(duì)C3S盒子才鯉理解多少了，如

果還不夠恚徹，繼柒往下蒞，我金主后面舉洌，并延用盒子的怛念無(wú)解釋E。

其于華升I廠后脆爰|我招牌|客赧卬心|CQ留言網(wǎng)玷言理|合泰置燙|蛔物軍

CaoyrghtQ2DOS-2008-angOuohul.AlRi2itsReserved

?1.用div來(lái)定義語(yǔ)義結(jié)構(gòu)

?現(xiàn)在我要給大家演示的是一個(gè)典型的版面分

欄結(jié)構(gòu)，即頁(yè)頭、導(dǎo)航欄、內(nèi)容、版權(quán)

?代碼如下：

?<divid=,'headern></div>

<divid=,,navn></div>

<divid="contentH></div>

<divid=,,footer,,x/div>

?上面我們定義了四個(gè)盒子，按照我們想要的結(jié)

果是，我們要讓這些盒子等寬，并從上到下整

齊排列，然后在整個(gè)頁(yè)面中居中對(duì)齊，為了方

便控制，我們?cè)侔堰@四個(gè)盒子裝進(jìn)一個(gè)更大的

盒子，這個(gè)盒子就是BODY,這樣代碼就變成:

?<body>

<divid=,'headerH></div>

<divid=',nav,'></div>

<divid=,'contentH></div>

<divid=nfooterH></div>

</body>

?最外邊的大盒子（裝著小盒子的大盒子）我們

要讓它在頁(yè)面居中，并重定義其寬度為760像

素，同時(shí)加上邊框，那么它的樣式是：

?body{

font-family:Arial,Helvetica,sans-serif;

font-size:12px;

margin:Opxauto;

height:auto;

width:760px;

border:1pxsolid#006633;

)

?頁(yè)頭為了簡(jiǎn)單起見(jiàn)，我們這里只要讓它整個(gè)區(qū)

塊應(yīng)用一幅背景圖就行了，并在其下邊界設(shè)計(jì)

定一定間隙，目的是讓頁(yè)頭的圖像不要和下面

要做的導(dǎo)航欄連在一起，這樣也是為了美觀。

其樣式代碼為：

?#header{

height:100px;

width:760px;

background-image:url(headPic.gif);

background-repeat:no-repeat;

margin:OpxOpx3pxOpx;

)

?導(dǎo)航欄我做成像一個(gè)個(gè)小按鈕，鼠標(biāo)移上去會(huì)

改變按鈕背景色和字體色，那么這些小小的按

鈕我們又可以理解為小盒子，如此一來(lái)這是一

個(gè)盒子嵌套問(wèn)題了，樣式代碼如下：

?#nav{

height:25px;

width:760px;

font-size:14px;

list-style-type:none;

)

#navli{

#navlia{

color:#000000;

text-decoration:none;

padding-top:4px;

display:block;

width:97px;

height:22px;

text-aIign:center;

background-color:#009966;

margin-left:2px;

)

#navlia:hover{

background-color:#006633;

color:#FFFFFF;

)

?內(nèi)容部分主要放入文章內(nèi)容，有標(biāo)題和段落，

標(biāo)題加粗，為了規(guī)范化，我用H標(biāo)簽，段落要

自動(dòng)實(shí)現(xiàn)首行縮進(jìn)2個(gè)字，同時(shí)所有內(nèi)容看起來(lái)

要和外層大盒子邊框有一定距離，這里用填充。

內(nèi)容區(qū)塊樣式代碼為：

?#content{

height:auto;

width:740px;

)

#contentp{

text-inde