毕业设计（论文）-基于WEB的网站设计与实现.doc

目 录第一章 网络与Web基础知识11.1 Internet概述11.2 浏览器-服务器模式21.3 Web标准2第二章 ASP开发工具简介42.1 ASP的简介42.2 ASP的特点42.3 ASP在数据库中的应用52.4 Dreameaver的应用8第三章 站点使用及IIS安装10第四章 站点分析与设计224.1 站点功能分析224.2 系统运行模型224.3 数据流程图234.4 系统开发环境23第五章 数据库设计与实现245.1 数据库设计概述245.2 数据库需求分析245.3 数据库实现25第六章 首页的实现266.1 站点首页设计266.2 二级页面实现28致谢词32参考文献33前言前 言 网站是政府、企事业单位向用户提供信息的一种方式，是开展电子政务、电子商务的基础设施和信息平台。网站建设的规划、设计是建成成功网站的关键。从网站建设的规划、设计入手，介绍网站建设的实现方法和技术。 计算机网络技术飞速发展，网络化和全球化成为不可抗拒的世界潮流。网站是政府、企事业单位向用户提供信息(包括产品和服务)的一种方式，是政府、企事业开展电子政务、电子商务的基础设施和信息平台。因特网上的网站就象企业在互联网中的办公大楼，网站所带来的政治、经济、商业利润及其影响是具有深远意义。网站正以惊人的速度扩张，每年有大批的企、事业单位投入资金来发展网站建设。各类网站一般都是建立在Web平台基础上的，加上支持其功能的应用软件，还有一部分是保证网络安全及网络管理所需要的软件，因此，各类网站建设的关键问题是Web站点的建设。5第一章 网络与Web基础知识第一章网络与Web基础知识21世纪是以网络为核心的信息时代。网络化、信息化和数字化正在从整体上引导世界经济和人类社会发展的进程；以网络技术为重要内容的信息技术已成为经济发展的关键因素和倍增器；网络时代的挑战和机遇给企业市场销售带来了新的切入点和运行模式。在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，并给人们的生活带来了极大的便利，传统个人及公司的推广方式的改变也是时代发展的必然结果。1.1 Internet概述Internet即国际计算机互连网，在中国也称“因特网”或“万维网”，是由符合TCP/IP等网络协议的网络组成的互连网。它是目前全世界最大的网络，包含着丰富多彩的信息，并提供方便快捷的服务。它缩短了人们之间的距离。通过Internet，用户可以于接入Internet的任何一台计算机进行交流，如发邮件、聊天、通话等。Internet是一种全球范围的基于分组交换原理和TCP/IP的计算机网络。它将信息进行分组后以数据包为单位进行传输。Internet在进行信息传输时要 完成的任务主要有两项：一是正确分割源文件，以及在目的地将同一文件的数据包准确地重组起来；二是将数据包准确地送往目的地。Internet提供的主要服务：1、电子邮件2、文件的下载与上传3、信息查询4、文件传输5、网上聊天6、BBS电子公告栏7、网上游戏8、个人主页空间9、电子商务。Internet上的电子商务作为一种新兴的技术在全球范围内已经成为引人注目的焦点，它是一种新型的商业模式，不论在经营思路方面还是在商品营销方面，都与传统的商业模式有着巨大的差别，它的出现意味着一个全新的全球性网络经济的诞生。1.2浏览器服务器模式随着Internet和Intranet的迅速发展，网络已经成为人们获取和交换信息的最有效的途径，同时，应用程序的设计已经由传统的 C/S模式逐渐向B/S模式过渡。B/S模式是随着Internet技术的兴起，对C/S模式的一种变化或者改进的模式。在这种模式下用户界面完全通过WWW浏览器实现，一部分事务逻辑在前端实现，但是主要事务逻辑在服务器端实现。众所周知，超文本传输协议（HTTP）使用的是超文本指标语言（HTML）。HTML设计简单，结构灵活。这种标准化的文档仅是一种简单的文本和标记，其中的图像和其他非文本的内容以单位文件形式存放，它们可以在各种网络上自由上传。另外，由于信息的格式是固定的，其组成元素的含义也是在HTML中定义好的。对于一个浏览器应用程序，用任何语言在任何平台或操作系统中相对来说都是比较容易实现的。1.3Web标准Web标准不是某一种标准，而是一系列标准的集合。网页主要由三部分组成：结构、表现和行为。对应的标准也分为三类：结构化标准语言主要包括HTML和XML，表现标准语言主要为CSS，行为标准主要包括对象模型W3CDOM。1.3.1建立Web标准的目的（一）提供最大利益给最多的网站用户；（二）确保任何网站文档都能够长期有效；（三）简化代码，降低建设成本；（四）让网站更容易使用，能适应更多不同用户和更多网络设备；（五）当浏览器版本更新或者出现新的网络交互设备时，确保所有应用能够继续正确执行。1.3.2采用Web标准的优点（一）客户端的优点：采用Web标准后，客户端带来的好处主要体现在以下5个方面： 文件下载与页面显示速度更快； 内容能被更多的用户访问； 用户能构通过样式选择定制自己的表现界面； 所有页面都能提供适于打印的版本。（二）服务器端的优点：采用Web标准后，服务器端带来的好处主要体现在以下5个方面： 更少的代码和组件，容易维护； 带宽要求降低，成本降低； 更容易被搜寻引擎搜索到； 改版方便，不需要变动页面内容； 提供打印版本而不需要复制内容。第二章开发工具简介2.1 ASP的简介Active Server Pages：“动态服务器网页”，即我们所称的ASP，是一套微软开发的服务器端脚本环境，通过ASP我们可以结合HTML网页、ASP指令和ActiveX 元件建立动态、交互且高效的WEB服务器应用程序。有了ASP你就不必担心客户的浏览器是否能运行你所编写的代码，因为所有的程序都将在服务器端执行，包括所有嵌在普通HTML中的脚本程序。当程序执行完毕后，服务器仅将执行的结果返回给客户浏览器，这样也就减轻了客户端浏览器的负担，大大提高了交互的速度 。利用ASP将可以执行的脚本嵌入到HTML文件中(将HTML文件的后缀名改为.asp)，这使得HTML文件的编写与脚本的开发融合在一起。通过ASP内置的对象、服务器组件（Server Component）可以完成非常复杂的任务。2.2 ASP的特点（一）任何开发工具皆可发展ASP:只要使用一般的文书编辑程序，如Windows记事本，就可以编辑。当然，其他网页发展工具，例如，Dreamweaver、 FrontPage等也都可以。（二）语言相容性高:ASP与所有的ActiveX Script语言都相容，除了可结合HTML，VBScript、Java Script、Active X服务器组件来设计外，并可经由“plug-In（外挂组件模组）的方式，使用其他厂商（Third 33第二章 开发工具简介Party）所提供的语言。（三）隐密安全性高:如果我们在浏览器中直接查看网页的原始代码，就只能看到HTML文件，原始的ASP程序代码是看不到的！这是因为ASP程序先于网站服务（Web Server）端执行后，将结果转换成标准HTNL文件，再传送到客户端（Client）的浏览器上，因此，我们所辛苦撰写的ASP程序不会轻易地被看见进而被盗用。（四）易于操控数据库:ASP可以轻易地通过ODBC(Open Database Connectivity)驱动程序连接各种不同的数据库，例如：Access、SQL、Oracle等等，另外，ASP亦可将“文本文件”或是”Excel” 文件当成数据库用。（五）面向对象学习容易:ASP具备有面向对象（Object-Oriented）功能，学习容易，ASP提供了五种方便能力强大的内建对象：Request、Response、Sever、Application以及Session，同时，若使用ASP内建的“Application”对象或”Session”对象所撰写出来的ASP程序可以在多个网页之间暂时保存必要的信息。2.3 ASP在数据库中的应用用户通过浏览器查询服务器的后端数据库是许多Web服务提供者必需有的服务，ASP通过内置的ADODB组件来实现这一功能。可以使用ADO去编写紧凑简明的脚本以便连接到ODBC 兼容的数据库和 OLE DB 兼容的数据源。具体的操作步骤可以归纳为以下几步：（一）创建数据库源名（DSN） ADODB通过ODBC工作，因此要在ODBC中设置DSN（数据源名）。打开Windows的控制面板，双击ODBC的图标，然后选择文件 DSN 的属性页，单击，选择数据库驱动程序，然后单击下一步，按照屏幕的指示键入数据源文件的名称，然后单击下一步，再单击完成创建数据源。（二）创建数据库链接 链接用以保持一些关于正在访问的数据的动态信息，以及链接者信息。利用ADODB的成员函数Open和先前设定的DSN与数据库连接，其语法如下： SetConnect=Server.CreateObject(ADODB.Connection) 创建了链接对象Connect。 Connect.Open(DSN=dsnname；UID=userID；PWD=password) 打开链接。dsnname为数据源名；userID为用户名；password为用户口令。（三）创建数据对象 ADO中的数据对象通常保存的是查询结果。RecordSet 是ADO中最复杂的对象，有许多属性和方法，灵活运用，可以达到许多好的效果。其创建方法如下：Set RecordSet =Connect.Execute(sqtStr) 创建并打开了对象RecordSet ，sqtStr是一个串，代表一条标准的SQL语句。例如： sqlStr=SELECT*FROM b1 Set RecordSet =Connect.Execute(sqlStr) 这条语句执行后，对象RecordSet中就保存了b1中的所有记录。 （四）操作数据库 可利用Execute方便地执行数据的插入、修改、删除等操作。如执行插入操作： sqlStr=Insert Into b1Values(1,2) Connect.Execute(sqlStr)（五）关闭数据对象和链接 在使用了ADO对象之后，一定要关闭数据对象和链接。在ASP中通过调用方法close实现关闭。 关闭创建的数据对象：Record Set .close Set Record Set=Nothing 关闭创建的链接对象：Connect. close Set Connect=Nothing 完整的程序片段：/产生组件实例 /显示结果 上述是用ASP访问数据库的全过程，由于应用面向对象思想，所有操作都比较简单，用户需要注意的仅是对数据结构的了解、当前所操作的对象及对象的属性等等，只要对这些有了清晰的认识，再加上ASP强大功能，在网络上使用数据库，实现用户与页面间交换信息，就再也不是什么难事了。2.4 Dreamweaver简介 Dreamweaver是Macromedia公司推出的主页编辑工具。这是一个所见即所得主页编辑器，并带有站点管理功能，让你方便地设计和管理多个站点。而它最棒的地方就是支持最新的DHTML和CSS标准，你可以用它设计出生动的DHTML动画、多层次的页面(layer)以及CSS样式表。目前Macromedia公司推出最新Dreamweaver8.Dreamweaver8功能更强劲,拥有:a.可视化操作XML数据b.统一CSS面板c.CSS可视化布局d.样式渲染工具条e.增强XML编辑与验证f.增强基于CSS的设计的渲染g.增强整合的Accessibility参考h.更多预建的Accessibility设计与模板i.增强动态跨浏览器验证j.增强手机内容创作能力。等十几项最新的功能Dreamweaver提供视觉化网页开发工具的生产力，同时不会降低HTML原始码的控制，Dreamweaver 提供的 Roundtrip HTML 功能， 让您无误地切换于视觉模式与惯用的原始码编辑器，拖放式的表格与页框设计以及以透过资料库来管理网站的内容更新。Dreamweaver 支援跨浏览器的 DynamicHTML，阶层式样式表单、绝对坐标定位以及JavaScript的动画让您更易编辑网页。你用它搞的网页不用担心在NC里不能看！它支持IE与NC。Dreamweaver 乃是第一套针对专业网页开发者特别发展的视觉化网页设计工具。RoundtipHTML 功能完全控制HTML原始码，著名的BBEdit 与 Home Site编辑器分别内含于 Macintosh与Windows版本的软体中。当开启其他编辑器产生的网页时，它会保存既有的HTML格式。使用绝对座标可获得精准且弹性的设计。Dynamic HTML、直觉式时间轴介面以及JavaScrip行为库，可在不需程式下让 HTML元件动起来。以全网站内容管理的方式让您跳脱逐页更新管理的缺点提升您的生产力。RoundtripHTML完美整合视觉性工具和原始码编辑器 Dreamweaver整合视觉性工作环境及原始码文字编辑器(如BBEdit、HomeSite等)。当你要编辑自己既有的网页时，Dreamweaver会尊重你在其他编辑器所做出的原始码，不会任意地改变它。 而在使用Dreamweaver的视觉性编辑环境时，你可以在HTML监视器上同步地看到Dreamweaver所为你产生的原始码，而你若想要在视觉式编辑模式和原始码编辑模式之间跳换的话，只要按一下所需的视窗就可以了。第三章站点使用及IIS的安装请按照下列的说明进行操作（Windows2000/XP）。复制文件将光盘中的mysite文件夹复制到C：盘的根目录中，并取消其文件的只读性。将“我的代码片断”文件夹复制到C:Documents and Settingsjm（用户名）Application DataMacromediaDreamweaver MXConfigurationSnippets文件夹下。安装IIS1启动计算机，打开“控制面板”窗口，并在控制面板窗口中单击按钮，如图3.1所示。图3.1 “控制面板”窗口2在打开的“添加或删除程序”对话框中单击“添加/删除Windows组件”按钮项，如图3.2所示。第三章站点使用及IIS的安装图3.2 “添加或删除程序”对话框3系统会查找Windows组件并打开“Windows组件向导”对话框，如图3.3所示。图3.3 “Windows组件向导”对话框4“Windows组件向导”对话框中，在“组件”栏中选择“Internet信息服务（IIS）”项，单击“下一步”按钮，系统会提示插入“Windows2000/XP”光盘到光驱中，如图3.4所示。图3.4 提示插入光盘5插入“Windows2000/XP”光盘并单击“确定”按钮，系统会自动安装这项服务，如图3.5所示。图3.5 完成“Internet信息服务（IIS）”安装6在桌面中右击“我的电脑”，从弹出的快捷菜单中选择“管理”便可看到这些服务，如图3.6所示。图3.6 Internet信息服务设置虚拟目录1找到c:mysite文件夹，选中并右击该文件夹，从弹出的快捷菜单中选择“共享与安全”选项。在打开的“mysite属性”对话框中，选择“Web共享”标签，如图3.7所示。图3.7 设置“Web共享”2选中“共享文件夹”单选框，并可进入“编辑别名”对话框中。然后将“别名”设置为“mysite”；“访问权限”中选中“读取”单选框；在“应用程序权限”中选中“脚本”单选按钮，单击“确定”按钮关闭该对话框，便完成了定义动态站点的准备工作。如图3.8所示。图3.8 编辑与设置虚拟目录定义站点1.启动Dreamweaver MX，从文档窗口菜单栏中依次选择 “站点”“新建站点”菜单命令，打开定义站点对话框，如图3.9所示。图3.9 切换到高级标签2.在“分类”栏中选择“本地信息”，并在“站点名称”文本框中输入“玫瑰信使”站点名称，在“本地根文件夹”文本框中输入“C:mysite”本地根文件夹或单击“浏览文件夹”图标，选择本地站点文件夹，如图3.10所示。图3.10 设置本地信息3在分类栏中选择“测试服务器”，并对“测试服务器”信息做如图3.11所示的设置。图3.11 设置测试服务器信息4、其他“分类”栏中信息可以不设定，使用默认值即可。单击“确定”按钮完成站点的定义。创建2000/Me/XP的DSN1.启动控制面板，选择“管理工具”下的 ODBC 数据源。如图3.12所示。图3.12 启动数据源2.在打开的数据源管理器中选择“系统DSN”标签，并单击“添加”按钮。如图3.13所示。图3.13 添加“系统DSN”3.进入“创建新数据源”对话框。数据库的驱动程序选择 Microsoft Access Driver (*.mdb)，单击“完成”按钮。如图3.14所示。图3.14 选择驱动程序4. 在“ODBC Microsoft Access安装”对话框中，“数据来源名”文本框中输入“dwmx”，单击“选择”按钮，选择网站根目录中的dwmx.mdb。单击“确定”按钮，如图3.15所示。图3.15 ODBC Microsoft Access的安装5.这时会发现系统数据源名称中已经多了一个dwmx，这就是接下来要使用的数据库。 单击“确定”按钮，完成对DSN数据源的创建。如图3.16所示。图3.16 完成DSN的创建定义数据库连接1.在DreamweaverMX窗口的面板组中，打开“应用程序”面板。然后选择“数据库”标签,如图3.17所示。图3.17 数据库面板2.在“数据库”面板中单击“+”按钮,弹出快捷菜单中选择“数据源名称”选项。3.打开的“数据源名称”对话框中，“连接名称”文本框中输入“dsdwx”，如图3.18所示。图3.18 “数据源名称”的填充4.单击“测试”按钮来测试是否能跟数据库正确连接。如果出现如图3.19所示的信息，就是成功啦！图19 测试连接5.单击“确定”按钮，再单击“数据源名称”对话框中的“确定”按钮，便完成数据库连接的设定。接下来便可按照本书的讲解完成实例的制作和编辑。注：读者可使用下列的用户名与密码对客户登录实例进行测试用户名：XX 密码：111111用户名：YY 密码：222222第四章 站点分析与设计站点分析的主要任务是将在系统详细调查中所得到的文档资料集中在一起，对组织内部整体管理状况和信息处理过程进行分析。系统功能分析是在系统开发的总体任务的基础上完成的。4.1系统功能分析网络销售管理系统是基于ASP（Active Server Pages ）动态服务器网页开发的，是目前Internet上广泛使用的在线系统之一。本系统是一个适应当前个人或公司从事推广宣传的站点。4.2系统运行模型 用户发送 IIS服务器找到 文本文件中的应用 请求 文本文件位置 程序取得数据库中的数据 用户 IIS服务器 ASP文件 Access数据库数据传给用户 将数据返回给IIS服务器 第四章 站点分析与设计4.3数据流程图管理系统已注册用户登陆管理员未注册用户注册4.4系统开发环境 硬件环境：服务器端：PIII800以上+256M内存+10G以上硬盘+10/100M网卡客户机端: PII以上，64M内存， win2000(xp)或NT网软件环境：win2000(xp)+IIS5.0以上+IE5.0以上+SQL SERVER2000 开发工具：Active Server Page开发语言：VBScript脚本语言应用软件：Dreamweaver、 FrontPage、Office2000 数 据 库：Microsoft Access Server 2000第五章 数据库设计与实现 5.1数据库设计概述计算机系统以数据库为核心，在数据库管理系统的支持下，进行信息的收集、整理、存储、检索、更新、加工、统计和传播等操作。对于数据库应用人员来说，为使现实世界的信息流计算机化，并对计算机化的信息进行各种操作，就是如何利用数据库管理系统、系统软件和相关的硬件系统，将用户的要求转化成有效的数据结构，并使数据库结构易于适应用户新的要求的过程，这个过程为数据库设计。数据库已成为现代信息系统等计算机系统的基础与核心部分。数据库设计的好坏直接影响到整个系统的效率和质量。5.2 数据库需求分析要设计一个良好的数据库系统,明确应用环境对系统的要求是首要的和最基本的。通过对目前网络销售公司的整个情况详细调查，确定在互联网上在线销售和管理的目标，收集支持系统设计目标的基础数据和对这些数据的要求，最后确定：用户的需求具体体现在各种信息的提供、保存、更新和查询，这就要求数据库能够充分满足各种信息的输入和输出。根据系统的目标设计的要求以及功能模块的划分，网络销售管理系统的各个组成部分可以设计出如下面所示的数据项和数据结构：管理员信息：包括管理员用户名和密码。用户信息：包括用户名、密码第五章 数据库设计与实现5.3数据库的实现为了实现以上分析中涉及的相应功能，结合本系统对有关数据的存储的需要，建立了数据库表，每个表的字段名称、数据类型、长度、作用设计如下：管理员信息表（Administrator表）：名称数据类型长度允许空作用AdminNvchar30否管理员IDPasswordNvchar30是管理员密码用户信息表（Customer表）：名称数据类型长度允许空作用NameNvchar20否用户名PasswordNvchar10是用户密码第六章 页面的实现网站采用静、动相结合的方式，即静态的主画面和动态的网页相结合，利用ASP与SQL数据库结合的技术建立数据库查询管理系统，采用交互式的动态的web画面来实现。本章节选公共页面最具代表性的首页进行详细说明。6.1站点首页设计系统的首页使用框架搭建，主要分为3个部分：顶部banner条、左下边的浏览者导航页和左边Flash动画页。功能的实现 （代码）1顶框架源程序：Untitled Document 我的空间我做主! 祝各位朋友吉祥幸第六章 页面的实现福. 自我介绍 热诚欢迎你的访问！”. 个人概况 生活习惯 个人爱好   张 龙 空 间   教育背景 龙 在 说.         我的作品建设中.  联 系 方 式 :   友 情 连 接 . . . 访 问 人 数 ：   搜索本站名称：luishunyu.htm      在首页中，顶部框架上加入了JavaScript弹出小人式的提示信息。当然此效果同时就出现在了框架总页中。首页中左边的菜单导航栏浏览进入二级页面方便快捷，另外导航条中加入了JavaScript可使导航条显示出生动的动画效果。6.2二级页面的实现浏览者在登录主页后，点击“个人概况”页后就可进入。Banner条上蒙覆了云飘图案，再在源代码中加入透明参数就会使背景透明，从而Banner条的图案