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

1、基于 DREAMWARE 和 ASP 技术的班级网站建设1基于 DREAMWEAVER和 ASP技术的班级网站建设摘要: 再 Internet 飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站在 Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。本文介绍了构建班级网站的技术和实现方法，重点讲述了注册登陆，留言板，班级相册等几个主要功能的实现。网站页面采用 Dreamweaver MX 所见即所得的网站设计工具，并结合 ASP 技术来设计，网站图片、动画设计

2、采用 Potoshop7.0 和 Flash MX，在代码方面主要是以 HTML 为主的设计语言。网站采用的数据库是 Microsoft Access 。关键词:班级网站;ASP; Dreamweaver Construction of the Class Websites Based on DREAMWEAVER and ASP TechnologyAbstract: Today, internet is developed at full speed, internet becomes the important channel of that people obtain, release

3、 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 atte

4、ntion. 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 techno

5、logy. 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 飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生

6、活等各个方面发挥着重要的作用。Internet 上发布信息主毕业论文（设计）2要是通过网站来实现的，获取信息也是要在 Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在 Internet 应用上的地位显而易见，它已成为信息社会的重要组成部分，从而倍受人们的重视。为了今后更好的方便大家联系、交流，特构建山西农业大学信管 011 班同学录网站。1.1 设计思想通过网站，方便大家联系，全面展示我班的风采，加深同学们之间的感情，更好的为大家服务。在设计网站时，首先应该考虑客户端浏览网站所使用的浏览器的兼容性的问题。现在，最常用的是 IE 和 NETSCAPE，由

7、于 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中的可视化编辑功能,可以快速地创建页面而无需编写任何代

8、码。Dreamweaver MX 提供了许多与编码相关的工具和功能,如表单、表格和各种控件。借助Dreamweaver MX,可以使用多种服务器语言,例如ASP、ASENET、ColdFusion 标记语言(CFML) JSP 和PHP 生成支持动态数据库的Web 应用程序。Dreamweaver MX 可谓是开发静态、动态网站的利器,也是开发Web 应用程序的高效工具。不仅是专业人员制作网站的首选工具，而且普及到广大网页制作爱好者中，相对于其它网页制作工具和以前版本，有以下这些优势： 对简体中文良好的支持，不会出现一些不兼容中文的现象。例如，在早期的Dreamweaver4.0 中，制作 F

9、lash 按钮时会出现乱码。 使用 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：“动态服务器网页” ，

10、一般简称为“ASP” ，基于传统的静态基于 DREAMWARE 和 ASP 技术的班级网站建设3Web 技术,信息网页、文本文件和图像等内容是以单独文件形式存放的。Web 服务器应用程序简单地从磁盘中读取它们并转换成能够在网络上传输的正确的 HTTP 协议。在客户或用户端,浏览器接收传送的信息,并转换成能够显示的页面。然而这种静态 Web 技术无法实现传递实时性很强的信息,例如在页面上输入信息或传递从其他应用程序中得到的内容,特别是访问特定类型的数据库内容。这就需要有相应的技术来满足客户的要求。ASP 技术的出现和应用较好地解决了网页信息传递的实时性和交互性要求。与 HTML 网页不同，以AS

11、P 为后缀的文件并不能直接在浏览器中打开。当 IIS 服务器接收到对 ASP 页面的请求时，服务器将它解释并生成为标准的 HTML 网页，发回给浏览器。ASP 之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的 HTML 格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如 IE 或 Netscape）都可以正确地获得 ASP 的“执行”结果，并且将这 ASP 执行的结果直接在浏览器中“浏览” ，不像 VBScript 或 JavaScript 是在客户端（Client）的浏览器上执行，若使用 VBScript 来设计程序，客户端（Client）在 IE 浏览器中可

12、以显示程序执行的结果，可是，客户端（Client）若使用Netscape 浏览器就无法显示 VBScript 的执行结果 2。ASP 的特点：任何开发工具皆可发展 ASP，只要使用一般的文书编辑程序，如 Windows 记事本，就可以编辑。当然，其他网页发展工具，例如，FrontPage Express、FrontPage 等也都可以。语言相容性高ASP 与所有的 ActiveX Script 语言都相容，除了可结合 HTML，VBScript、Java Script、Active X 服务器组件来设计外，并可经由“plug-In” （外挂组件模组）的方式，使用其他厂商（Third Party

13、）所提供的语言。隐密安全性高如果我们在浏览器中直接查看网页的原始代码，就只能看到 HTML 文件，原始的 ASP程序代码是看不到的！这是因为 ASP 程序先于网站服务端（Web Server）执行后，将结果转换成标准 HTML 文件，再传送到客户端（Client）的浏览器上，因此，我们所辛苦撰写的 ASP 程序并不会轻易地被看见进而被盗用。易于操控数据库ASP 可以轻易地通过DBC(Open Database Connectivity)驱动程序连接各种不同的数据库，例如：Access、Foxpro、DBase、Oracle 等等，另外，ASP 亦可将“文本文件”或是“Excel” 文件当成数据

