第11章-制作简单动态网页PPT学习课件.ppt

《第11章-制作简单动态网页PPT学习课件.ppt》由会员分享，可在线阅读，更多相关《第11章-制作简单动态网页PPT学习课件.ppt（50页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、主编：潘明寒主编：潘明寒主编：潘明寒主编：潘明寒网页制作实例教程网页制作实例教程(第第3版版)制作简单动态网页（第制作简单动态网页（第11章）章）网页制作实例教程（第网页制作实例教程（第3版）版）1 1，制作和使用表单，制作和使用表单，制作和使用表单，制作和使用表单 2 2，制作和使用，制作和使用，制作和使用，制作和使用ASPASP动态网页动态网页动态网页动态网页 3 3，连接，连接，连接，连接ACCESSACCESS数据库数据库数据库数据库 本章要点：本章要点：2网页制作实例教程（第网页制作实例教程（第3版）版）11.1.1 11.1.1 11.1.1 11.1.1 认识表单认识表单认识表单

2、认识表单 11.1 制作表单制作表单 表单是用户与服务器进行信息交流的主要工具，能为动态网页提供交互功能。表单按照统一模式从用户收集信息，然后将信息提交给服务器进行处理。一个完整的表单应该包含两个部分：一个是表单对象，用来在网页中收集信息，另一个是表单处理程序，用来处理表单。表单处理程序在Web服务器上，当提交一个表单时程序开始执行。表单只有与某个表单处理程序关联之后才能实现表单功能。一个网页可以有多个表单，但表单中不能嵌入表单。3网页制作实例教程（第网页制作实例教程（第3版）版）11.1.2 11.1.2 11.1.2 11.1.2 插入表单插入表单插入表单插入表单 11.1 制作表单制作表

3、单 1 1，用，用“插入插入”面板面板2 2，用，用“插入插入”菜单菜单4网页制作实例教程（第网页制作实例教程（第3版）版）11.1.3 11.1.3 11.1.3 11.1.3 表单控件表单控件表单控件表单控件 11.1 制作表单制作表单（1）表单按钮（2）文本域（3）文本区域（4）按钮（5）复选框（6）单选按钮（7）文件域表单控件用来生成表单对象，是表单的主要内容。（8）图像域（9）隐藏域（10）单选按钮组（11）复选框组（12）跳转菜单（13）字段集（14）标签5网页制作实例教程（第网页制作实例教程（第3版）版）11.1.4 11.1.4 11.1.4 11.1.4 表单属性表单属性表单

4、属性表单属性 11.1 制作表单制作表单（1）表单ID，为表单命名。（2）动作，指定处理的程序的URL地址。（3）目标，指定窗口，显示处理表单后所返回的信息。（4）方法，指定表单的提交方法，有POST方法和 GET方法两种。（5）编码类型，指定表单的编码类型，在下拉列表中选择。（6）类，用CSS样式格式化表单。6网页制作实例教程（第网页制作实例教程（第3版）版）11.1.5 11.1.5 11.1.5 11.1.5 添加表单对象添加表单对象添加表单对象添加表单对象 11.1 制作表单制作表单 例例11-1 11-1 可视化方法制作表单可视化方法制作表单 7网页制作实例教程（第网页制作实例教程（

5、第3版）版）11.2.1 11.2.1 11.2.1 11.2.1 表单域标记表单域标记表单域标记表单域标记 11.2 表单标记表单标记 是双标签，用来构建表单域，设定表单的起始和终止位置。.（1）action属性，指定处理表单的程序。（2）method属性，指定传递表单数据到服务器的方式。（3）name属性，给表单起名，便于处理表单。（4）target属性，指定显示表单处理结果的窗口。8网页制作实例教程（第网页制作实例教程（第3版）版）11.2.2 11.2.2 11.2.2 11.2.2 输入标记输入标记输入标记输入标记 11.2 表单标记表单标记 是单标签，用来定义一个用户的输入区域。标

