(整理)单位网站及信息应用系统界面规范.

1、精品文档附件一单位网站及信息应用系统界面规范（试行版）油田外部网站油田外部网站的网页界面框架包括页眉区、栏目导航区、内容区、页尾区。界面布局如下：©语言切换1主标题子标题站外熬区内容搜索栏目导航区主题宣传区（此区蛀可以整宽或2 3宽）内容区页尾区网页宽度1000px;页眉区高度78px;栏目导力区高度29px;主题宣传区整宽或2/3 整宽、高度控制在230Px以内；页尾区高度65px。页面背景色为白色。（一）页眉区页眉包括标识、标题、站外热区、语言切换、内容搜索。左侧为中石化标识、胜利 油田中英文简称组合，右侧是站外热区、内容搜索、语言切换。页眉区底色为白色。样例：g中国石化，游见他

2、由WHEHGU OIL F吒L。Of 自阳。PZ精品文档1、 参数说明me的标识：主标题支字K小：交奇48pK X 50贯;?,口工：子除,况设也上包更14的；距大云简恒:其上三?左边法20pt;用立PK ；胆左边标识同回即可子阮皿宁大小： 28px ;宇律：生待 休距上过距30口K ； ，自左由主而甲w不可 磔 5Px ;站外隹撒舒区文字大小： 1?*;字体：*惇;距上边电 47px ;单个程S之间空四个字符. 四个字行中回加分倒囊;扇有仙 里柔框r距弯与运距心口风10pM J出吉切度三字 大小：1?pK ；字 保：乐休；距上记 Silflpx :行记用 15P百2、 标识采用标准色的中石化

3、标识：红色（R:255, G:0, B:。，黑色（R:0,G:0,BQ。标识宽高: 48Px*50px;距页眉上边距14px;距页眉左边距20px。3、 标题中国石化吊利油田5HENGLI OIL FIELD OF SINOPEC标题由主标题和子标题组成，主标题与子标题使用“”符号居中间隔。标题采用中石化与胜利油田中英文简称组合。主标题为“中国石化”，文字字号26px,字体：汉仪大 宋简体，黑色；距页眉上边间距 32px,距左边中国石化标识间距10px。子标题为“胜利 油田”，文字为字号28px,朱德体，黑色；距页眉上边间距 28px,距主标题间距25px。 英文为中国石化胜利油田简称大写“

4、SHENGLI OIL FIELD OF SINOPEC字为字号12px, Arial Rounded MT Bold,黑色。标题与中国石化标识组合如下：g中国石化吊利池田SIL温 SHENGLI OIL FIELD OF SINOPEC4、 站外热区、内容搜索框、语言切换链接站外热区用于链接中石化门户网站及中石化网站群，使用“|”分割符及空格符号分隔。文字字号为:12px,字体：宋体，色值：#000000,导航链接文字距页眉上边距 47px, 最右侧距离页眉右边距25px,距离页眉下边距10px。语言切换链接、内容搜索框根据需 要定义。语言切换链接文字为字号：12px,字体：宋体，色值：#0

5、00000;距上边距10px。 内容搜索框距上边距15px。（二）栏目导航区高度：29px,文字字号：14px,字体：宋体加粗，色值：#ffffff ;间距根据导航链 接数量横向均匀分布，距离网页左右两侧边距25px。（三）主题宣传区网站首页包括主题宣传区，放置主视觉图，主视觉图整宽或 2/3整宽、高度控制在 230Px以内。（四）页尾区必须包括版权信息、维护信息，其它信息可根据需要做适当添加。页尾区高度：65px; 文字字号：12px,字体：宋体，色值：#0000000（五）样例中国石化，加力曲田SH EMGLI OIL FIELD OF StMOPEC中国方11； I中国石化网站拆首页 强

6、册介用 胜利斯河 史第发展用 人权一胜M文化社叁质任胜利油田发现50周年产油1。亿吨总结表彭大会隆重举行It利油田&第加削R&IU亿”总结式 舞*道堂堂杆一细聚山制陶眸r工作十触北”4,席集由士雄兔十用山东6委收补公具制山书影推韵蜂事文世强皆重总碍更大贵K匚国姓产克山布后宰+ T也在k金开售通51昌阜付壮秋鹏市省霓1蛤畀/沔耳勇宏篇坦墙净推斗士在侬田廊用代，鼻企黄注请谭振吉三春日园雷亍卷幅党委表言:史忡中央正胸夬走至，油田国开罡通工侑囹砧孙蝮招鞭相怅内部单位网站油田局域网内各级单位网站的界面框架包括页眉区、栏目导航区、系统登录区、内 容区、页尾区。网页宽度采用1000px,页面

