企業(yè)信息門戶專題網(wǎng)頁制作新方法研究

鄭金風(fēng) 王曉君 于文芳 艾山江·吾斯曼

[摘 要] 近年來專題網(wǎng)頁已成為企業(yè)信息門戶對(duì)內(nèi)對(duì)外宣傳的重要手段之一，本文通過實(shí)例介紹作者在設(shè)計(jì)制作專題網(wǎng)頁過程中研究出的對(duì)不同類型專題采取不同的制作方法，利用Photoshop切片工具進(jìn)行圖形切片時(shí)的技巧和導(dǎo)出html文件在企業(yè)信息門戶中快速完成不同類型專題網(wǎng)頁制作， 供專題網(wǎng)頁制作時(shí)借鑒參考。

[關(guān)鍵詞] 專題網(wǎng)頁；制作；Photoshop；切片；企業(yè)信息門戶

doi ： 10 . 3969 / j . issn . 1673 - 0194 . 2014 . 04. 032

[中圖分類號(hào)] F272.7 [文獻(xiàn)標(biāo)識(shí)碼] A [文章編號(hào)] 1673 - 0194（2014）04- 0064- 04

1 前 言

中石油門戶建設(shè)從2001年10月開始，已成為中石油自上而下宣傳企業(yè)文化、企業(yè)理念、企業(yè)新動(dòng)態(tài)，對(duì)外宣傳企業(yè)形象、對(duì)內(nèi)服務(wù)于油田生產(chǎn)的平臺(tái)。專題網(wǎng)頁由于其主題鮮明，信息量大、時(shí)效性強(qiáng)、強(qiáng)有力的視覺效果而逐漸成為企業(yè)門戶的一種重要宣傳手段。新疆油田公司各二級(jí)單位專題網(wǎng)頁的制作數(shù)量由2011年的99個(gè)上升到2012年的212個(gè)。如何在企業(yè)門戶快速完成網(wǎng)頁的制作，筆者在大量的專題網(wǎng)頁制作過程中，參考 《中國石油企業(yè)信息門戶快速搭建手冊》（以下簡稱《搭建手冊》）進(jìn)行專題網(wǎng)頁制作的同時(shí)，從中研究出了一些更為簡捷的在企業(yè)信息門戶快速制作各具風(fēng)格專題網(wǎng)頁的方法，與門戶管理及專題制作人員進(jìn)行交流。

2 專題網(wǎng)頁制作方法要點(diǎn)

2.1 專題網(wǎng)頁分類及頁面布局

專題網(wǎng)頁按其時(shí)效性可分為網(wǎng)站型、常規(guī)型、展板型專題。網(wǎng)站型專題宣傳周期長，有專人負(fù)責(zé)，網(wǎng)站要涵蓋所有工作情況，不但有動(dòng)態(tài)新聞還有各種文檔不斷更新。常規(guī)型專題和展板型專題時(shí)效性強(qiáng)，專題完成要緊跟活動(dòng)節(jié)奏，否則將失去宣傳意義。常規(guī)型專題可頁面嵌套圖片新聞、滾動(dòng)圖片、動(dòng)態(tài)新聞、視頻等，以增強(qiáng)視覺效果，在活動(dòng)期內(nèi)需及時(shí)維護(hù)。而展板型專題指純文字及圖片的網(wǎng)頁，在Photoshop里即可完成，網(wǎng)頁做好后一般不會(huì)再進(jìn)行更新維護(hù)。

中石油門戶信息系統(tǒng)頁面布局模板主要有兩欄、三欄、通欄等。網(wǎng)站型專題一般設(shè)計(jì)風(fēng)格簡約，頁面布局規(guī)范，有章可循，欄目放置有序，主次關(guān)系分明（便于后期欄目調(diào)整更新），一般采用兩欄或三欄布局。而常規(guī)型及展板型專題時(shí)效性強(qiáng)，主要是為了達(dá)到宣傳主題效果，故采用通欄布局即可。

下面以《HSE管理體系推進(jìn)工作專題》（網(wǎng)站型專題）、公民道德建設(shè)月（常規(guī)型專題）的制作為例，介紹如何利用Photoshop切片工具對(duì)圖形進(jìn)行切片時(shí)的技巧和導(dǎo)出的html文件在企業(yè)信息門戶中快速完成網(wǎng)（站）頁制作。

2.2 網(wǎng)站型專題頁面制作

2.2.1 在Photoshop中進(jìn)行UI設(shè)計(jì)

