SYS  PRACTICE    　系统实践
一、油田门户网站的设计与应用
（一）界面设计
 首先要考虑风格定位。门户网站是大庆油田整体形象的网络展示，应具有统一的网站风格形象。在设计上，要注重突出中国石油工业的特点，体现“贡献能源，创造和谐”的企业宗旨。
其次视觉流程合理。企业门户网站应具有统一的颜样式，不超过三种主要颜。主要颜是指网页中的主调，即可以反映网站形象并扩展其内涵的颜[1]。主要用于网站背景颜，专栏和主题图片，其他颜作为点缀和设置，不能淡化主。
（二）首页设计
 大庆油田及其下属单位信息门户的主框架结构为：页眉、栏目内容区、页脚。其中，整个门户大小为960像素宽，高度不受限制，具体取决于网站的内容；标题网站标识应使用中国石油全彩标识。
企业或机构的下属单位的网站名称应左对齐两行，上部字体大小为18像素，下部字体大小为28像素。两者之间的垂直距离为6像素，英文名称未标记。
门户页脚通常包括帮助信息，，门户地图，版权等。内容居中对齐。高度为70像素，字体大小为12像素。
二、DIV+CSS技术在网页布局中应用原理
（一） CSS 控制页面的方式
 外部样式
＜ link rel = ”stylesheet” type = ”text/css” href= ”url” ＞
此代码位于html文档的头部，用于调用外部样式。
CSS样式的基本应用包括：填充（padding）、边框（border）、边界（margin）等基本属性，CSS框也具有这些属性，框模型非常清晰。
1. 网页居中，运用 css 中 margin:0 auto；控制即可以使网页居中，方便快捷。
2.网页的布局主要由框设置为浮动位置，浮动元素从原始占位符中移除元素。让元素左右移动，直到其外边缘到达包含块或另一个浮动元素的边缘。
其中，第四采油厂门户网站的主页可分为六个部分：网站LOGO区域，网站导航区域，网站主区域，网站新闻区域，网站友情链接区域和网站版权信息区域。在此，对其展开论述，具体如下:
（1）网站 LOGO 区域：用来显示企业名称和其 LOGO 标志图片。
（2）网站导航区域：以导航链接列表的形式显示指向网站每个功能模块的超链接[2]。主要链接包括主页链接，大庆油田内网链接，大庆油田外网链接，公共链接链接，代理部门链接，工厂单元链接，个人助理链接，交互式通信链接，热线链接，工厂主管邮箱链接和信息报告链接。
（3）网站主体区域：使用无序列表UL标记显示集成的应用程序平台，功能列和工厂内链接。
（4）网站新闻区域：显示厂内的近期新闻列表。使用div和无序列表 UL 标记的形式。
（5）网站版权信息区域：显示4号采油厂门户系统的版权信息，帮助信息，联系信息和门户地图。
在CSS矩形中，CSS样式在每个DIV元素上调用，并在虚构的矩形格式模型中处理。 使用矩形模块时，可以通过匹配“边距”、“边框”和“填充”属性来更好地控制DIV元素的样式。
三、DIV+CSS技术在网页布局中的优势
（一）分离内容与样式，精简代码
修改外部样式表中的CSS样式属性来更改整个站点的布局。通过分析应用程序CSS的布局技术，您可以发现CSS样式的布局代码更简洁。由此可见，CSS布局方式具有明显的优势。
（二） 浏览页面更快速
与传统的表嵌套布局相比，这种布局技术可以显着提高Web 浏览和加载的速度。这是因为当实现相同的页面效果时，布局技术的页面容量小于表格布局。
（三） 方便进行网页维护
若页面需要修改，往往需要改动大量代码，会极大增加网页设计人员的工作量，在网页布局中使用 DIV+ CSS技术时，有利于控制样式，降低网页维护难度，方便网页修改。
四、结语
本文以DIV + CSS技术为例，介绍了这种布局技术在企业门户的实际应用，并简要介绍了网页的制作过程。随着网络技术的不断创新和发展，DIV + CSS布局技术在网站设计中具有广阔的应用前景。H
css实现三列布局参考文献
[1] 刘小艮.网页设计中 DIV+CSS 布局技术的应用实践探讨[J].无线互联科技 ,2015(23):34-35.
[2]洪秀金.DIV_CSS技术在网页布局中的应用[J].电子技术与软件工程 ,2016(12):30-30.
（作者单位：大庆油田第四采油厂信息中心）
采用 DI V +CS S 技术的内网门户的设计和制作
——以大庆油田第四采油厂为例
赵    菁
◆　摘要：随着油田门户的升级，现在油田门户在设计方面及网站布局方面有详细的规定及要求。论
文以采油四厂主页为例，介绍在新规定下门户网站的设计和DIV+CSS网页布局模式在新采油四厂主页
的应用。
关键词：门户网站设计；DIV+CSS ；设计；制作
信息系统工程 │ 2019.3.2051

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。