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

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

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

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

【摘要】以學(xué)生的視角建立母校——魅力一中網(wǎng)站，彰顯母校豐富的人文育人環(huán)境，通過魅力校園、魅力園丁、魅力課堂、魅力社團、魅力校報、魅力校友、魅力風(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)鍵詞】魅力校園；魅力園??；魅力課堂；魅力社團；魅力校報；魅力校友；魅力風(fēng)采

1.引言

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

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

2.研究過程

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

（2） 準備該項目的素材。

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

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

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

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

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

使用了以下幾種軟件進行制作：

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

3.網(wǎng)站功能

3.1 普通用戶功能

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

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

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

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

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

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

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

3.2 管理員功能

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

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

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

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

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

4.總體設(shè)計

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

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

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

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

6.1 前臺設(shè)計

（1）首頁設(shè)計。首頁是一個網(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制作。在首頁可進行用戶的注冊與登錄；可進行站內(nèi)搜索新聞；可對網(wǎng)站的設(shè)計進行在線投票；可查看新聞動態(tài)、圖片展示以及魅力聲音留言。

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

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

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

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

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

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

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

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

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

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

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

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

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

6.2 后臺設(shè)計

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

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

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

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

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

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

7.創(chuàng)新點

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

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