高校門戶網(wǎng)站的表格布局技術(shù)研究

藍(lán)鷹+劉松

摘 要： 網(wǎng)頁布局的優(yōu)良是決定高校門戶網(wǎng)站是否美觀的一個(gè)重要因素，合理的布局不僅能夠?qū)⒕W(wǎng)頁中的文本、圖片等內(nèi)容完美并直觀地呈現(xiàn)給高校門戶網(wǎng)站瀏覽者，而且能夠合理地安排網(wǎng)頁空間，優(yōu)化網(wǎng)頁的顯示效果和提高網(wǎng)頁的下載速度，從而給用戶良好的瀏覽體驗(yàn)。

關(guān)鍵詞： 高校門戶網(wǎng)站； 表格布局

中圖分類號(hào)：TP302.1

文獻(xiàn)標(biāo)志碼：A

文章編號(hào)：2095-2163（2017）02-0110-03

Abstract：Excellent web page layout is an important factor to the appearance of the university portal website. The reasonable layout can not only show the web text， pictures and other content to the user of the university website， but also can arrange space reasonably， optimize the page display and improve the web page download speed， which could give users a good browsing experience.

Keywords：university website； table layout

1 表格布局方法概述

表格布局是一種經(jīng)典的頁面布局設(shè)計(jì)模式，在HTML技術(shù)流行的早期，由于瀏覽器的功能并未發(fā)展完善，要想讓網(wǎng)頁內(nèi)的各類HTML元素均能形成一個(gè)良好格局則也不是一件易事。研究可知，表格技術(shù)不僅可以控制每個(gè)單元格的具體寬度和高度，而且可以構(gòu)建表格之間的互相嵌套，從而做出效果精美的表格。正是由于表格的這些特點(diǎn)，就使得表格操作即已開發(fā)成為網(wǎng)頁布局高頻通用的一種處理方式。總地來說，使用表格將使得各個(gè)網(wǎng)頁元素均能準(zhǔn)確排布于網(wǎng)頁設(shè)計(jì)者先期指定的頁面位置。

傳統(tǒng)表格布局方式利用了HTML中表格元素具有的無邊框特性。由于標(biāo)記可以在顯示時(shí)使得單元格的邊框和間距為0，即不顯示邊框，因此可以將網(wǎng)頁中的各個(gè)元素按照版式劃分添加入表格的各個(gè)單元格中，從而實(shí)現(xiàn)復(fù)雜的排版組合。

HTML表格由邊框、行、列、單元格組成。整張表格的邊緣稱為邊框，水平方向的一組單元格稱為行，垂直方向的一組單元格稱為列，行列交叉部分稱為單元格，單元格中的內(nèi)容和邊框之間的距離稱為邊距，單元格和單元格之間的距離稱為間距，表格參考示意則如圖1所示。具體的表格實(shí)現(xiàn)代碼如下：

<！--TABLE表格標(biāo)記，BORDER邊框?qū)挾葘傩?->

<！--CELLSPACING單元格間距，CELLPADDING單元格邊距-->

[WB] <！- -TR行標(biāo)記-->

[DW] <！- -TD單元格標(biāo)記-->

[DW]

[DW]

[DW]

[DW]

[DW]

[DW]

[DW]

[DW]

在此，可給出表格布局的實(shí)用解析步驟如下：

1）在使用表格設(shè)計(jì)頁面時(shí)，首先應(yīng)通盤規(guī)劃頁面中各元素的具體位置，并通過表格將這些區(qū)域劃分出來。

2）在表格單元格中插入相應(yīng)的頁面元素。

3）通過表格屬性精細(xì)調(diào)整各單元格的大小、位置，使網(wǎng)頁中各個(gè)元素的所在位置與實(shí)際需要相符。

4）靈活利用表格的背景屬性、框線屬性設(shè)置準(zhǔn)確定位頁面各個(gè)元素，從而創(chuàng)建布局合理、樣式美觀的網(wǎng)頁效果。

2 表格布局之單元格跨行、跨列技術(shù)

一般情況下，常規(guī)的二維表格很難滿足網(wǎng)頁開發(fā)者制作精美表格布局的需要，而單元格的跨行合并和單元格跨列技術(shù)則有效解決了這個(gè)問題。設(shè)置單元格跨行合并的步驟如下：

1）首先，在需要跨行合并單元格集合中，找到最頂端的單元格，并使用ROWSPAN屬性指定需要合并的單元格數(shù)量。

2） 在需要跨行合并單元格集合中，找到除最頂端單元格以外的其它所有單元格，并對(duì)這些單元格附屬關(guān)聯(lián)的標(biāo)記執(zhí)行刪除操作指令。

3）將需要配置在合并單元格中的HTML元素代碼，直接調(diào)入最頂端單元格對(duì)應(yīng)的標(biāo)記中即可。利用單元格跨行、跨列技術(shù)最終獲得的表格布局效果如圖2所示，并可進(jìn)一步得到其設(shè)計(jì)開發(fā)代碼展示如下。

?：

?：

導(dǎo)航欄

?：

?：

版權(quán)信息

3 表格布局之表格嵌套技術(shù)

除了單元格跨行、跨列技術(shù)之外，表格嵌套是另一類公認(rèn)實(shí)用的表格布局技術(shù)。利用該技術(shù)不僅可以制作出具有精美效果的網(wǎng)頁，而且能夠根據(jù)頁面布局的描述要求設(shè)計(jì)得到精確編排。表格嵌套技術(shù)是指基于插入頁面元素的設(shè)計(jì)需要而在另一個(gè)表格的某個(gè)單元格里另行插入一個(gè)獨(dú)立的若干行和列的二維表格。對(duì)于這個(gè)獨(dú)立的表格，使用時(shí)即可如同對(duì)待任何其它普通表格一樣進(jìn)行格式設(shè)置，但是其寬度卻要受到所在嵌套單元格大小的限制。該部分的主要技術(shù)代碼如下。運(yùn)行后的頁面效果則如圖3所示。

4 表格布局技術(shù)的優(yōu)缺點(diǎn)

表格布局最大的優(yōu)點(diǎn)是瀏覽器兼容性好。正是由于表格布局效果在不同的瀏覽器中更易保持一致的特點(diǎn)，因此很多設(shè)計(jì)人員已日趨青睞于選擇使用表格開展頁面布局設(shè)計(jì)。但需要指出的是，如果采用表格嵌套技術(shù)進(jìn)行表格頁面布局，會(huì)出現(xiàn)表格嵌套層次越多，網(wǎng)頁的載入速度越慢的情況。為此，網(wǎng)頁設(shè)計(jì)者要適度控制表格嵌套的層次，兼顧頁面布局效果和網(wǎng)頁載入速度。

5 結(jié)束語

實(shí)際應(yīng)用效果表明，表格布局是一種功能完備、且前景可期的Web頁面布局方式，不僅能夠被開發(fā)者所輕松掌握，而且更在各種類型的瀏覽器顯示過程中表現(xiàn)出優(yōu)質(zhì)高效的兼容性，這也將為高校門戶網(wǎng)站日后升級(jí)和維護(hù)帶來極大的方便。

參考文獻(xiàn)：

[1]鄭婭峰，張永強(qiáng). 網(wǎng)頁設(shè)計(jì)與開發(fā)[M]. 北京：清華大學(xué)出版社，2016 .

[2] 于淑云. 高校可配置網(wǎng)站集群前端框架設(shè)計(jì)[J]. 長(zhǎng)春工業(yè)大學(xué)學(xué)報(bào)（自然科學(xué)版）， 2015，36（5）：519-523.