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