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