班级网站设计方案.docx

班级网站设计方案.docx

《班级网站设计方案.docx》由会员分享，可在线阅读，更多相关《班级网站设计方案.docx（15页珍藏版）》请在冰豆网上搜索。

班级网站设计方案

班级网站设计方案

引言

计算机技术的疾速成长超过了人们的联想,同时计算机在中原亦然飞快的增加,网络技术的遍及速率也是十分之快。

由于新技术的连续出现,网页设计也在连续变革,网页设计通过了从文字的页面到图形化页面的变动,再到网页设计的设计元素和技术措施日益多样化。

网页制作不仅是商家促销的重要手段，也是一个重要手段，学习者获得知识和材料。

由于网页自身所拥有的信息量大、快速传送的特点，因此网页同样成为生活中不可或缺的进修，交换用具。

进而设计班级网站是班级对外展示集体形象的窗口，也是班内人员相互学习、交流的工具和平台。

班级网站是一个表率、功用较完全的通用型动静网站，拥有班级消息体现、登记留言板、消息公布、背景管理等功能。

1研究课题的背景与意义

当今社会，计算机网络仍旧是社会中不可缺少的一部分。

人们从互连网上获得消息与朋友们互动，网络使用愈来愈普遍。

计算机技术在继续上前成长,可是不管计算机技术怎么发展,网页设计与其说是技能不如说是策划。

网页作为人们所易接受的信息检索和学习手段，同时拥有巨大的信息资源宝库。

所以选择通过建立一个班级网站的形式展示班级的风采和大学生活的精彩。

通过网页可以使人们快速的认识班级。

仁者见仁智者见智，网站的设计方式和风格各不相同。

在网站的设计中，采取简约的风格，包含新闻动态，班级留言，班级风采等内容，方便人们浏览。

由于学生在班级这类特别的群体情况中学习、发展和成长的，班级的人际关系是影响同学学习和老师教育的重要条件。

所以通过建立班级网站，对学生的品德、人格、能力、学习等诸方面的发展都有积极意义，更能展示大学的美好时光。

2开发软件介绍及环境配置

2.1开发软件介绍

首先介绍一下ASP。

ASP包括于IIS中，经过ASP能够与HTML、交互且高效的Web服务器应用程序。

它具有访问服务器端的文件系统、连接并开发应用数据库的功能。

它的特点有和浏览器没有关系、采用面向对象的技术、ASP源程序不会传到浏览器上，有效地保护源程序、不需要翻译直接执行等。

其次是Dreamweaver。

它是一款专业的网页排版软件，它具有简单、易学等特点，而且不需要学习大量的专业知识。

最后是SQL数据库。

它是一个可伸缩、高性能的数据库体系，拥有内置的复制本领、Internet集成、开放系统体系结构的管理工具。

2.2搭建ASP动态网站运行环境

本系统经过测试，调试，系统可投入使用。

在使用过程中，仍然有可能发现系统错误或者漏洞，使用者应立即向开发者提出，以便解决或修正，以保证系统正常运行。

本系统运行时所需的硬软件环境:

（1）硬件要求

①服务器端硬件要求:

具有P133MHz及其以上处理器，推荐P4l.SG以上CPU;256M内存，推荐512M

以上双通道内存;硬盘的系统分区剩余空间推荐为500MB以上。

②客户端硬件要求:

具有P133MHz及其以上处理器;内存最低64MB，推荐为256MB72及以上;VGA或更高分辩率的显示器;硬盘体系的残剩空间举荐在500MB以上。

两者均需要网络环境支持。

（2）软件要求

①服务器端软件环境要求:

操作系统：

windows2003，安装1156；

数据库体系:

MierosoftSQLserve:

2000。

②客户端软件情况要求标准:

编制:

Windows98/NT4.0/2000/XP/2003;

浏览器:

建议采用IES.5及以上，或其他同类浏览器。

2.2.1安装Internet信息服务（IIS）

