web项目设计报告

1、web项目设计报告web项目设计报告 web技术及应用大作业项目报告web技术及应用项目设计报告 一一同济大学EP车队官网指导老师：曹建平老师小组成员：陈霏霏 082085黄毓敏 082172尹攀飞 082226目录1、题目 第3页2、项目背景 第3页3、需求分析 第3页4、整体设计 第4页5、详细设计（数据库设计、功能模块设计） 第 5 页6、 小 组 分工 第10页7、心得体会 第11页【题目】 同济大学EP车队官网 【项目背景】 随着日益增 长的能源消耗和严峻的环境问题，节能环保已成为当今汽车 设计的主题。作为汽车工业未来的中坚力量，同济大学EP项目以学生为团队，致力于设计研发节能环保的

2、EP节能赛车，参加世界EP节能竞技大赛，用他们年轻的激情与活力诠释节能环保的 公益主题。同济大学志远车队成立于 2000年，至今已走过了 11年的风雨。在2010年结束的日本 本田宗一郎杯”节能竞技大赛，中国 节能竞技大赛以及壳牌马拉松节能环保大赛三大赛事中， 志远车队均表现由色，在国内外取得了傲人的佳绩，为今后 的发展奠定了坚实的基础。我们小组中有 EP车队中的 中坚力量工对EP有着特殊 的情感，并希望能有更多的人能了解我们，且加入到我们 环保爱车一族”中来，所以，我们希望做这个网页能成为大家交 流的平台和切磋的场地。【需求分析】 环保是当今世界的一大主题，而汽车工业 又是近几年来蓬勃向上的

3、产业，不论是F1赛事的火红，还是汽车市场的 走俏”，都预示着社会对其的强烈关注度；并 且汽车对环境也起着至关重要的作用。所以，作为一个社会人，会关心汽车，会关心环保，更会关心环保汽车的进展。当今世界上都活跃着那么一些人，为此奋斗着，做由创新，参加比赛；也有那么一些人，确无从获得此方面的消息，无 法投身其中。环保车网页就此有了需求，其中我们同济大学汽车学院也占了一席之地 EP志远车队！【整体设计】 由于这是一个比较实用性的、来源相对官方的网站，因此风格较为简 约朴素，广告比较少，页面并不华丽，更多的精力放在了网站的实用性、安全性建设上。来访本网站的用户，被严格的分成了类，每一类用户都有不同的权限

4、。1 .管理员。可以访问所有的页面，同时还设有管理员专用通道（当session中 user_name是 “Admin时，可以访问并管理车队最 机密的信息），管理员可以通过此通道查询、修改、添加、 删除任何用户。2 .车队成员。可以访问任何页面（除去管理员删减人员的页面“ admin.aspx）一些页面上还会显示学生的姓名（从实现存在于数据库中的车队成员名单 “userinfo.mdb中提取。由于要输入所有车队成员的信息这个过程过于繁琐，所以，我们选择填了几个人的基本资料）3.非车队成员。可以访问除去车队资源下载，上传的页面外的所有页面。一些页面上还会显示改用户的昵称。以上所做的这些，最中心的目

5、的就是保证安全性。这是本网站设计的亮点所在。【详细设计】由于详细叙述起来会比较繁琐，所以我按照页面一个一个来介绍页面一：Homepage Homepage的设计亮点有几下几个：1、登陆名次的显示，该message会显示由您是第几个浏览 本网页的。2、友情链接（此版块在接下来的各网页中都会由现），会将我们带领链接到同济大学的官网、同济大学汽车学院的 官网以及汽车学院创新基地的官网。以便于让浏览者能获得更多的相关信息，拓宽他们的视 野。3、我们也预留由了一个版块可以留由来用来招商，放 广告。4、登陆以及注册版块：如是车队成员，则在下拉框里选择车队成员工接着输入您的姓名和密码，点击登录，网页会直接带

6、领你到个人信息版 块，因为车队成员的信息已经完整地输入在数据库里，并由 管理员管理，您可以从此版块跳转到聊天室，资料管理下载 界面和车队通讯录界面。如果是非车队成员，请先点击注册，进入注册页面。注册完成后，再登录，则会根据你刚刚insert的数据验证, 并直接带你跳入聊天界面，可以和车队成员近距离的接触和 切磋。如果是管理员，则用户名为“Admin；可以直接进入人员删减编辑的界面进行管理。页面二：注册界面login.aspx login的设计亮点有以下几个:1、验证码的设计，登录者会随机看到四位数字，作为验证码，且必须填写。随着每次刷新页面，此四位数字会发生变化。2、在输入的基本信息中，我们加

