华德福学园的详细设计与实现本科毕业设计.docVIP

期末报告 徐州 系统的设计与分析 班级 软件142 学生姓名 秦泗奇 学号 14323042059 详细设计及实现 一、总体方案 本系统采用的是Microsoft Visual Studio 2010结构开发的，采用Microsoft SQL Server数据库，采用的模型为B/S结构，系统是通过华德福学园的实际要求模拟开发，能够完成一个教育机构网站应有的所有功能，为了提高系统的创建速度，我们在编排时候没有采用现在比较流行的三层架构，而是采用了较为传统的双层结构，节约网站的时间，使组员更容易了解代码的意思。徐州悦心之家华德福实践学园基本功能包括：在线报名、在线留言、上传下载资料、上传图片、考勤管理、健康管理等功能模块，整个系统的布局是一个前台，两个后台的形式，管理员后台拥有最高的权限，教师的后台只能管理学生信息，而前台的数据大多为管理员后台里添加的数据。而我做的功能有三大项，主页图片管理，资料信息管理和互动信息管理。 （1）在线报名功能模块，只有在线报名后才可以进行一些操作，在线报名时主要填写信息为基本资料、用户名、密码即可，基本资料里的很多字段都有检测格式是否正确的功能（如：邮箱）。 （2）报名后的用户可以对自己报名的信息进行修改，也可以对报名时的明码进行修改。 （3）教师用户有如下的功能：查看公告信息，查看本班学生信息，查看、下载资料、添加考勤健康信息等，发布公告与上传资料是管理员的权限，只有管理员可以有此功能，教师可以对自己的基本信息进行修改，如姓名电话，用户密 （4）管理员是对用户的数据进行管理的，如教师信息管理，互动信息管理等，管理是拥有最高权限的，并且可以拥有教师的所有权限，可以管理删除教师信息，为整个系统的前台和后台提供数据支持。 二、前台界面设计 本系统采用DIV+CSS网页的布局方法，它有别于传统的HTML网页设计语言中的表格定位方式，可实现 网页页面内容与表现分离，它系统中还使用了现在较流行的HTML5语言，它实际就是包括HTML、CSS和JavaScript在内的一套技术组合，通过JavaScript中的Jquery实现动画的效果，它是轻量级的js库，它兼容CSS3还兼容各种浏览器，例如IE6.0+,IE8,IE9，等，jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可，通过以上的技术使页面更绚丽，美观。 用户的界面在设计上是模拟华德福教育理念而设计的，主要以大自然的绿色为主色调，所以在使用上就能让人们感受到华德福教育理念的特点，主界面使用Iframe嵌套，它的采用的是异步加载技术，现在大多数网站会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为它可以和主页面并行加载，不会阻塞主页面。 2.1 模板页展示与实现 我负责系统的前台主要功能有三部分：主页图片的展示，资料信息的查看与下载，开放日的预约。还有一个整个前台模板页的布局与排版。 前台模板页采用人性化布局设计，集成了系统前台初始的布局模样。前期我们通过对系统要求的分析，将模板页菜单分为网站首页，公告通知，资料下载，开放日，父母成长中心，在线报名，华德福微博，个人记录八大功能模块。每个功能模块在模板页里就已经链接到相对应的页面，所以在设计其他网页的时候减轻了工作强度和缩短了工作时间。在网站前台的下方，我们也留了两个端口来进入教师和管理员的后台。网站的左侧是一个注册用户的登陆，注册过的用户可以通过登陆的方式修改个人资料，也可以查看个人记录，个人记录只有登陆后才能查看。如图所示。 图5.1 模板页的设计 2.2 网站首页的布局与实现 网站首页主要由徐州悦心之家华德福实践学园的理念与介绍和校园风采的展示两部分组成。因为学园理念与介绍在一般情况下是一成不变的，所以在设计的时候，我才用了直接填写的方式，而没有和后台相联系。校园风采是学校各种活动图片的展示中心，主要是由标题和图片组成，在设计上采用了读取数据库前八张图片的特点，由数据库数据传播到前台DataList控件里，在布局上将DataList布局为四列，图片在上，标题在下的形式使得校园展示看起来更美观整洁。如图所示。 图5.2 网站首页的设计 2.3 资料下载的布局与实现 经过实际的分析与考察，一个学校网站至关重要的一项便是资料与信息的下载，资料的下载意味着资源的共享与传播，开源！公益！资源的利用价值得到了大大提升，而他获得的途径也变的简易，一般人们想要学校或者