6、记的语法标记的语法 typetype属性决定输入区域的类型。属性决定输入区域的类型。type=text，单行文本输入框。typet=textarea，多行文本输入框。type=password，密码输入框。type=checkbox，复选框。type=radio，单选项。type=submit，提交按钮。type=reset，重置按钮。type=button，普通按钮。type=hidden，隐藏区域。9网页制作实例教程（第网页制作实例教程（第3版）版）例例11-2 用用HTML标记制作表单标记制作表单11.2 表单标记表单标记 表单标记您的性别：先生女士您的爱好：旅游上网运动10网页制作实例

7、教程（第网页制作实例教程（第3版）版）11.2.3 11.2.3 11.2.3 11.2.3 和和和和标记标记标记标记 11.2 表单标记表单标记 标记要与标记联合使用，在表单中创建下拉列表框。语法：语法：选项1 选项2 （1）name属性，指定下拉列表框的名称。（2）size属性，指定列表框能够显示几个选项，默认值1。（3）multiple属性，添加此属性后可以进行多选。（4）selected属性，添加此属性后该选项为被选中状态。（5）value属性，指定选项对应的值，对应值被传递到服务器。11网页制作实例教程（第网页制作实例教程（第3版）版）例例11-3 11-3 下拉列表框标记下拉列表框

8、标记 11.2 表单标记表单标记 下拉列表框标记请选择节目，单击按钮确认。星光大道开心辞典快乐大本营梦想中国    12网页制作实例教程（第网页制作实例教程（第3版）版）11.2.4 11.2.4 11.2.4 11.2.4 表单验证表单验证表单验证表单验证 11.2 表单标记表单标记 表单验证是在表单提交之前对表单数据做有效性验证。13网页制作实例教程（第网页制作实例教程（第3版）版）例例11-4 11-4 表单验证表单验证 11.2 表单标记表单标记 表单验证练习sub button1_onclick set f=document.form1 if

9、isnumeric(f.text1.value)=true then if f.text1.value10 then MsgBox 请输入 1 到 10 之间的数字！else MsgBox 输入数据正确，谢谢！f.submit end ifelse MsgBox 请输入数字！end if end sub输入一个 1 到 10 之间的数:14网页制作实例教程（第网页制作实例教程（第3版）版）11.3.1 ASP11.3.1 ASP11.3.1 ASP11.3.1 ASP的特点的特点的特点的特点11.3 ASP简介简介（1）ASP的代码在服务器端执行，将执行结果返回客户端。（2）ASP可以方便地访

10、问数据库。（3）ASP用 VBScript或JavaScript作为脚本编写语言。（4）凡是能执行 HTML代码的浏览器都能浏览ASP网页。（5）源程序不会传到客户端，保护程序源代码，提高程序安全性。（6）ASP是面向对象的。11.3.2 11.3.2 11.3.2 11.3.2 动态网页的常见功能动态网页的常见功能动态网页的常见功能动态网页的常见功能 （1）将表单提交的信息存入数据库。（2）显示数据库信息。（3）在主页中添加计数器，显示网站访问量。（4）设置访问者权限，根据不同访问者显示不同信息。（5）在网页中添加留言簿、公告板等。15网页制作实例教程（第网页制作实例教程（第3版）版）11.

11、3.3 ASP11.3.3 ASP11.3.3 ASP11.3.3 ASP的程序格式的程序格式的程序格式的程序格式11.3 ASP简介简介（1）ASP代码放在“”中，保存时文件扩展名为“.asp”。位于“”中的代码由服务器端处理。（2）ASP代码用VBScript或JavaScript编写，默认脚本语言是VBScript。在程序第一行声明所使用的脚本。声明代码如下：，声明ASP代码用VBScript编写。，声明ASP代码用JavaScript编写。（3）如果一条ASP语句过长，可以分成几行写，除最后一行以外的行末加下划线。（4）ASP代码用rem语句或单引号注释。16网页制作实例教程（第网页制

12、作实例教程（第3版）版）例例11-4 第一个第一个ASP程序程序 11.3 ASP简介简介（1）新建文本文件“p1.asp”用记事本方式打开输以下入代码保存文件。第一个ASP程序%Response.write(这是我的第一个ASP程序。)%（2）将文件复制到“c:Inetpubwwwroot”文件夹中。（3）浏览器地址栏输入http:/127.0.0.1/p1.asp 或“http:/localhost/p1.asp”。17网页制作实例教程（第网页制作实例教程（第3版）版）11.4.1 11.4.1 11.4.1 11.4.1 ASPASPASPASP的基本内置对象的基本内置对象的基本内置对象

