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

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

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

【摘要】以學(xué)生的視角建立母校——魅力一中網(wǎng)站，彰顯母校豐富的人文育人環(huán)境，通過(guò)魅力校園、魅力園丁、魅力課堂、魅力社團(tuán)、魅力校報(bào)、魅力校友、魅力風(fēng)采，多視角展現(xiàn)我魅力一中的不凡之處。通過(guò)網(wǎng)站的建立，宣傳母校的卓越之處，展現(xiàn)一中學(xué)生學(xué)習(xí)生活狀況，使同學(xué)們熱愛母校，激發(fā)同學(xué)們勤奮學(xué)習(xí)，努力做最好的自己，以“展一中魅力 現(xiàn)一中風(fēng)采”。本網(wǎng)站建設(shè)有靜態(tài)和動(dòng)態(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.研究過(guò)程

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

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

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

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

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

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

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

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

Adobe Dreamweaver CS5、Adobe Flash CS5、Adobe Photoshop CS5、Microsoft Office Access 2013、ASP、JavaScript語(yǔ)言。

3.網(wǎng)站功能

3.1 普通用戶功能

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

（1）網(wǎng)站信息瀏覽?？梢詾g覽網(wǎng)站前臺(tái)的魅力校園、魅力園丁、魅力課堂、魅力社團(tuán)等欄目。

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

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

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

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

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

3.2 管理員功能

本網(wǎng)站設(shè)置了兩個(gè)管理員賬戶，對(duì)整個(gè)后臺(tái)管理?yè)碛腥繖?quán)限，包括新聞管理、留言管理、用戶管理、圖片管理。管理員的具體功能如下：

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

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

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

（4）圖片管理?？梢陨蟼髯钚碌恼宫F(xiàn)一中魅力的圖片資料，添加后可在首頁(yè)看到該圖片。

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

該網(wǎng)站主要?jiǎng)澐譃?個(gè)一級(jí)欄目：首頁(yè)、魅力校園、魅力園丁、魅力課堂、魅力社團(tuán)、魅力校報(bào)、魅力校友、魅力風(fēng)采。

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

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

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

6.1 前臺(tái)設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.2 后臺(tái)設(shè)計(jì)

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

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

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

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

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

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

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

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

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