邢钢内网网站系统改版设计及实现

焦克强+李鑫+高琳

摘 要：邢钢内网网站初建时，系统采用当时流行的ASP+ACCESS技术，随着网站应用不断深入及信息量的逐年增加，系统存在的问题也逐渐显现。基于对现有网站的分析，提出了使用内容管理系统（CMS）来构建一个企业级网站的解决方案。详细介绍了网站前台展示技术和后台内容管理系统相关理论和技术。

关键词：jQuery div CSS CMS内容管理系统

中图分类号：TP393 文献标识码：A 文章编号：1672-3791（2016）09（a）-0018-02

邢钢内网网站随着网站应用不断深入及信息量的逐年增加，系统存在的问题逐渐呈现，主要表现在：（1）网站采用ACCESS小型数据库，一般百兆以上性能会变差，当同时在线人数多时，就会出现网页打不开、http 500错误。（2）自主开发的网站系统，代码不优化、运行效率低。（3）网站各栏目是按公司业务部室需求独自建立的系统，各个系统管理后台不能互通，导致信息之间无法共享。在这种情况下，对现有网站系统进行改版势在必行。

1 系统设计与实现

1.1 设计思想

基于对网站的现状分析，提出改版设计思想：（1）使用专业CMS系统重建网站架构，做到一站式管理。（2）网站设计须统一、简洁、专业，各子栏目统一风格，重点栏目在统一风格的基础上突出栏目特色。（3）便于导航，栏目结构清晰，各栏目互通互联，使用户可以迅速搜索到相关内容。（4）合理使用flash和Javascript等前端技术，创造更好的浏览体验和前端效果。（5）使用优化的DIV+CSS模式减少代码量，提高运行效率。（6）嵌入数据调用接口，实现ERP业务数据查询。

1.2 web前台展示技术

为实现网站首页banner图片切换、形象展示FLASH以及二级页面图片切换，使用flash+XML、jQuery动态技术实现与后台数据交互，便于更新维护，同时使页面结构清晰，并提高访问速度。

1.2.1 jQuery动态效果与flash+XML技术

（1）jQuery动态技术。

jQuery是一个“写得更少，但做得更多”的轻量级JavaScript 库。使用jQuery需要下载，然后把它包含在希望使用的网页中。jQuery兼容CSS3和各种浏览器，使用户更方便地处理HTML、events、实现动画效果，并且为网站提供AJAX交互。jQuery不用在html里插入一堆js调用命令，只需定义id，即可使用户实现html页代码和内容分离。

（2）flash+XML技术。

Flash是交互式矢量图和Web动画的标准，使用Flash可创作既漂亮又可改变尺寸的导航界面及其他特效。XML是可扩展标记语言，可用来标记数据、定义数据类型，是一种允许用户对标记语言进行定义的源语言。flash+XML是xml在flash平面设计中的应用。XML和flash一起使用时，XML就相当于临时存储数据的文本，flash会读取里面的信息，达到动画制作效果，更新FLASH时，只需修改XML文件即可。

1.2.2 Div+CSS技术

（1）什么是DIV+CSS。

DIV是HTML标记中的一个块级元素，可以为HTML文档内大块的内容提供结构和背景，起始标记“

”和结束标记“

”之间的所有内容都用来构成这个块，其中所包含元素的表现由DIV标记中套用的CSS样式来定义。CSS为层叠样式表，是一种用来表现HTML或XML等文件样式的脚本语言，可以对HTML中的各种元素实现更加精确的控制。用DIV+CSS技术制作的网站就是在HTML中只放内容，用CSS控制内容的表现，实现网页表现和结构的分离，从而减小网页体积，提高网页传输速度。

（2）DIV+CSS网页布局设计。

以邢钢内网网站页面布局作为实例，用DIV+CSS布局设计如下。

①确定布局。

用

标记将网站页面分成不同区块，包括header、page （分为sidebar左侧边栏区和main主要内容区）、footer共3个区域，分别为网页的顶部、内容和版权区域。

DIV结构如下：

body{}/* HTML元素*/

#container{}/*页面层容器*/

#header{}/*页面顶部*/

#page{}/*页面主体*/

#sidebar{}/*左侧边栏*/

#main{}/*主要内容*/

#footer{}/*页面底部*/

②实现代码。

在Dreamweaver开发环境中，新建Default.html，并设置global.css样式文件，在HTML的标记里链接样式表代码如下：

在中写入DIV的基本结构，代码如下：

邢钢LOGO

左侧边栏内容（相关链接）

主要内容区域

版权信息

global.css样式文件（代码略），其中页面层容器Container的width属性设置为百分比形式，实现页面自动适应浏览器窗口的宽度，margin属性为0 auto，表示上下边距为0，左右边距为自动，实现网页居中显示。Sidebar的float属性为left，控制左侧边栏浮动到页面主体的左边，main的float属性为right，实现中间两列竖栏的显示效果。用clear：both清除页面底部容器的左右浮动。

1.3 后台功能模块

网站后台是基于Microsoft.NET进行分层开发的CMS内容管理系统。CMS是专门面向网站内容编辑与发布的应用系统，能够管理庞大、烦杂的后台数据，规范网站后台管理流程，统一数据存储格式，减少网站运营维护投入[2]。

CMS系统分为3层：展示层负责最终的页面显示，页面的设计存储在模板里，系统可以随时更换模板，实现不同的外观。逻辑层负责系统的基本逻辑，例如用户管理、权限分配、搜索管理、缓存管理、流程管理等。数据访问层负责最终数据的保存。当一个用户请求页面时，各部分联合生成一个标准的HTML页面[1]。

邢钢内网CMS系统包含信息管理模块、用户管理模块、模板管理模块、发布管理模块、附件管理模块。底层数据库为SQL Server。

2 运行效果

改版后的邢钢内网网站运行稳定、效果良好。通过内容管理系统内置的多种功能模块，轻松地实现了企业新闻、部门主页、图片集、多媒体、搜索、用户管理等功能模块的统一管理，提高了网站运行效率。实现网页表现和结构的分离，降低了网站改版成本，页面结构调整只需修改或增加模板，工作变得简单轻松。同时通过二次开发、嵌入数据调用接口，实现了ERP业务数据实时查询。

参考文献

[1] 谭浩，陈应忠，李旭.基于CMS的企业门户网站建立[J].交通科技，2010（7）：101-103.

[2] 耿璐，聂足.基于CMS的企业网站的设计与实现[J].计算机工程与设计，2009，30（2）：351-357.