基于HTML5與CSS3的高校新聞發(fā)布系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

沈楠+崔忠偉+劉卓

師范學(xué)院大學(xué)生互聯(lián)網(wǎng)+創(chuàng)新創(chuàng)業(yè)訓(xùn)練中心，貴州 貴陽 550018）

摘要：使用HTML5和CSS3等新技術(shù)，設(shè)計(jì)并開發(fā)了藝術(shù)院校新聞發(fā)布系統(tǒng)。系統(tǒng)采用ASP.NET開發(fā)語言、SQL server 2008數(shù)據(jù)庫，集創(chuàng)新化、藝術(shù)化、實(shí)用化于一體，內(nèi)容豐富易操作管理等特點(diǎn)。

關(guān)鍵詞：HTML5；CSS3；新聞發(fā)布系統(tǒng)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）10-0086-02

隨著信息技術(shù)的飛速發(fā)展和高校教育現(xiàn)代化建設(shè)的不斷加強(qiáng)，我國各高校校園網(wǎng)在提升校園文化、促進(jìn)教學(xué)科研、實(shí)現(xiàn)無紙化辦公等方面發(fā)揮著越來越重要的作用。網(wǎng)站開發(fā)技術(shù)的在快速發(fā)展，網(wǎng)頁的功能也越來越豐富。HTML5與CSS3是近年來興起的一種網(wǎng)頁計(jì)算機(jī)技術(shù)，使用HTML5與CSS3來開發(fā)網(wǎng)站，網(wǎng)頁變得更加動(dòng)感。本文使用HTML5與CSS3技術(shù)為貴州師范學(xué)院二級(jí)學(xué)院開發(fā)了新聞發(fā)布系統(tǒng)。

1 系統(tǒng)概述

高校新聞發(fā)布系統(tǒng)的建設(shè)是對(duì)展現(xiàn)一個(gè)院校風(fēng)采的平臺(tái)、院校師生互動(dòng)、對(duì)外聯(lián)系和宣傳的有效媒介。它使學(xué)校的信息更容易公布；使學(xué)生對(duì)信息和資源的獲取渠道的方便；使校外人員能夠方便交流和及時(shí)準(zhǔn)確地獲取想咨詢的信息。通過高校新聞發(fā)布系統(tǒng)可以發(fā)布學(xué)校的新聞資訊、招生政策、黨建生活、重大活動(dòng)安排等與學(xué)校發(fā)展有關(guān)的信息公告，讓教師與學(xué)生能夠及時(shí)掌握學(xué)校最新資訊。并且可以通過校園網(wǎng)站中的相關(guān)鏈接，打開校外宣傳網(wǎng)站、教育廳、數(shù)據(jù)平臺(tái)等網(wǎng)頁，實(shí)現(xiàn)在網(wǎng)絡(luò)上完成部分校務(wù)，可以提高教師辦事效率，減少人力財(cái)力支出。所以建立一個(gè)高校新聞發(fā)布系統(tǒng)是很有必要的。

建設(shè)是對(duì)展現(xiàn)一個(gè)院校風(fēng)采的平臺(tái)、院校師生互動(dòng)、對(duì)外聯(lián)系和宣傳的有效媒介。它使學(xué)校的信息更容易公布；使學(xué)生對(duì)信息和資源的獲取渠道的方便；使校外人員能夠方便交流和及時(shí)準(zhǔn)確地獲取想咨詢的信息。因此， 校園網(wǎng)站的設(shè)立無論對(duì)于學(xué)校還是對(duì)于社會(huì)都是非常有利的。

2 系統(tǒng)設(shè)計(jì)

2.1 系統(tǒng)總體設(shè)計(jì)

高校新聞發(fā)布系統(tǒng)是一個(gè)基于校園內(nèi)的新聞發(fā)布查看的系統(tǒng)，在校園新聞發(fā)布網(wǎng)站的平臺(tái)上，全校師生可以查看近期校園內(nèi)的一些相關(guān)信息及公告，能夠及時(shí)了解掌握校園信息。

按照功能模塊設(shè)計(jì)，高校新聞發(fā)布系統(tǒng)具有七個(gè)功能模塊，大致分為搜索、菜單欄、圖片新聞、文字新聞、公告通知以及聯(lián)系方式和友情鏈接這些模塊。

首頁面的功能模塊如圖1所示：

2.2 功能模塊設(shè)計(jì)

1）搜索功能模塊分析：在查看新聞或其他信息的時(shí)候，由于大量的數(shù)據(jù)是查找工作更加困難，有了搜索功能，則可以使人們可以快速便捷地找到自己想要的信息，所以，該模塊的主要功能便是快速準(zhǔn)確的查找信息。

2）菜單欄功能模塊分析：該模塊的功能主要是對(duì)一些多級(jí)頁面的功能分類及快速鏈接，使頁面設(shè)計(jì)更加嚴(yán)謹(jǐn)，符合人們的需要

3）圖片新聞功能模塊分析：本功能模塊主要是對(duì)圖片新聞的查看。有些人不喜歡長(zhǎng)篇大論的文章，而圖片新聞更加形象生動(dòng)、色彩分明，在視覺上更有沖擊力，符合人們的需求。

4）文字新聞功能模塊分析：本功能模塊主要是以文字為主題的新聞內(nèi)容，人們可以更加詳細(xì)的閱讀文章內(nèi)容。

5）公告通知功能模塊分析：本功能模塊主要是顯示一些通知公告等內(nèi)容，在首頁方便人們及時(shí)看到，對(duì)特殊情況能夠就及時(shí)發(fā)布顯示出來。

6）聯(lián)系方式功能模塊分析：本功能模塊提供聯(lián)系方式，人們可以用來詢問問題或反饋問題。