7、背景色为白色；页眉区高度78px;栏目导航区高度29px; 系统登录区高度29px。页尾区高度65px。（一）页眉区页眉区包括标识、标题、主题宣传图、站外热区构成元素，页眉区底色为白色。具 中左侧为标识（Logo）、标题，右侧是主题宣传图、站外热区构成元素组合。样例：4E3现河采油厂，采油一矿雅河东逢I油用王再显机号摩'五而朝若工明一苻而 半产午而帧质卡页竟通信息安全羊页藕讦酬薪1、参数说明标识大小：声第 5印xX6印X；啊I也 距24px ;距左边距 20px ：主麻强才大 小：?6pw ;字体: 区位大米简：布上 边同走32Px ；距 左边9GC间距 工即、；子标捶R于大 小：2年

8、 ;字体： 黑沐走上边泥 35pjc :距王边主 标题立学间距 35 P® :FLASH 口号：ISpK； 字休：博解距上边距 S7px :在整个网站中同假 石E （背金啥串巨仰白 色音事祐援自爆.四案氐落 及色墙不密使性当事）:拈小枝掂中区直字七小： 1不、：手体：布便：距上边吃 47px ：羊邛举"区之间空四个字 符.四不字将中间t吩炎践：霞 右僮正哩三边距上物,距曲下口叫2、 标识采用中石化标识与胜利油田名称竖排版式组合样式。标识采用标准色：红色（R:255,G:0,B:0;黑色（R:0,G:0,B:0。宽高：55Px*66px;距上边距 14px;距左边距 20px

9、。 胜利油田字样为朱德体黑色（R:0, G:0,B:0。3、 标题由主标题和子标题组成，主标题与子标题使用“”符号居中间隔。主标题为单位名称或网站名称，子标题用于标识所属三、四级单位或网站专题名称。其中主标题文字 26px 汉仪大宋简体黑色（R:0,G:0,B:0,距页眉上边间距32px,与标识右间距10px;子标题文字 字号：22px,字体：黑体，色值：#000000,距页眉上边距35px;距主标题文字间距25px。胜利信息网标题：胜利信息网胜利信息网打造世界一流实现率先发塞堇一 ，的打勒.可冈I甘甘邵 I胖剂”郃刊 岂写花air年h月广口 一 首用生产隆匹胃后且J业后且也算在疏胜一月刊苧应

10、祐V驻科疗昧二级单位标题：二级单位或机关部门名称现河采汕厂J.H PA. Jfk国家为福 以油为业 以人为本 以和为"由三王页I鞋为异尻I瓷曲麻斋皮辛输由三级单位标题：由二级单位名称（主标题）+三级单位名称（子标题）组合而成现河果油厂，果油一矿主前黄超全任打造楣升一丁强可三由一 |把田三页I院可号胧I直何超普H质 中产*质 卷后干再竟琮借兔安家中菽 iKTtt瘠*制有*步|注力四级单位标题：由二级单位十三级单位名称（主标题）十四级单位名称（子标题）组 合而成。igwa克问酷哥现河果油厂采油二矿*枭油11队常郎空起同谋发展之路酰 胡:年啊用室朋首内 梭申报 下层博比九能 LfF呈眸星

11、STHte说明：三级及四级单位名称较长时可使用统一的简称4、 宣传图宣传图中间偏右不覆盖标题名称，图片背景与页眉左侧白色背景衔接自然。口号文 字字号：18px;字体：微软雅黑。距页眉上边距17px。5、 站外热区站外热区用于链接其它网站，导航链接使用“|”分割符及空格符号分隔；链接文字字号：12px,字体：宋体，色值：#000000。链接文字距页眉上边距47px,最右侧距离页 眉右边距25px,距离页眉下边距10px。（二）栏目导航区栏目导航区用于网站内部栏目导航。栏目导航区高度：29px。必须使用统一的背景:样例:心律加口u空m首面生产蛇苜l启坛包 企北匕自 ，餐在歧驻8月旧单曲站a左侧日期

