“魅力一中”网站的设计与实现

石家庄市第一中学 刘汇缘

“魅力一中”网站的设计与实现

石家庄市第一中学 刘汇缘

【摘要】以学生的视角建立母校——魅力一中网站，彰显母校丰富的人文育人环境，通过魅力校园、魅力园丁、魅力课堂、魅力社团、魅力校报、魅力校友、魅力风采，多视角展现我魅力一中的不凡之处。通过网站的建立，宣传母校的卓越之处，展现一中学生学习生活状况，使同学们热爱母校，激发同学们勤奋学习，努力做最好的自己，以“展一中魅力 现一中风采”。本网站建设有静态和动态部分，充分体现数字技术的开放性、交互性和共享性的特征。

【关键词】魅力校园；魅力园丁；魅力课堂；魅力社团；魅力校报；魅力校友；魅力风采

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.创新点

网站前后台的页面设计，前台网站栏目很有特色，都是围绕“魅力一中”主体展开，网站可实现注册、登录、新闻的上传、发表留言、上传图片以及对本网站进行投票打分等功能。本网站建设有静态部分也有动态部分，充分体现数字技术的开放性、交互性和共享性的特征。

通过完整制作一个网站，我感到要想做成一件事情就要有严谨认真的态度，还要有不断完善、精益求精的精神。