焦克強(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)記“

”之間的所有內(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ì)如下。

①確定布局。

用