14、库用。面向对象学习容易ASP 具备有面向对象（Object-Oriented）功能，学习容易，ASP 提供了五种方便能力强大的内建对象：Request、Response、Sever、Application 以及 Session，同时，若使用 ASP 内建的“Application”对象或“Session”对象所撰写出来的 ASP 程序可以在多个网页之间暂时保存必要的信息。语言简洁毕业论文（设计）4ASP是由静态的HTML和动态的ASP代码组成，采用ASP的一个很大的优点是，可以在客户端中包含你的服务器端脚本的运行结果。为了能够区分代码的起始位置和终止位置，在ASP中是用 来标识，其中是ASP终

15、止的标记；ASP Code就是任意的ASP代码 3。1.2.3 ASP 下 Web 数据库的连接与打开在网络技术飞速发展的今天, 基于网络的 W EB 数据库的操作成为了信息处理的核心, 自从 Microsoft 推出 A SP 技术后, 由于它在创建动态交互式站点上的强大功能及其代码编写的简便性、面向对象的设计, 很快在 Internet.Intranet 网站上得到了广泛的应用, 尤其是涉及到数据库操作的网站应用系统更是倾向于采用 A SP 技术. ASP 成为许多计算机专业人士设计网站时的首选技术. 现简单介绍在 A SP 下数据库连接的相关知识。基本原理 在 A SP 中, 用来存取数

16、据库的对象统称 ADO 对象 (ActiveX Data Objects), 这是一项容易使用并且可扩展的将数据库访问添加到 Web 页的技术, 可以使用它去编写紧凑简明的脚本以便连接到 ODBC (Open Database Connectivity) 兼容的数据库和 OLEDB 兼容的数据源.在 ASP 中, 有 7 个对象, 其中与数据库有关的主要有 3 种对象: Connection, Recordset 和 Comm and, 其中 Connection 负责打开或连接数据库,Recordset 负责存取数据表, Comm and 定义对数据源进行操作的命令。如果只依靠这 3个对象还

17、是无法存取数据库的, 还必须具有数据库存取的驱动程序: OLEDB 驱动程序和ODBC 驱动程序 . 对于任何一种数据库都必须有相对应的 OLEDB 驱动程序和 ODBC 驱动程序,ADO 对象才能对数据库进行存取。ADO 对象必须与各种驱动程序相结合才能存取各种类型数据库, 不同的数据库需要不同的驱动程序。可以非常方便地在“控制面板”中“ODBC Data Source (32Bit) ”中获得本机驱动程序的信息 4。数据库连接 访问数据库信息的第一步是创建数据库源并和数据库源建立连接. ADO 提供了Connection 对象, 可以使用该对象建立和管理应用程序和 ODBC 数据库之间的连

18、接. Connection 对象具有各种属性和方法, 可以使用它们打开和关闭数据库连接, 并且发出查询请求来更新信息. 要建立数据库连接, 首先应创建 Connection 对象的实例. 在实际应用中不同数据库的连接方法有所不同, 它们需要建立不同的 Connection, 但如果建立Connection 后, 使用 Recordset 对象存取数据的方法却基本相似 . 以 Test.mdb 为例连接, 基本步骤如下: (1) 创建数据库源 数据库源名, 即 DSN (Data Source Name) 是连接 ODBC 和数据库的桥梁,ODBC 通过 DSN 来找到要访问的数据库. 可以通过

19、“32 位 ODBC”对其进行管理.(2) 创建数据库链接 ASP 文件中如果要访问数据, 必须首先创建与数据库的链接, 其语法如下:基于 DREAMWARE 和 ASP 技术的班级网站建设5set Tconn = Server createObject (“ ADOBD. CONN ECT ION ”).创建了链接对象TConn TConn. Open“dns”,“username”,“password”.打开链接。(3) 创建数据对象 RecordSet 保存的是数据库命令结果集, 并标有一个当前记录. sql=“SEL ECT 3 FROM test”.设 SQL 语句 Set Reco

20、rdSet= 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 (字符

21、串行)= (字符值串行)”.SQL 语句 TConn. Execute (sql2). 关闭数据对象和链接 在使用了 ADO 对象之后, 一定要记住关闭它, 因为它使用了服务器的资源. 通过调用方法 close 实现关闭, 然后再释放它. TConn. Close5考虑以上各方面因素，所以我选择了 Dreamweaver 结合 ASP 技术架构本网站。2 网站结构设计2.1 页面布局网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现班级的勃勃生气，网站布局应该以轻松、简洁的风格为主，同时使用一定的图形和多媒体元素，将整个网页分成四个部分（如图 1）第一部分第二部分第三部分第

22、四部分图 1 页面布局第一部分主要用来放置网站的标志图片；第二部分与第四部分主要用来放置一些功能链接；第三部分是主体部分，放置班级信息、留言、公告模块等 6。2.2 网站结构及功能毕业论文（设计）6网站的具体结构如图 2 所示，在首页上共有 7 个大的功能菜单，每个菜单链接一个功能页面，每个页面实现不同功能。图 2充分利用 ASP 的强大功能，在网站中提供留言簿、公告栏等交流场所，为同学们展开信息交流提供方便。2.3 数据库设计本网站采用的数据库是 Microsoft Access ，建立库文件，包含如下几个表文件：claim 网站公告信息表loginfo 来访登陆时间信息表mssg 留言信息