在WindowsXPProfessional中开启控制面板，操纵“增添/删掉程序”的“增添/删掉Windows组件”功能，安置“Internet消息办事”组件（如Internet信息服务管理单位、公用文献、万维网服务、文件传输和议（FTP）服务）。

安装完成“Internet信息服务”组件。

IIS配置：

主目录，应用程序配置，默认的文件，目录安全。

在[开始]菜单，选择[设置]>[控制面板→[]]，[互联网信息服务管理工具]命令，打开“互联网信息服务”窗口，如图2-1所示。

图2-1

右击“默许网站”，从弹出的快速菜单当入选“属性”命令，开启“默认网站”属性对话框，如图2-2所示。

图2-2

2.2.2设置站点和虚拟目录（配置IIS）

选择“主目录”选项卡。

在该界面中，单击“阅读”按钮，设立“F:

\班级网站”为主录，继而单击“确认”按钮，此目录作为网站的主目录。

在“主目录”选项卡中，单击“应用程序配置”下的“配置”按钮，选中“调试标记”下的“开启ASP服务器脚本调试”和“开启ASP客户端脚本调试”选项。

在“Internet选项”对话框中，选取“高级”选项卡，去除“表现友爱HTTP错误信息”，重新启动IE浏览器就能够显示详明的错误信息。

在“默许网站属性”窗口中开启“文档”选项卡，单击“增添”，然后弹出的“增添默认文档”对话框，设立文档名为“index.asp”。

继而，单击“确定”，增添index.asp作为默许文档。

选取“启用默许文档”的“index.asp”，使用朝上的箭头，将“index.ASP”第一默认文档的调整。

单击按钮以完成顺序调整的“应用”，默认的文档。

在“目录安全性”选项卡里，单击“编辑”，出现“身份验证方式”对话框，还需要的情况下，可更换匿名查看利用的账户，最终单击“编辑”。

虚拟目录是目录将是一个共同的目录到一个Web服务器模拟进行的。

许多Web应用程序，经常要使用相对路径定位内容的位置，和一个好的虚拟目录的虚拟站点的访问路径，虚拟目录的站点文件在磁盘上的物理存储地址不受影响，访问虚拟网站是相对于网站根目录。

在“Internet消息服务”主界面中，右击“默许网站”，从弹出的便捷菜单里选取【新建】→【虚拟目录】指令，开启“虚拟目录创立指导”窗口。

单击“下一步”按钮，在“虚构目录又名”窗口中键入又名“class”。

接着左键单击“下一步”按钮，在“目录”中选取要公布到网站内容的地方（如“F:

\test”）。

设置访问权限。

单击“下一步”按钮，在“查看权限”对话框中选取“读取”和“运转脚本（如ASP）”权限。

继续单击“下一步”按钮，完成虚拟目录的创建。

3数据库设计

3.1创建数据库及数据库连接

新建数据库，将data.mdb作为数据库名，保留于E:

\class\database里。

开启“数据库”面板，在面板里单击按钮，在弹出的菜单里选取“自定义衔接字符串”选项，如图3-1所示。

图3-1

该对话框中的“名称”文本框中输入连接，在“连接类型，下面的代码字符串”文本框中，如图所示。

"provider=microsoft.jet.oledb.4.0;datasource="&server.mappath（"/class/database/data.mdb"）

单击“确定”按钮，即可成功连接。

回到“数据库”面板，如图3-2所示。

图3-2

4网站详细设计

4.1网站主页设计

开启主页页面，选取“窗口”，“css模式”指令，打开“css模式”面板，单击“附加外部模式表”，将新建的外部模式表文件div.css和css.css文件链接到页面中。

切换到设计网页，插入div标签，在div布局文件规则的制定。

div.css文件主要代码如下：

#box{

width:

1000px;

height:

810px;

background-image:

url（pic/bg.png）;

background-repeat:

repeat-x;

margin:

auto;

}

#top{

width:

1000px;

height:

80px;

padding-top:

20px;

}

#logo{

width:

307px;

height:

79px;

background-image:

url（pic/logo_03.gif）;

