基于HTML和CSS的校园网页设计与实现

摘要

随着计算机、互联网与通信技术的进步，Internet在人们的学习、工作和生活中的地位也变得越来越高，校园网站已经成为学校与学生，学生与学生之间交流沟通的重要平台，对同学了解学校内发生的各种事情起到了重要的作用。学校网站建设是学校教育信息化建设的重要方面，是适应现代化教学技术，提高学校通知和管理效率的重要途径。
本课题开发了一个校园网站，主要发布校园日常生活中所发生的事件，完成对学校通知、活动举办、失物招领等的数字化管理。主要用于帮助学生们了解学校内发生的各类事件，也提供给学生们一个可以发布信息的平台，而对管理员而言，本文也开发了一个专门的后台网页，包含了增删改查的功能。使用本网站可以极大地节约通知成本，提高效率。
本文选用了功能十分强大的VisualStudioCode作为开发工具，采用HTML，CSS，JSP以及JavaScript来制作网页，用于数据存储的数据库选择了MySql，使用Tomcat作为临时服务器。经过了多项软件测试，网站基本满足了设计需求，最后对其中存在的各种问题进行了仔细研究，得到了相应的解决方法，并提出了后续更新期望。
关键词：校园网站；HTML；CSS；MySql

程序功能结构图

下图是我设计的网站的功能结构图，通过结构图可以清楚地看到网站的各个部分的功能，以及它们之间的关系。

图1程序功能结构图

数据库概念设计
依照网站的需求分析，可以得出要创建的数据库表单对应的实体有：用户，新闻，收集信息。

用户表单，如图2所示：

新闻表单，如图3所示：

登录/注册

用户输入账号和密码后登录，如果输入值是空的，在提交到MySql的过程中会弹出错误提示窗口，如果输入值非空，并且与MySql中的数据相对应，则提示登录成功。
用户点击登录框右下角“注册”字样切换到注册页面，用户输入账号以及密码进行注册，如果有空值，则弹出相应的警告信息；又或者账号在数据库中已经存在，则弹出账号已存在的提示；如果没有任何问题，网站会将账号以及密码存到MySql，然后提示注册成功。其中登陆流程图如图1所示：

图1登录流程图

结论

本文首先阐述了为什么选择校园网站作为研究方向，并对校园网站的相关背景做了介绍，然后对网站的可行性进行了分析，介绍了编写程序所需要的相关技术及工具，分析了用户需求，并根据需求设计了数据库，展示了其中部分功能的实现方法，最后对已完成的功能进行了软件测试，并在最后得出了结论和后续展望。
校园网站对学校和学生的重要性不言而喻，而国内对这一方面并没有太多重视。本文针对这一问题进行了深入研究和分析，基于编写网页的理论基础和相关理论知识，与校园实际情况综合考虑，通过多方面的分析，给出了一种可行的网站设计，并实现了它。