WEB项目设计报告

web技术及应用项目设计报告同济大学EP车队官网指导老师：曹建平 老师 小组成员：陈霏霏082085 黄毓敏082172 尹攀飞082226目录1、题目第3页2、项目背景第3页3、需求分析第3页4、整体设计第4页5、详细设计（数据库设计、功能模块设计）第5页6、小组分工第10页7、心得体会第11页【题目】同济大学EP车队官网【项目背景】 随着日益增长的能源消耗和严峻的环境问题，节能环保已成为当今汽车设计的主题。作为汽车工业未来的中坚力量，同济大学EP项目以学生为团队，致力于设计研发节能环保的EP节能赛车,参加世界EP节能竞技大赛，用他们年轻的激情与活力诠释节能环保的公益主题。同济大学志远车队成立于2000年，至今已走过了11年的风雨。在2010年结束的日本“本田宗一郎杯”节能竞技大赛，中国节能竞技大赛以及 壳牌马拉松节能环保大赛三大赛事中，志远车队均表现出色，在国内外取得了傲人的佳绩，为今后的发展奠定了坚实的基础。我们小组中有EP车队中的“中坚力量”，对EP有着特殊的情感，并希望能有更多的人能了解我们，且加入到我们“环保爱车一族”中来，所以，我们希望做这个网页能成为大家交流的平台和切磋的场地。【需求分析】 环保是当今世界的一大主题，而汽车工业又是近几年来蓬勃向上的产业，不论是F1赛事的火红，还是汽车市场的“走俏”，都预示着社会对其的强烈关注度；并且汽车对环境也起着至关重要的作用。所以，作为一个社会人，会关心汽车，会关心环保，更会关心环保汽车的进展。当今世界上都活跃着那么一些人，为此奋斗着，做出创新，参加比赛；也有那么一些人，确无从获得此方面的消息，无法投身其中。环保车网页就此有了需求，其中我们同济大学汽车学院也占了一席之地EP志远车队！【整体设计】由于这是一个比较实用性的、来源相对官方的网站，因此风格较为简约朴素，广告比较少，页面并不华丽，更多的精力放在了网站的实用性、安全性建设上。来访本网站的用户，被严格的分成了类，每一类用户都有不同的权限。1.管理员。可以访问所有的页面，同时还设有管理员专用通道（当session中user_name是“Admin”时，可以访问并管理车队最机密的信息），管理员可以通过此通道查询、修改、添加、删除任何用户。2.车队成员。可以访问任何页面（除去管理员删减人员的页面“admin.aspx”）。一些页面上还会显示学生的姓名（从实现存在于数据库中的车队成员名单“userinfo.mdb”中提取。由于要输入所有车队成员的信息这个过程过于繁琐，所以，我们选择填了几个人的基本资料）3.非车队成员。可以访问除去车队资源下载，上传的页面外的所有页面。一些页面上还会显示改用户的昵称。以上所做的这些，最中心的目的就是保证安全性。这是本网站设计的亮点所在。【详细设计】由于详细叙述起来会比较繁琐，所以我按照页面一个一个来介绍页面一：HomepageHomepage的设计亮点有几下几个：1、 登陆名次的显示，该message会显示出您是第几个浏览本网页的。2、 友情链接（此版块在接下来的各网页中都会出现），会将我们带领链接到同济大学的官网、同济大学汽车学院的官网以及汽车学院创新基地的官网。以便于让浏览者能获得更多的相关信息，拓宽他们的视野。 3、 我们也预留出了一个版块可以留出来用来招商，放广告。4、 登陆以及注册版块：如是车队成员，则在下拉框里选择“车队成员”，接着输入您的姓名和密码，点击登录，网页会直接带领你到个人信息版块，因为车队成员的信息已经完整地输入在数据库里，并由管理员管理，您可以从此版块跳转到聊天室，资料管理下载界面和车队通讯录界面。如果是非车队成员，请先点击注册，进入注册页面。注册完成后，再登录，则会根据你刚刚insert的数据验证，并直接带你跳入聊天界面，可以和车队成员近距离的接触和切磋。如果是管理员，则用户名为“Admin”，可以直接进入人员删减编辑的界面进行管理。 页面二：注册界面login.aspxlogin的设计亮点有以下几个：1、 验证码的设计，登录者会随机看到四位数字，作为验证码，且必须填写。随着每次刷新页面，此四位数字会发生变化。2、 在输入的基本信息中，我们加入了各种验证控件，包括正则，必须填写，以及长度规定的等等。在用户名注册的时候，如果你所要注册的昵称已经有人使用，则不能再申请。3、 兴趣爱好的多项选择4、 填完后的资料会添加到空白的数据库表guestinfo.mdb中，进行记录，以便下次登录。页面三：聊天室界面chattingroom.aspx此界面的亮点有以下几个：1、 发言框上面会用session引过来登陆者的名称2、 聊天框里可以选择字体的不同颜色。发言后会按照“XXX说：时间说话的内容”发言的内容是你刚选择的字体的颜色。3、 按“离开聊天室”就会回到主页。4、可以选择输入信息的字体大小，颜色，和插入各种表情页面五：资源共享界面download.aspx此页面就是三图标之一带领到的网页，亮点有以下几个：1、 浏览上传文件，可从本地将文件上传到公共网页，让大家共享2、 点击文件名可下载此文件3、 点击删除按钮可将此文件删除页面六：车队通讯录addresslist.aspx此页面呈现车队成员的通讯录，改页面的亮点有下：1、 车队成员资料的查询，用数据库表的查询语句，可以在userinfo表中查出你要的同学的基本信息，然后方便车队成员之间的联系和交流。2、 下方的datalist里呈现着车队成员的所有联系方式。没耐心寻找的可以使用查询功能。页面七：Technik页面此页面介绍的是有关EP赛车的一些基本知识，亮点有其下：1、 点击不同的图片可以进入到不同的，讲述汽车不同的部分的知识的网页。方便浏览者获取专业信息。2、 特别是第一张大图，我们利用了dreamweaver的热点功能，点该图上对应的汽车部分，就会跳出有关这部分知识的网页。页面八：介绍页面vollstellung.aspx1、 改页面主要介绍EP车队的一些资料。让大家有一个基本的认识。2、 此页面下端有一个图片观察窗，可以获得并查看所有有关的图片，能让人有一个直观的感受。页面九：车队成员个人信息页user.aspx此页面是车队成员登陆成功后到的页面1、 车队成员同样可以跳转到三个网页2、 并且可以直接根据自己的信息，进行信息的更改编辑。这是通过datalist这个控件来实现达到的。 页面十：car页面autos.aspx此页面是展示车队进几年来赛车图片的页面1、 在下拉框里可以选择赛车的年份2、 展示图片出就会相应地跳出相关的图片，展示你所要看的赛车。3、 在图片上方的label里还会出现相应的简介。页面十一：race页面match.aspx此页面展示的是EP所征战的各大赛事1、 点击不同赛事的图片，就会进入该赛事详细介绍的网页。2、 在有关赛事的页面上也设有图片展示这一部分。其余网页：其余网页只是单纯的信息展示，而并无web程序设计的有关交互。所以就不在此赘述了。由以上的详细介绍应该可以看到我们此网页满足了老师对程序编辑和数据库运用的基本要求。【小组分工】小组成员：陈霏霏082085；黄毓敏082172；尹攀飞082226设计报告书的撰写：陈霏霏申优PPT的制作：尹攀飞网页框架的制定：陈霏霏，尹攀飞，黄毓敏（讨论商量所得）有关EP的资料收集：尹攀飞有关EP的照片收集：黄毓敏有关网页的美化、排版工作：陈霏霏滚动图片窗口的制作：尹攀飞登陆，注册以及聊天界面制作以及程序编写：黄毓敏technik网页&Dreamweaver热点操作的设计&历年赛车展示的程序编写：陈霏霏race，growth&activity等网页的制作：尹攀飞资源共享界面（上传，下载&删除）的网页制作及程序编写：陈霏霏个人信息的编辑以及管理员界面对成员进行编辑和删除的制作：尹攀飞contact us界面和sponsor界面的制作：黄毓敏 【心得体会】 上完这门课，真的是收获颇丰。我的每一份实验报告里我都有写一句话：“实践检验真理”。我觉得这句话用在网页制作上尤其合适。网页制作的过程在脑中是十分顺畅的，改用哪个控件，编一个什么程序不就可以了吗？但是当你真正在计算机上实践时，却并不是那么回事！“为什么我这句话老是错呢？明明对的啊？”“哪里没定义啊，明明定义过了啊”各种各样的问题，尤其千奇百怪。做这个网页的过程中，还碰到过用不同的电脑会有不同的结果的事情。而我们能做的，就是平心静气的检查每一句语句，一遍遍的调试，一遍遍的修改。再不行就上网搜解决方法，不知不觉中竟然也学到了不少。想到靠我们自己的力量尽然做出了一个和我们天天浏览的网页差不多的网页（虽然还存在着很大的差距）。但那份满足以及自豪是难以掩盖的。希望老师在批阅的过程中检验我们的劳动成果，有不足的地方欢迎批评指正。PS：十分感谢曹建平老师在一个学期中对我们的教导，有时陪着我们一个下午，的确是非常辛苦您了！希望您以后工作，生活一帆风顺，万事如意！您的学生：陈霏霏，黄毓敏，尹攀飞祝好！