毕业(设计)论文封面.doc

基于Web超级同学录网站设计与开发广东松山职业技术学院毕业（设计）论文 题目：基于Web超级同学录网站设计与开发 姓 名： 年级、专业： 指 导 教 师： 年 月 日第一章 引言随着INTERNET的不断发展，越来越多的用户进入网络，利用网络资源。尤其是利用网络来发布信息，与亲朋好友联系。例如Email，OICQ，同学录等等。一个好的同学录更加成为用户之间进行交流的友好平台。毕业在即，为了更好的加强本班同学之间的联系，方便同学之间的交流，设计这样的一个同学录，目的是在全班的同学都参与进来，为我们提供一个良好的交流互动的平台，曾近同学之间的感情。2 第二章 网站设计概述1站点的总体规划本同学录主要分为以下几个模块：班级通讯录，班级相册，班级留言板。其中主要做了班级通讯录，班级留言板和班级相册的部分程序。后台数据库采用ACCESS，用ASP实现对数据库的存取访问。2 2 开发工具说明 Dreamwearer MX 2004、FLASH、Fireworks MX 2004、HTMLSWiSHmax等2 3 主要模块划分231班级通讯录可以浏览班级成员的通讯方式，包括QICQ，电子邮箱，工作地点，联系电话232班级相册在页面中可以浏览到班级的同学照片或者集体相片等233班级留言板向班级的任何成员发布留言信息，以便于联系（为了增强趣味性，还可以选择人物头像）234班级公告牌查看班级近期的新闻，公告，方便班级成员了解班级情况2 4 网站大致结构图如下2-1网站结构图2 5主要流程251注册为班级成员。252登录同学录并可以在相关的连接上浏览本班信息，包括班级成员，班级公告，班级成员同学地址等第三章 部分界面设计说明在进入系统之前先必须输入正确的用户名和密码，登录系统的界面如下：用户名：admin 密 码：admin31主界面3-1主界面 32 留言板界面3-2留言板33 班级相册界面3-3班级相册34 班级成员注册3-4班级成员注册第四章 网站版面设计说明在网站开发前，最好使用DREAMWEAVER MX的网站管理功能规划好网站的基本结构，最直接的做法就是建立支持服务器技术的动态站点，将全部的素材都保存在这个站点文件夹下方便管理和维护。4.1设计素材Image文件夹保存“班级相册”所用到的图片Images文件夹保存整个网站所用到的全部图片，包括网站背景图片Face文件夹保存用户注册时所选择的各种GIF头像图片Liuyanban文件夹中保存系统留言板中所用到的GIF头像图片 注：如果需要改变网站的某些图片，请直接将要用的图片拷贝到相应的素材文件夹中以同名替换原来的图片即可。最好使用和替换图片大小一样，文件格式一样的图片进行替换。4.2页面布局Index.asp 为同学录的主界面，界面布局如下图：Top.asp 功能模块导航页面班级公告板（向上滚动）网站友情连接4-1主页面布局 info.asp 为班级通讯录页面，界面布局如下图：Top.asp 功能模块导航页面 通讯录说明显示班级同学录 4-2通讯录页面布局liulanban/index.asp 为班级留言板留言显示页面，界面布局如下图： 留言板留言区域4-3留言板页面布局站点中部分用到的图片经过FIREWORKS MX 2004的处理，为了使站点文件的容量缩小，建议图片尽可能的保存为GIF，JPEG等较小容量的图片，以提高网站运行的速度4.3为页面添加样式表为页面添加CSS样式表文件，以单独的文件列出，可以统一的对网站整体进行格式化，包括页面颜色，表格颜色，表格样式，字体大小，字体颜色，图片和超连接等。另外，样式表文件以单独的文件列出还有利于网站的维护，即当需要改变网站中的某些元素的属性时，可以不用改动网站的页面代码，直接改动外部CSS样式表文件就可以达到对网站元素属性的修改。4.4样式表代码利用DREAMWEAVER MX的样式表编辑器可以直接到处外部样式表文件，方便对网站页面样式的直接修改。也可以直接在需要添加样式表的的页面中直接引用样式表。样式表编辑器如下图具体对于样式表的引用方式分上述两种：第一种是直接在文档中直接引用，这样引用方式将会在页面中加入如下代码：这里是样式表的具体代码第二种是对于外部样式表的引用，这种方式首先将样式表文件以扩展名为.css存储,然后在需要引用样式表的文件头部加入如下代码：另外，第三种则是直接在需要引用样式表的网页元素标签内部编写样式表代码，具体编写方式如下：网页名称上述黑色加重字体便是在直接编写样式表代码。对于本同学录页面的美观设计同时结合了上述三种方法，其中对于表格边框宽度的处理就采用了第三中方式，将表格边框宽度设置为最细。441外部Index.css 样式表文件 Body 定义页面的浏览器滚动条的样式 A 定义超级连接的样式 .GlowFilterfilter : Glow(Color=#000000,Strength=10)以类的引用定义样式表的滤镜# menu 以id 的方式引用样式表定义网页元素442 Top.asp中的样式表代码 443 Info.asp中的样式表代码 table font-size:15;45网页表格对于网页中的表格，事先根据网页版面规划好网页的大致样式，然后利用表格将网页的版面进行划分，依次向内直到细划分出网页的整体版面区域，将文字，图片或者是表单等元素添加在表格内，最终将表格的CELLSPACING，CELLPADDING，BORDER，BORDERCOLOR，BGCOLOR等属性进行相应的设置，为了使网页浏览时看不到表格，可以将BORDER属性值设置为“0”46 网页布局整体网站的页面采取上下两个部分，上边的导航页面top.asp为每个页面所共享，也就是所谓的共享边框。做为单独的一个页面，如果需要在每个页面中都包含有导航页面的话，则需要在页面代码顶部加上如下代码即可以实现共享导航页面，代码如下：47网站部分框架代码说明*友情连接* 百度 搜狐 网易 *用户注册* 用户点击图片超连接到达reg.asp用户注册表单，并用样式表设置点击超连接后图片周围不产生虚线框*班级公告* 班 级 公 告        标签用来设置班级公告文字的滚动，其中direction=up设置文字的滚动方向是自下向上，也可以有down. Left, right等属性。Behavior=scroll设置文字的滚动方式，也可以slide, alternate。显示滚动的文字。由于公告板内滚动的文字已经保存到board.txt记事本文件中，所以用此代码直接将记事本内容包含在页面中显示出来，为了以后维护方便，可以直接在记事本文件中更改班级公告的内容，则页面上的内容也得到随即更新*主页面超级连接设置*学院首页班级通讯录班级相册班级留言本成绩查询*班级相册*   可以将本班级的照片添加在这里 教师公寓 教学楼 学生宿舍 校园风景 返回首页 *留言板页面*留言板 留 言 板 姓 名： Email: 主 题: 留 言: 心情图片: 不要心情图标 观看留言 其中代码加重的地方出现的x,gif为留言板头像的图片名称，此处需要添加30个图片，所以x的取值为1到30，添加图片代码相同。第五章 网站数据库设计网站数据库采用ACCESS，以ASP脚本代码，ADO技术连接访问后台数据库。系统用到两个数据库51用户注册信息数据库：classmate.mdb 包含的数据表：user保存的路径：db/classmate.mdb52留言板信息数据库：gbook.mdb 包含的数据表：guestbook 保存的路径:：liuyanban/gbook.mdb53连接后台数据库代码实现主要利用ASP脚本语言的内建对象，ADO技术以及SQL语言对数据库进行访问操作。其中用了一些vbscript脚本语言, javascript脚本语言，主要为页面添加一些动态交互。第六章 网站测试运行61网站运行环境配置在WINDOWS 98的系统上运行该程序，需要配置PWS（个人服务器）环境在WINDOWS 98以上的系统中运行该程序，需要配置IIS（INTERNET信息服务器）环境，关于如何配置上述两种系统运行环境的方法，这里不做介绍，如有需要可到系统站点文件夹pwsandiis中查看。62网站测试总结在上述两种环境下测试，启动IIS信息服务器，在浏览器中输入相应的IP地址测试程序运行（最好使用目录浏览方式，不要启动默认页面），程序运行良好。但由于网站中用到了CSS样式表混合滤镜的网页过度效果，是网页浏览速度变慢的一个主要原因。第七章 设计心得跟学习别的东西一样，学习网页设计也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。学习网页设计需要耐心，如果你没有耐心，你学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了半个月时间才解决。学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，你不断的学习不要掉入技术的陷阱，你的网页设计技术一流，你对软件的掌握程度已经达到一定水平，但是你设计的网页确不堪目睹，这是因为网页设计是是介于平面设计和编程技术两者之