“魅力一中”網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

石家莊市第一中學(xué) 劉匯緣

“魅力一中”網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

石家莊市第一中學(xué) 劉匯緣

【摘要】以學(xué)生的視角建立母校——魅力一中網(wǎng)站，彰顯母校豐富的人文育人環(huán)境，通過魅力校園、魅力園丁、魅力課堂、魅力社團(tuán)、魅力校報(bào)、魅力校友、魅力風(fēng)采，多視角展現(xiàn)我魅力一中的不凡之處。通過網(wǎng)站的建立，宣傳母校的卓越之處，展現(xiàn)一中學(xué)生學(xué)習(xí)生活狀況，使同學(xué)們熱愛母校，激發(fā)同學(xué)們勤奮學(xué)習(xí)，努力做最好的自己，以“展一中魅力 現(xiàn)一中風(fēng)采”。本網(wǎng)站建設(shè)有靜態(tài)和動態(tài)部分，充分體現(xiàn)數(shù)字技術(shù)的開放性、交互性和共享性的特征。

【關(guān)鍵詞】魅力校園；魅力園丁；魅力課堂；魅力社團(tuán)；魅力校報(bào)；魅力校友；魅力風(fēng)采

1.引言

我的母校——石家莊市第一中學(xué)，是一所歷史悠久，文化底蘊(yùn)厚重的學(xué)校。我的母校培育了眾多優(yōu)秀學(xué)子，在“上善若水，厚德載物”的校訓(xùn)下，構(gòu)建了濃郁的校園文化，我們?yōu)樵谶@樣一所優(yōu)質(zhì)高中就讀而感到十分自豪，我們熱愛自己的母校。

本網(wǎng)站以學(xué)生視角樹立母校品牌形象，宣傳母校的特色亮點(diǎn)，即彰顯了學(xué)校的實(shí)力，又提升了學(xué)校形象。2017年正值母校70年華誕，制作此網(wǎng)站這也是我們感恩母校的一種表達(dá)方式。

2.研究過程

（1） 確定研究項(xiàng)目。為迎接母校70周年華誕，為感恩母校，特制作此網(wǎng)站。

（2） 準(zhǔn)備該項(xiàng)目的素材。

通過上網(wǎng)查詢資料，瀏覽我校網(wǎng)站以及有特色的校園網(wǎng)站，這些都為本“魅力一中”的建設(shè)提供了一定的素材。

（3） 確定該項(xiàng)目的功能。可以及時上傳最新的網(wǎng)站新聞，可以上傳最新的校園文化圖片，可以注冊成為網(wǎng)站的會員并發(fā)表自己的留言，可以對新聞進(jìn)行評價留言。通過投票可以了解人們是如何得知此網(wǎng)站的，可以了解今后的宣傳點(diǎn)。

（4） 進(jìn)行項(xiàng)目網(wǎng)站的前后臺制作。

制作前臺的所有靜態(tài)頁面，設(shè)計(jì)LOGO和BANNER。制作網(wǎng)站后臺的數(shù)據(jù)庫以及ASP動態(tài)網(wǎng)頁部分的內(nèi)容，滿足上傳新聞、圖片、留言等功能。

（5） 進(jìn)行該網(wǎng)站的調(diào)試與檢測。用以保證網(wǎng)站的正常運(yùn)轉(zhuǎn)。

使用了以下幾種軟件進(jìn)行制作：

Adobe Dreamweaver CS5、Adobe Flash CS5、Adobe Photoshop CS5、Microsoft Office Access 2013、ASP、JavaScript語言。

3.網(wǎng)站功能

3.1 普通用戶功能

該網(wǎng)站設(shè)計(jì)是面向一般大眾用戶的，因此在欄目的設(shè)置和內(nèi)容的展示上都體現(xiàn)了這點(diǎn)，其普通用戶的功能如下：

（1）網(wǎng)站信息瀏覽。可以瀏覽網(wǎng)站前臺的魅力校園、魅力園丁、魅力課堂、魅力社團(tuán)等欄目。

（2）查看新聞動態(tài)。可以瀏覽網(wǎng)站的新聞，新聞動態(tài)欄目包括魅力風(fēng)采和新聞要事兩種分類版塊。

（3）魅力聲音。可以瀏覽網(wǎng)站的魅力聲音留言板，并可通過網(wǎng)站的在線留言功能進(jìn)行留言。魅力聲音可以讓同學(xué)們積極暢所欲言發(fā)表自己對學(xué)校的建議和意見。

