基于DIV+CSS的大庆油田门户网站web前端设计与实现,网页设计论文

网页设计与制作论文第八篇：基于DIV+CSS的大庆油田门户网站web前端设计与实现

　　摘要：随着油田门户的升级, 现在油田门户在设计方面及网站布局方面有详细的规定及要求。论文以采油四厂主页为例, 介绍在新规定下门户网站的设计和DIV+CSS网页布局模式在新采油四厂主页的应用。

　　关键词：门户网站设计; DIV+CSS; 设计; 制作;

　　一、油田门户网站的设计与应用

　　(一) 界面设计

　　?首先要考虑风格定位。门户网站是大庆油田整体形象的网络展示, 应具有统一的网站风格形象。在设计上, 要注重突出中国石油工业的特点, 体现“贡献能源, 创造和谐”的企业宗旨。

　　其次视觉流程合理。企业门户网站应具有统一的颜色样式, 不超过三种主要颜色。主要颜色是指网页中的主色调, 即可以反映网站形象并扩展其内涵的颜色[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布局技术在网站设计中具有广阔的应用前景。

　　参考文献

　　[1]刘小艮.网页设计中DIV+CSS布局技术的应用实践探讨[J].无线互联科技, 2015 (23) :34-35.

　　[2]洪秀金.DIV_CSS技术在网页布局中的应用[J].电子技术与软件工程, 2016 (12) :30-30.