7）友情鏈接功能模塊分析：本功能模塊主要是用來連接到其他網(wǎng)頁，方便人們能夠快速便捷地找到需要的相關(guān)頁面。

2.3 數(shù)據(jù)庫設(shè)計(jì)

數(shù)據(jù)是網(wǎng)站的靈魂，數(shù)據(jù)庫對(duì)于大量的信息使用與存儲(chǔ)、站點(diǎn)上的訪問者能夠獲得對(duì)數(shù)據(jù)的使用都是非常重要的。高校新聞發(fā)布系統(tǒng)采用關(guān)系數(shù)據(jù)庫 SQL Server 2008 作為后臺(tái)數(shù)據(jù)庫，所涉及的主要數(shù)據(jù)表包括：

1）首頁內(nèi)容設(shè)置表。自動(dòng)編號(hào)、新聞編號(hào)、新聞標(biāo)題、新聞?lì)愋?、公告編?hào)、友情鏈接編號(hào)。

2）新聞搜索表。新聞編號(hào)、新聞名稱、新聞?lì)愋汀?/p>

3）新聞?lì)愋捅?。類型編?hào)、類型名稱、圖片編號(hào)、文字編號(hào)。

4）圖片新聞表。圖片編號(hào) 、圖片新聞名稱。

5）文字新聞表。文字編號(hào) 、圖片新聞名稱。

6）公告信息表。公告編號(hào)、標(biāo)題、公告內(nèi)容、日期。

7）友情鏈接表。友情鏈接編號(hào)、標(biāo)題、地址。

3 系統(tǒng)實(shí)現(xiàn)

3.1 客戶端實(shí)現(xiàn)

在客戶端為了提高開發(fā)的效率，避免重復(fù)多余的代碼，減低維護(hù)的成本。本系統(tǒng)設(shè)計(jì)了2個(gè)公共類，分別為對(duì)數(shù)據(jù)庫進(jìn)行操作的SqlHelper類以及對(duì)數(shù)據(jù)進(jìn)行操作的DataHelper類。例：

在新聞的顯示界面需要查詢數(shù)據(jù)庫的數(shù)據(jù)，通過自定義的NewSelect（）方法拼接Sql語句調(diào)用SqlHelper類的quereyExecute方法，返回的為一個(gè)自定義的NewsModel模型集合，然后在需要顯示的界面通過調(diào)用DataHelper的DataShow（）方法將已經(jīng)得到的數(shù)據(jù)集合顯示在界面上。

3.2 服務(wù)器端實(shí)現(xiàn)

服務(wù)器根據(jù)所需功能對(duì)本地的數(shù)據(jù)進(jìn)行更、刪、查、改等不同的功能，在主頁messege.asp中點(diǎn)擊需要的功能并進(jìn)入相應(yīng)的頁面，例如在修改頁面update.asp中在所需修改數(shù)據(jù)的文本框中修改相應(yīng)的數(shù)據(jù)然后點(diǎn)擊保存即可將數(shù)據(jù)更新到服務(wù)器端的數(shù)據(jù)庫中，在通過客戶端與服務(wù)器端的交互修改SQL server 2008數(shù)據(jù)庫的數(shù)據(jù)從而修改客戶端上顯示的數(shù)據(jù)。

4 結(jié)束語

目前通過網(wǎng)站的運(yùn)行情況，證明了動(dòng)態(tài)的學(xué)習(xí)平臺(tái)具備實(shí)用的價(jià)值，有利于改善目前傳統(tǒng)學(xué)習(xí)的弊端，有利于提升學(xué)習(xí)的科學(xué)性。加快了我校信息化建設(shè)的步伐，對(duì)教師、學(xué)生和管理員帶來了許多好處，方便教師對(duì)教學(xué)資源進(jìn)行交流，還可以實(shí)現(xiàn)網(wǎng)上辦公，提高了辦公效率；學(xué)生不但可以時(shí)時(shí)刻刻了解校內(nèi)學(xué)生活動(dòng)動(dòng)態(tài)，還可以網(wǎng)上學(xué)習(xí)，提高了學(xué)習(xí)積極性，還便于管理員對(duì)于網(wǎng)站的管理維護(hù)，及時(shí)發(fā)現(xiàn)和解決問題。而使用HTML5和CSS3編寫的網(wǎng)頁更是在界面效果增加了藝術(shù)的魅力，讓使用者賞心悅目。

參考文獻(xiàn)：

[1] 劉薇，龔海華. HTML5&CSS3在網(wǎng)頁設(shè)計(jì)中的優(yōu)勢(shì)[J].金田：勵(lì)志，2012，12：366-367.

[2] 梁春燕，陳麗麗，許憲玲， 等. 淺析HTML5和CSS3的新交互特性[J]. 數(shù)字技術(shù)與應(yīng)用，2012（4）：273.

[3] 宋昭壽，胡忠旭，漆麗娟. HTML5網(wǎng)頁設(shè)計(jì)探析[J]. 紅河學(xué)院報(bào)，2012（2）：53-56.

[4] 張亞飛.HTML5+CSS3網(wǎng)頁布局和樣式精粹[M]北京：清華大學(xué)出版社， 2011.

[5] 陸凌牛.HTML5與CSS3權(quán)威指南[M].北京：機(jī)械工業(yè)出版社， 2011.

[6] 張海濱.校園在線管理平臺(tái)[J].廣西大學(xué)學(xué)報(bào)： 自然科學(xué)報(bào)， 2011， 36（1）： 293-298.

[7] 陶國榮.HTML5實(shí)戰(zhàn)[M].北京： 機(jī)械工業(yè)出版社，2012.

[8] 成林.CSS3實(shí)戰(zhàn)[M].北京：機(jī)械工業(yè)出版社， 2011.