12、文字字号：12px,字体：宋体，色值：#ffffff 。右侧栏目文字字号：14px, 字体：宋体加粗，色值：#ffffff ;间距根据导航链接数量横向均匀分布；距离网页左右 两侧边距25px。（三）系统登录区用于网站或系统登录，区域高度：29px。胜利信息网系统登录区用于登录油田工作 平台。样例：工tr平白 居的电子R刊左侧登录控件文字字号：12px,字体：宋体，色值：#000000。右侧链接文字可使用 艺术字体（例如：微软雅黑、方正黑体、综艺体等）。（四）页尾区必须包括版权信息、维护信息，其它信息可根据需要做适当添加。页尾高度：65px; 文字12Px宋体，色值：#0000000（五）样例1

13、、 胜利信息网样例胜利信息网打造世界一SI实观率先发展由由lr=«H石情艮常修站点用户:柱卑电子即引/奇守固I牲利好因I，杼、牌用在利异餐社 tsMia“KM交 It节ji烛图坳闻珀m日豌于雎 梆团叫范施=与吟菊i酬）,为月日关千加和P手日脂就笥刊循抑咫算的明.'二二：1苛加巴+左日内】7-卜补限在卿1司溺干窜座读舍上钻F伊通常代装蜡化犀一力不主弋富卮 或足三国门而浦ST梯向F t二，由用就湎的胞住酬;他呼安有可钎用蝌西邰评匡曲第寻植领司台临宛南团召开M区辐能三二惘肿除* WIZHU '"际t三台”让国工阴酒仔弓足 一尸月1后TH开1 vi'f

14、9;T-孙麻口千皆士1：之中石"ft石虹等技 H叁km,则也叫齐唯区前各 国生笠晒展是日三学优'？*万 ha n上新前转笠守,如方.层方K保i&e喷芭挣婆定更v n 口山l，麻票tt 剧.*琳 110. !2 to. !3t石化窗韵座堂« 01 « lit生产动态“，川左武司4属讪人r4学生二厘山区 %甫箪土划曲it “三耳”上楼，堂琨河乖BOT二向员丁国旗庚*- 展%3用目 襁阚而» "也刊目£救箕士口中隹的1"，i，侬口 K道福1圣_1强二若果二质目件e 、itW薨密;工程於珞一三紫二一 ，二笈铺i 7；

15、可阿斯咏白的里保平#工 ,册制防晒®?OKBiHttfr谴 酒口厂配h中着.理，.tUE堇源S,党津工作 可口让£斯在置员版社I，皿8挣“ a怫M注也足电力三P比壬誉：阳 砧当物让佳龙缶国克孟：.诲制便怅.河口社区辟党员命社:这里电声 财和T： '"五比T"促1幅” 万口社区慝丰宣励庸世：黜及孝一 黄寿占井3将班需集季区” . 胜于褊华庭一其刊听黄社：瓦三面上*- 吨;甲Hl二IT苴并允屈片上M段白“ Hi距览我豆B即他也鼎德 岫工处可中 <,宣:白：堆百土云Ta U企曹管用I-d【犷啃苣察】手可倒1的工勺间五列屈冲 后国西附码甫同）御卡B

16、 mfiiiinn Kumms 而月官阵1件宾号T据附语lEfett 睥目WWI如中工所电干口工：0日 比hE】T并两邨即SE国 用嘲胃淅济而阖一位休司偿 洋吟三川忤可二户市九十二并忸巧 值即徜好再瞧后曲H E卡由耳】非型,显XI出仰百 呻舌看31也算沾*博可而给人大亶/” EM再用1血警惕企助瞒B脸旷旗 W不赭者|与U音 拜 碓的r:r'资畲叶“ ,-a. - u-s .a II -kg 4 jE党委宣传部fir 41寇彻2、 单位网站样例工潘胜利文化 圈警油田发幅田上交亚利易E I ti和导航I查服*望号2口阳月昨里织一 首责学门博介姓至文件成果要普静那甘案书赠君动创新触I康日通餐

17、餐系H 1 t *一 E石限9偿|1州随*D附通出追开完也氮文化工作控检一T前于宠由田札工特辆共呼胃工作7出蝎典工成枢护大事鳍星上出WSE餐餐批天甚气其校革实, '1比值其独金空蒂Z夫”懵楫忠事与行蛙务社叵盾窑手堆毛酒'皿号厂喈号次门武化工框11高盘W、T季方成再伸*mh置H，FJHF：粕憬阕工4拽盛宝通必鬲aMI占葬五公即般It"狂中幽认"到挣作鹿西翁石由工程中唱青者宣声国忠至人人3e0l3-(K-?1 I eOlS-M-fl) CniEMTlJ cni2-«-?i) E2flL2-Ofr-?l) CDlf-D6-fl) ol*力e/】) OOL

