第14章-網(wǎng)頁(yè)布局與設(shè)計(jì)技巧

第14章網(wǎng)頁(yè)布局與設(shè)計(jì)技巧在前面的章節(jié)里，介紹了HTML與CSS的基礎(chǔ)知識(shí)，這些基礎(chǔ)知識(shí)大多都是面對(duì)網(wǎng)頁(yè)元素的。這些元素組合起來(lái)可以形成一個(gè)完整的網(wǎng)頁(yè)。本章將會(huì)介紹如何組織這些網(wǎng)頁(yè)元素來(lái)形成一個(gè)完整網(wǎng)頁(yè)以及在網(wǎng)頁(yè)設(shè)計(jì)中常用到的一些技巧。14.1網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局是指網(wǎng)頁(yè)整體的布局，雖然網(wǎng)頁(yè)的內(nèi)容是很重要的，但是如果網(wǎng)頁(yè)的布局很亂，用戶看起來(lái)也會(huì)感覺(jué)很不舒服。當(dāng)用戶打開(kāi)一個(gè)網(wǎng)頁(yè)時(shí)，第一印象就是網(wǎng)頁(yè)漂不漂亮，然后才會(huì)去看網(wǎng)頁(yè)內(nèi)容。本節(jié)就來(lái)詳細(xì)介紹如何進(jìn)行網(wǎng)頁(yè)的布局，才能讓網(wǎng)頁(yè)變得更漂亮。14.1.1網(wǎng)頁(yè)大小設(shè)計(jì)網(wǎng)頁(yè)的第一步，需要考慮的是網(wǎng)頁(yè)的大小。網(wǎng)頁(yè)過(guò)大，瀏覽器會(huì)出現(xiàn)滾動(dòng)條，瀏覽不便。網(wǎng)頁(yè)過(guò)小，顯示內(nèi)容過(guò)少，影響美觀。1.影響網(wǎng)頁(yè)大小的因素2.如何設(shè)計(jì)網(wǎng)頁(yè)大小3.其他設(shè)計(jì)網(wǎng)頁(yè)大小的方法14.1.2網(wǎng)頁(yè)欄目劃分在確定網(wǎng)頁(yè)大小之后，就可以開(kāi)始設(shè)計(jì)網(wǎng)頁(yè)的布局了。網(wǎng)頁(yè)布局是設(shè)計(jì)在網(wǎng)頁(yè)上放些什么內(nèi)容，以及這些內(nèi)容放在網(wǎng)頁(yè)的什么位置。網(wǎng)頁(yè)設(shè)計(jì)是沒(méi)有什么定論可言，只要設(shè)計(jì)得漂亮，想怎么設(shè)計(jì)都行。一個(gè)良好的網(wǎng)頁(yè)，尤其是網(wǎng)站的首頁(yè)（即網(wǎng)站的第一個(gè)頁(yè)面），都會(huì)包含以下幾個(gè)區(qū)域。1.頁(yè)頭2.banner3.導(dǎo)航區(qū)域4.內(nèi)容5.頁(yè)腳14.1.2網(wǎng)頁(yè)欄目劃分下圖所示是一個(gè)完整的網(wǎng)頁(yè)。14.1.3表格布局在CSS出現(xiàn)之前，都使用表格來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行布局的。在使用表格布局時(shí)，利用了表格的無(wú)邊框和間距的特性（將表格的邊框與單元格間距都設(shè)為零），然后再將網(wǎng)頁(yè)元素按版面需要進(jìn)行劃分之后，插入到表格的各個(gè)單元格中，從而實(shí)現(xiàn)了網(wǎng)頁(yè)排版的工作。圖14.2是網(wǎng)易博客的首頁(yè)，該頁(yè)面里每個(gè)欄目都是一個(gè)小方塊，可以把這些小方塊都放在表格的單元格里。14.1.3表格布局

