单位网站及息应用系统界面规范.docx

附件一单位网站及信息应用系统界面规范(试行版)油田外部网站油田外部网站的网页界面框架包括页眉区、栏目导航区、内容区、页尾区。界面布局如下：网页宽度1000px；页眉区高度78px；栏目导航区高度29px；主题宣传区整宽或2/3整宽、高度控制在230px以内；页尾区高度65px。页面背景色为白色。页眉区页眉包括标识、标题、站外热区、语言切换、内容搜索。左侧为中石化标识、胜利油田中英文简称组合，右侧是站外热区、内容搜索、语言切换。页眉区底色为白色。样例：参数说明标识采用标准色的中石化标识：红色（R:255, G:0, B:0），黑色（R:0,G:0,B:0）。标识宽高：48px*50px；距页眉上边距14px；距页眉左边距20px。标题标题由主标题和子标题组成，主标题与子标题使用“”符号居中间隔。标题采用中石化与胜利油田中英文简称组合。主标题为“中国石化”，文字字号26px，字体：汉仪大宋简体，黑色；距页眉上边间距32px，距左边中国石化标识间距10px。子标题为“胜利油田”，文字为字号28px，朱德体，黑色；距页眉上边间距28px，距主标题间距25px。英文为中国石化胜利油田简称大写“SHENGLI OIL FIELD OF SINOPEC”，文字为字号12px，Arial Rounded MT Bold，黑色。标题与中国石化标识组合如下：站外热区、内容搜索框、语言切换链接站外热区用于链接中石化门户网站及中石化网站群，使用“|”分割符及空格符号分隔。文字字号为：12px，字体：宋体，色值：#000000，导航链接文字距页眉上边距47px，最右侧距离页眉右边距25px，距离页眉下边距10px。语言切换链接、内容搜索框根据需要定义。语言切换链接文字为字号：12px，字体：宋体，色值：#000000；距上边距10px。内容搜索框距上边距15px。栏目导航区高度：29px，文字字号：14px，字体：宋体加粗，色值：#ffffff；间距根据导航链接数量横向均匀分布，距离网页左右两侧边距25px。主题宣传区网站首页包括主题宣传区，放置主视觉图，主视觉图整宽或2/3整宽、高度控制在230px以内。页尾区必须包括版权信息、维护信息，其它信息可根据需要做适当添加。页尾区高度：65px； 文字字号：12px，字体：宋体，色值：#000000。样例内部单位网站油田局域网内各级单位网站的界面框架包括页眉区、栏目导航区、系统登录区、内容区、页尾区。界面布局如下：网页宽度采用1000px，页面背景色为白色；页眉区高度78px；栏目导航区高度29px；系统登录区高度29px。页尾区高度65px。页眉区页眉区包括标识、标题、主题宣传图、站外热区构成元素，页眉区底色为白色。其中左侧为标识(Logo)、标题，右侧是主题宣传图、站外热区构成元素组合。样例：参数说明标识采用中石化标识与胜利油田名称竖排版式组合样式。标识采用标准色：红色（R:255,G:0,B:0）；黑色（R:0,G:0,B:0）。宽高：55px*66px；距上边距14px；距左边距20px。胜利油田字样为朱德体黑色（R:0, G:0,B:0）。标题由主标题和子标题组成，主标题与子标题使用“”符号居中间隔。主标题为单位名称或网站名称，子标题用于标识所属三、四级单位或网站专题名称。其中主标题文字26px汉仪大宋简体黑色（R:0,G:0,B:0），距页眉上边间距32px，与标识右间距10px；子标题文字字号：22px，字体：黑体，色值：#000000，距页眉上边距35px；距主标题文字间距25px。胜利信息网标题：胜利信息网二级单位标题：二级单位或机关部门名称。三级单位标题：由二级单位名称（主标题）+三级单位名称（子标题）组合而成。四级单位标题：由二级单位+三级单位名称（主标题）+四级单位名称（子标题）组合而成。说明：三级及四级单位名称较长时可使用统一的简称。宣传图宣传图中间偏右不覆盖标题名称，图片背景与页眉左侧白色背景衔接自然。口号文字字号：18px；字体:微软雅黑。距页眉上边距17px。站外热区站外热区用于链接其它网站，导航链接使用“|”分割符及空格符号分隔；链接文字字号：12px，字体：宋体，色值：#000000。链接文字距页眉上边距47px，最右侧距离页眉右边距25px，距离页眉下边距10px。栏目导航区栏目导航区用于网站内部栏目导航。栏目导航区高度：29px。必须使用统一的背景：样例：左侧日期文字字号：12px，字体：宋体，色值：#ffffff。右侧栏目文字字号：14px，字体：宋体加粗，色值：#ffffff；间距根据导航链接数量横向均匀分布；距离网页左右两侧边距25px。系统登录区用于网站或系统登录，区域高度：29px。胜利信息网系统登录区用于登录油田工作平台。样例：左侧登录控件文字字号：12p