企业信息门户专题网页制作新方法探究.doc

企业信息门户专题网页制作新方法探究 　　[摘 要] 近年来专题网页已成为企业信息门户对内对外宣传的重要手段之一，本文通过实例介绍作者在设计制作专题网页过程中研究出的对不同类型专题采取不同的制作方法，利用Photoshop切片工具进行图形切片时的技巧和导出html文件在企业信息门户中快速完成不同类型专题网页制作， 供专题网页制作时借鉴参考。 [关键词] 专题网页；制作；Photoshop；切片；企业信息门户 doi ： 10 . 3969 / j . issn . 1673 - 0194 . 2014 . 04. 032 [中图分类号] F272.7 [文献标识码] A [文章编号] 1673 - 0194（2014）04- 0064- 04 1 前 言 中石油门户建设从2001年10月开始，已成为中石油自上而下宣传企业文化、企业理念、企业新动态，对外宣传企业形象、对内服务于油田生产的平台。专题网页由于其主题鲜明，信息量大、时效性强、强有力的视觉效果而逐渐成为企业门户的一种重要宣传手段。新疆油田公司各二级单位专题网页的制作数量由2011年的99个上升到2012年的212个。如何在企业门户快速完成网页的制作，笔者在大量的专题网页制作过程中，参考 《中国石油企业信息门户快速搭建手册》（以下简称《搭建手册》）进行专题网页制作的同时，从中研究出了一些更为简捷的在企业信息门户快速制作各具风格专题网页的方法，与门户管理及专题制作人员进行交流。 2 专题网页制作方法要点 2.1 专题网页分类及页面布局 专题网页按其时效性可分为网站型、常规型、展板型专题。网站型专题宣传周期长，有专人负责，网站要涵盖所有工作情况，不但有动态新闻还有各种文档不断更新。常规型专题和展板型专题时效性强，专题完成要紧跟活动节奏，否则将失去宣传意义。常规型专题可页面嵌套图片新闻、滚动图片、动态新闻、视频等，以增强视觉效果，在活动期内需及时维护。而展板型专题指纯文字及图片的网页，在Photoshop里即可完成，网页做好后一般不会再进行更新维护。 中石油门户信息系统页面布局模板主要有两栏、三栏、通栏等。网站型专题一般设计风格简约，页面布局规范，有章可循，栏目放置有序，主次关系分明（便于后期栏目调整更新），一般采用两栏或三栏布局。而常规型及展板型专题时效性强，主要是为了达到宣传主题效果，故采用通栏布局即可。 下面以《HSE管理体系推进工作专题》（网站型专题）、公民道德建设月（常规型专题）的制作为例，介绍如何利用Photoshop切片工具对图形进行切片时的技巧和导出的html文件在企业信息门户中快速完成网（站）页制作。 2.2 网站型专题页面制作 2.2.1 在Photoshop中进行UI设计 UI（User Interface，用户界面）设计指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计通常使用的图像处理软件——Photoshop为Adobe公司旗下知名图像处理软件之一。 因《HSE管理体系推进工作专题》内容及栏目较多，决定使用三栏布局的模式。首先在Photoshop中设计模板，版面设计包含用户需求，符合宣传企业形象、展示企业文化、实现部门之间的信息沟通等要求。 2.2.2 按网页的结构和图片的特点进行切片 切片的质量直接影响后面进行页面制作时的效果，是页面制作的关键步骤，遵循以下原则： （1）每列的切片宽度必须一致、对齐，页面设计中填写文字或嵌套页面有背景的一定要切，无背景的地方可以不切。如在图1中间列，除通知通告、推进周报、推进动态等标题需要切片，其他部分不用切。 （2）切图时用好参考线。参考线能保证切出图在同一表格中的尺寸统一协调，有效避免“留白”和“爆边”。 （3）如果效果图中存在head和foot，head和foot必切，在页头、页脚文件中要单独使用。 （4）大图像必须切分成均匀小图，以提高网页下载速度。 2.2.3 存储切片 使用 “文件—存储为Web所用格式”命令存储切片。切片存储格式一般为GIF格式，占用体积小，要求较高的图像存储为JPEG格式，显示更多的图片细节。保存类型选择“仅限图像”。 2.2.4 网站制作 （1）参考《搭建手册》，创建新网站。 （2）将制作好的图片资源上传至当前网站PageAssets文档库Images文件夹。 （3）编写页头、页脚文件。运用记事本编写以下代码，不同网页只需修改width和height数值和head或foot图片。 （4）页头、页脚代码上传 将页头、页脚HTML代码替换当前网站[WebPropertyDocument]文档库下的