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

郑金风 王晓君 于文芳 艾山江·吾斯曼

[摘 要] 近年来专题网页已成为企业信息门户对内对外宣传的重要手段之一，本文通过实例介绍作者在设计制作专题网页过程中研究出的对不同类型专题采取不同的制作方法，利用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]文档库下的[channelhead.html]/[channelfoot.html]文件内容。

（5）页面部件设计

①拖放Web部件

点击主页右上角“修改共享网页”—添加Web部件 —“浏览”，将“Web部件列表”中的“内容编辑器”分别拖入页面左栏、中栏、右栏。一般左栏、右栏结构相似，图片排列有序，可以在一个表格内有序插入图片，在需输入文字的地方，把图片设置成背景。

②左栏代码输入

点开界面右边的“源编辑器”，在弹出的网页对话框内编写以下代码，修改table宽度、图片名称、链接地址及增减图片，可实现不同页面。

领导小组 ……

③右栏代码的输入同左栏。

④中间的Web部件一般采用页面嵌套方式，结构与左右栏相似，打开中间栏“源编辑器”，输入以下代码，修改表格宽度、频道地址、图片名称可实现不同页面。

……

通过上述步骤方法，完成《HSE管理体系推进工作专题》网站制作，见图2。

2.3 常规型专题网页制作

常规型专题网页主题鲜明、时效性强，网页制作要快，可以直接使用Photoshop切片后导出的html文件，以节省网页制作时间。本节以公民道德建设月专题（见图3）为例，介绍常规型专题网页制作要点。

2.3.1 切片时的要点

切片时只需将嵌套页面或加链接的位置切出（见图4），作为网页中嵌套页面或链接所用，其他部分会自动生成附加切片。

2.3.2 保存为Web所用格式时要点

在点击“存储为Web所用格式”时，保存类型选择“HTML和图像”，在所选保存文件夹下自动生成一个HTML文件、自动创建一个Images文件夹，所有切片保存在Images文件夹内。

2.3.3 专题网页制作

（1）主站下建一文档库如：[专题]，将上述Photoshop生成的html文件及Images文件夹上传至[专题]文档库内。

（2）在需要嵌套页面的切片所在的单元格内，输入相应代码（主要采用iframe嵌套，见网站型专题制作2.2.4 （5）④，注意代码定义的宽和高不能超出原图片的大小，否则会出现“留白”和“爆边”。

通过以上步骤，完成常规型专题网页制作。

2.4 展板专题网页制作

展板专题型网页制作相对简单，只需在Photoshop里完成模板设计，将模板上的文字与图片切片，保存方法与常规展板相同，将生成的html文件及Images文件夹上传至[专题]文档库内，完成展板型专题网页的制作。

3 三种页面制作方法优劣对比

（1）网站型专题模板（以下简称第一种方法）切片时要特别注意每列切片的宽度要一致，否则会出现“留白”和“爆边”。常规型专题网页模板切片（以下简称第二种方法）时只需将需填充内容或加链接的位置切出，其他部分不需切片。而展板型网页模板切片（以下简称第三种方法）时，只需将展板模板上的图片或文字进行切片，以方便文字修改或图片更换。

（2）第二、三种方法由于直接使用Photoshop生成的html文件，比第一种方法更简单，更能节省时间。

（3）如用户对网页版面改动较多，使用第一种方法比较好，网页增减内容只需在相应Web部件里增减行，对表格或单元格高度没有要求，相应图片可单独做，只要宽度一致。第二种方法对所要嵌套页面或添加的内容的宽度和高度都有严格要求，不能超过背景图片的宽度和高度，否则会出现“留白”和“爆边”，如果用户需改变切片大小，整个网页须重新生成。第三种方法由于只在Photoshop里操作，方便灵活，但板面单一，无动态更新内容。

4 结束语

在如今的信息网络时代，应用企业信息门户平台制作专题网页对企业重大活动及企业动态进行宣传，愈来愈成为企业对内对外宣传的重要手段，做好专题网页的制作是各单位门户管理员及专题制作人员的重要工作之一。本文采用目前普遍使用的table编写方式，使用DIV+CSS编写的用户只需在制作网站型专题时使用DIV+CSS便可实现。本文介绍的3类专题网页设计方法，简单实用，方便快速套用，可供其他专题网页制作时借鉴参考。

主要参考文献

[1]浅谈photoshop在网页布局设计中的意义与方法[EB/OL]. http：/wenku.baidu.com/view/6c3cb30d6c85ec3a87c2c508.html.

[2]维基百科.微软 SharePoint 系统 [EB/OL]. http：//zh.wikipedia.org/wiki/Microsoft_Office_SharePoint_Portal_Server.

[3]Photoshop切片工具 [EB/OL].http：//wenku.baidu.com/view/e542c12ce

d630b1c59eeb5ae.html.