7、入了各种验证控件，包括正则，必须填写，以及长度规定的等等。在用户名注册的时候，如果你所要注册的昵称已经有人使用，则不能再申请。3、兴趣爱好的多项选择 4、填完后的资料会添加到空白的数据库表guestinfo.mdb中，进行记录，以便下次登录。页面三：聊天室界面chattingroom.aspx此界面的亮点有以下几个：1、发言框上面会用session引过来登陆者的名称2、聊天框里可以选择字体的不同颜色。发言后会按照“XXX说：时间说话的内容”发言的内容是你刚选择的字体的颜色。3、按 离开聊天室”就会回到主页。4、可以选择输入信息的字体大小，颜色，和插入各种表情页面五：资源共享界面 downloa

8、d.aspx此页面就是三图标之一带领到的网页，亮点有以下几个：1、浏览上传文件，可从本地将文件上传到公共网页，让大家共享2、点击文件名可下载此文件3、点击删除按钮可将此文件删除页面六：车队通讯录addresslist.aspx此页面呈现车队成员的通讯录， 改页面的亮点有下：1、车队成员资料的查询，用数据库表的查询语句，可以 在userinfo表中查由你要的同学的基本信息，然后方便车队 成员之间的联系和交流。2、下方的datalist里呈现着车队成员的所有联系方式。没耐心寻找的可以使用查询功能。页面七：Technik页面 此页面介绍的是有关 EP赛车的一些基本知识， 亮点有其下：1、点击不同的图

9、片可以进入到不同的，讲述汽车不同的 部分的知识的网页。方便浏览者获取专业信息。2、特别是第一张大图， 我们利用了 dreamweaver的热点 功能，点该图上对应的汽车部分，就会跳由有关这部分知识 的网页。页面八：介绍页面 vollstellung.aspx 1、 改页面主要介绍 EP车队的一 些资料。让大家有一个基本的认识2、此页面下端有一个图片观察窗，可以获得并查看所有有关的图片，能让人有一个直观的感受。页面九：车队成员个人信息页user.aspx此页面是车队成员登陆成功后到的页面1、车队成员同样可以跳转到三个网页2、并且可以直接根据自己的信息，进行信息的更改编辑。这是通过datalist

10、这个控件来实现达到的。页面十：car页面autos.aspx此页面是展示车队进几年来赛车图片的 页面1、在下拉框里可以选择赛车的年份2、展示图片由就会相应地跳由相关的图片，展示你所要看的赛车。3、在图片上方的label里还会由现相应的简介。页面H一：race页面match.aspx此页面展示的是 EP所征战的各大赛事1、点击不同赛事的图片，就会进入该赛事详细介绍的网页。2、在有关赛事的页面上也设有图片展示这一部分。其余网页：其余网页只是单纯的信息展示，而并无web程序设计的有关 交互。所以就不在此赘述了。由以上的详细介绍应该可以看到我们此网页满足了老师对程序编辑和数据库运用的基本要求。【小组分

11、工】 小组成员: 陈霏霏082085;黄毓敏082172;尹攀飞082226设计报告书的撰写：陈霏霏中优PPT的制作：尹攀飞网页框架的制定：陈霏霏，尹攀飞，黄毓敏（讨论商量所得）有关EP的资料收集：尹攀飞 有关EP的照片收集：黄毓敏 有关网页的美化、排版工作：陈霏霏 滚动图片窗口的制作：尹攀飞 登陆，注册以及聊天界面制作以及程序编写：黄毓敏technik网页&Dreamweaver热点操作的设计&历年赛车展示的程序编写：陈霏霏race, growth&activity 等网页的制作：尹攀飞 资源共享界面（上传，下载 &删除）的网页制作及程序编写：陈霏霏个人信息的

12、编辑以及管理员界面对成员进行编辑和删除的制作：尹攀飞 contact us界面和sponsor界面的制作：黄毓敏【心得体会】上完这门课，真的是收获颇丰。我的每一份实验报告里我都有写一句话：实践检验真理我觉得这句话用在网页制作上尤其合适。网页制作的过程在脑中是十分顺畅的，改用哪个控件，编一个什么程序不就可以了吗？但是当你真正在计算机上实践时，却并不是那么回事！ 为什么我这句话老是错呢？明明 对的啊？ ”哪里没定义啊，明明定义过了啊”各种各样的问题，尤其千奇百怪。做这个网页的过程中，还碰到过用不同的电脑会有不同的 结果的事情。而我们能做的，就是平心静气的检查每一句语句，一遍遍 的调试，一遍遍的修改。再不行就上网搜解决方法，不知不觉中竟然也学到了不 少。想到靠我们自己的力