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

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

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

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

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

1 前 言

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

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

2.1 專(zhuān)題網(wǎng)頁(yè)分類(lèi)及頁(yè)面布局

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

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

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

2.2 網(wǎng)站型專(zhuān)題頁(yè)面制作

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

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

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

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

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

（1）每列的切片寬度必須一致、對(duì)齊，頁(yè)面設(shè)計(jì)中填寫(xiě)文字或嵌套頁(yè)面有背景的一定要切，無(wú)背景的地方可以不切。如在圖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必切，在頁(yè)頭、頁(yè)腳文件中要單獨(dú)使用。

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

2.2.3 存儲(chǔ)切片

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

2.2.4 網(wǎng)站制作

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

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

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

（4）頁(yè)頭、頁(yè)腳代碼上傳

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

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

①拖放Web部件

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

②左欄代碼輸入

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

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

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

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

……

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

2.3 常規(guī)型專(zhuān)題網(wǎng)頁(yè)制作

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

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

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

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

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

2.3.3 專(zhuān)題網(wǎng)頁(yè)制作

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

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

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

2.4 展板專(zhuān)題網(wǎng)頁(yè)制作

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

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

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

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

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

4 結(jié)束語(yǔ)

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

主要參考文獻(xiàn)

[1]淺談photoshop在網(wǎng)頁(yè)布局設(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.