劉康

(中國(guó)石化華東油氣分公司信息化管理中心,江蘇 南京210019)

1 緒論

1.1 研究背景

隨著油氣田企業(yè)數(shù)字化轉(zhuǎn)型,油氣田門戶網(wǎng)站已成為油氣田網(wǎng)上辦公、學(xué)習(xí)培訓(xùn)、宣傳展示的重要平臺(tái),匯集了油田眾多新聞、學(xué)習(xí)、生活及應(yīng)用板塊。

目前各油氣田內(nèi)部機(jī)關(guān)處室、二級(jí)單位、專題專欄等各類信息站點(diǎn)數(shù)量多,信息種類繁多,展示形式多樣,原來靠手工實(shí)現(xiàn)的模式,技術(shù)要求高,見效慢,維護(hù)成本高,需要研究一種門戶網(wǎng)站建設(shè)體系,解決目前模板建設(shè)應(yīng)用的難題,提升網(wǎng)站的建設(shè)效率。

1.2 研究意義

模板建站是一套信息資源呈現(xiàn)模板建設(shè)與解析的完整流程,讓用戶通過簡(jiǎn)單的代碼編寫、組件引用和數(shù)據(jù)配置,即可在較短的時(shí)間內(nèi)輕松迅速架設(shè)符合自己個(gè)性化的網(wǎng)站。

2 總體架構(gòu)設(shè)計(jì)

按照分層架構(gòu)設(shè)計(jì)思路,應(yīng)用系統(tǒng)的核心層包括數(shù)據(jù)層、服務(wù)層、應(yīng)用層和展示層等四部分。(圖1)

圖1 總體設(shè)計(jì)

3 研究?jī)?nèi)容

研究一個(gè)模板建站和網(wǎng)站管理體系,利用模板建站搭建油田內(nèi)外網(wǎng)門戶,通過網(wǎng)站管理實(shí)現(xiàn)網(wǎng)站信息內(nèi)容和網(wǎng)站權(quán)限的管控,通過研究模板建站,實(shí)現(xiàn)讓用戶無需學(xué)習(xí)任何編程語言,只需應(yīng)用工具所提供的各種強(qiáng)大豐富的功能組件,在短時(shí)間內(nèi)輕松迅速架設(shè)符合自己個(gè)性化的門戶網(wǎng)站。

模板建站通過非編程、拖拽等方式實(shí)現(xiàn)頁(yè)面設(shè)計(jì)與發(fā)布,包括模板設(shè)計(jì)、組件資源設(shè)置等功能。

3.1 模板設(shè)計(jì)

模本設(shè)計(jì)是模板建站的關(guān)鍵,首先通過選擇頁(yè)面模板對(duì)頁(yè)面進(jìn)行布局,然后設(shè)置頁(yè)面樣式,最后通過拖拽組件至頁(yè)面實(shí)現(xiàn)頁(yè)面板塊的設(shè)置,最后通過頁(yè)面發(fā)布功能將定制好的頁(yè)面發(fā)布至服務(wù)器上。

3.1.1 模板設(shè)計(jì)

在頁(yè)面設(shè)計(jì)時(shí)首先進(jìn)行模板設(shè)計(jì),模板建站提供大量的常用標(biāo)準(zhǔn)模板。(圖2)

圖2 模版設(shè)計(jì)

3.1.2 樣式設(shè)計(jì)

在設(shè)置完頁(yè)面的布局后,需要對(duì)頁(yè)面的背景、頁(yè)頭、頁(yè)尾以及欄目樣式進(jìn)行詳細(xì)的設(shè)計(jì)。

3.1.2.1 背景設(shè)置

設(shè)置頁(yè)面樣式中的頁(yè)面背景,可以設(shè)置背景圖片、背景的大小以及圖片的填充方式等信息。

3.1.2.2 頂部設(shè)置

門戶網(wǎng)站通常是有頁(yè)頭信息,一般都是以圖片或是動(dòng)畫形式展示,通過頁(yè)面頂部設(shè)置來設(shè)置頁(yè)頭常規(guī)圖片或是動(dòng)畫圖片的來源或是填充方式等信息。

3.1.2.3 橫幅區(qū)設(shè)置

有些網(wǎng)站頁(yè)面內(nèi)容較少,為了頁(yè)面顯示飽滿,需要顯示橫幅,橫幅內(nèi)容都是以圖片形式展示,可以通過橫幅區(qū)設(shè)置來完成橫幅內(nèi)容的設(shè)置。

3.1.2.4 內(nèi)容區(qū)設(shè)置

頁(yè)面的內(nèi)容區(qū)普遍以白色背景填充,但是有時(shí)特殊頁(yè)面需要設(shè)置圖片或是顏色,這些可以通過內(nèi)容區(qū)設(shè)置來實(shí)現(xiàn)。

3.1.2.5 底部設(shè)置

門戶網(wǎng)站頁(yè)面都是存在頁(yè)面底部的,而且頁(yè)面底部顯示樣式也是多樣的。這就要求頁(yè)面底部的設(shè)置要支持多種樣式設(shè)置。

3.1.3 組件添加

