鄭金風 王曉君 于文芳 艾山江·吾斯曼

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

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

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

[中圖分類號] F272.7 [文獻標識碼] A [文章編號] 1673 - 0194（2014）04- 0064- 04

1 前 言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2.3 存儲切片

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

2.2.4 網(wǎng)站制作

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

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

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

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

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

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

①拖放Web部件

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

②左欄代碼輸入

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

領(lǐng)導小組 ……

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

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

……

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

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

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

2.3.1 切片時的要點

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

2.3.2 保存為Web所用格式時要點

在點擊“存儲為Web所用格式”時，保存類型選擇“HTML和圖像”，在所選保存文件夾下自動生成一個HTML文件、自動創(chuàng)建一個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）④，注意代碼定義的寬和高不能超出原圖片的大小，否則會出現(xiàn)“留白”和“爆邊”。

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

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

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

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

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

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

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

4 結(jié)束語

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

主要參考文獻

[1]淺談photoshop在網(wǎng)頁布局設(shè)計中的意義與方法[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.