高校門戶網站的表格布局技術研究

藍鷹+劉松

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

關鍵詞： 高校門戶網站； 表格布局

中圖分類號：TP302.1

文獻標志碼：A

文章編號：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 表格布局方法概述

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

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

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

<！--TABLE表格標記，BORDER邊框寬度屬性-->

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

[WB] <！- -TR行標記-->

[DW] <！- -TD單元格標記-->

[DW]

[DW]

[DW]

[DW]

[DW]

[DW]

[DW]

[DW]

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

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

2）在表格單元格中插入相應的頁面元素。

3）通過表格屬性精細調整各單元格的大小、位置，使網頁中各個元素的所在位置與實際需要相符。

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

2 表格布局之單元格跨行、跨列技術

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

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

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

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

?：

?：

導航欄

?：

?：

版權信息

3 表格布局之表格嵌套技術

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

4 表格布局技術的優(yōu)缺點

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

5 結束語

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

參考文獻：

[1]鄭婭峰，張永強. 網頁設計與開發(fā)[M]. 北京：清華大學出版社，2016 .

[2] 于淑云. 高?？膳渲镁W站集群前端框架設計[J]. 長春工業(yè)大學學報（自然科學版）， 2015，36（5）：519-523.