高校门户网站的表格布局技术研究
2017-05-04蓝鹰刘松
蓝鹰+刘松
摘 要： 网页布局的优良是决定高校门户网站是否美观的一个重要因素，合理的布局不仅能够将网页中的文本、图片等内容完美并直观地呈现给高校门户网站浏览者，而且能够合理地安排网页空间，优化网页的显示效果和提高网页的下载速度，从而给用户良好的浏览体验。
关键词： 高校门户网站； 表格布局
中图分类号：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技术流行的早期，由于浏览器的功能并未发展完善，要想让网页内的各类HTML元素均能形成一个良好格局则也不是一件易事。研究可知，表格技术不仅可以控制每个单元格的具体宽度和高度，而且可以构建表格之间的互相嵌套，从而做出效果精美的表格。正是由于表格的这些特点，就使得表格操作即已开发成为网页布局高频通用的一种处理方式。总地来说，使用表格将使得各个网页元素均能准确排布于网页设计者先期指定的页面位置。
传统表格布局方式利用了HTML中表格元素具有的无边框特性。由于标记可以在显示时使得单元格的边框和间距为0，即不显示边框，因此可以将网页中的各个元素按照版式划分添加入表格的各个单元格中，从而实现复杂的排版组合。
HTML表格由边框、行、列、单元格组成。整张表格的边缘称为边框，水平方向的一组单元格称为行，垂直方向的一组单元格称为列，行列交叉部分称为单元格，单元格中的内容和边框之间的距离称为边距，单元格和单元格之间的距离称为间距，表格参考示意则如图1所示。具体的表格实现代码如下：
<！--TABLE表格标记，BORDER边框宽度属性-->
<！--CELLSPACING单元格间距，CELLPADDING单元格边距-->
[WB] <！- -TR行标记-->
[DW] <！- -TD单元格标记-->
[DW]
[DW]
[DW]
[DW]
[DW]
[DW]
[DW]
[DW]
在此，可给出表格布局的实用解析步骤如下：
1）在使用表格设计页面时，首先应通盘规划页面中各元素的具体位置，并通过表格将这些区域划分出来。
2）在表格单元格中插入相应的页面元素。
3）通过表格属性精细调整各单元格的大小、位置，使网页中各个元素的所在位置与实际需要相符。
4）灵活利用表格的背景属性、框线属性设置准确定位页面各个元素，从而创建布局合理、樣式美观的网页效果。
2 表格布局之单元格跨行、跨列技术
一般情况下，常规的二维表格很难满足网页开发者制作精美表格布局的需要，而单元格的跨行合并和单元格跨列技术则有效解决了这个问题。设置单元格跨行合并的步骤如下：
1）首先，在需要跨行合并单元格集合中，找到最顶端的单元格，并使用ROWSPAN属性指定需要合并的单元格数量。
2） 在需要跨行合并单元格集合中，找到除最顶端单元格以外的其它所有单元格，并对这些单元格附属关联的标记执行删除操作指令。
3）将需要配置在合并单元格中的HTML元素代码，直接调入最顶端单元格对应的标记中即可。利用单元格跨行、跨列技术最终获得的表格布局效果如图2所示，并可进一步得到其设计开发代码展示如下。
2017年02期
- AVS2视频编码标准中熵编码模块的优化设计
- 基于RSS相关性的位置指纹室内定位方法
- 协作制造环境下子任务调度的优化方法
- 基于成团效应的众核处理器失效核分布建模方法
- Spark平台下教育资源个性化推荐研究
- 强干扰下非平稳跳频信号高分辨测试技术研究
- 一种基于ABC的量子神经网络训练算法
- 基于树莓派+Arduino的WiFi反馈控制系统的研究
- 奇异值分解算法在纤维识别中的应用
- 基于混沌扰动的改进布谷鸟算法
- 一种径向基神经网络模型在图书馆能耗监测上的应用
- 数字闭环加速度计带宽测试方法的研究
- 中文语音情感常用特征识别性能分析
- 基于条件随机场的维吾尔语音乐实体识别
- 一种新的混沌粒子群优化算法
- 一种基于经验知识的军棋博弈算法设计与实现
- 基于故障树分析法的空管设备失效风险分析
- 基于模糊C均值聚类的作物病害图像分割方法研究
- 虚拟植物研究进展
- 个性化亚马逊棋的界面设计与实现
- 正则表达式在填空题答案设计及评分中的应用
- 基于Web of Science的可穿戴设备研究文献计量分析
- 针对路面建模的Delaunay三角网格分治算法
- 校园网论坛评论的人类动力学分析研究
- 面向新浪微博的信息溯源技术研究
- 基于SPOC的混合式学习的学习分析与应用
- 基于课程的课后交流学习系统的设计与实现
- 云计算下农作物病情灾害预警模型的构建
- 基于JSP的学生信息管理系统设计与实现
- 高校门户网站的表格布局技术研究
- 基于S7—200 SMART PLC的多步进电机控制系统设计
- 基于LabVIEW的家居环境智能控制系统
- 基于Kinetis—K60单片机直立智能车的设计与研究
- 基于无线传输的电子秤系统设计
- 用GPRS技术传送雾霾检测数据的研究
- 基于网络舆情倾向性分析的机器学习方法研究
- 基于STM32的智能家居控制系统
- 城市立体停车场管理信息系统设计
- 一种家庭采暖系统的设计
- 基于CDIO模式的移动开发学习平台建设
- 能源互联网的发展现状与趋势研究
客服热线：400-656-5456 客服专线：010-56265043 电子邮箱：longyuankf@126.com
电信与信息服务业务经营许可证：京icp证060024号
Dragonsource.com Inc. All Rights Reserved
| Logo | 宣传栏 | |
| ： | 内容模块1 | 内容模块2 |
：
：
导航栏
：
：
版权信息
3 表格布局之表格嵌套技术
除了单元格跨行、跨列技术之外，表格嵌套是另一类公认实用的表格布局技术。利用该技术不仅可以制作出具有精美效果的网页，而且能够根据页面布局的描述要求设计得到精确编排。表格嵌套技术是指基于插入页面元素的设计需要而在另一个表格的某个单元格里另行插入一个独立的若干行和列的二维表格。对于这个独立的表格，使用时即可如同对待任何其它普通表格一样进行格式设置，但是其宽度却要受到所在嵌套单元格大小的限制。该部分的主要技术代码如下。运行后的页面效果则如图3所示。
| Logo | 宣传栏 | |||||||
| 内容模块1 | 内容模块2 | ||||||
| 版权信息 |
4 表格布局技術的优缺点
表格布局最大的优点是浏览器兼容性好。正是由于表格布局效果在不同的浏览器中更易保持一致的特点，因此很多设计人员已日趋青睐于选择使用表格开展页面布局设计。但需要指出的是，如果采用表格嵌套技术进行表格页面布局，会出现表格嵌套层次越多，网页的载入速度越慢的情况。为此，网页设计者要适度控制表格嵌套的层次，兼顾页面布局效果和网页载入速度。
5 结束语
实际应用效果表明，表格布局是一种功能完备、且前景可期的Web页面布局方式，不仅能够被开发者所轻松掌握，而且更在各种类型的浏览器显示过程中表现出优质高效的兼容性，这也将为高校门户网站日后升级和维护带来极大的方便。
参考文献：
[1]郑娅峰，张永强. 网页设计与开发[M]. 北京：清华大学出版社，2016 .
[2] 于淑云. 高校可配置网站集群前端框架设计[J]. 长春工业大学学报（自然科学版）， 2015，36（5）：519-523.