float:

left;

margin-top:

-65px;

}

#main{

width:

1000px;

height:

624px;

}

#main-left{

margin-top:

20px;

width:

256px;

height:

604px;

float:

left;

background-image:

url（pic/cebianlanbg.jpg）;

}

#login{

width:

180px;

height:

75px;

float:

left;

margin-top:

110px;

margin-left:

20px;

display:

inline;

}

#login-name,#login-pass{

height:

14px;

width:

85px;

margin-top:

4px;

margin-left:

15px;

display:

inline;

border:

#999solid1px;

font-size:

12px;

}

#login_btn{

margin-top:

1px;

float:

right;

margin-right:

15px;

display:

inline;

}

#main-right{

width:

740px;

height:

620px;

float:

right;

}

#bottom{

width:

1000px;

height:

86px;

background-image:

url（pic/bottom_02.jpg）

}

4.2登录和注册模块设计

功用包含登记用户、用户登录、修正密码、取消用户。

表

册

功能结构

设计和添加数据库表。

4.2.1新用户注册

创立新用户登记页面文件registerasp。

经过首页“用户登录栏”的登记按钮进到register.asp页面。

登记要求用户输入“用户名”，“密码”，“密码”，客户端验证用户输入的消息，服务器端读取用户提交的“用户名”和“密码”保留于UserLogin数据表里，登记顺利页面转入首页index.asp。

新用户注册代码

--

functioncheck（）

{

if（document.form1.UNewPass.value==""）

{

alert（"新密码为空!

"）;

form1.UNewPass.focus（）;

returnfalse;

}

if（document.form1.UNewPassOk.value==""）

{

alert（"确认密码为空!

"）;

form1.UNewPassOk.focus（）;

returnfalse;

}

if（document.form1.UNewPass.value!

=document.form1.UNewPassOk.value）

{

alert（"密码与确认密码不相同!

"）;

form1.UNewPassOk.focus（）;

returnfalse;

}

returntrue;

}

-->

在“登录”，输入用户名和密码前页的用户，服务器负责读取用户的用户名称和密码。

经过在数据表UserLogin中搜索是否有吻合条件的记载，核实该登录用户的身份是否合法。

登录成功后转入index.ASP，在“注册区”显示“欢迎屏幕”，非法用户登录失败弹出对话框和成指数.asp提供再次登录的机会。

登录区域如图4-1

。

图4-1

IfNotMM_rsUser.EOFOrNotMM_rsUser.BOFThen

'usernameandpasswordmatch-thisisavaliduser

Session（"MM_Username"）=MM_valUsername

If（MM_fldUserAuthorization<>""）Then

Session（"MM_UserAuthorization"）=CStr（MM_rsUser.Fields.Item（MM_fldUserAuthorization）.Value）

Else

Session（"MM_UserAuthorization"）=""

EndIf

ifCStr（Request.QueryString（"accessdenied"））<>""AndfalseThen

MM_redirectLoginSuccess=Request.QueryString（"accessdenied"）

EndIf

MM_rsUser.Close

'Response.Redirect（MM_redirectLoginSuccess）%>

form1.style.display="none";

login_success.style.display="";

document.getElementById（"username"）.innerHTML="<%=Session（"MM_Username"）%>";

<%else

MM_rsUser.Close

'Response.Redirect（MM_redirectLoginFailed）

response.write（""）

endif

4.2.2修改用户密码

创建、修改用户密码的界面。

客户端的用户输入验证。

修改用户的登录密码。

不允许阅读修正登录用户密码页面。

changpwd.ASP服务器性能，添加“限制对页的访问”。

4.2.3退出登录

在用户登录成功，我们可以选择在家“欢迎屏幕”[关闭]超链接，会议的取消（“mm_username”）变量，那么当前页返回到初始状态。

5新闻模块设计

新闻发布模块在现实生活中应用广泛，其主要操作有：

网站前台普通用花浏览新闻和搜索新闻，后台管理员对新闻进行添加、修改和删除等操作。

