第11章固定寬度布局剖析與制作

向報(bào)紙學(xué)習(xí)排版思想11.1CSS排版觀念11.2單列布局11.3

“1-2-1”固定寬度布局11.4“1-3-1”固定寬度布局11.5“1-((1-2)+1)-1”固定寬度布局11.6

CSS的排版是一種很新的排版理念，完全有別于傳統(tǒng)的排版習(xí)慣。它將頁面首先在整體上進(jìn)行<div>標(biāo)記的分塊，然后對(duì)各個(gè)塊進(jìn)行CSS定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。

利用CSS排版的頁面，更新起來十分容易，甚至連頁面的拓?fù)浣Y(jié)構(gòu)都可以通過修改CSS屬性來重新定位。本章介紹固定寬度的網(wǎng)頁布局，并給出一系列的實(shí)例。11.1向報(bào)紙學(xué)習(xí)排版思想

圖11.18列方式的報(bào)紙布局

圖11.26列方式的報(bào)紙布局

總之，可以從報(bào)紙的排版中學(xué)到很多經(jīng)過多年積累下來的經(jīng)驗(yàn)。核心的思想是借鑒“網(wǎng)格”的布局思想，它具有如下優(yōu)點(diǎn)。

（1）使用基于網(wǎng)格的設(shè)計(jì)可以使大量頁面保持很好的一致性，這樣無論是在一個(gè)頁面內(nèi)，還是在網(wǎng)站的多個(gè)頁面之間，都可以具有統(tǒng)一的視覺風(fēng)格，這是很重要的。

（2）均勻的網(wǎng)格以大多數(shù)認(rèn)為合理的比例將網(wǎng)頁劃分為一定數(shù)目的等寬列，這樣在設(shè)計(jì)中產(chǎn)生了很好的均衡感。

（3）使用網(wǎng)格可以幫助設(shè)計(jì)把標(biāo)題、標(biāo)志、內(nèi)容和導(dǎo)航目錄等各種元素合理地分配到適當(dāng)?shù)膮^(qū)域，這樣可以為內(nèi)容繁多的頁面創(chuàng)建出一種潛在的秩序，或者稱為“背后”的秩序。

報(bào)紙的讀者通常并不會(huì)意識(shí)到這種秩序的存在，但是這種秩序?qū)嶋H上在起著重要的作用。

（4）網(wǎng)格的設(shè)計(jì)不但可以約束網(wǎng)頁的設(shè)計(jì)，從而產(chǎn)生一致性，而且具有高度的靈活性。在網(wǎng)格的基礎(chǔ)上，通過跨越多列等手段，可以創(chuàng)建出各種變化的方式，這種方式既保持了頁面的一致性，又具有風(fēng)格的變化。

（5）網(wǎng)格可大大提高整個(gè)頁面的可讀性，因?yàn)樵谌魏挝淖置襟w上，一行文字的長度與讀者的閱讀效率和舒適度有直接的關(guān)系。

如果一行文字過長，讀者在換行的時(shí)候，眼睛就必須劇烈的運(yùn)動(dòng)，以找到下一行文字的開頭，這樣既打斷了讀者的思路，又使眼睛和脖子的肌肉緊張，使讀者疲勞感明顯增加。

而通過使用網(wǎng)格，可以把一行文字的長度限制在適當(dāng)?shù)姆秶?，使讀者閱讀起來既方便，又舒適。如果把報(bào)紙排版中的概念和CSS的術(shù)語進(jìn)行對(duì)比，如圖11.3所示。

圖11.3報(bào)紙排版術(shù)語與CSS屬于對(duì)比

（a）（b）圖11.4報(bào)紙排版中，列可以靈活地組合11.2CSS排版觀念

在過去使用表格布局的時(shí)候，在設(shè)計(jì)的最開始階段就要確定頁面的布局形式。由于使用表格來進(jìn)行布局，一旦確定下來就無法再更改了，因此有極大的缺陷。

使用CSS布局則完全不同，設(shè)計(jì)者首先考慮的不是如何分割網(wǎng)頁，而是從網(wǎng)頁內(nèi)容的邏輯關(guān)系出發(fā)，區(qū)分出內(nèi)容的層次和重要性。

然后根據(jù)邏輯關(guān)系，把網(wǎng)頁的內(nèi)容使用div或其他適當(dāng)?shù)腍TML標(biāo)記組織好，再考慮網(wǎng)頁的形式如何與內(nèi)容相適應(yīng)。

實(shí)際上，即使是很復(fù)雜的網(wǎng)頁，也都是一個(gè)模塊一個(gè)模塊逐步搭建起來的。下面以一些訪問量較大的實(shí)際網(wǎng)站為例，看看它們都是如何布局的，有哪些布局形式。11.2.1兩列布局

圖11.5兩列布局的網(wǎng)頁11.2.2三列布局

（a）（b）圖11.6“1-3-1”布局的網(wǎng)頁及其示意圖11.2.3多列布局

圖11.7使用多列布局的網(wǎng)頁11.2.4布局結(jié)構(gòu)的表達(dá)式與結(jié)構(gòu)圖

為了能夠方便地表示各種網(wǎng)頁結(jié)構(gòu)，這里規(guī)定一套固定的表達(dá)方法來稱呼各種布局結(jié)構(gòu)。

圖11.8所示的是最簡單的布局形式，稱為“1-1-1”布局，“1”表示一共1列，減號(hào)表示豎直方向上下排列。

圖11.8“1-1-1”布局

（a）（b）圖11.9“1-2-1”布局和“1-3-1”布局

圖11.10“1+(1?1)”布局

圖11.11“1?(1+(1-2))?1”布局

（a）（b）圖11.12布局結(jié)構(gòu)示意圖

圖11.13“1?1?1”布局

圖11.14“1?(1+1)?1”布局

圖11.15“1?((1?1)+1)?1”布局

圖11.16“1?((1?(1+1))+1)?1”布局

圖11.17完成后的“1?((1?((1?2)+1))+1)?1”布局結(jié)構(gòu)圖11.3單列布局

圖11.18單列固定寬度的頁面布局11.4“1-2-1”固定寬度布局

（a）（b）圖11.24“1-2-1”布局的結(jié)構(gòu)示意圖11.5“1-3-1”固定寬度布局

圖11.32“1-3-1”布局

圖11.33“1-3-1”布局結(jié)構(gòu)示意圖11.6“1-((1-2)+1