邢鋼內(nèi)網(wǎng)網(wǎng)站系統(tǒng)改版設(shè)計(jì)及實(shí)現(xiàn)
2016-12-27 18:39:54焦克強(qiáng)李鑫高琳
科技資訊 2016年25期
焦克強(qiáng)+李鑫+高琳
摘 要：邢鋼內(nèi)網(wǎng)網(wǎng)站初建時(shí)，系統(tǒng)采用當(dāng)時(shí)流行的ASP+ACCESS技術(shù)，隨著網(wǎng)站應(yīng)用不斷深入及信息量的逐年增加，系統(tǒng)存在的問(wèn)題也逐漸顯現(xiàn)?；趯?duì)現(xiàn)有網(wǎng)站的分析，提出了使用內(nèi)容管理系統(tǒng)（CMS）來(lái)構(gòu)建一個(gè)企業(yè)級(jí)網(wǎng)站的解決方案。詳細(xì)介紹了網(wǎng)站前臺(tái)展示技術(shù)和后臺(tái)內(nèi)容管理系統(tǒng)相關(guān)理論和技術(shù)。
關(guān)鍵詞：jQuery div CSS CMS內(nèi)容管理系統(tǒng)
中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-3791（2016）09（a）-0018-02
邢鋼內(nèi)網(wǎng)網(wǎng)站隨著網(wǎng)站應(yīng)用不斷深入及信息量的逐年增加，系統(tǒng)存在的問(wèn)題逐漸呈現(xiàn)，主要表現(xiàn)在：（1）網(wǎng)站采用ACCESS小型數(shù)據(jù)庫(kù)，一般百兆以上性能會(huì)變差，當(dāng)同時(shí)在線人數(shù)多時(shí)，就會(huì)出現(xiàn)網(wǎng)頁(yè)打不開(kāi)、http 500錯(cuò)誤。（2）自主開(kāi)發(fā)的網(wǎng)站系統(tǒng)，代碼不優(yōu)化、運(yùn)行效率低。（3）網(wǎng)站各欄目是按公司業(yè)務(wù)部室需求獨(dú)自建立的系統(tǒng)，各個(gè)系統(tǒng)管理后臺(tái)不能互通，導(dǎo)致信息之間無(wú)法共享。在這種情況下，對(duì)現(xiàn)有網(wǎng)站系統(tǒng)進(jìn)行改版勢(shì)在必行。
1 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)
1.1 設(shè)計(jì)思想
基于對(duì)網(wǎng)站的現(xiàn)狀分析，提出改版設(shè)計(jì)思想：（1）使用專業(yè)CMS系統(tǒng)重建網(wǎng)站架構(gòu)，做到一站式管理。（2）網(wǎng)站設(shè)計(jì)須統(tǒng)一、簡(jiǎn)潔、專業(yè)，各子欄目統(tǒng)一風(fēng)格，重點(diǎn)欄目在統(tǒng)一風(fēng)格的基礎(chǔ)上突出欄目特色。（3）便于導(dǎo)航，欄目結(jié)構(gòu)清晰，各欄目互通互聯(lián)，使用戶可以迅速搜索到相關(guān)內(nèi)容。（4）合理使用flash和Javascript等前端技術(shù)，創(chuàng)造更好的瀏覽體驗(yàn)和前端效果。（5）使用優(yōu)化的DIV+CSS模式減少代碼量，提高運(yùn)行效率。（6）嵌入數(shù)據(jù)調(diào)用接口，實(shí)現(xiàn)ERP業(yè)務(wù)數(shù)據(jù)查詢。
1.2 web前臺(tái)展示技術(shù)
為實(shí)現(xiàn)網(wǎng)站首頁(yè)banner圖片切換、形象展示FLASH以及二級(jí)頁(yè)面圖片切換，使用flash+XML、jQuery動(dòng)態(tài)技術(shù)實(shí)現(xiàn)與后臺(tái)數(shù)據(jù)交互，便于更新維護(hù)，同時(shí)使頁(yè)面結(jié)構(gòu)清晰，并提高訪問(wèn)速度。
1.2.1 jQuery動(dòng)態(tài)效果與flash+XML技術(shù)
（1）jQuery動(dòng)態(tài)技術(shù)。
jQuery是一個(gè)“寫(xiě)得更少，但做得更多”的輕量級(jí)JavaScript 庫(kù)。使用jQuery需要下載，然后把它包含在希望使用的網(wǎng)頁(yè)中。jQuery兼容CSS3和各種瀏覽器，使用戶更方便地處理HTML、events、實(shí)現(xiàn)動(dòng)畫(huà)效果，并且為網(wǎng)站提供AJAX交互。jQuery不用在html里插入一堆js調(diào)用命令，只需定義id，即可使用戶實(shí)現(xiàn)html頁(yè)代碼和內(nèi)容分離。
（2）flash+XML技術(shù)。
Flash是交互式矢量圖和Web動(dòng)畫(huà)的標(biāo)準(zhǔn)，使用Flash可創(chuàng)作既漂亮又可改變尺寸的導(dǎo)航界面及其他特效。XML是可擴(kuò)展標(biāo)記語(yǔ)言，可用來(lái)標(biāo)記數(shù)據(jù)、定義數(shù)據(jù)類型，是一種允許用戶對(duì)標(biāo)記語(yǔ)言進(jìn)行定義的源語(yǔ)言。flash+XML是xml在flash平面設(shè)計(jì)中的應(yīng)用。XML和flash一起使用時(shí)，XML就相當(dāng)于臨時(shí)存儲(chǔ)數(shù)據(jù)的文本，flash會(huì)讀取里面的信息，達(dá)到動(dòng)畫(huà)制作效果，更新FLASH時(shí)，只需修改XML文件即可。
1.2.2 Div+CSS技術(shù)
（1）什么是DIV+CSS。
DIV是HTML標(biāo)記中的一個(gè)塊級(jí)元素，可以為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景，起始標(biāo)記“
”和結(jié)束標(biāo)記“
”之間的所有內(nèi)容都用來(lái)構(gòu)成這個(gè)塊，其中所包含元素的表現(xiàn)由DIV標(biāo)記中套用的CSS樣式來(lái)定義。CSS為層疊樣式表，是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的腳本語(yǔ)言，可以對(duì)HTML中的各種元素實(shí)現(xiàn)更加精確的控制。用DIV+CSS技術(shù)制作的網(wǎng)站就是在HTML中只放內(nèi)容，用CSS控制內(nèi)容的表現(xiàn)，實(shí)現(xiàn)網(wǎng)頁(yè)表現(xiàn)和結(jié)構(gòu)的分離，從而減小網(wǎng)頁(yè)體積，提高網(wǎng)頁(yè)傳輸速度。（2）DIV+CSS網(wǎng)頁(yè)布局設(shè)計(jì)。
以邢鋼內(nèi)網(wǎng)網(wǎng)站頁(yè)面布局作為實(shí)例，用DIV+CSS布局設(shè)計(jì)如下。
①確定布局。
用
標(biāo)記將網(wǎng)站頁(yè)面分成不同區(qū)塊，包括header、page （分為sidebar左側(cè)邊欄區(qū)和main主要內(nèi)容區(qū)）、footer共3個(gè)區(qū)域，分別為網(wǎng)頁(yè)的頂部、內(nèi)容和版權(quán)區(qū)域。
DIV結(jié)構(gòu)如下：
body{}/* HTML元素*/
#container{}/*頁(yè)面層容器*/
#header{}/*頁(yè)面頂部*/
#page{}/*頁(yè)面主體*/
#sidebar{}/*左側(cè)邊欄*/
#main{}/*主要內(nèi)容*/
#footer{}/*頁(yè)面底部*/
②實(shí)現(xiàn)代碼。
在Dreamweaver開(kāi)發(fā)環(huán)境中，新建Default.html，并設(shè)置global.css樣式文件，在HTML的標(biāo)記里鏈接樣式表代碼如下：
在
邢鋼LOGO
左側(cè)邊欄內(nèi)容（相關(guān)鏈接）
主要內(nèi)容區(qū)域
global.css樣式文件（代碼略），其中頁(yè)面層容器Container的width屬性設(shè)置為百分比形式，實(shí)現(xiàn)頁(yè)面自動(dòng)適應(yīng)瀏覽器窗口的寬度，margin屬性為0 auto，表示上下邊距為0，左右邊距為自動(dòng)，實(shí)現(xiàn)網(wǎng)頁(yè)居中顯示。Sidebar的float屬性為left，控制左側(cè)邊欄浮動(dòng)到頁(yè)面主體的左邊，main的float屬性為right，實(shí)現(xiàn)中間兩列豎欄的顯示效果。用clear：both清除頁(yè)面底部容器的左右浮動(dòng)。
1.3 后臺(tái)功能模塊
網(wǎng)站后臺(tái)是基于Microsoft.NET進(jìn)行分層開(kāi)發(fā)的CMS內(nèi)容管理系統(tǒng)。CMS是專門(mén)面向網(wǎng)站內(nèi)容編輯與發(fā)布的應(yīng)用系統(tǒng)，能夠管理龐大、煩雜的后臺(tái)數(shù)據(jù)，規(guī)范網(wǎng)站后臺(tái)管理流程，統(tǒng)一數(shù)據(jù)存儲(chǔ)格式，減少網(wǎng)站運(yùn)營(yíng)維護(hù)投入[2]。
CMS系統(tǒng)分為3層：展示層負(fù)責(zé)最終的頁(yè)面顯示，頁(yè)面的設(shè)計(jì)存儲(chǔ)在模板里，系統(tǒng)可以隨時(shí)更換模板，實(shí)現(xiàn)不同的外觀。邏輯層負(fù)責(zé)系統(tǒng)的基本邏輯，例如用戶管理、權(quán)限分配、搜索管理、緩存管理、流程管理等。數(shù)據(jù)訪問(wèn)層負(fù)責(zé)最終數(shù)據(jù)的保存。當(dāng)一個(gè)用戶請(qǐng)求頁(yè)面時(shí)，各部分聯(lián)合生成一個(gè)標(biāo)準(zhǔn)的HTML頁(yè)面[1]。
邢鋼內(nèi)網(wǎng)CMS系統(tǒng)包含信息管理模塊、用戶管理模塊、模板管理模塊、發(fā)布管理模塊、附件管理模塊。底層數(shù)據(jù)庫(kù)為SQL Server。
2 運(yùn)行效果
改版后的邢鋼內(nèi)網(wǎng)網(wǎng)站運(yùn)行穩(wěn)定、效果良好。通過(guò)內(nèi)容管理系統(tǒng)內(nèi)置的多種功能模塊，輕松地實(shí)現(xiàn)了企業(yè)新聞、部門(mén)主頁(yè)、圖片集、多媒體、搜索、用戶管理等功能模塊的統(tǒng)一管理，提高了網(wǎng)站運(yùn)行效率。實(shí)現(xiàn)網(wǎng)頁(yè)表現(xiàn)和結(jié)構(gòu)的分離，降低了網(wǎng)站改版成本，頁(yè)面結(jié)構(gòu)調(diào)整只需修改或增加模板，工作變得簡(jiǎn)單輕松。同時(shí)通過(guò)二次開(kāi)發(fā)、嵌入數(shù)據(jù)調(diào)用接口，實(shí)現(xiàn)了ERP業(yè)務(wù)數(shù)據(jù)實(shí)時(shí)查詢。
參考文獻(xiàn)
[1] 譚浩，陳應(yīng)忠，李旭.基于CMS的企業(yè)門(mén)戶網(wǎng)站建立[J].交通科技，2010（7）：101-103.
[2] 耿璐，聶足.基于CMS的企業(yè)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)工程與設(shè)計(jì)，2009，30（2）：351-357.