UI（User Interface，用戶界面）設(shè)計(jì)指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI設(shè)計(jì)通常使用的圖像處理軟件——Photoshop為Adobe公司旗下知名圖像處理軟件之一。

因《HSE管理體系推進(jìn)工作專題》內(nèi)容及欄目較多，決定使用三欄布局的模式。首先在Photoshop中設(shè)計(jì)模板，版面設(shè)計(jì)包含用戶需求，符合宣傳企業(yè)形象、展示企業(yè)文化、實(shí)現(xiàn)部門之間的信息溝通等要求。

2.2.2 按網(wǎng)頁的結(jié)構(gòu)和圖片的特點(diǎn)進(jìn)行切片

切片的質(zhì)量直接影響后面進(jìn)行頁面制作時(shí)的效果，是頁面制作的關(guān)鍵步驟，遵循以下原則：

（1）每列的切片寬度必須一致、對(duì)齊，頁面設(shè)計(jì)中填寫文字或嵌套頁面有背景的一定要切，無背景的地方可以不切。如在圖1中間列，除通知通告、推進(jìn)周報(bào)、推進(jìn)動(dòng)態(tài)等標(biāo)題需要切片，其他部分不用切。

（2）切圖時(shí)用好參考線。參考線能保證切出圖在同一表格中的尺寸統(tǒng)一協(xié)調(diào)，有效避免“留白”和“爆邊”。

（3）如果效果圖中存在head和foot，head和foot必切，在頁頭、頁腳文件中要單獨(dú)使用。

（4）大圖像必須切分成均勻小圖，以提高網(wǎng)頁下載速度。

2.2.3 存儲(chǔ)切片

使用 “文件—存儲(chǔ)為Web所用格式”命令存儲(chǔ)切片。切片存儲(chǔ)格式一般為GIF格式，占用體積小，要求較高的圖像存儲(chǔ)為JPEG格式，顯示更多的圖片細(xì)節(jié)。保存類型選擇“僅限圖像”。

2.2.4 網(wǎng)站制作

（1）參考《搭建手冊》，創(chuàng)建新網(wǎng)站。

（2）將制作好的圖片資源上傳至當(dāng)前網(wǎng)站PageAssets文檔庫Images文件夾。

（3）編寫頁頭、頁腳文件。運(yùn)用記事本編寫以下代碼，不同網(wǎng)頁只需修改width和height數(shù)值和head或foot圖片。

（4）頁頭、頁腳代碼上傳

將頁頭、頁腳HTML代碼替換當(dāng)前網(wǎng)站[WebPropertyDocument]文檔庫下的[channelhead.html]/[channelfoot.html]文件內(nèi)容。

（5）頁面部件設(shè)計(jì)

①拖放Web部件

點(diǎn)擊主頁右上角“修改共享網(wǎng)頁”—添加Web部件 —“瀏覽”，將“Web部件列表”中的“內(nèi)容編輯器”分別拖入頁面左欄、中欄、右欄。一般左欄、右欄結(jié)構(gòu)相似，圖片排列有序，可以在一個(gè)表格內(nèi)有序插入圖片，在需輸入文字的地方，把圖片設(shè)置成背景。

②左欄代碼輸入

點(diǎn)開界面右邊的“源編輯器”，在彈出的網(wǎng)頁對(duì)話框內(nèi)編寫以下代碼，修改table寬度、圖片名稱、鏈接地址及增減圖片，可實(shí)現(xiàn)不同頁面。

領(lǐng)導(dǎo)小組 ……

③右欄代碼的輸入同左欄。

④中間的Web部件一般采用頁面嵌套方式，結(jié)構(gòu)與左右欄相似，打開中間欄“源編輯器”，輸入以下代碼，修改表格寬度、頻道地址、圖片名稱可實(shí)現(xiàn)不同頁面。

……

通過上述步驟方法，完成《HSE管理體系推進(jìn)工作專題》網(wǎng)站制作，見圖2。

2.3 常規(guī)型專題網(wǎng)頁制作

常規(guī)型專題網(wǎng)頁主題鮮明、時(shí)效性強(qiáng)，網(wǎng)頁制作要快，可以直接使用Photoshop切片后導(dǎo)出的html文件，以節(jié)省網(wǎng)頁制作時(shí)間。本節(jié)以公民道德建設(shè)月專題（見圖3）為例，介紹常規(guī)型專題網(wǎng)頁制作要點(diǎn)。

2.3.1 切片時(shí)的要點(diǎn)

