网页设计说明书.doc

交通运输系计算机程序设计综合实践教学系统开发说明书学号： 20107745 20107746 20107747 姓名： 黄蕴莹 贺海燕 蒋雪梅 班级： 铁运四班 题目： 网站设计入门 指导教师：陈东 廖健 刘意 朱虹宇 王正彬 沈丽萍 计算机程序设计综合实践 目录1.网站概述设计21.1.项目背景与意义21.1.1.项目背景21.1.2.项目意义21.2.相关技术与开发工具介绍22.网站总体设计32.1.需求分析32.1.1.功能需求32.2.用户界面需求42.3.概要设计42.3.1.软件结构设计42.3.2.数据库分析与设计52.4.网站的总体规划53.详细设计63.1.网站主体的设计63.2.主页设计63.3.功能模版的设计73.3.1.各个模板界面设计73.3.2.各模板界面间的衔接设计113.4.代码设计113.4.1.管理登录113.4.2.留言板113.4.3.日期164.网站的更新维护175.总结与展望175.1.当前存在的问题和今后开发的方向175.2.心得与体会181. 网站概述设计1.1. 项目背景与意义1.1.1. 项目背景随着网络技术的发展，许多的人们都通过上网来打发无聊的时间，所以在网上发布一些消息，同学们很快就会知道。网站制作为校内事务的传达和通知提供了方便。所以本次暑期计算机实习，我们组所选的题目是第十个网站设计入门。主要任务是根据相关资料及老师要求设计出一个我系的系网。要求外形越美观越精致越好。1.1.2. 项目意义我们学习就是为了获得知识，现在我们学习了网站设计，当然就是要能做一个精美的网站。在此次网站设计中，我们要能更加的了解网页设计工具强大的功能和更好的使用它。诚然，在此次改进我们的系网主页，一方面是为了完成我们的作业，但更重要的是把我们所学到的东西用在具体的实践之中，所以，这次设计的目的也是要我们更好的掌握和使用网页设计工具和技术，以便提高对网页知识的更深层了解。第三点也是最要的一点是，把我们在书本上学到的知识充分运用到此次设计之中。使我们的在书上学到的东西不仅仅停留在表面上，把这些东西都用在所要做的网页上面。以达到老师要求的效果和学以致用。1.2. 相关技术与开发工具介绍Microsfot dreamwear 是一款可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash等媒体格式和动态HTML、给予团队的Web创作。Adobe photoshop 是由美国Adobe公司开发的图象设计及处理软件，以其强大的功能备受用户的青睐。它是一个集图像扫描、编辑修改、图像制作、广告创意、图像合成、图像输入/输出、网页制作于一体的专业图形处理软件。FlashFlash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用 Flash 创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的 Flash 应用程序。Flash 特别适用于创建通过 Internet 提供的内容，因为它的文件非常小。Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。2. 网站总体设计2.1. 需求分析2.1.1. 功能需求 作为一个系网，主要目的就是希望能够及时的向同学及老师们传递学校的相关信息。这就要求我们所设计的网站的界面必须具备以下模块：系概况模块（系简介、现任领导、历任领导、教学团队、机构设置、专业设置）、新闻模块、教育教学模块（本科培养方案、实验室实践、暑期实践、毕业设计与论文、学习园地）、学生工作模块（学生工作组介绍，奖、惩、贷、助、勤）、党建模块、交流合作模块、招生就业模块（招生信息、就业信息）、学生组织模块（学生会、青协、物流协会等等）、规章制度模块、留言模块、在线交流模块、友情链接模块、各类资料下载模块、权限管理模块。除此之外，同学可以凭借自己的学号、密码等信息在网站上对自己的考试成绩等信息进行查阅。是加强学生和学校联系的重要桥梁！系首页院系简介教育教学交运党建学生管理招生就业学籍查询资料下载友情链接管理登录在线留言思想建设组织建设制度建设勤工俭学就业信息就业政策交运动态学生工作理论与实践教师文件学生文件其他文件网站主体布局图2.2. 用户界面需求用户界面的一致性很关键，界面的结构必须清晰且所有的术语要保持一致。遵循对比原则，在浅色背景上使用深色文字，在深色背景上使用浅色文字。用户登录界面必须清晰明了，与其他模块区分开来。界面对象在视觉上、感觉上和行为上应与其在现实中的表现一致。弹出菜单不应该是唯一的功能来源，要实现多功能的整合应用。界面的切换、布局很重要。用户要能够自由快速的对界面上每一项做出选择，并且所有选择都是可逆的。此外，为了让网站更具有吸引力不乏插入一些简单的flash动画或者有能力的可以制作技术含量较高的动态网站。2.3. 概要设计2.3.1. 软件结构设计制作网站过程中，需要使用到dreamweaver来制作部分html静态网页，这样可以优化系统性能。使用Photoshop来对图片进行美化修饰使其符合网站的整体色彩、风格效果。利用flash来进行部分动画制作，插入网站中。使其更加生动，更具吸引力。2.3.2. 数据库分析与设计根据分析数据库的E-R图为：游览者登录名网页网页名游览管理员姓名工号号种类性别登录密码日期编码存放位置作者LIANG管理统计登录名登录密码新闻编号号日期号发布日期号发言留言留言板日期号主题号姓名号日期号发布网址号2.4. 网站的总体规划我们在制作网页前首先要做的是要对网页内容进行一下具体的规划,确定一下制作的思路和目的,从而更方便我们的设计和制作。创建新网页最佳方法是先建立原型系统，再进行详细设计，最后正式实施。原型系统最主要的目标是学习、尝试采用不同的方法修改目标、更新形象。原型系统开发过程中要解决网页建设的一些基本问题。例如：网页的结构；网页整体风格的构思和素材的搜集；主页的制作； 存储信息的物理方法（采用数据库还是文件系统）； 结构的完整性和一致性的维护方法。这些问题没有绝对的答案，只能在制作网页时根据实际情况进行选择。详细设计包括画面的布局、系统的内部结构、实现方法和维护方法等。3. 详细设计3.1. 网站主体的设计网页背景为蓝色，采用上下结构。上方为网名、校徽和管理登录，下方分左中右结构，左面是导航和友情链接，中间部分为具体内容，右面是学生工作和一些有关图片及留言板。页面基本上每个图标，每个关键字都设有链接。网站的整体设计美观、大气，布局合理。3.2. 主页设计主页设计整体图如下：主页设计图整个主页设计包括：A 导航设计 导航主要包括：院系简介、教育教学、交运党建、学生管理、招生就业、学籍管理、资料下载，共计7个模块。B 网页内容设计 主页的网页如上图所示，网页顶部是标题“西南交通大学峨眉校区 交通运输系”，网页右上侧为校徽和管理登录，中间是交运动态。网页的主体则是由左侧的导航组成。整个主页简洁大方，又不失大气。3.3. 功能模版的设计3.3.1. 各个模板界面设计A. 院系简介1 构成：系简介和现任领导两个板块。具体如下图：内容：网页的页首由标题“系概况”构成。网页的左侧边为该网页的导航，右侧为现任领导简介。B. 教育教学这个模块主要分理论、实践和课程设计三个板块。网页结构按主页主页结构设计C、 交运党建由思想建设和组织建设两板块构成，网页由主页结构组成。D. 学生管理：由制度建设、奖学金与助学金、勤工检学、助学贷款等构成。E. 招生就业：构成：就业信息和就业政策两个板块构成。F. 资料下载：构成：教师文件、学生文件和其他文件三个板块构成。G. 学籍管理由VB编程而成其登录界面如下（用户名和密码为：HYY）：登录界面查询管理界面为：查询管理界面H、友情链接由九里校区、西南交通大学和精勤学生网组成。位于网页的左下，如下图：I. 管理登录：点击主页的“管理登录”进入如下界面：登录后即可进入管理。J. 留言板：点击主页的“留言板”即可进入如下界面：点击右下的“我要发言”即可进入如下界面进行在线留言。点击留言板上发言人的名字，即可进入如下回复界面。还可以通过管理数据库对信息进行删除、刷新等管理，如下：3.3.2. 各模板界面间的衔接设计A. 首页的链接：首页的链接主要由页面左侧的文字进行。点击相应的文字，即可进入对应的网页。B. 子网页与首页的链接：我们以导航中的“首页”为链接，点击“首页”的字样，即可返回主页。部分网页还有其子网页。点击你要进入的内容，即可进入链接的下一个网页。3.4. 代码设计3.4.1. 管理登录3.4.2. 留言板 留言本.STYLE4 font-size: 24px;color: #F00;   %Function proc(txt1)dim txt2txt2=Replace(txt1,>)txt2=Replace(txt2,)txt2=Replace(txt2,Chr(13),)proc=txt2End FunctionIf Request(task)=insert then If Request(name)= then name=无名 else name=Request(name) name=proc(name) end if If Request(wangzhi)= then wangzhi=无 else wangzhi=Request(wangzhi) wangzhi=proc(wangzhi) end if if request(topic)= then topic=无else topic=request(topic)topic=proc(topic)end ifif request(email)= then email=无 else email=Request(email) email=proc(email) end if if request(url)= then url=没有 else url=Request(url) url=proc(url) end if sj = Date() sj = sj & & Hour(Time() & : & Minute(Time() If Request(inputtxt)= then Response.write(请输入留言！) Response.end else inputtxt=Request(inputtxt) inputtxt=proc(inputtxt) end if sql=INSERT INTO gbook (ip,name,url,email,sj,topic,inputtxt,wangzhi) VALUES ( sql=sql & Request(REMOTE_ADDR) & , & name & , & url & , & email & , & sj & , & topic & , & inputtxt & , & wangzhi & ) conn.execute(sql)end iftask=insert% 留言板 %set rs=server.createobject(adodb.recordset)on error resume nextrs.open select * from gbook order by sj DESC,conn,1,1rs.pagesize=5rs.AbsolutePage =1if request(page) then rs.AbsolutePage =Request(page)RowCount =rs.pagesizeif not rs.eof then Do While Not RS.EOF and RowCount0% 姓名：a href=mailto: 网址：a href= 文章主题： 文章内容： 时间： IP： ID： 1 then % 页码 a href=index.asp?page= 到 / 我要发言 form method=POST action= 请你留言 input type=hidden name=user value= 你的姓名： 邮件地址： 网站名称： 网站地址： 留言主题： 文章内容： 3.4.3. 日期  setInterval(DateTime.innerHTML=new Date().toLocaleString()+ 星期+日一二三四五六.charAt(new Date().getDay();,900); 4. 网站的更新维护网站维护是网站建设中极其重要的部分，也是最容易被忽略的部分。不进行维护的网站，很快就会因内容陈旧，信息过时而无人问津，或因技术原因而无法运行。这是目前网站建设中最大的弊病。简单地说：建好了网站，只是企业开展电子商务的第一步，要真正让网站发挥作用，网站维护及网站推广才是重要的。所谓网站维护，即是要经常对网站内容进行更新维护。1、不断充实网站内容，使之始终同步反映交运系和学校的动态。2、及时回复访问者的留言和Email信件。3、不断增加网上在线服务功能。4、关注访问者在网上的活动。5、重视网上宣传，包括友情链接、网络广告等。5. 总结与展望5.1. 当前存在的问题和今后开发的方向这一次仅为期7天的计算机实习，我们通过自学及向老师请教，初步完成了网站入门设计的课题。本次网站入门设计涉及的计算机方面知识包括flash、photoshop及dreamweaver的运用还有一些普通运用软件如flash抓捕器、美图秀秀等。但因为并没有系统的学习过，因而在完成的作业中也存在一些问题如下：1没有实现专业的动态网页制作，这也是基于专业知识不足的原因，我们需要更多的时间去学习；2由于网站的制作是由多人共同完成，也造成了部分网页风格不一的情况，但稍加改动即可。3我们现在设计的网站比较规范，但却忽略了其他人对网站的需求性，不能很好的满足各种内型的人群；4很多网页的界面若按照严格意义上说还需要改正，在布局和色彩的运用上应多加考虑，所以需要更长的时间让我们去修缮；另一方面，不是每一件事情一开始都会做的完满，我们现在真对这些问题可以做相应的改善，并希望可以为系网的建设提出新思路。由于系网的服务对象是针对两种人群：一、教师；二、学生。我们作为学生更能了解大家需要一个怎样的平台来交流互动。因此，我们这个网站设计的理念是：实用、简洁、多功能的网络学术交流平台。使用更加友好的界面给学生。为什么要提出这样的设计理念呢？1现在的学生比较偏爱于一些创意网站，这一点是他们大可接受的；2由于学校的几个系都有各自的网站，但都是相貌平平，并不能突出这是一个大学校园的网站，缺少了一份生机与创造力。如果我们系可以推陈出新，可以给校园里引领一股充满新意的校园文化。3通过对过去系网的了解，我们都感觉到系网本身存在很多问题，有重新建设的必要性。对于教师群体，据调查大部分年轻教师是可以接受这样的网站的，而对更偏向于传统网站的老师们，我们也专门设计了相关的选