企業信息門戶專題網頁制作新方法研究

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

[摘 要] 近年來專題網頁已成為企業信息門戶對內對外宣傳的重要手段之一，本文通過實例介紹作者在設計制作專題網頁過程中研究出的對不同類型專題采取不同的制作方法，利用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.