“魅力一中”網站的設計與實現

石家莊市第一中學 劉匯緣

“魅力一中”網站的設計與實現

石家莊市第一中學 劉匯緣

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

【關鍵詞】魅力校園；魅力園丁；魅力課堂；魅力社團；魅力校報；魅力校友；魅力風采

1.引言

我的母校——石家莊市第一中學，是一所歷史悠久，文化底蘊厚重的學校。我的母校培育了眾多優秀學子，在“上善若水，厚德載物”的校訓下，構建了濃郁的校園文化，我們為在這樣一所優質高中就讀而感到十分自豪，我們熱愛自己的母校。

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

2.研究過程

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

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

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

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

（4） 進行項目網站的前后臺制作。

制作前臺的所有靜態頁面，設計LOGO和BANNER。制作網站后臺的數據庫以及ASP動態網頁部分的內容，滿足上傳新聞、圖片、留言等功能。

（5） 進行該網站的調試與檢測。用以保證網站的正常運轉。

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

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

3.網站功能

3.1 普通用戶功能

該網站設計是面向一般大眾用戶的，因此在欄目的設置和內容的展示上都體現了這點，其普通用戶的功能如下：

（1）網站信息瀏覽。可以瀏覽網站前臺的魅力校園、魅力園丁、魅力課堂、魅力社團等欄目。

（2）查看新聞動態。可以瀏覽網站的新聞，新聞動態欄目包括魅力風采和新聞要事兩種分類版塊。

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

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

（5）網站投票。對網站的建設情況可以在網上投票，以便管理員可以根據同學們對網站的喜好程度進行相應的修改。

（6）瀏覽圖片。可以欣賞一中的校園風景以及最近發生的與同學們有關的重要事件圖片。

3.2 管理員功能

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

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

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

（3）用戶管理。可以對用戶進行修改用戶資料或者刪除經常發不健康內容的用戶以及管理員自我信息的修改。

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

4.總體設計

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

5.數據庫設計

根據網站的整體功能結構，設計出該網站的數據庫。該數據庫表有8個，管理員表（admin）、用戶姓名表（name）、新聞版塊表（bankuai）、留言表（ly）、圖片表（tupian）、投票表（vote）、新聞表（xw）、新聞回復（xw_pl）表。

6.系統詳細設計

6.1 前臺設計

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

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

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

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

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

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

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

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

（9）新聞動態子頁面設計。新聞動態欄目可以查看最新的與同學們有關的校園新聞動態，是網站會員的用戶還可以對新聞進行評價留言。需要與后臺數據庫新聞表（xw）連接綁定。

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

（11）用戶注冊與登錄子頁面設計

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

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

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

6.2 后臺設計

網站后臺只有系統管理員可以進入。后臺的設計頁面比較簡單，易于操作。后臺頁面都是動態頁面，都使用ASP+ Dreamweaver以及JavaScript語句。

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

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

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

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

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

7.創新點

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

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