13、的基本内置对象11.4 ASP的内置对象的内置对象 ASP有5个基本内置对象，都在服务器端执行。内置对象不需要声明，直接使用。18网页制作实例教程（第网页制作实例教程（第3版）版）11.4.2 11.4.2 11.4.2 11.4.2 ResponseResponseResponseResponse对象对象对象对象 11.4 ASP的内置对象的内置对象 Response对象用来从服务器给用户发送信息，用write方法将指定内容输出到客户端页面上，输出的内容中可以包含HTML标记。write方法练习%response.write response.write response.write 欢迎光

14、临！response.write response.write response.write%例例11-6 Response11-6 Response对象的对象的writewrite方法方法19网页制作实例教程（第网页制作实例教程（第3版）版）11.4.3 11.4.3 11.4.3 11.4.3 RequestRequestRequestRequest对象对象对象对象 11.4 ASP的内置对象的内置对象 Request对象用来取得浏览器提交的数据，主要取得表单数据。1 1RequestRequest对象的对象的formform集合集合 用post方法提交表单以后，所有表单中的数据都被保存在

15、Request对象的form集合中，集合元素从1开始编号。（1）取得表单元素的值 格式1：Request.form（表单中元素名）功能：按照控件名取得某个表单控件的值。格式2：Request.form（索引值）功能：按照索引值取得某个表单控件的值。（2）计算表单某元素值的个数 格式：Request.form（表单中元素名）.count。功能：计算表单中某元素值的个数。20网页制作实例教程（第网页制作实例教程（第3版）版）11.4 ASP的内置对象的内置对象 例例11-7 用用Request对象的对象的form集合取得表单数据集合取得表单数据 form集合练习输入您的爱好：旅游 上网唱歌打球 p

16、4.asp21网页制作实例教程（第网页制作实例教程（第3版）版）11.4 ASP的内置对象的内置对象 例例11-7 用用Request对象的对象的form集合取得表单数据集合取得表单数据 取得表单数据您的爱好有种，它们是：q4.asp22网页制作实例教程（第网页制作实例教程（第3版）版）11.4.3 11.4.3 11.4.3 11.4.3 RequestRequestRequestRequest对象对象对象对象 11.4 ASP的内置对象的内置对象 2 2RequestRequest对象的对象的formform数组数组Request对象的form集合也可以作为数组看待，数组元素从1开始编号。

17、例例11-8 11-8 用用RequestRequest对象的对象的formform数组取得表单数据数组取得表单数据%dim a(3)定义数组aa(1)=您的姓名是：给数组a赋值a(2)=您是一位：a(3)=您的邮箱是：for i=1 to 3response.write(a(i)&request.form(i)&)使用form数组next%q5.asp23网页制作实例教程（第网页制作实例教程（第3版）版）11.4 ASP的内置对象的内置对象 例例11-7 用用Request对象的对象的form集合取得表单数据集合取得表单数据 form数组练习姓名:性别:帅哥 美女电子邮箱:p5.asp24网

18、页制作实例教程（第网页制作实例教程（第3版）版）11.4 ASP的内置对象的内置对象 例例11-7 用用Request对象的对象的form集合取得表单数据集合取得表单数据 25网页制作实例教程（第网页制作实例教程（第3版）版）11.4.4 11.4.4 11.4.4 11.4.4 ApplicationApplicationApplicationApplication对象对象对象对象 11.4 ASP的内置对象的内置对象 Application对象创建公共变量，存储共享信息，如：站点访问人数。1 1定义定义ApplicationApplication变量变量格式：Application(变量名

19、)=值功能：创建Application变量，存储应用程序的共享信息。2 2ApplicationApplication对象的集合对象的集合 Application对象有Contents集合，集合包含对象所有变量的值，可以用for each循环遍历所有元素。集合元素的个数用Contents.count计算。3 3访问访问ContentsContents集合中元素集合中元素格式1：Application.Contents(元素名)格式2：Application.Contents(索引号)格式3：Application(元素名)26网页制作实例教程（第网页制作实例教程（第3版）版）11.4 ASP的