（4）會員登錄與注冊。可以申請成為網(wǎng)站的會員，會員可以查看新聞動態(tài)、查看留言并添加留言、修改個人資料并注銷本次登錄。如果忘記密碼還可找回自己的密碼。

（5）網(wǎng)站投票。對網(wǎng)站的建設(shè)情況可以在網(wǎng)上投票，以便管理員可以根據(jù)同學(xué)們對網(wǎng)站的喜好程度進(jìn)行相應(yīng)的修改。

（6）瀏覽圖片。可以欣賞一中的校園風(fēng)景以及最近發(fā)生的與同學(xué)們有關(guān)的重要事件圖片。

3.2 管理員功能

本網(wǎng)站設(shè)置了兩個管理員賬戶，對整個后臺管理擁有全部權(quán)限，包括新聞管理、留言管理、用戶管理、圖片管理。管理員的具體功能如下：

（1）新聞管理。可以對新聞進(jìn)行添加、瀏覽、修改和刪除，可以及時有效地發(fā)布最新展現(xiàn)一中魅力的重要新聞。

（2）留言管理。可以對用戶留言進(jìn)行審核和回復(fù)以及對不健康留言的刪除。

（3）用戶管理。可以對用戶進(jìn)行修改用戶資料或者刪除經(jīng)常發(fā)不健康內(nèi)容的用戶以及管理員自我信息的修改。

（4）圖片管理。可以上傳最新的展現(xiàn)一中魅力的圖片資料，添加后可在首頁看到該圖片。

4.總體設(shè)計(jì)

該網(wǎng)站主要劃分為8個一級欄目：首頁、魅力校園、魅力園丁、魅力課堂、魅力社團(tuán)、魅力校報(bào)、魅力校友、魅力風(fēng)采。

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

根據(jù)網(wǎng)站的整體功能結(jié)構(gòu)，設(shè)計(jì)出該網(wǎng)站的數(shù)據(jù)庫。該數(shù)據(jù)庫表有8個，管理員表（admin）、用戶姓名表（name）、新聞版塊表（bankuai）、留言表（ly）、圖片表（tupian）、投票表（vote）、新聞表（xw）、新聞回復(fù)（xw_pl）表。

6.系統(tǒng)詳細(xì)設(shè)計(jì)

6.1 前臺設(shè)計(jì)

（1）首頁設(shè)計(jì)。首頁是一個網(wǎng)站的整體形象，包括網(wǎng)站的LOGO、Banner、導(dǎo)航、用戶登錄、在線投票、站內(nèi)搜索、新聞動態(tài)、魅力聲音、圖片展示、倡議書等內(nèi)容。網(wǎng)站的LOGO是魅力一中網(wǎng)的首字母縮寫，用Photoshop制作；Bannner是網(wǎng)站導(dǎo)向性語言“展一中魅力，現(xiàn)一中風(fēng)采”，用Flash制作。在首頁可進(jìn)行用戶的注冊與登錄；可進(jìn)行站內(nèi)搜索新聞；可對網(wǎng)站的設(shè)計(jì)進(jìn)行在線投票；可查看新聞動態(tài)、圖片展示以及魅力聲音留言。

（2）魅力校園子頁面設(shè)計(jì)。魅力校園欄目介紹了學(xué)校建校歷史以及發(fā)展歷程與特色，展示了校園風(fēng)景、校史館、學(xué)生科學(xué)館、圖書館、生命教育館、實(shí)驗(yàn)室的圖片。讓同學(xué)們了解學(xué)校的歷史，熱愛我們的學(xué)校。

（3）魅力園丁子頁面設(shè)計(jì)。魅力園丁欄目展示了魅力一中具有代表性的各科教師團(tuán)隊(duì)及全國模范教師。讓學(xué)生從中敬重、熱愛我們的老師。

（4）魅力課堂子頁面設(shè)計(jì)。魅力課堂欄目展現(xiàn)了魅力一中課堂改革的豐碩成果，讓同學(xué)們樂于努力學(xué)習(xí)，積極融入到豐富多彩的教學(xué)活動中去。

（5）魅力社團(tuán)子頁面設(shè)計(jì)。魅力社團(tuán)欄目展示了魅力一中的十佳學(xué)生社團(tuán)，倡導(dǎo)同學(xué)們利用課余時間豐富自己的課余生活。