23、表；photo 图片内容说明信息表user 成员地址信息表 73 详细设计3.1 统一规划网站的布局和格式首先要规划好网站的结构，对网站的网页大体布局有一个具体的轮廓。并且为网站的主页及二级页面确定一个共同的格式，包括整个页面的颜色，宽度，阴影，背景，字体的大小颜色这就需要我们制作一个超文本样式表.css 文件，以供每个网页调用。本站具体的.css 代码如下：body SCROLLBAR-FACE-COLOR: #ffffff;SCROLLBAR-HIGHLIGHT-COLOR: #000000;SCROLLBAR-SHADOW-COLOR: #000000;SCROLLBAR-3DLIGHT

24、-COLOR: #ffffff;SCROLLBAR-ARROW-COLOR: #666666;SCROLLBAR-TRACK-COLOR: #ffffff;SCROLLBAR-DARKSHADOW-COLOR: #ffffff;基于 DREAMWARE 和 ASP 技术的班级网站建设7background-image:url(./images/bg.gif); background-position:centerBODY FONT-SIZE: 12px; FONT-FAMILY: “Verdana“, “arial“TABLE FONT-SIZE: 12px; FONT-FAMILY: “Ve

25、rdana“, “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 soli

26、d; COLOR: #0066cc; FONT-SIZE: 9pt; HEIGHT: 16pxTEXTAREA 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-COLO

27、R: #cccccc; PADDING-TOP: 1px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #cccccc在每个网页的程序中加人如下的程序段:。来实现调用已经编制好的超文本样式表文件 class .css，这样就为网站中的每个网页设定一个共同的样式，如整个网页文字的大小、字体，还有活动超联接和已访问超联接的颜色以及菜单的一些属性等等。为网站设计一个主页面使用 DreameWeaver MX 来制作。还要用到 HTML 语言、VBScript、JavaScript 等。将前面说到的功能和内容以菜单的形式列出在主页上，级联菜单上是一些具体的

28、功能和内容。当然，这个菜单是用 JavaScript 编制出来的一个函数，毕业论文（设计）8然后，在每一个菜单文件的代码中再调用这个函数，其它的菜单也可以用同样的代码来实现。同样，对于二级页面的设计以及其它页面的设计也是与主页相同。如果这些页面的主要部分与先前设计的主页主体部分风格和布局以及菜单都相同，那么我们就可以先建立一个空的含菜单的文件作为模板，以后每建立一个类似的页面，就可以调用此模板文件，在此基础上再进行修改、补充 8。3.2 注册和登录模块设计注册登录模块是系统的门户,在整个系统中占有重要的地位。它的主要功能是根据用户的录入信息进行身份识别,排除非法用户对本系统的使用,对合法用户则

29、按照不同的级别分类处理，从而保证系统的运行安全，过程如图 3 所示 9。图 3 过 程图用 户进入主页面后,要想法使用其他菜单的功能必须先进行注册,在将表单提交后,调用相应的程序进行处理。处理程序首先与数据库连接,查看是否存在同名和同密码的用户,若存在则显示提示信息,并重新返回注册表单,用户输入新的信息进行重新注册;若不存在同名且同密码的用户,则将注册信息写入数据库。在注册界面填写注册信息的时候，用下面的程序判断输入的信息是否正确：function checkform()if (adduser.username.value.length=0) alert(“用户名不得为空！“);documen

30、t.adduser.username.focus();return false;注册登录系统识别身份普通用户 管理员一般查询班级管理批准加入数据库管理普通浏览基于 DREAMWARE 和 ASP 技术的班级网站建设9if (document.adduser.passwd.value.length = 0) alert(“请输入您的密码！“);document.adduser.passwd.focus();return false;if (document.adduser.repasswd.value.length = 0) alert(“请确认您的密码！“);document.adduser.

31、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.len

32、gth=0)alert(“请输入您的真实姓名！“)document.adduser.realname.focus();return falsereturn true如若用户已经注册,则可输入名称和密码进入,在此过程中验证名称和密码是否相符以及在登录过程中用户的请求是否被允许从而显示不同的提示页面。用户登录的流程图如图4 所示 10。毕业论文（设计）10提交点击返回按钮是是进行注册表单的填写连接数据库并以用户名进行查寻填写登录的用户名和密码给出各种错误提示并返回登录框输入密码与数据库中的是否相同是否首次登录？进入网站界面 图 4流程图通过在表单输入“用户名”和“密码”后点击“登录”提交表单,激活后台登录程序。如果“用户名”和“密码”匹配就可以进入,反之显示错误提醒页面。若登录成功,登录程序会把登录用户的信息写进 Cookies,供以后各项功能实现时使用。用户的登录程序如下：用 户：