20、内置对象的内置对象 例例11-9 Application11-9 Application变量练习变量练习Application变量练习27网页制作实例教程（第网页制作实例教程（第3版）版）11.4.5 11.4.5 11.4.5 11.4.5 SessionSessionSessionSession对象对象对象对象 11.4 ASP的内置对象的内置对象 Session对象用来创建私有变量，存储单个用户私有信息，如：个人密码。1 1定义定义SessionSession变量变量格式：Session(变量名)=值功能：创建Session变量，用来存储单个用户的私有信息。2 2SessionSessi

21、on对象的对象的ContentsContents集合集合Session对象的Contents集合包含所有Session变量，可以使用循环语句显示所有元素。集合元素个数由“Contents.count”给出。Application对象与Session对象的共同点是它们都存储在服务器端，都用来记录浏览器端特定信息。不同之处在于前者是多用户共享，后者是单用户私有。例如，当前有5个用户在线，他们共享同一个Application对象，他们各自拥有自己的Session对象。28网页制作实例教程（第网页制作实例教程（第3版）版）11.4 ASP的内置对象的内置对象 例例11-11 Session对象练习对象

22、练习session对象练习集合共有项29网页制作实例教程（第网页制作实例教程（第3版）版）11.4.6 11.4.6 11.4.6 11.4.6 ServerServerServerServer对象对象对象对象 11.4 ASP的内置对象的内置对象 Server对象提供对服务器的相关操作，Server对象有2个非常实用的方法，即CreateObject方法和MapPath方法。1 1ServerServer对象的对象的CreateObjectCreateObject方法方法Server对象用CreateObject方法创建服务器组件的实例，通过组件实例完成数据库连接和其他操作。格式：Set 实

23、例名称=Server.CreateObject(服务器组件名称)例如：set conn=createobject(adodb.connection)2 2ServerServer对象的对象的MapPathMapPath方法方法Server对象用MapPath方法获取当前文件在服务器上的绝对路径。格式：Server.MapPath(文件名称)例如：server.MapPath(lyb.mdb)30网页制作实例教程（第网页制作实例教程（第3版）版）11.5.1 11.5.1 11.5.1 11.5.1 ASPASPASPASP内置组件简介内置组件简介内置组件简介内置组件简介 11.5 用用ASP处

24、理数据库信息处理数据库信息 组件是能够完成某些具体任务的应用程序，以文件方式存储在服务器上，主要是包含可执行代码的动态链接库（.dll）或可执行文件（.exe）。通过调用组件完成ASP不容易完成的任务。ASP内置组件是ASP自带的组件，安装IIS后，系统将内置组件存储在服务器上，可以直接调用。内置组件在服务器端运行，不需要客户端的支持。组件由个或多个对象以及对象的方法和属性构成。使用组件首先要创建组件对象的实例，创建的实例具有原对象的一切属性、方法和功能。31网页制作实例教程（第网页制作实例教程（第3版）版）11.5.2 11.5.2 11.5.2 11.5.2 Database Access

25、Database AccessDatabase AccessDatabase Access组件组件组件组件 11.5 用用ASP处理数据库信息处理数据库信息 Database Access组件能够通过ADO(ActiveX Data Objects)访问服务器端的数据库或其他表格化数据结构中的信息。1 1ADOADO简介简介 ADO是一种功能强大的数据访问编程模式，ASP使用ADO的脚本可以访问各种数据库，包括SQL server、Access、Oracle等。ADO本身由7个对象组成，分别提供各种数据库操作行为。ADO命令语句比较简单，容易掌握，具有查询处理功能，访问速度快，内存需要较小。数

26、据库操作主要有连接数据库、修改数据和查询数据。32网页制作实例教程（第网页制作实例教程（第3版）版）11.5 用用ASP处理数据库信息处理数据库信息 2ADO对象的3个主体对象 ADO对象中有3个主体对象，能完成数据库的主要操作，使用对象之前要先用server对象的createobject方法建立实例。（1）用Connection对象建立与数据源的连接.（2）用Command对象给出对数据库操作的命令。（3）用Recordset 对结果集数据进行浏览、维护等操作。33网页制作实例教程（第网页制作实例教程（第3版）版）11.5.3 11.5.3 11.5.3 11.5.3 连接对象连接对象连接对

