高校门户网站的页面布局技术研究

蓝鹰

摘要：随着时代的发展，高校门户网站在日常招生、就业、教学过程中起到越来越重要的作用。高校门户网站页面布局的好坏直接决定的门户网站的美观程度。科学合理的页面布局不仅能够提高网页的显示效果，而且能够极大地提高网页的下载速度，提升网站访问者体验的满意度。

关键词：高校门户网站 页面布局技术

中图分类号：TP302.1

Abstract：With the development of the times， the university portal website plays a more and more important role in the daily recruitment、employment、and teaching process. The appearance of the university portal website is directly determined by the quality of the web page layout. Scientific and reasonable layout of pages may not only improve the page display effect， but also can greatly improve the download speed of the pages and enhance the satisfaction of website visitors.

Key words：university portal website； layout of Web page

0 引言

随着移动互联和网络信息技术的发展，教学资源信息化及教学课程共享化已经成为当今高校教学的一个至关重要的设计配置环节。与此同时，高校教学网络化也获得了广泛普及与深度实施，高校日常的众多业务已然重度依赖于高校门户网站各项功能的全方位集成与开发，如网络课程建设，网络科研建设，网络专业建设，网络招生，网络就业等。高校门户网站页面布局的好坏将直接决定门户网站的美观程度。科学合理的页面布局不仅能够突出网页的显示效果，而且能够显著优化网页的下载速度，进而提升网站访问者体验的满意度。

1 高校门户网站的布局方式

本文主要探讨目前比较流行的2种布局方式，即表格布局方法和DIV+CSS布局方法，并给出其各自对应的设计方式和实现方法。

1.1 高校门户网站的表格布局研究

表格布局方式属于传统设计范畴，在网页超文本标记语言发展之初，设计者如果要将网页内的各种元素定制在网页的具体位置上则并非易事，通常网页设计者会利用表格的各种特性（如嵌套表格技术，表格单元格合并技术，表格行高和列表的设置、表格边框线隐藏等）来达到页面布局的可视化开发目的[1]。

1.1.1 高校门户网站表格页面布局的设计

表格页面布局的设计方法是先期集成规划页面中各种插入元素的具体位置和大小，其次通过表格的行和列将这些区域划分出来，而后再将页面中的待插入元素配置到相应的单元格内，最后利用表格的各种属性精细调整各个单元格的大小、位置，进而使页面中的各个元素所在的位置与实际设计效果图相吻合，在此基础上还需设计表格的背景、页面水平对齐方式，并将表格边框线隐藏[2]。由此，即可得到实习一个页面布局合理并兼具美观的Web页面效果。

采用表格页面布局的高校门户网站可以迅捷的实现排版定位，从而使得高校门户网站的页面开发得到优势提速。图1是采用表格页面布局设计的高校门户网站首页抽象布局图。

1.1.2 高校门户网站表格页面布局的实现

1.1.2.1搭建页面主体框架

高校门户网站首页的抽象布局图可以使用一个4行2列的表格来给出描述构建，但是考虑到页面的加载速度，本次研究采用了4个单独的列表格来做设计实现。这种研发方式不仅能够提高页面的加载速度，并且能够降低板块间的耦合性，利于日后网站的维护和升级[3]。

高校门户网站首页抽象布局图的主体HTML实现代码可做如下呈现：

1.2.2.2 页面全局属性的定义

关于高校门户网站首页的抽象布局图的样式实现，在本文中采用了CSS样式表技术。利用CSS样式格式对抽象布局图的首页背景、表格样式、页面文字大小和页面文字颜色等进行具体相应设计。关键CSS代码可表述如下：

1.2.2.3 采用表格布局的高校门户网站首页效果展示

采用表格布局的高校门户网站首页效果如图2所示。

1.2 高校门户网站的DIV+CSS布局方式研究

目前，Web技术标准化程度得到了飞速提高与进步，而穷采用DIV+CSS技术的标准化网页布局方式也随即吸引了开发者和网站用户的广泛青睐与关注。在不久的将来，即会取代绝大部分网页的表格布局方式。

1.2.1高校门户网站DIV+CSS页面布局的设计

DIV+CSS的方式，采用DIV标记进行页面的布局分块，而后使用CSS层叠样式表技术来控制各个DIV模块的具体大小、摆放位置、对齐方式、背景颜色、内部文字字体颜色等网页外观特征。

图3是采用DIV+CSS页面布局设计的高校门户网站首页抽象布局图。

1.2.2高校门户网站DIV+CSS页面布局的实现

简言之，采用DIV+CSS实现的高校门户网站页面结构可总共分为如下部分：

1）头部区域。实现网页的标题和页面导航；

2）横幅风采展示区域；

3）主体区域。包括左侧页面内容区域、中部页面内容区域和右侧页面内容区域。

2 高校门户网站2种布局方式的比较

表格布局方式是一种比较传统的技术选用，其主要优点为：开发者使用方便，布局简单、实现快捷、浏览性兼容性均为优良。缺点是网页结构复杂，日后网站维护困难，开发人员维护工作量较大。DIV+CSS页面布局方式的优点为页面布局灵活、网页结构较清晰，日后网站维护较轻松、网页表现与内容分离，便于网站重构网页、更加适应搜索引擎等。缺点是开发人员需要仔细考虑平台的兼容性。经过测试实验表明，在进行页面布局时，表格布局方式适用于网页结构简单并且内容变动率低微的高校门户网站。而DIV+CSS页面布局方式则适用于结构较复杂，日后将会进行频繁维护和更新的高校门户网站。

参考文献：

[1] 郑娅峰，张永强. 网页设计与开发 [ M] .北京：清华大学出版社，2016 .

[2] 于淑云.高校可配置网站集群前端框架设计[J].长春工业大学学报（自然科学版），2015，36（5）：519-523.

[3] 周方.基于模板技术的网站内容管理系统的设计与实现[D].北京：北京交通大学，2009