也許是布局頁面的理想方式,但是你將失去運(yùn)行2.x和3.x瀏覽器的用戶。如果想得到一個真正跨瀏覽器、跨平臺的設(shè)計方案,還得用表格進(jìn)行布局。
不是所有表格都那么壞。大多數(shù)設(shè)計者需要使用網(wǎng)格進(jìn)行設(shè)計,所以使用表格就很自然。我們也很喜歡它們的二元性:表格既可以定義布局,又可以應(yīng)付頁面中不可預(yù)知的因素。作為一個設(shè)計者,既要處理不確定性,又要在你的設(shè)計和用戶的靈活性(例如,用戶要使字體變大)之間取得平衡。不幸的是,表格同時也增加了顯示頁面的時間,有時這樣的時間很長。
因為瀏覽器需要在填充表格的內(nèi)容之前完全理解表格的結(jié)構(gòu),在大部分(如果不是全部)表格的內(nèi)容下載之前,瀏覽器什么也不能渲染。當(dāng)表格變大時,需要處理的信息將呈指數(shù)性增長。在先前的計算機(jī)上,這些處理性工作很不容易,表格渲染需要大量時間幸運(yùn)的是,可以找到避免這些缺陷的方法。
快速表格的技巧處理表格使用表格時間長了,你會發(fā)現(xiàn)大量小表格渲染起來比一個有很多行的大表格快。至少看起來是這樣-真象那么回事(記?。菏歉杏X到的速度,而不是實際速度)。
如果你在用一個九行的表格(每個單元有很多信息),可以把它分成三個各有三行的小表格。如果你的網(wǎng)頁很長,這種策略特別有益-在后面的表格下載時用戶可以看前面的表格。
使用Width屬性為使你的HTML盡量對瀏覽器友好,應(yīng)該對$#@60;TABLE$#@62;和$#@60;TD$#@62;標(biāo)記適當(dāng)?shù)厥褂肳idth屬性。這種屬性允許你定義整個表格的寬度,也可以定義單元格的寬度。如果事情并沒有好起來,你應(yīng)該懷疑瀏覽器-是它的原因。所以只要檢查你是否算對了就行了- 如果你把一個單元格設(shè)為100個像素寬,可是卻把一個110個像素寬的圖像插入其中,結(jié)果是:表格暫時出現(xiàn),然后當(dāng)重繪自己以便能容納圖像時又消失了。不用說,瀏覽器的這種過濾作用同它的慢速一樣令人討厭。
把窗體放在表格里不幸的是,不同的瀏覽器和操作系統(tǒng)對窗體元素的處理方式不同。Mac上的下拉菜單比Windows中的要寬很多。Netscape 4處理可寫的文本框和處理文本一樣,所以如果增加瀏覽器的缺省字體大小,所有的文本框都會變大。Netscape 4中的可寫文本框比其它瀏覽器中的寬20%,而且受字體標(biāo)記的影響。所以,總而言之,你的窗體 恍┯沒Э蠢椿岷芷婀?除非你有意支配它們。
看看下面的表格:
| I | |
| This a non-breaking line | like |
| this | |
| axis |
現(xiàn)在假設(shè)用戶增加了缺省字體的大小。當(dāng)表格放大以容納變大了的文字時,布局依然沒變。
| I | |
| This a non-breaking line | like |
| this | |
| axis |
不要相信所見即所得的編輯器
表格真令人痛苦,這就是為什么所見即所得的HTML編輯器流行起來的原因。但是,在這些編輯器使建表格變得容易的同時,它們也產(chǎn)生了一些令人吃驚的低效率的代碼。特別是GoLive的CyberStudio使用了一種產(chǎn)生夢魘般臃腫表格的布局系統(tǒng)(尤其當(dāng)你沒有認(rèn)真按用戶手冊操作時)。
所見即所得編輯器的布局和預(yù)覽窗口在處理不必要的嵌套表格、沒有設(shè)置合適大小的表格的列或奇怪的、轉(zhuǎn)彎抹角的HTML代碼時感到力不從心。因此,如果你希望你的表格盡可能地苗條和高效,同時又舍不得放棄所見即所得的編輯器,那么只好最后花些時間清理你的代碼。一旦所有內(nèi)容看起來都象那么回事,用文本編輯器打開HTML代碼看看,你會發(fā)現(xiàn)你的表格漂亮而且干凈。
要不要嵌套?
永遠(yuǎn)不要嵌套表格
使網(wǎng)頁讀起來很慢的首犯是嵌套的表格:即把表格放在另一個表格的單元格里。因為瀏覽器必須從里到外進(jìn)行處理-在計算外層表格之前必須先估算內(nèi)層表格的大小-嵌套表格的表現(xiàn)真令人討厭。
所以盡量避免使用嵌套表格,即使意味著頁面布局會有一些小的變化。如果你不得不使用嵌套表格,至少應(yīng)保持被嵌套表格盡量簡單,而且,不要用三層嵌套。我們是在建網(wǎng)站,不是做俄羅斯娃娃。
除非......
嵌套表格:最后的禁忌。不過,簡單表格之間的嵌套的代碼會是簡單的幾行 - 瀏覽饗??鵠幢紉桓齔?陡叢擁謀碭窀?菀住?/p>
|
下面的西洋跳棋盤不涉及嵌套表格,但是由于它的復(fù)雜性,下載起來很慢。
| this is | |||||||
| complex | |||||||
通過使用嵌套表格,可以使問題簡單。結(jié)果相同,但是下載時間會縮短。
| ||||||||||||||||||||||||||
使用表格的關(guān)鍵是找到安排它們的最有效的方法。有時嵌套表格就是答案,有時卻不是。
結(jié)構(gòu)越好,頁面越快
下面是一個典型網(wǎng)頁的例子:商標(biāo)在頂部,導(dǎo)航在左邊,內(nèi)容在其余部分。對于這樣的頁,一般用一個大表格定義整個網(wǎng)格。在整個框架表格內(nèi)嵌套商標(biāo)、導(dǎo)航和內(nèi)容表格,使瀏覽器渲染起來很困難。
| |||
|
| ||
下面是相同的頁面結(jié)構(gòu),只是商標(biāo)、導(dǎo)航和內(nèi)容分別定義在獨(dú)立的表格內(nèi)。
| Branding |
|
|
通過使每個表格獨(dú)立和簡潔,瀏覽器可以每讀完一個元素就渲染之。因此頁面的第一個元素最早出現(xiàn),用戶可以馬上利用頁面最頂端的信息。
在上面的第二個例子里,商標(biāo)表格最早出現(xiàn),然后是導(dǎo)航表格,然后是內(nèi)容表格。整個頁面下載很快,用戶馬上就有可以看到的東西。
和處理圖像一樣,使表格達(dá)到最佳效果需要試用不同的方案,直到找到令你和你的用戶都滿意的布局。你可能懷疑為了省幾秒鐘就要花費(fèi)這么多的精力是否值得,但是隨著對用戶的爭奪越來越激烈,這些努力還是值得的。
隨機(jī)推薦
- 網(wǎng)頁理論 | 2005-05-26
- 網(wǎng)頁理論 | 2006-03-23
- 網(wǎng)頁理論 | 2006-05-25
- 網(wǎng)頁理論 | 2006-03-14
- 網(wǎng)頁理論 | 2006-03-21
- 網(wǎng)頁理論 | 2016-07-25