切片時(shí)只需將嵌套頁面或加鏈接的位置切出（見圖4），作為網(wǎng)頁中嵌套頁面或鏈接所用，其他部分會(huì)自動(dòng)生成附加切片。

2.3.2 保存為Web所用格式時(shí)要點(diǎn)

在點(diǎn)擊“存儲(chǔ)為Web所用格式”時(shí)，保存類型選擇“HTML和圖像”，在所選保存文件夾下自動(dòng)生成一個(gè)HTML文件、自動(dòng)創(chuàng)建一個(gè)Images文件夾，所有切片保存在Images文件夾內(nèi)。

2.3.3 專題網(wǎng)頁制作

（1）主站下建一文檔庫如：[專題]，將上述Photoshop生成的html文件及Images文件夾上傳至[專題]文檔庫內(nèi)。

（2）在需要嵌套頁面的切片所在的單元格內(nèi)，輸入相應(yīng)代碼（主要采用iframe嵌套，見網(wǎng)站型專題制作2.2.4 （5）④，注意代碼定義的寬和高不能超出原圖片的大小，否則會(huì)出現(xiàn)“留白”和“爆邊”。

通過以上步驟，完成常規(guī)型專題網(wǎng)頁制作。

2.4 展板專題網(wǎng)頁制作

展板專題型網(wǎng)頁制作相對(duì)簡單，只需在Photoshop里完成模板設(shè)計(jì)，將模板上的文字與圖片切片，保存方法與常規(guī)展板相同，將生成的html文件及Images文件夾上傳至[專題]文檔庫內(nèi)，完成展板型專題網(wǎng)頁的制作。

3 三種頁面制作方法優(yōu)劣對(duì)比

（1）網(wǎng)站型專題模板（以下簡稱第一種方法）切片時(shí)要特別注意每列切片的寬度要一致，否則會(huì)出現(xiàn)“留白”和“爆邊”。常規(guī)型專題網(wǎng)頁模板切片（以下簡稱第二種方法）時(shí)只需將需填充內(nèi)容或加鏈接的位置切出，其他部分不需切片。而展板型網(wǎng)頁模板切片（以下簡稱第三種方法）時(shí)，只需將展板模板上的圖片或文字進(jìn)行切片，以方便文字修改或圖片更換。

（2）第二、三種方法由于直接使用Photoshop生成的html文件，比第一種方法更簡單，更能節(jié)省時(shí)間。

（3）如用戶對(duì)網(wǎng)頁版面改動(dòng)較多，使用第一種方法比較好，網(wǎng)頁增減內(nèi)容只需在相應(yīng)Web部件里增減行，對(duì)表格或單元格高度沒有要求，相應(yīng)圖片可單獨(dú)做，只要寬度一致。第二種方法對(duì)所要嵌套頁面或添加的內(nèi)容的寬度和高度都有嚴(yán)格要求，不能超過背景圖片的寬度和高度，否則會(huì)出現(xiàn)“留白”和“爆邊”，如果用戶需改變切片大小，整個(gè)網(wǎng)頁須重新生成。第三種方法由于只在Photoshop里操作，方便靈活，但板面單一，無動(dòng)態(tài)更新內(nèi)容。

4 結(jié)束語

在如今的信息網(wǎng)絡(luò)時(shí)代，應(yīng)用企業(yè)信息門戶平臺(tái)制作專題網(wǎng)頁對(duì)企業(yè)重大活動(dòng)及企業(yè)動(dòng)態(tài)進(jìn)行宣傳，愈來愈成為企業(yè)對(duì)內(nèi)對(duì)外宣傳的重要手段，做好專題網(wǎng)頁的制作是各單位門戶管理員及專題制作人員的重要工作之一。本文采用目前普遍使用的table編寫方式，使用DIV+CSS編寫的用戶只需在制作網(wǎng)站型專題時(shí)使用DIV+CSS便可實(shí)現(xiàn)。本文介紹的3類專題網(wǎng)頁設(shè)計(jì)方法，簡單實(shí)用，方便快速套用，可供其他專題網(wǎng)頁制作時(shí)借鑒參考。

主要參考文獻(xiàn)

[1]淺談photoshop在網(wǎng)頁布局設(shè)計(jì)中的意義與方法[EB/OL]. http：/wenku.baidu.com/view/6c3cb30d6c85ec3a87c2c508.html.

[2]維基百科.微軟 SharePoint 系統(tǒng) [EB/OL]. http：//zh.wikipedia.org/wiki/Microsoft_Office_SharePoint_Portal_Server.

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

d630b1c59eeb5ae.html.