27、象连接对象Connection Connection Connection Connection 11.5 用用ASP处理数据库信息处理数据库信息 Connection对象主要负责ASP与服务器端数据库的连接。连接数据库有多种方法，最方便灵活的方法是用连接字串。比较常用的连接字串是OLEDB连接字串。1 1OLEDBOLEDB连接字串连接字串 OLEDB连接字串用指定数据源的方法书写，其中的数据库名可以用物理路径标识，也可以用server对象的mappath方法找出实际路径。（1）连接字串的格式set 实例名=server.createobject(adodb.connection)实例名.o

28、pen provider=microsoft.jet.oledb.4.0;data source=&server.mappath(数据库名)set conn=server.createobject(adodb.connection)set conn=server.createobject(adodb.connection)conn.open provider=microsoft.jet.oledb.4.0;data source=&conn.open provider=microsoft.jet.oledb.4.0;data source=&server.mappath(lyb.mdb)ser

29、ver.mappath(lyb.mdb)34网页制作实例教程（第网页制作实例教程（第3版）版）11.5 用用ASP处理数据库信息处理数据库信息 2 2关闭和释放连接关闭和释放连接关闭连接格式：实例名.close释放连接格式：set 实例名=nothing说明：关闭连接以后对象仍然占用内存，还可以用open方法打开。释放连接以后对象占用的资源才真正释放，若想再使用Connection对象，必须重新创建。3 3ConnectionConnection对象的对象的ExecuteExecute方法方法Connection对象用Execute方法执行针对数据库的SQL语句。set conn=create

30、object(adodb.connection)set conn=createobject(adodb.connection)aa=provider=microsoft.jet.oledb.4.0;data source=&aa=provider=microsoft.jet.oledb.4.0;data source=&server.mappath(lyb.mdb)server.mappath(lyb.mdb)conn.open aaconn.open aass=delete from ly where ss=delete from ly where 昵称昵称=小龙女小龙女 conn.Exec

31、ute(ss)conn.Execute(ss)执行Execute方法后，“ly”表中昵称为“小龙女”的记录被删除。35网页制作实例教程（第网页制作实例教程（第3版）版）11.5.4 11.5.4 11.5.4 11.5.4 命令对象命令对象命令对象命令对象Command Command Command Command 11.5 用用ASP处理数据库信息处理数据库信息 Command对象主要用来传递指定的SQL命令，它的作用类似一个查询，查询数据库并返回记录集，也可以对数据库的结构进行操作。1建立Command对象（1）用Connection对象创建Command对象 先建立connection

32、对象，再建立command对象，然后通过command对象的activeconnection属性使它们相连。set conn=server.createobject(adodb.connection)set conn=server.createobject(adodb.connection)conn.open provider=microsoft.jet.oledb.4.0;data source=&conn.open provider=microsoft.jet.oledb.4.0;data source=&server.mappath(lyb.mdb)server.mappath(lyb.

33、mdb)set cmd=server.createobject(mand)set cmd=server.createobject(mand)cmd.activeconnection=conncmd.activeconnection=conn36网页制作实例教程（第网页制作实例教程（第3版）版）11.5 用用ASP处理数据库信息处理数据库信息（2）直接建立command对象 如果把command对象的activeconnection属性设置为连接字串，ADO自动创建一个隐含的connection对象，就可以省去建立connection对象的步骤。格式：set cmd=server.createo

34、bject(mand)cmd.activeconnection=数据库的连接字串set cmd=server.createobject(mand)set cmd=server.createobject(mand)aa=provider=microsoft.jet.oledb.4.0;data source=&aa=provider=microsoft.jet.oledb.4.0;data source=&server.mappath(lyb.mdb)server.mappath(lyb.mdb)cmd.activeconnection=aacmd.activeconnection=aa 11.

35、5.4 11.5.4 11.5.4 11.5.4 命令对象命令对象命令对象命令对象Command Command Command Command 37网页制作实例教程（第网页制作实例教程（第3版）版）11.5 用用ASP处理数据库信息处理数据库信息 例例11-12 11-12 用用commandcommand对象显示记录对象显示记录 有Access数据库“lyb.mdb”，库中有“ly”表，表中有2条记录。显示结果显示结果代码见 p9.asp38网页制作实例教程（第网页制作实例教程（第3版）版）11.5 用用ASP处理数据库信息处理数据库信息 Recordset对象是一个二维表形式的记录集合，

