搜索
基于Web超级同学录网站设计与开发第1页共16页广东松山职业技术学院毕业（设计）论文题目：基于Web超级同学录网站设计与开发姓名：年级、专业：指导教师：年月日2004级函授班毕业设计论文第2页共16页第一章引言随着INTERNET的不断发展，越来越多的用户进入网络，利用网络资源。尤其是利用网络来发布信息，与亲朋好友联系。例如Email，OICQ，同学录等等。一个好的同学录更加成为用户之间进行交流的友好平台。毕业在即，为了更好的加强本班同学之间的联系，方便同学之间的交流，设计这样的一个同学录，目的是在全班的同学都参与进来，为我们提供一个良好的交流互动的平台，曾近同学之间的感情。2．第二章网站设计概述1站点的总体规划本同学录主要分为以下几个模块：班级通讯录，班级相册，班级留言板。其中主要做了班级通讯录，班级留言板和班级相册的部分程序。后台数据库采用ACCESS，用ASP实现对数据库的存取访问。2．2开发工具说明DreamwearerMX2004、FLASH、FireworksMX2004、HTMLSWiSHmax等2．3主要模块划分2．3．1班级通讯录可以浏览班级成员的通讯方式，包括QICQ，电子邮箱，工作地点，联系电话2．3．2班级相册在页面中可以浏览到班级的同学照片或者集体相片等2．3．3班级留言板向班级的任何成员发布留言信息，以便于联系（为了增强趣味性，还可以选择人物头像）2．3．4班级公告牌查看班级近期的新闻，公告，方便班级成员了解班级情况2．4网站大致结构图如下2-1网站结构图基于Web超级同学录网站设计与开发第1页共17页2．5主要流程2．5．1注册为班级成员。2．5．2登录同学录并可以在相关的连接上浏览本班信息，包括班级成员，班级公告，班级成员同学地址等第三章部分界面设计说明在进入系统之前先必须输入正确的用户名和密码，登录系统的界面如下：用户名：admin密码：admin3．1主界面3-1主界面3．2留言板界面2004级函授班毕业设计论文第4页共16页3-2留言板3．3班级相册界面3-3班级相册3．4班级成员注册基于Web超级同学录网站设计与开发第1页共17页3-4班级成员注册第四章网站版面设计说明在网站开发前，最好使用DREAMWEAVERMX的网站管理功能规划好网站的基本结构，最直接的做法就是建立支持服务器技术的动态站点，将全部的素材都保存在这个站点文件夹下方便管理和维护。4.1设计素材Image文件夹保存“班级相册”所用到的图片Images文件夹保存整个网站所用到的全部图片，包括网站背景图片Face文件夹保存用户注册时所选择的各种GIF头像图片Liuyanban文件夹中保存系统留言板中所用到的GIF头像图片注：如果需要改变网站的某些图片，请直接将要用的图片拷贝到相应的素材文件夹中以同名替换原来的图片即可。最好使用和替换图片大小一样，文件格式一样的图片进行替换。4.2页面布局Index.asp为同学录的主界面，界面布局如下图：Top.asp功能模块导航页面班级公告板（向上滚动）网站友情连接2004级函授班毕业设计论文第6页共16页4-1主页面布局info.asp为班级通讯录页面，界面布局如下图：4-2通讯录页面布局liulanban/index.asp为班级留言板留言显示页面，界面布局如下图：4-3留言板页面布局站点中部分用到的图片经过FIREWORKSMX2004的处理，为了使站点文件的容量缩小，建议图片尽可能的保存为GIF，JPEG等较小容量的图片，以提高网站运行的速度4.3为页面添加样式表为页面添加CSS样式表文件，以单独的文件列出，可以统一的对网站整体进行格式化，包括页面颜色，表格颜色，表格样式，字体大小，字体颜色，图片和超连接等。另外，样式表文件以单独的文件列出还有利于网站的维护，即当需要改变网站中的某些元素的属性时，可以不用改动网站的页面代码，直接改动外部CSS样式表文件就可以达到对网站元素属性的修改。4.4样式表代码利用DREAMWEAVERMX的样式表编辑器可以直接到处外部样式表文件，方便对网站页面样式的直接修改。也可以直接在需要添加样式表的的页面中直接引用样式表。样式表编辑器如下图留言板留言区域Top.asp功能模块导航页面通讯录说明显示班级同学录基于Web超级同学录网站设计与开发第1页共17页具体对于样式表的引用方式分上述两种：第一种是直接在文档中直接引用，这样引用方式将会在页面中加入如下代码：htmlheadstyletype=”text/css”这里是样式表的具体代码/style/headbody/body/html第二种是对于外部样式表的引用，这种方式首先将样式表文件以扩展名为.css存储,然后在需要引用样式表的文件头部加入如下代码：linkrel=stylesheethref=样式表文件名另外，第三种则是直接在需要引用样式表的网页元素标签内部编写样式表代码，具体编写方式如下：htmlheadtitle网页名称/title/headbodytableborder=1style=”border-collapse:collapse;”trtd/td/tr/table/body/html上述黑色加重字体便是在直接编写样式表代码。对于本同学录页2004级函授班毕业设计论文第8页共16页面的美观设计同时结合了上述三种方法，其中对于表格边框宽度的处理就采用了第三中方式，将表格边框宽度设置为最细。4．4．1外部Index.css样式表文件Body{}定义页面的浏览器滚动条的样式A{}定义超级连接的样式.GlowFilter{filter:Glow(Color=#000000,Strength=10)}以类的引用定义样式表的滤镜#menu{}以id的方式引用样式表定义网页元素4．4．2Top.asp中的样式表代码linkrel=stylesheethref=index.cssstyletype=text/css!--.STYLE1{color:#CCCCCC}body{margin-top:10px;}--/style4．4．3Info.asp中的样式表代码styletable{font-size:15;}/style4．5网页表格对于网页中的表格，事先根据网页版面规划好网页的大致样式，然后利用表格将网页的版面进行划分，依次向内直到细划分出网页的整体版面区域，将文字，图片或者是表单等元素添加在表格内，最终将表格的CELLSPACING，CELLPADDING，BORDER，BORDERCOLOR，BGCOLOR等属性进行相应的设置，为了使网页浏览时看不到表格，可以将BORDER属性值设置为“0”4．6网页布局整体网站的页面采取上下两个部分，上边的导航页面top.asp为每个页面所共享，也就是所谓的共享边框。做为单独的一个页面，如果需要在每个页面中都包含有导航页面的话，则需要在页面代码顶部加上基于Web超级同学录网站设计与开发第1页共17页如下代码即可以实现共享导航页面，代码如下：!--#includefile=”top.asp”--4．7网站部分框架代码说明**************友情连接*************tablewidth=100%border=0cellspacing=0cellpadding=0trtdwidth=20%spanstyle=color:#FFFF00百度/span/tdtdwidth=80%spanstyle=color:#FFFF00ahref==color:#FFFF00搜狐/span/tdtdspanstyle=color:#FFFF00ahref==color:#FFFF00网易/span/tdtdspanstyle=color:#FFFF00ahref=级函授班毕业设计论文第10页共16页/span/td/tr/table************用户注册**************divalign=centerahref=reg.asponFocus=this.blur();imgborder=0src=image/1-reg.gifwidth=110height=35/a/div用户点击图片超连接到达reg.asp用户注册表单，并用样式表设置点击超连接后图片周围不产生虚线框***************班级公告*************!--DWLayoutTable--trtdheight=12colspan=5/td/trtrtdheight=17colspan=2/tdtdwidth=153valign=topdivalign=centerstyle=font-family:"幼圆";font-weight:bold;spanstyle=font-size:14pt班级公告/span/div/tdtdcolspan=2/td/trtrtdheight=18colspan=5 /td/trtrtdwidth=25height=225 /tdtdcolspan=3valign=topmarqueedirection=upbehavior=scroll基于Web超级同学录网站设计与开发第1页共17页!--#includefile=”board.txt”--/marquee /tdtdwidth=24 /td/tr/table标签marquee/marquee用来设置班级公告文字的滚动，其中direction=up设置文字的滚动方向是自下向上，也可以有down.Left,right等属性。Behavior=scroll设置文字的滚动方式，也可以slide,alternate。!--#includefile=”board.txt”--显示滚动的文字。由于公告板内滚动的文字已经保存到board.txt记事本文件中，所以用此代码直接将记事本内容包含在页面中显示出来，为了以后维护方便，可以直接在记事本文件中更改班级公告的内容，则页面上的内容也得到随即更新*************主页面超级连接设置***************ahref==STYLE1学院首页/aahref=info.asp班级通讯录/aahref=album.asp班级相册/aahref=liuyanban/gform.htm班级留言本/aahref=excel/成绩查询/a*************班级相册****************!--#includefile=top.asp--tableborder=0cellspacing=0cellpadding=0trtdcolspan=4 /td/trtrbgcolor=#313844tdcolspan=4marqueebehavior=scrolldirection=leftfontcolor=#00FF00可以将本班级的照片添加在这里/font2004级函