18、E-M-)(3DL_-U6<1 i (3012-06-211T皖更令i *h抬告*峭】*Bftfl m田西滓生户h体中r.*F自事 格赛工告*阴哨技&o i生被号琳利日期的通视-姻咱?月H情月比花由年排伸*。丹II日*于e/«KHKrntift-iiT催中1 匚病悔府新忖市怎小区告处英康周M* 好翻1曼通勤匕告»三、 应用系统应用系统的界面框架包括页眉区、菜单区、内容区、页尾区。 界面布局如下：土标题子标题1。题名称）页后区系境控件（首更I部勖I退出I功能模块菜革区内容区页尾区页面宽度1000Px或自适应，页面底色为白色。页眉区高度78px;菜单区高度29px

19、; 页尾区高度29px。（一）页眉区包括标识、标题、系统按钮，其中左侧为标识和标题，右侧是系统按钮组合，常用 按钮样式固定。页眉区统一使用如下背景图:样例:首口 堂勒里出1、 参数说明标正虎常上诂距7|5.睁芹 力距1弓p,;主标垣文字： 26px ,汉悦大卡简伍； 电iih同版32Px;距 左法IOG口同/1 W* :子GK字：22px . 里任：柜上江兔1，|» : 距左必主除骰文字间距 25 px ；设豆，楼助苧披秘：竞与控制在 3叩xX45p并以内抵衽聋百万文字为上下而同， 文字:l?px ,求你;口巳巨I郎* ,距南加边 沟:5p* ;临忸词用为1即02、 标识用+#油田采

20、用中石化标识与胜利油田名称竖排版式组合样式。标识采用标准色：红色（R:255,G:0,B:0 ;黑色（R:0,G:0,B:0。宽高：55Px*66px;距上边距 7px;距左边距 15px。胜利油田字样为朱德体黑色（R:0,G:0,B:（3、 标题由主标题和子标题两部分组成，主标题与子标题使用“”符号居中间隔。主标题为系统名称，子标题用于表示专题名称，子标题根据需要使用。其中主标题文字字号：26px, 字体：汉仪大宋简体，色值：#000000;距页眉上边间距32px,与标识右间距15px。子 标题文字字号：22px,字体：黑体，色值：#000000;距页眉上边距35px,距主标题文字 间距25

21、px。4、 系统按钮按钮宽高控制在30px*45Px以内，图标与按钮文字名称为上下布局；按钮距页眉上 边距10px,按钮间距为15px,距页眉右侧边距25px。必须包括首页、帮助、退出按钮, 其余按钮可根据需要增加。常用按钮及样式如下：赴而设后浜她看出首页按钮用于首页面调用；设置按钮用于设置系统功能；帮助按钮用于帮助界面调 用；退出按钮用于退出系统。（二）菜单区菜单区左侧用于显示用户信息或当前页面位置信息，右侧放置菜单功能模块。菜单 区高度：29px,菜单区统一使用如下背景色：菜单与页眉的组合样例:作平分饰，W 卜-斗 皿印眦帆公 话史国富豕域导IS菜单左侧用户信息或当前页面位置信息文字字号：

22、12px,宋体，色值：#ffffff 。右侧菜单功能模块间距根据数量横向均匀分布，默认文字14Px宋体白色，色值：#ffffff ;当前选中菜单背景色为白色，文字字号：14px,字体：宋体，色值：#000000。当前菜单建议样式:（三）页尾区包括版权信息、维护信息，其它信息可根据需要做适当添加。页尾高度：29px;文字字号：12px,字体：宋体，色值：#0000000（四）样例1、 样例一0作平台M，：法闻端点 jwm旧弘：，片他因力作不： ：、4茕1产天舟出中止工"2、 样例二测井公司职庭笔福档案首痘之励登出i人员su侑息列表并就*av» 姓名 性都 出生月9 目淅*税底需，制启用工性Wtlit1.超信甲坨八口用时看附件胜利油田外部汇报模板封面正报单位名称多媒体汇报材料界面规范（试行版）油田外部汇报模板向中石化总部等上级部门汇报时使用（一）标题页说明：1、位置：标题放在页面醒目的地方，约整个封面高度的中间靠上位置；单位名称放 在标题下面与标题左对齐；汇报时间放在下方居中对齐；2、字体：统一使用黑体；3、字体颜色：黑色，色值：（R:0,G:0,B:0 ）;4、字号大