36、记录来自基本表，或者是一条SQL命令的结果。用Recordset对象可以对记录内容进行所有操作。Recordset对象创建的记录集合用虚拟表格方式提供给ASP程序处理，每一行代表一条记录，每一列代表一个字段。11.5.5 11.5.5 11.5.5 11.5.5 记录集对象记录集对象记录集对象记录集对象recordset recordset recordset recordset 1 1创建创建RecordsetRecordset对象对象方法1，先建立Connection对象，在Connection对象上创建Recordset对象。set rs=server.createobject(adod

37、b.recordset)set rs=server.createobject(adodb.recordset)sql=select*from ly sql=select*from ly rs.open sql,conn rs.open sql,conn 39网页制作实例教程（第网页制作实例教程（第3版）版）11.5 用用ASP处理数据库信息处理数据库信息 11.5.5 11.5.5 11.5.5 11.5.5 记录集对象记录集对象记录集对象记录集对象recordset recordset recordset recordset 1 1创建创建RecordsetRecordset对象对象方法2，

38、用Recordset对象的activeconnection属性建立Recordset对象。aa=Provider=Microsoft.Jet.OLEDB.4.0;Data Source=&server.MapPath(lyb.mdb)set rs.activeconnection=aa方法3，用Connection对象的Execute方法建立Recordset对象。sql=select*from ly set rs=conn.execute(sql)40网页制作实例教程（第网页制作实例教程（第3版）版）11.5 用用ASP处理数据库信息处理数据库信息 例例11-13 用用Recordset对象

39、的方法查看记录对象的方法查看记录代码见 p10.asp41网页制作实例教程（第网页制作实例教程（第3版）版）11.5 用用ASP处理数据库信息处理数据库信息 例例11-14 用用Recordset对象的方法添加记录对象的方法添加记录代码见 p11.asp42网页制作实例教程（第网页制作实例教程（第3版）版）11.5 用用ASP处理数据库信息处理数据库信息 例例11-15 用用Recordset对象的方法修改和删除记录对象的方法修改和删除记录代码见 p12.asp43网页制作实例教程（第网页制作实例教程（第3版）版）11.5 用用ASP处理数据库信息处理数据库信息 例例11-16 将表单提交的数

40、据添加到数据库将表单提交的数据添加到数据库代码见 p13.asp44网页制作实例教程（第网页制作实例教程（第3版）版）11.6 上机实验上机实验-制作留言簿制作留言簿 ,2，建立表单，建立表单1，建立，建立Access数据库数据库“lyb.mdb”，在，在“lyb.mdb”中建立中建立“ly”表表。45网页制作实例教程（第网页制作实例教程（第3版）版）11.6 上机实验上机实验-制作留言簿制作留言簿 2，建立表单1，建立Access数据库“lyb.mdb”，在“lyb.mdb”中建立“ly”表。46网页制作实例教程（第网页制作实例教程（第3版）版）11.6 上机实验上机实验-制作留言簿制作留言

41、簿 3，转到“代码”视图在与之间输入表单验证函数的代码。function check()if form1.b1.value=then msgbox 请输入昵称！window.event.returnvalue=false exit function end If if form1.b2.value=then msgbox 请输入留言！window.event.returnvalue=false exit function end Ifend function47网页制作实例教程（第网页制作实例教程（第3版）版）11.6 上机实验上机实验-制作留言簿制作留言簿 4，改写表单的标记 5，新建“tijiao.asp”输入代码保存文件。该网页负责将表单信息存入数据库，单击“提交”按钮转到网页“tijiao.asp”保存表单信息，网页显示文字“提交成功”，单击链接文字“返回”回到主页。48网页制作实例教程（第网页制作实例教程（第3版）版）11.6 上机实验上机实验-制作留言簿制作留言簿 6，新建“xianshi.asp”输入代码保存文件。该网页负责显示“ly”表全部记录。49网页制作实例教程（第网页制作实例教程（第3版）版）50