第四章 web开发的基本技术.ppt

1、1,第四章Web开发的基本技术,背景以电子商务应用为例,2,第一节WWW（WorldWideWeb）第二节HTML第三节Frontpage第四节交互网页的制作第五节ASP（动态服务主页）(简介)第六节Web数据库(简介),3,本节内容一、Internet地址二、Internet提供的服务三、www服务四、网页和超文本,第一节WWW（WorldWideWeb）,4,一、Internet地址,Internet地址唯一地确定Internet上每台计算机与每个用户的位置。对用户来说，Internet地址有两种表示形式：1.IP地址计算机接入Internet后，会获得一个IP地址.分前后二部分，前面部分

2、叫网络号，后面部分叫主机号。如:12.域名用一个文字来表示IP地址。如:,5,二、Internet提供的服务,1.电子邮件即E-maill服务。2.文件传输服务即FTP服务：filetransferprotocol3.www服务（WorldWideWeb）4.新闻公告类服务提供针对某问题展开讨论的服务，如BBS（电子公告牌）、网络新闻组等。,6,三、www服务-1,万维网上不仅可以看到文字、图片，而且可以带声音、带动画。www服务是通过客户机上的Web浏览器和Web站点上的Web服务器之间的通信来实现的。,7,三、www服务-2,8,1.超文本在www系统中，信息是按超

3、文本方式组织的。超文本方式是实现www的关键技术。2.HTML语言（HyrerTextMarkupLanguage）超文本标记语言，存放在WEB服务器上。3.http协议（HyperTextTransferProtocol）超文本传输协议，www服务是通过执行http协议进行传输的。4.www浏览器通过它可以去找到并浏览Internet上各种WWW服务器上的主页。5.搜索引擎搜索引擎是Internet上的一种www服务器，它能在Internet中主动搜索其他www服务器中的信息并对其索引，将索引内容存储在大型数据库中，供用户查询。,四、网页和超文本,9,第二节HTML,本节内容一、用HTML做

4、简单的网页二、HTML文档的一般结构三、常用的HTML标记元素四、在网页中插入图片五、用HTML定义表格,10,HTML：用来创建超文本文档的简单标记语言，这些文档可以从一个操作平台移动到另一个操作平台。HTML文件是简单的ASCII文本文件，其中嵌入的代码（由标记表示）表示格式和超文本链接。,11,超文本文件ASCII格式双标记方式（用和一对标记元素来标记的方式）,一、用HTML做简单的网页,例：网络营销标记名标记元素的属性要显示的文本内容标记元素开始标记元素的属性标记元素结束,单标记方式（只单独用一个标记来标记的方式）例：,12,例1.网上手机市场你想要买手机吗?你可以访问手机网站了解有关

5、信息。,二、HTML文档的一般结构,13,三、常用的HTML标记元素-1,14,三、常用的HTML标记元素-2,15,三、常用的HTML标记元素-3,16,三、常用的HTML标记元素-4,17,例2：登鹳雀楼登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。,18,例3列表这是一个有序列表：国际互联网提供的服务有：WWW服务文件传输服务电子邮件服务远程登录服务其它服务,19,例4.如果想在方才显示的屏幕上增加一个名为gxkj.gif的图形，只要在上述HTML文档中增加：IMGSRC=“gxkj.gif”width=“20”height=“15”,四、在网页中插入图片,20,五、用HTML

6、定义表格-1,浏览器上显示的表格,表格名称,例5.在网页中显示如下图所示表格：,21,五、用HTML定义表格-2,表格名称第一标题列第二标题列第三标题列,22,第三节FrontPage,使用微软公司的FrontPageWEB编程工具可以做到在几乎不需要编写HTML代码的情况下，完成网页的制作，同时自动地生成HTML文件。本节内容：用FrontPage制作页面,23,-主页面,用FrontPage制作页面-1,网上手机商场产品价格表见正按八折销售,欢迎选购,动态字幕,图片,24,-被连接的页面,用FrontPage制作页面-2,产品价格表,25,用FrontPage制作页面-3,用FrontPa

7、ge作上述网页的步骤：,26,第四节交互网页的制作,仅有静态的网页是不够的。我们需要通过网页实现网上注册（客户在网页上写入自己的姓名和密码）、网上交谈、网上查询（客户在网页上输入自己要买的产品名，网站返回该产品名的性能、价格等）。本节内容：一、交互性标记元素二、FORM标记元素,27,一、交互性标记元素,-人机对话的表单接口界面,28,二、FORM标记元素-1,例6、用FORM标记元素在HTML页面上实现“提交”（一部分功能）的HTML文档请提供以下信息,然后单击提交。姓名：密码：,29,二、FORM标记元素-2,FORM语句段的结构,30,例7、从浏览器上调用下列CX-SEND.ASP程序产