14.1.3表格布局圖14.3簡(jiǎn)單地將網(wǎng)易博客首頁(yè)用表格劃分了一下，表格的每個(gè)單元格里可以放置網(wǎng)頁(yè)的一個(gè)欄目。14.1.3表格布局在劃分完大欄目之后，可以根據(jù)大欄目中的具體情況，對(duì)大欄目中的具體顯示情況再進(jìn)行較小的劃分，這種劃分也可以用表格來(lái)完成。例如圖14.2中的“最新更新”欄目，可以再用一個(gè)嵌套的表格進(jìn)行細(xì)分，如圖14.4所示。14.1.3表格布局然后再將細(xì)分的欄目插入到所在單元格里，形成多個(gè)表格的嵌套，如圖14.5所示。14.1.4CSS布局使用表格布局，會(huì)大量地使用到表格的嵌套，并且會(huì)在表格里加入大量的如width、border、cellspacing、cellpadding等用于控制版面的屬性，這些代碼使得網(wǎng)頁(yè)的源代碼可讀性大大降低。如果使用CSS布局可以從根本上改變這種混亂的局面。在CSS中可以使用DIV與CSS的結(jié)合來(lái)控制版面，而表格僅僅用來(lái)顯示數(shù)據(jù)。如此一來(lái)，版面控制與內(nèi)容就可以完全分來(lái)，每一個(gè)DIV層都是一個(gè)欄目?jī)?nèi)容。也可以將DIV層看著是一個(gè)個(gè)“塊”，每一個(gè)塊的作用是顯示內(nèi)容，而至于將塊放在哪個(gè)位置，這就由樣式來(lái)控制了。14.1.4CSS布局例如，圖14.2可以按圖14.6的方式來(lái)進(jìn)行劃分。14.2CSS布局技巧使用CSS布局，雖然比使用表格布局要簡(jiǎn)潔、方便，但是DIV與表格還是有很大的區(qū)別，尤其是對(duì)于從表格布局轉(zhuǎn)向CSS布局的開(kāi)發(fā)者來(lái)說(shuō)，CSS布局沒(méi)有表格布局那么容易控制。使用表格布局，只要將表格劃分好之后，就可以在單元格里填入內(nèi)容，而使用CSS布局時(shí)，很多開(kāi)發(fā)者會(huì)覺(jué)得DIV層不知道要如何控制，總是無(wú)法將其擺放到想要放置的位置上。14.2.1一欄布局一欄布局，是一種最簡(jiǎn)單的布局方式。在這種布局方式中，將網(wǎng)頁(yè)中所有內(nèi)容都以一欄方式顯示，如圖14.7所示。14.2.1一欄布局一欄布局里，寬度都是一樣的，對(duì)于這種情況，只需要使用一個(gè)簡(jiǎn)單的DIV層就可以現(xiàn)實(shí)整體的網(wǎng)頁(yè)布局，代碼如下所示：<divid="mydiv">網(wǎng)頁(yè)內(nèi)容</div>設(shè)置了DIV層之后，就可以為該層設(shè)置樣式，例如層的大小、背景顏色、邊框等，如以下代碼：#mydiv{width:600px;height:300px;background-color:#AEAEAE;border-style:solid;border-width:1px;border-color:blue;}14.2.2二欄布局二欄布局是將網(wǎng)頁(yè)分為左側(cè)與右側(cè)兩列，這種布局方式也是網(wǎng)絡(luò)是使用得很多的布局方式，如圖14.9所示。14.2.3多欄布局多欄布局是將網(wǎng)頁(yè)的內(nèi)容分為左、中、右三大部分，這也是網(wǎng)絡(luò)中常用到的一種布局方式，如圖14.11所示。14.3CSS布局技巧本節(jié)的內(nèi)容非常重要，因?yàn)楹凶幽Ｐ褪荂SS定位布局的核心內(nèi)容。在前面章節(jié)的學(xué)習(xí)中，讀者了解了網(wǎng)頁(yè)各種布局的方法，僅僅通過(guò)div元素和列表元素，即可完成頁(yè)面大部分的布局工作。但是前面的學(xué)習(xí)的知識(shí)點(diǎn)比較重實(shí)踐操作，理解盒子模型的概念后，讀者CSS布局定位將更加熟練。14.3.1盒子模型的定義XHTML中大部分的元素（特別是塊狀元素）都可以看作一個(gè)盒子，而網(wǎng)頁(yè)的元素的定位實(shí)際就是這些大大小小的盒子在頁(yè)面中的定位。這些盒子在頁(yè)面中是“流動(dòng)”的，當(dāng)某個(gè)塊狀元素被CSS設(shè)置了浮動(dòng)屬性，這個(gè)盒子就會(huì)“流”到上一行。網(wǎng)頁(yè)布局即關(guān)注這些盒子在頁(yè)面中如何擺放、如何嵌套的問(wèn)題，而這么多盒子擺在一起，最需要關(guān)注的是盒子尺寸計(jì)算、是否流動(dòng)等要素。為什么要把XHTML元素作為盒模型來(lái)研究呢？因?yàn)閄HTML元素的特性和一個(gè)盒子非常相似，如下圖所示。14.3.2

外邊距的控制在CSS中，margin屬性可以統(tǒng)一設(shè)置，也可以上下左右分開(kāi)設(shè)置 #b{margin-left:5px; margin-right:5px; margin-top:6px;

margin-bottom:6px;}14.3.3

邊框的樣式設(shè)置邊框（border）作為盒模型的組成部分之一，其樣式非常受重視。邊框的CSS樣式設(shè)置不但影響到盒子的尺寸，還影響到盒子的外觀。邊框（border）屬性的值有3種，邊框尺寸（像素）、邊框類型和邊框顏色（十六進(jìn)制）。如果要分開(kāi)設(shè)置4條邊框，將border改為border-top（頂部邊框）、border-bottom（底部邊框）、border-left（左邊框）和border-right（右邊框）。而修改“類型”可以修改成不同樣子的邊框線條，常用的為solid（實(shí)線）、dashed（虛線）、dotted（點(diǎn)狀線）、groove（立體線）、double（雙線）、outset（浮雕線）等14.3.4

內(nèi)邊距的設(shè)置內(nèi)邊距（padding）類似于HTML中表格單元格的填充屬性，即盒子邊框和內(nèi)容之間的距離。內(nèi)邊距（padding）和外邊距（margin）很相似，都是不可