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

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

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

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

margin-bottom:6px;}14.3.3

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

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