布局和樣式設(shè)計(jì)完成后,需要通過拖動(dòng)方式把組件添加到頁(yè)面的單元格中,進(jìn)行組件添加,組件添加完成后,通過組件的樣式及內(nèi)容設(shè)置來完成組件的數(shù)據(jù)來源及樣式的設(shè)計(jì)。

通過組件的顯示詳細(xì)設(shè)置來完成組件的背景、是否分頁(yè)、實(shí)現(xiàn)記錄數(shù)等基本設(shè)置、當(dāng)點(diǎn)擊組件內(nèi)容時(shí)的跳轉(zhuǎn)設(shè)置和組件項(xiàng)顯示圖標(biāo)、是否可以換行等文字設(shè)置等信息。

3.1.4 頁(yè)面發(fā)布

頁(yè)面設(shè)計(jì)完成后,要查看頁(yè)面設(shè)計(jì)的效果,可以通過預(yù)覽頁(yè)面的運(yùn)行效果,來檢測(cè)頁(yè)面設(shè)置情況。通過發(fā)布功能將頁(yè)面?zhèn)鬏數(shù)椒?wù)器上的已經(jīng)設(shè)定好的站點(diǎn)下,形成真實(shí)的網(wǎng)站界面。

3.2 組件設(shè)計(jì)

組件資源是模板建站的重要支撐,為了滿足業(yè)務(wù)功能需要和降低定制復(fù)雜度,就需要開發(fā)通用的展示、業(yè)務(wù)等門戶組件。(圖3)

圖3 組件資源

3.2.1 布局組件

通過布局組件,實(shí)現(xiàn)對(duì)門戶頁(yè)面整體布局的設(shè)計(jì)。布局組件以表的方式進(jìn)行布局定義,可以通過對(duì)布局組件的單元格進(jìn)行合并、拆分,對(duì)行列的比例大小等進(jìn)行調(diào)整,從而實(shí)現(xiàn)對(duì)整個(gè)門戶網(wǎng)站的整體布局設(shè)計(jì)。

3.2.2 導(dǎo)航組件

導(dǎo)航組件主要是為了讓訪問者更清晰明朗的找到所需要的資源區(qū)域,尋找資源,因此導(dǎo)航欄需要提供導(dǎo)航欄的樣式設(shè)置、按鈕的樣式設(shè)置、按鈕的定制設(shè)置等。

3.2.3 圖文組件

以圖片方式展示新聞、公告等,通過對(duì)當(dāng)前的圖片進(jìn)行點(diǎn)擊,實(shí)現(xiàn)對(duì)圖片內(nèi)容的詳細(xì)展示,同時(shí)可以對(duì)圖文的展示樣式、滾動(dòng)方式等進(jìn)行設(shè)置。

3.2.4 文章列表

展示最新的文章,通過列表方式進(jìn)行展示,同時(shí)可以對(duì)文章的內(nèi)容等信息進(jìn)行瀏覽。

3.2.5 圖冊(cè)展示

通過滾動(dòng)展示方式對(duì)圖片進(jìn)行展示,并可以根據(jù)需求設(shè)置滾動(dòng)的時(shí)間和速度,并支持點(diǎn)擊后鏈接到具體頁(yè)面地址功能。(圖4)

圖4 圖冊(cè)組件

3.2.6 圖文鏈接

以圖片方式展示圖文,通過對(duì)當(dāng)前的圖片進(jìn)行點(diǎn)擊,實(shí)現(xiàn)對(duì)圖片內(nèi)容的鏈接展示。

3.2.7 滾動(dòng)公告

通過滾屏的方式對(duì)現(xiàn)有的內(nèi)容進(jìn)行展示,通過滾動(dòng)方式可以在更小的范圍內(nèi)查看更多的內(nèi)容。

3.2.8 視頻組件

以視頻的方式對(duì)新聞等內(nèi)容進(jìn)行展示。

3.2.9 文件下載

根據(jù)配置需求,將可下載的文件以列表的方式進(jìn)行展示,同時(shí)實(shí)現(xiàn)對(duì)文件列表中的文件下載功能。

3.2.10 輪播圖組件

通過輪播展示方式對(duì)圖片等進(jìn)行展示,并可以根據(jù)需求設(shè)置輪播的時(shí)間和速度,支持點(diǎn)擊打開圖片內(nèi)容的具體內(nèi)容的頁(yè)面。

3.2.11 搜索組件

實(shí)現(xiàn)對(duì)門戶中,與搜索關(guān)鍵字相關(guān)的新聞、廣告、文檔列表等內(nèi)容進(jìn)行檢索,并將搜索內(nèi)容進(jìn)行展示。

4 結(jié)論

通過模板建站管理體系,簡(jiǎn)化了網(wǎng)站建設(shè)技術(shù)難度和建設(shè)效率,解決了網(wǎng)站建設(shè)需求和技術(shù)矛盾難題,降低了網(wǎng)站維護(hù)難度,加強(qiáng)了油田信息資源的集中管控和分級(jí)管理,優(yōu)化了各級(jí)單位信息網(wǎng)站的建設(shè)效率,為油田網(wǎng)站群建設(shè)和豐富網(wǎng)站應(yīng)用打下堅(jiān)實(shí)基礎(chǔ)。