5.1制作步骤

在新闻版面界面位置插入一个1行2列的表格。

在创建查询新闻记录集。

将记载集字段代码绑定到单元格的对应地方。

（1）所选表二，注意：

通过点击标记来选取。

（2）在【服务器操作】面板里单击“+”，从弹出的菜单里选取【重复区域】服务器操作，在重复区域对话框里安排每页所显消息数量。

如图5-1.

图5-1

5.1.1记录集分页

添加一个1行和页面导航下表新闻形式的4列，对应的输入文本。

选取文字“第一页”，在【服务器行为】面板里单击“+”，从弹出的菜单里选取【记录集分页】→【移至第一条记载】服务器行为。

重复步骤2的操作，在“前一页”、“下一页”和“末尾一页”增加【移至前一条记录】、【移至下一条记录】和【移至最后一条记录】服务器行为，效果如图5-1所示。

图5-1

再次选取文字“第一页”，单击“+”在【服务器行为】面板里，从弹出的菜单里选取【显示区域】→【若不是第一条记录就显示区域】服务器行为。

如图5-2。

图5-2

5.1.2添加转到详细页面服务器行为

选择新闻标题域代码“{recordset1。

标题}”的形式，如图5-3显示。

在【服务器行为】面板中单击“+”按钮，并从弹出菜单里选取【转到详明页面】服务器命令。

图5-3

建立ASPVBScript页面，用文件名detail.asp，在文件夹E保存ASP：

班\文件\ch03。

在网页中插入一个2行1列的表格。

在【绑定】面板里单击“+”按钮并从弹出菜单里选取【记录集（查询）】，创立一个按新闻发布时间降序排序的查询记录集将记录集字段代码绑定到单元格的相应位置。

5.1.3添加移至特定记录服务器行为

单击“+”在【服务器行为】面板里，从弹出的菜单里选取【记录集分页】→【移至特定记录】服务器行为。

如图5-4。

图5-4

在【移至特定记录】对话框中设置匹配的URL参数。

如图5-5。

图5-5

5.1.4为页面添加分页导航

添加一个1行和表的页导航表5栏，输入相应的文本。

选取文字“第一条”，单击“+”在【服务器行为】面板里，从弹出的菜单里选取【记录集分页】→【移至第一条记录】服务器命令。

重复上一步的操作，在文字“前一条”、“下一条”和“最后一条”都各自增加【移至前一条记录】、【移至下一条记录】和【移至最后一条记录】服务器行为，并为文字“返回”添加链接至系统首页index.asp。

选取文字“第一条”，在【服务器行为】面板里单击“+”，从弹出的菜单里选取【显示区域】→【若不是第一条记录就显示区域】服务器行为。

如图5-6。

图5-6

重复上一步的操作，如“在“添加【如果不是第一次记录显示区域】服务器行为，在“下一条”和“最后一条”中增添【若不是最后一条记录就显示区域】服务器行为。

总结

通过努力，使网站基本完成。

虽然中间困难，但在生产过程中可以说是我的利益。

摘要本次毕业设计过程中，对我来说是一个从理论到实践动手制作经验，让我明白了一个基本框架类网站和数据库的需要。

由于对数据库和asp动态的学习和了解甚少，因此在此毕业设计制作过程中翻阅了大量的资料和书籍，大大增加了我对数据库和Javascript脚本语言的理解。

通过这次毕业设计，我看到很多他的网站这知识是软弱的，在同一时间看到自己的弱点和长处，这些在他们自己的毕业就业方向的判断后，会起到很好的作用。

由于自己对数据库、asp及JavaScript语言的学习不是很深，加上时间上的仓促、个人能力比较有限还有经验的不足，还有待进一步的美化完善和改进，这些不足之处希望自己以后在不断学习和经验的积累中慢慢的进行解决。

现在网络技术发展和更新飞快，软件也在不断地更新其功能也在不断地提高和改变，要想在网站这方面不被淘汰或者落后显而易见自己以后需要学习的地方还很多。