第5章使用表格設(shè)計(jì)網(wǎng)頁布局

網(wǎng)頁設(shè)計(jì)與制作——使用表格設(shè)計(jì)網(wǎng)頁布局王海波Email:網(wǎng)頁設(shè)計(jì)與制作1.表格布局的起源由于缺乏對頁面進(jìn)行排版布局的手段，早期的互聯(lián)網(wǎng)上的網(wǎng)站頁面比較簡陋,網(wǎng)頁上只能使用最基本的一些HTML標(biāo)簽來表現(xiàn)內(nèi)容。1996年10月1日的雅虎網(wǎng)站首頁<p></ul><li><ul>1.表格布局的起源1997年，DavidSiegel出版了“CreateKillerWebSites”一書，講述了使用表格來進(jìn)行網(wǎng)頁布局的思路和方法，從而使得網(wǎng)站頁面的布局得到極大改善。tdtdtdtdtdtabletable1.表格布局的起源2000年3月3日的雅虎網(wǎng)站首頁<table><table><table><table>1.表格布局的起源2007年11月26日的新浪網(wǎng)站新聞首頁我們可以把一個網(wǎng)頁看做一個拼圖。拼圖的整體結(jié)構(gòu)以及局部結(jié)構(gòu)是由表格來進(jìn)行規(guī)劃，在設(shè)計(jì)網(wǎng)頁時只是向不同的單元格中填充內(nèi)容。2.使用表格布局的基本原理通過表格來布局頁面——填空頁面的不同層次根據(jù)頁面的不同層次，可以把一個網(wǎng)站的頁面分為首頁（一級頁面）、二級頁面、三級頁面等。首頁中一般體現(xiàn)站點(diǎn)中的重點(diǎn)內(nèi)容、精華內(nèi)容、最近更新的內(nèi)容等。一般來說，其中的文字或圖像都較為簡略，以容下更多內(nèi)容的展示。二級頁面可以對應(yīng)某個欄目的首頁，其形式和首頁類似。在三級頁面中，展示內(nèi)容的具體細(xì)節(jié)，可以用豐富的文字和圖像等元素來表現(xiàn)。不論哪種層次的網(wǎng)頁，Logo,導(dǎo)航，版權(quán)信息都是不可缺少的。頁面的不同層次——一級頁面頁面的不同層次——二級頁面頁面的不同層次——三級頁面人們閱讀網(wǎng)頁時的視覺流程視覺流程，是視線在觀賞物上的移動過程，是二維或三維空間中的運(yùn)動。這種視覺的流動線極為重要。設(shè)計(jì)師應(yīng)該善于運(yùn)用這條貫穿頁面的主線，設(shè)計(jì)易于瀏覽的頁面。從某個角度講，視覺流程的設(shè)計(jì)結(jié)果就是版式。人們閱讀材料時習(xí)慣按照從左到右，從上到下的順序進(jìn)行。瀏覽者的眼睛首先看到的是頁面的左上角，然后逐漸往下看。根據(jù)這一習(xí)慣，設(shè)計(jì)時可以把重要信息放在頁面的左上角或頁面頂部，如公司的標(biāo)志、最新消息等，然后按重要性依次放置其他內(nèi)容。視覺流程的研究方法——眼動儀眼動儀通過眼動儀觀測到的用戶瀏覽器網(wǎng)頁時的視覺熱點(diǎn)順暢的視覺流與凌亂的視覺流沉浸式閱讀(immersivereading)與掃描式閱讀(scanning)網(wǎng)頁布局的設(shè)計(jì)原則對齊原則緊湊原則重復(fù)原則對比原則注：來自“寫給大家看的Web和版式設(shè)計(jì)書”對齊原則頁面上的每一項(xiàng)與頁面上的其它各項(xiàng)建立視覺上的聯(lián)系。在頁面上對齊之后，各元素會形成一個更具凝聚力的單元，從視覺和意識上給人一個整體的感覺。對齊原則——居中對齊對齊原則——兩端對齊緊湊原則將相關(guān)元素成組地擺放在一起，讓它們彼此靠近，以便相關(guān)的元素看起來是一個整體，而不是一堆無關(guān)的東西。一般通過頁面內(nèi)容的模塊化，可以良好地體現(xiàn)緊湊原則。緊湊原則分組1分組2分組3鏈接：分組1.1分組1.2分組1.3重復(fù)原則在整個頁面中重復(fù)設(shè)計(jì)某些部分。重復(fù)可以理解為“一致性”，特定元素的重復(fù)和一致性，可以給瀏覽者留下統(tǒng)一的感覺。重復(fù)原則相同的格式和布局重復(fù)原則相同的格式和布局鏈接：對比原則對比是為頁面添加視覺吸引力，以讓閱讀者對頁面產(chǎn)生閱讀興趣的非常有效的方式。可以創(chuàng)建大、小字體之間的對比，字體與字體之間的對比，冷色與暖色之間的對比，寬間距與窄間距之間的對比等。對比原則通過對標(biāo)題1，標(biāo)題2，段落等原色設(shè)置不同的字體，字號，背景等，增加頁面元素之間的對比。3.通過表格來布局頁面的基本步驟1.規(guī)劃頁面的基本框架2.插入布局表格3.在表格的相應(yīng)的單元格中插入頁面的內(nèi)容元素a.規(guī)劃頁面的基本框架網(wǎng)頁頭部主體內(nèi)容網(wǎng)頁底部網(wǎng)頁頭部主體內(nèi)容網(wǎng)頁底部a.規(guī)劃頁面的基本框架a.規(guī)劃頁面的基本框架——細(xì)分a.規(guī)劃頁面的基本框架——細(xì)分a.規(guī)劃頁面的基本框架Logo圖像導(dǎo)航菜單板塊一版權(quán)信息文字圖片文字圖片板塊二文字圖片文字圖片板塊三文字圖片文字圖片b.插入布局表格布局表格完成對網(wǎng)頁中內(nèi)容的約束作用，通過把布局表格放在一定的位置，從而使得其中的內(nèi)容出現(xiàn)在期望的位置。通過把布局表格的align屬性設(shè)置為center,可以使得其中的內(nèi)容在網(wǎng)頁上是居中對齊的位置。布局表格的cellpadding屬性和cellspacing屬性一般需要設(shè)置為0。布局表格的應(yīng)用方式主要有2種：并列和嵌套。布局表格的并列在一個表格后面繼續(xù)插入一個新的表格，新的表格會自動向下排列。外層的表格應(yīng)該指定相同的寬度。表格1表格2表格3表格4width=numberpx布局表格的嵌套表格嵌套是指在一個表格內(nèi)嵌套另一個表格。通過表格的嵌套，從而實(shí)現(xiàn)復(fù)雜的網(wǎng)頁排版效果。用嵌套表格來實(shí)現(xiàn)導(dǎo)航菜單實(shí)例：利用表格布局網(wǎng)頁鏈接：表格布局——兩欄內(nèi)容實(shí)例：利用表格布局網(wǎng)頁鏈接：表格布局——三欄內(nèi)容3.插入內(nèi)容文字文字實(shí)例：北京旅游鏈接實(shí)例：美食林鏈接使用表格要注意以下幾個事項(xiàng):使用表格控制網(wǎng)頁布局時盡量制小表而不制大表；這樣做的原因是網(wǎng)頁顯示速度較快；另外網(wǎng)頁各個部分相對獨(dú)立，好修改。一般控制網(wǎng)頁布局的表格的填充和邊界都為0，寬度一般是絕對數(shù)；表格或單元格寬度或高度有“像素”和“百分比”兩種單位,使用時要注意其作用。即使設(shè)置了表格的寬