（6）魅力校報(bào)子頁面設(shè)計(jì)。魅力校報(bào)欄目展示了魅力一中的校園文化建設(shè)成果，引導(dǎo)學(xué)生積極投稿。

（7）魅力校友子頁面設(shè)計(jì)。魅力校友欄目展示了杰出的校友代表，為同學(xué)們的成長指明了方向。

（8）魅力風(fēng)采子頁面設(shè)計(jì)。魅力風(fēng)采欄目展示了豐富多彩的校園以及社會活動，包括聯(lián)歡會、運(yùn)動會、第二課堂、模擬聯(lián)合國等。

（9）新聞動態(tài)子頁面設(shè)計(jì)。新聞動態(tài)欄目可以查看最新的與同學(xué)們有關(guān)的校園新聞動態(tài)，是網(wǎng)站會員的用戶還可以對新聞進(jìn)行評價留言。需要與后臺數(shù)據(jù)庫新聞表（xw）連接綁定。

（10）魅力聲音子頁面設(shè)計(jì)。魅力聲音欄目可以查看登錄用戶的最新留言，并參與網(wǎng)站互動留言。需要與后臺數(shù)據(jù)庫留言表（ly）連接綁定。

（11）用戶注冊與登錄子頁面設(shè)計(jì)

用戶可以注冊成為會員，如果忘記登錄密碼可以通過用戶名和注冊郵箱進(jìn)行密碼的找回。需要與后臺用數(shù)據(jù)庫用戶姓名表（name）進(jìn)行數(shù)據(jù)連接綁定。

注冊成功成為網(wǎng)站會員后，可以查看新聞動態(tài)，查看魅力聲音并去進(jìn)行留言，還可以修改自己在網(wǎng)站注冊的資料信息。需要與后臺數(shù)據(jù)新聞表（xw）、留言表（ly）、用戶姓名（name）表進(jìn)行連接綁定。

（12）網(wǎng)站投票子頁面設(shè)計(jì)。網(wǎng)站投票欄目用戶可以對網(wǎng)站整體印象進(jìn)行投票，并查看投票結(jié)果。需要與后臺數(shù)據(jù)庫投票表（vote）連接綁定。

6.2 后臺設(shè)計(jì)

網(wǎng)站后臺只有系統(tǒng)管理員可以進(jìn)入。后臺的設(shè)計(jì)頁面比較簡單，易于操作。后臺頁面都是動態(tài)頁面，都使用ASP+ Dreamweaver以及JavaScript語句。

（1）后臺登錄頁面設(shè)計(jì)。需要輸入用戶名、密碼以及驗(yàn)證碼，正確后方可登錄到后臺管理頁面。需要與管理員數(shù)據(jù)表（admin）進(jìn)行連接綁定。

（2）后臺新聞管理頁面設(shè)計(jì)。新聞管理可以對新聞進(jìn)行瀏覽、修改、刪除以及發(fā)表。需要與新聞數(shù)據(jù)表（xw）進(jìn)行連接綁定。

（3）后臺留言管理頁面設(shè)計(jì)。留言管理可以對留言進(jìn)行審核、回復(fù)以及刪除。需要與留言數(shù)據(jù)表（ly）數(shù)據(jù)進(jìn)行連接綁定。

（4）后臺用戶管理頁面設(shè)計(jì)。用戶管理可以對普通用戶進(jìn)行資料的修改和刪除以及對管理員的資料修改。需要與用戶姓名表（zc）和管理員數(shù)據(jù)表（admin）數(shù)據(jù)進(jìn)行連接綁定。

（5）后臺圖片管理頁面設(shè)計(jì)。圖片管理可以添加前臺需要展示的圖片信息。需要與圖片數(shù)據(jù)表（tupian）進(jìn)行連接綁定。

7.創(chuàng)新點(diǎn)

網(wǎng)站前后臺的頁面設(shè)計(jì)，前臺網(wǎng)站欄目很有特色，都是圍繞“魅力一中”主體展開，網(wǎng)站可實(shí)現(xiàn)注冊、登錄、新聞的上傳、發(fā)表留言、上傳圖片以及對本網(wǎng)站進(jìn)行投票打分等功能。本網(wǎng)站建設(shè)有靜態(tài)部分也有動態(tài)部分，充分體現(xiàn)數(shù)字技術(shù)的開放性、交互性和共享性的特征。

通過完整制作一個網(wǎng)站，我感到要想做成一件事情就要有嚴(yán)謹(jǐn)認(rèn)真的態(tài)度，還要有不斷完善、精益求精的精神。