8、生的页面，并输入新书代码后提交。欢迎查看新书价格和库存量欢迎查看新书价格和库存量请输入新书代码,31,后两节内容因为涉及到服务器端的一些组件（例如IIS）等，故只作简介。,32,第五节ASP（动态服务主页）（简介）,用HTML写的文本是静态的。你可以看到页面上的内容，但不能在屏幕上输入并传送数据到Web服务器，更无法进行完整的人机对话。当涉及到页面与数据库的连接问题和从站点返回一个页面给客户的问题时，仅依靠HTML文本是做不到的。ASP就是为了解决动态交互的问题和与数据库连接的问题而设计的。本节内容：一、什么是ASP？二、ASP的工作原理三、ASP脚本编程,33,一、什么是ASP？,ASP（A

9、ctiveServerPages）是微软公司为它的WEB服务器（互联网信息服务器，简称IIS）开发的一个组件（软件）。它是一种实现动态网页开发技术的服务器端的开发环境。通过ASP，我们能够将HTML页面、脚本命令、ASP内置对象和ActiveX组件结合起来，建立动态、交互而又高效的Web应用程序。ASP可利用ADO（ActiveDataObject）方便地访问数据库。,34,二、ASP的工作原理-1,ASP文件可以包含以下的几个部分：1.文本2.HTML标记3.ASP脚本命令等ASP脚本命令可以包含ASP对象，ActiveX组件和任何脚本语言（如VB脚本语言、JAVA脚本语言等）。ASP脚本命

10、令写在“%”和“%”两个符号之间。ASP文件可以使用文本编辑器（如记事本）进行编辑，也可以用WEB编程工具FrontPage来做。,35,二、ASP的工作原理-2,ASP文件实例：VB-SCR-EXM.ASPhtmlheadtitle手机市场标题/title/headbody%fori=3to7%Fontsize=%=i%这里是手机市场！BR%next%/body/html,36,二、ASP的工作原理-4,浏览结果,这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！,浏览屏幕,37,二、ASP的工作原理-5,-ASP文件的运行过程,ASP的工作过程,38,三、AS

11、P脚本编程-1,-ASP脚本命令包含内容脚本语言可用VBScript写ASP内置对象Request就是一个内置对象ActiveX组件ASP支持的ActiveX组件包括ASP服务器本身附带的内置组件和用户自己（第三方）创建的ASP组件。,39,三、ASP脚本编程-2,-用户与WEB服务器之间的信息交互使用HTML中的FORM（表单）ASP文件中可使用VBScript作为脚本语言，也可用JAVAScript作为脚本语言。,40,三、ASP脚本编程-3,ASP环境下处理数据实例（即前面的例5）Tijiao3.htm请提供以下信息，然后单击提交。姓名：密码：,41,三、ASP脚本编程-4,ASP环境下

12、处理数据实例Fanhui3.asp对不起！您的密码不对。,42,第六节Web数据库（简介）,网站运用了数据库技术，就可以实现网页更新的自动化，即只要将数据库中的内容更新了，网页上的内容也就自动更新了。Web数据库系统是指以HTML为代表的Web页面（即网页）与位于底层的数据库的集成。Internet用户可以通过Web页面来访问数据库中的数据。目前常用的关系型数据库管理系统都能为Web提供数据库支持，关键问题是要解决Web页面和数据库之间的通信问题。开放式数据库连接器ODBCODBC是一种编程接口，它能使应用程序访问支持SQL查询语言的数据库管理系统，实现与各种数据库的通信。SQL查询语言,43

13、,Web数据库应用实例,有一客户在已知新书代码后希望知道该书的单价和是否有书。应用Web数据库解决这一问题的过程如下：客户向WEB服务器发出HTTP请求（程序如前面的例7所示）用户在屏幕上看到的如图所示,查询输入屏幕,44,Web服务器在读到该ASP文件后就调用ASP软件，解释并执行命令。由于该程序中有action=cx-back.asp，就表示接着要执行另外一个名为cx-back.asp的程序（程序见P90-91）。Web服务器上的ASP软件对此程序进行解释并执行，程序cx-back.asp包括：-取得用户传来的新书代码-Web页面与新书数据库相连接-用SQL查询数据库-在浏览器上显示查询结果。,45,第四章Web开发的基本技术小结,WWW,HTMLFrontpage,Web开发的基本技术,通过客户机上的Web浏览器和Web站点上的Web服务器之间的通