毕业论文——基于DREAMWARE和ASP技术的班级网站建设

基于 DREAMWARE 和 ASP 技术的班级网站建设 1 基于 DREAMWEAVER 和 ASP 技术的 班级网站建设 摘要: 再 Internet 飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道， 它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站在 Internet 应用上的地位显 而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。本文 介绍了构建班级网站的技术和实现方法，重点讲述了注册登陆，留言板，班级相册等几个主要功 能的实现。网站页面采用 Dreamweaver MX 所见即所得的网站设计工具，并结合 ASP 技术来设 计，网站图片、动画设计采用 Potoshop7.0 和 Flash MX，在代码方面主要是以 HTML 为主的设 计语言。网站采用的数据库是 Microsoft Access 。 关键词:班级网站;ASP; Dreamweaver Construction of the Class Websites Based on DREAMWEAVER and ASP Technology Abstract: Today, internet is developed at full speed, internet becomes the important channel of that people obtain, release and transmits information. It is on all respects such as peoples politics, economy, living, etc. So websites are also playing an important role in internet. It has already become the important component in the government, enterprises and institutions information construction. It brings peoples attention. This paper introduces the technology and method of construction of the class websites. It especially has told realization in such several main functions as registers to land message board, class album, etc. Website page is designed by using Dreamweaver MX design tool of website and ASP technology. The websites picture and animation adopt Potoshop7.0 and Flash MX to design. In code the language of design relying mainly on HTML. The database that websites adopted is Microsoft Access. Keywords: class website; ASP; Dreamweaver 1 工具及背景介绍 在 Internet 飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠 道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet 上发布信息主 毕业论文（设计） 2 要是通过网站来实现的，获取信息也是要在 Internet“海洋”中按照一定的检索方式将 所需要的信息从网站上下载下来。因此网站建设在 Internet 应用上的地位显而易见，它 已成为信息社会的重要组成部分，从而倍受人们的重视。为了今后更好的方便大家联系、 交流，特构建山西农业大学信管 011 班同学录网站。 1.1 设计思想 通过网站，方便大家联系，全面展示我班的风采，加深同学们之间的感情，更好的为 大家服务。 在设计网站时，首先应该考虑客户端浏览网站所使用的浏览器的兼容性的问题。现 在，最常用的是 IE 和 NETSCAPE，由于 IE 对 ASP、ActiveX、DHTML 等的良好支持，拥有 广泛的使用者，具备良好的兼容性。因此可以选用 IE 作为兼容标准，同时尽可能兼顾 NETSCAPE。 其次，在选择编程语言上，一般都采用 HTML 语言，同时采用 ASP 技术以及运用网络 数据库。 1.2 开发工具的选用及相关知识介绍 1.2.1 Macromedia Dreamweaver MX Macromedia Dreamweaver MX 是一种专业的HTML 编辑器,可用于对Web 站点、Web 页和Web 应用程序进行设计、编码和开发。利用Dreamweaver MX中的可视化编辑功能,可 以快速地创建页面而无需编写任何代码。Dreamweaver MX 提供了许多与编码相关的工具 和功能,如表单、表格和各种控件。借助Dreamweaver MX,可以使用多种服务器语言,例如 ASP、ASENET、ColdFusion 标记语言(CFML) JSP 和PHP 生成支持动态数据库的Web 应用 程序。Dreamweaver MX 可谓是开发静态、动态网站的利器,也是开发Web 应用程序的高 效工具。不仅是专业人员制作网站的首选工具，而且普及到广大网页制作爱好者中，相 对于其它网页制作工具和以前版本，有以下这些优势： 对简体中文良好的支持，不会出现一些不兼容中文的现象。例如，在早期的 Dreamweaver4.0 中，制作 Flash 按钮时会出现乱码。 使用 Dreamweaver MX 中文版，可以在可视化界面制作出 ASP，ASP，NET，JSP，PHP， ColdFusion 站点。 Dreamweaver MX 中文版自带大量模板，简化了用户的制作过程。 Dreamweaver MX 中文版支持数量众多的第三方插件，大大增强了 Dreamweaver MX 的 功能。 通过配置 Dreamweaver MX 生成符合 XHTML 的代码，确保用最新的 HTML 设计标准 及时更新站点1。 1.2.2 ASP（Active Server Pages） Active Server Pages：“动态服务器网页” ，一般简称为“ASP” ，基于传统的静态 基于 DREAMWARE 和 ASP 技术的班级网站建设 3 Web 技术,信息网页、文本文件和图像等内容是以单独文件形式存放的。Web 服务器应用 程序简单地从磁盘中读取它们并转换成能够在网络上传输的正确的 HTTP 协议。在客户或 用户端,浏览器接收传送的信息,并转换成能够显示的页面。然而这种静态 Web 技术无法 实现传递实时性很强的信息,例如在页面上输入信息或传递从其他应用程序中得到的内容,特 别是访问特定类型的数据库内容。这就需要有相应的技术来满足客户的要求。ASP 技术的 出现和应用较好地解决了网页信息传递的实时性和交互性要求。与 HTML 网页不同，以 ASP 为后缀的文件并不能直接在浏览器中打开。当 IIS 服务器接收到对 ASP 页面的请求时， 服务器将它解释并生成为标准的 HTML 网页，发回给浏览器。ASP 之所以能受到大家的重 视与使用的原因，主要在于所产生的执行结果都是标准的 HTML 格式，而且这些程序是在 网络服务端中执行，使用一般的浏览器（如 IE 或 Netscape）都可以正确地获得 ASP 的 “执行”结果，并且将这 ASP 执行的结果直接在浏览器中“浏览” ，不像 VBScript 或 JavaScript 是在客户端（Client）的浏览器上执行，若使用 VBScript 来设计程序，客户 端（Client）在 IE 浏览器中可以显示程序执行的结果，可是，客户端（Client）若使用 Netscape 浏览器就无法显示 VBScript 的执行结果2。ASP 的特点： 任何开发工具皆可发展 ASP，只要使用一般的文书编辑程序，如 Windows 记事本，就 可以编辑。当然，其他网页发展工具，例如，FrontPage Express、FrontPage 等也都可 以。语言相容性高 ASP 与所有的 ActiveX Script 语言都相容，除了可结合 HTML，VBScript、Java Script、Active X 服务器组件来设计外，并可经由“plug-In” （外挂组件模组）的方式， 使用其他厂商（Third Party）所提供的语言。 隐密安全性高 如果我们在浏览器中直接查看网页的原始代码，就只能看到 HTML 文件，原始的 ASP 程序代码是看不到的！这是因为 ASP 程序先于网站服务端（Web Server）执行后，将结 果转换成标准 HTML 文件，再传送到客户端（Client）的浏览器上，因此，我们所辛苦撰 写的 ASP 程序并不会轻易地被看见进而被盗用。 易于操控数据库 ASP 可以轻易地通过DBC(Open Database Connectivity)驱动程序连接各种不同的 数据库，例如：Access、Foxpro、DBase、Oracle 等等，另外，ASP 亦可将“文本文件” 或是“Excel” 文件当成数据库用。 面向对象学习容易 ASP 具备有面向对象（Object-Oriented）功能，学习容易，ASP 提供了五种方便能力 强大的内建对象：Request、Response、Sever、Application 以及 Session，同时，若使 用 ASP 内建的“Application”对象或“Session”对象所撰写出来的 ASP 程序可以在多 个网页之间暂时保存必要的信息。 语言简洁 毕业论文（设计） 4 ASP是由静态的HTML和动态的ASP代码组成，采用ASP的一个很大的优点是，可以在客 户端中包含你的服务器端脚本的运行结果。为了能够区分代码的起始位置和终止位置， 在ASP中是用 来标识，其中是ASP终止的 标记；ASP Code就是任意的ASP代码3。 1.2.3 ASP 下 Web 数据库的连接与打开 在网络技术飞速发展的今天, 基于网络的 W EB 数据库的操作成为了信息处理的核心, 自从 Microsoft 推出 A SP 技术后, 由于它在创建动态交互式站点上的强大功能及其代 码编写的简便性、面向对象的设计, 很快在 Internet.Intranet 网站上得到了广泛的应 用, 尤其是涉及到数据库操作的网站应用系统更是倾向于采用 A SP 技术. ASP 成为许多 计算机专业人士设计网站时的首选技术. 现简单介绍在 A SP 下数据库连接的相关知识。 基本原理 在 A SP 中, 用来存取数据库的对象统称 ADO 对象(ActiveX Data Objects), 这是 一项容易使用并且可扩展的将数据库访问添加到 Web 页的技术, 可以使用它去编写紧凑 简明的脚本以便连接到 ODBC (Open Database Connectivity) 兼容的数据库和 OLEDB 兼 容的数据源.在 ASP 中, 有 7 个对象, 其中与数据库有关的主要有 3 种对象: Connection, Recordset 和 Comm and, 其中 Connection 负责打开或连接数据库, Recordset 负责存取数据表, Comm and 定义对数据源进行操作的命令。如果只依靠这 3 个对象还是无法存取数据库的, 还必须具有数据库存取的驱动程序: OLEDB 驱动程序和 ODBC 驱动程序. 对于任何一种数据库都必须有相对应的 OLEDB 驱动程序和 ODBC 驱动程 序,ADO 对象才能对数据库进行存取。ADO 对象必须与各种驱动程序相结合才能存取各种 类型数据库, 不同的数据库需要不同的驱动程序。可以非常方便地在“控制面板”中 “ODBC Data Source (32Bit) ”中获得本机驱动程序的信息4。 数据库连接 访问数据库信息的第一步是创建数据库源并和数据库源建立连接. ADO 提供了 Connection 对象, 可以使用该对象建立和管理应用程序和 ODBC 数据库之间的连接. Connection 对象具有各种属性和方法, 可以使用它们打开和关闭数据库连接, 并且发出 查询请求来更新信息. 要建立数据库连接, 首先应创建 Connection 对象的实例. 在实际 应用中不同数据库的连接方法有所不同, 它们需要建立不同的 Connection, 但如果建立 Connection 后, 使用 Recordset 对象存取数据的方法却基本相似. 以 Test.mdb 为例连 接, 基本步骤如下: (1) 创建数据库源 数据库源名, 即 DSN (Data Source Name) 是连接 ODBC 和数 据库的桥梁,ODBC 通过 DSN 来找到要访问的数据库. 可以通过“32 位 ODBC”对其进行 管理. (2) 创建数据库链接 ASP 文件中如果要访问数据, 必须首先创建与数据库的链接, 其语法如下: 基于 DREAMWARE 和 ASP 技术的班级网站建设 5 set Tconn = Server createObject (“ ADOBD. CONN ECT ION ”).创建了链接对象 TConn TConn. Open“dns”,“username”,“password”.打开链接。 (3) 创建数据对象 RecordSet 保存的是数据库命令结果集, 并标有一个当前记录. sql=“SEL ECT 3 FROM test”.设 SQL 语句 Set RecordSet= TConn. Execute (sql).创 建并打开了对象, TConn 是创建的链接对象 Set RecordSet = TConn. Execute (sql).将 表 test 中的所有记录保存到 RecordSet。 (4) 操作数据库 可以利用 Execute 方法执行数据插入、修改、删除等操作, 它的 参数是一个标准的 SQL 语句串, 如: 执行插入操作:Sql1=“INSERT INTO test (字符串行) values (字符值串行)”.SQL 语句 TConn. Execute (sql1). 执行修改操作:Sql2= “UPDATE test SET (字符串行)= (字符值串行)”.SQL 语句 TConn. Execute (sql2). 关闭数据对象和链接 在使用了 ADO 对象之后, 一定要记住关闭它, 因为它使用了服 务器的资源. 通过调用方法 close 实现关闭, 然后再释放它. TConn. Close5 考虑以上各方面因素，所以我选择了 Dreamweaver 结合 ASP 技术架构本网站。 2 网站结构设计 2.1 页面布局 网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现班级的 勃勃生气，网站布局应该以轻松、简洁的风格为主，同时使用一定的图形和多媒体元素， 将整个网页分成四个部分（如图 1） 第一部分 第二部分 第三部分 第四部分 图 1 页面布局 第一部分主要用来放置网站的标志图片；第二部分与第四部分主要用来放置一些功 能链接；第三部分是主体部分，放置班级信息、留言、公告模块等6。 2.2 网站结构及功能 毕业论文（设计） 6 网站的具体结构如图 2 所示，在首页上共有 7 个大的功能菜单，每个菜单链接一个功 能页面，每个页面实现不同功能。 图 2 充分利用 ASP 的强大功能，在网站中提供留言簿、公告栏等交流场所，为同学们展 开信息交流提供方便。 2.3 数据库设计 本网站采用的数据库是 Microsoft Access ，建立库文件，包含如下几个表文件： claim 网站公告信息表 loginfo 来访登陆时间信息表 mssg 留言信息表； photo 图片内容说明信息表 user 成员地址信息表7 3 详细设计 3.1 统一规划网站的布局和格式 首先要规划好网站的结构，对网站的网页大体布局有一个具体的轮廓。并且为网站的 主页及二级页面确定一个共同的格式，包括整个页面的颜色，宽度，阴影，背景，字体 的大小颜色这就需要我们制作一个超文本样式表.css 文件，以供每个网页调用。本站具 体的.css 代码如下： body SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #000000; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #666666; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; 基于 DREAMWARE 和 ASP 技术的班级网站建设 7 background-image:url(/images/bg.gif); background-position:center BODY FONT-SIZE: 12px; FONT-FAMILY: “Verdana“, “arial“ TABLE FONT-SIZE: 12px; FONT-FAMILY: “Verdana“, “arial“ TR FONT-SIZE: 12px; FONT-FAMILY: “Verdana“, “arial“ TD FONT-SIZE: 12px; WORD-BREAK: break-all; FONT-FAMILY: “Verdana“, “arial“ INPUT BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #0066cc 1px solid; BORDER-LEFT: #0066cc 1px solid; BORDER-RIGHT: #0066cc 1px solid; BORDER-TOP: #0066cc 1px solid; COLOR: #0066cc; FONT-SIZE: 9pt; HEIGHT: 16px TEXTAREA BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER- LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-LEFT-COLOR: #cccccc; BACKGROUND: #fefefe; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #cccccc; PADDING- BOTTOM: 1px; BORDER-TOP-COLOR: #cccccc; PADDING-TOP: 1px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #cccccc 在每个网页的程序中加人如下的程序段: 。来实现调用已经编制 好的超文本样式表文件 class .css，这样就为网站中的每个网页设定一个共同的样式， 如整个网页文字的大小、字体，还有活动超联接和已访问超联接的颜色以及菜单的一些 属性等等。 为网站设计一个主页面使用 DreameWeaver MX 来制作。还要用到 HTML 语言、 VBScript、JavaScript 等。将前面说到的功能和内容以菜单的形式列出在主页上，级联 菜单上是一些具体的功能和内容。当然，这个菜单是用 JavaScript 编制出来的一个函数， 毕业论文（设计） 8 然后，在每一个菜单文件的代码中再调用这个函数，其它的菜单也可以用同样的代码来 实现。同样，对于二级页面的设计以及其它页面的设计也是与主页相同。如果这些页面 的主要部分与先前设计的主页主体部分风格和布局以及菜单都相同，那么我们就可以先 建立一个空的含菜单的文件作为模板，以后每建立一个类似的页面，就可以调用此模板 文件，在此基础上再进行修改、补充8。 3.2 注册和登录模块设计 注册登录模块是系统的门户,在整个系统中占有重要的地位。它的主要功能是根据用 户的录入信息进行身份识别,排除非法用户对本系统的使用,对合法用户则按照不同的级 别分类处理，从而保证系统的运行安全，过程如图 3 所示9。 图 3 过程图 用户进 入主页面后,要想法使用其他菜单的功能必须先进行注册,在将表单提交后,调用相应的程 序进行处理。处理程序首先与数据库连接,查看是否存在同名和同密码的用户,若存在则 显示提示信息,并重新返回注册表单,用户输入新的信息进行重新注册;若不存在同名且同 密码的用户,则将注册信息写入数据库。在注册界面填写注册信息的时候，用下面的程序 判断输入的信息是否正确： function checkform() if (adduser.username.value.length=0) alert(“用户名不得为空！“); document.adduser.username.focus(); return false; 注册登录系统 识别身份 普通用户管理员 一 般 查 询 班 级 管 理 批 准 加 入 数 据 库 管 理 普 通 浏 览 基于 DREAMWARE 和 ASP 技术的班级网站建设 9 if (document.adduser.passwd.value.length = 0) alert(“请输入您的密码！“); document.adduser.passwd.focus(); return false; if (document.adduser.repasswd.value.length = 0) alert(“请确认您的密码！“); document.adduser.repasswd.focus(); return false; if (document.adduser.passwd.value != document.adduser.repasswd.value) alert(“您两次输入的密码不一致！请重新输入。“); document.adduser.passwd.focus(); return false; if (document.adduser.email.value.length = 0 document.adduser.email.focus(); return false; if (document.adduser.realname.value.length=0) alert(“请输入您的真实姓名！“) document.adduser.realname.focus(); return false return true 如若用户已经注册,则可输入名称和密码进入,在此过程中验证名称和密码是否相符以及 在登录过程中用户的请求是否被允许从而显示不同的提示页面。用户登录的流程图如图 4 所示10。 毕业论文（设计） 10 提交 点击返回 按钮 是 是 进行注册表单的 填写 连接数据库并以用户名 进行查寻 填写登录的用户 名和密码 给出各种错误提 示并返回登录框 输入密码与数 据库中的是否 相同 是否首次登 录？ 进入网站界面图 4 流程图 通过在表单输入“用户名”和“密码”后点击“登录”提交表单,激活后台登录程序。如 果“用户名”和“密码”匹配就可以进入,反之显示错误提醒页面。若登录成功,登录程 序会把登录用户的信息写进 Cookies,供以后各项功能实现时使用。 用户的登录程序如下： 用 户： 基于 DREAMWARE 和 ASP 技术的班级网站建设 11 密 码： 如果成功登录后将出现如图 5 的界面： 图 5 这个界面的程序代码为： 毕业论文（设计） 12 欢迎回家！ 登陆次数： 次 你的身份： 上次登陆时间： 你现在有条新的短消息 到此，网站的用户注册登录界面就制作完了11。 3.3 留言功能模块的设计 Web 留言板类似于 BBS,但 BBS 的版面过多,不同的留言放在不同的主题中,由于庞大 的信息量影响到网页信息搜索的速度,不适合应用于小型网站。本文所设计的是用于一个 班级同学之间进行信息交流的场所,规模小、设计简单的 Web 留言版就可以实现信息交流 基于 DREAMWARE 和 ASP 技术的班级网站建设 13 的功能,而且它小巧简单,因此更易于实现,在速度上比 BBS 也占优。 系统功能分析:(1)登录,已经注册的用户可以在登录界面输入正确的用户名和密码, 就能够直接进入到留言板页面,同时不相关的信息写到 Cookies 数据集里,供以后各项功 能实现时使用;(2)注册,如果是新用户,想进入留言板就必须通过注册,得到批准成为合法 用户而取得留言及其权限;(3)留言,已经取得合法权限的用户可以在留言板里进行留言, 或查看留言。 动态网页要处理很多信息,这些庞大的信息一般交给后台数据库去处理。而 Web 数据 库应用系统则通过 Internet 平台连接数据库,取得数据集,对其进行添加、修改、查询、 删除等操作。对数据库进行的各种操作,可以通过使用 SQL 语言来实现。本文设计的留言 板是以 Access 2000 作为后台数据库。以操作接口而论,具备方便、简易的特性,同时能 完全利用 Windows 资源。ASP 通过使用 ADO 所提供的对象及方法,能帮助用户建立各式各 样,符合用户需求的 Web 数据库应用系统OLEDB。OLEDB 是连接数据库的新低层界面。 它能处理任何类型的数据,无论它们的格式和保存方式是什么。程序开发者并不需要确切 去了解其结构,只需要懂得如何利用它去连接数据库即可。 在本留言板中,利用 Microsoft Access2000 建立了 1 个 data.mdb 数据库,而在其里 面包含了 2 个表:user 和 mssg。整个留言板的所有信息交流都以这 2 个表为基础,所有数 据的存取都通过对这 2 个表而进行操作。表 user 是用来存放注册用户的资料,表 mssg 是 用来存放所有留言的信息。在完成数据库制作后,我们在对数据库进行存取前,必须要进 行数据库的连接工作,进行数据库连接的方式有几种,其中 1 种是通过“控制面板” “管理工具”“数据源(ODBC)”来设置系统 DSN。完成系统 DSN 设置后,就可以通过 ADO 对象对数据库进行存取操作了12。 3.3.1 浏览留言 用户可以在该页面浏览全部的留言,这些留言都存放在表 mssg 里,页面 MSGBOARD.ASP 中的显示留言,可通过对表 mssg 操作而显示到页面上。随着留言的增多,如果在一个页面 里留言全部的留言,可想而知是非常不方便的,因此本设计为留言板提供了分页显示功能。 通过 ASP 提供的 Recordset 的 AbsolutePage 就可以轻松的对数量繁多的留言进行有条理 的分页显示。程序代码如下： set rs=server.CreateObject(“adodb.recordset“) sql=“select * from mssg order by mssgtime desc“ rs.open sql,conn,1,1 if not rs.eof then rs.PageSize =10 每页记录条数 result_num=rs.RecordCount 记录总数 maxpage=rs.PageCount page=request(“page“) 毕业论文（设计） 14 if Not IsNumeric(page) or page=“ then page=1 else page=cint(page) end if if pagemaxpage then page=maxpage end if rs.AbsolutePage=Page else result_num=0 maxpage=0 page=0 end if 3.3.2 发布留言 任何的注册用户登录后都拥有发布留言的权利,在留言主页面提供了用来发布留言的 输入框,用户可以通过表单发表留言,并选择留言主题的标志,发布留言是通过程序 MSGADD.ASP 来实现的。留言板的代码为： 添加，更新记录 if request.Form(“method“)=“submit“ then if session(“usergroup“)=0 then response.write“alert(对不起，您还没有经过同学验证，无权发 布消息！);location=“ form1.oldpasswd.focus(); return false; 毕业论文（设计） 16 if (form1.newpasswd.value.length=0) alert(“请输入您的新密码！“); form1.newpasswd.focus(); return false; if (form1.renewpasswd.value.length=0) alert(“请确认您的新密码！“); form1.renewpasswd.focus(); return false; if (form1.newpasswd.value != form1.renewpasswd.value) alert(“您两次输入的密码不一致！请重新输入！“); form1.newpasswd.focus(); return false; return true function checkform2() if (document.form2.realname.value.length=0) alert(“请输入您的真实姓名！“) document.form2.realname.focus(); return false; if(document.form2.email.value.length=0 document.form2.email.focus(); return false; return true; 3.5 相片上传与浏览的设计 用户还可以将自己喜欢的相片上传供其他用户浏览。用户在主页面上点击“班级相 基于 DREAMWARE 和 ASP 技术的班级网站建设 17 册”进入页面 photo.ASP。相片的上传：由于 ASP 使用基于开放设计环境的 Active技 术,本留言板即利用 Active组件 ASPSmartUpload 来实现相片上传功能。该组件在下载 并安装后方可使用。相片的上传是通过文件 upload.ASP 的上传程序