Web开发的基本技术.ppt

1,第四章 Web开发的基本技术,主要内容： WWW（World Wide Web） HTML Frontpage 交互网页的制作 ASP（动态服务主页） Web数据库 ASP的安装,2,1 WWW（World Wide Web）,本节内容： 1.1 Internet服务 1.2 Internet提供的服务 1.3 www服务 1.4 网页和超文本,3,1.1 Internet服务,Internet地址 Internet地址唯一地确定Internet上每台计算机与每个用户的位置。 Internet地址有两种表示形式 IP地址 像电话有电话号码那样，接入Internet的计算机也有一个由授权机构分配的号码，即IP地址。 IP地址分前后两部分，前面部分叫网络号，后面叫主机号。 12,4,1.1 Internet服务,Internet地址 域名 由于IP地址的数字地址很难记忆，通常使用一个文字IP地址来表示，把它叫做域名。 例如：, 其中：cn代表中国，edu 表示教育机构，hit指哈尔滨工业大学。,5,1.2 Internet提供的服务,电子邮件 即E-maill服务。 文件传输服务 即FTP服务：file transfer protocol FTP服务执行TCP/IP中的FTP传输协议，允许在计算机之间传送文件。 ； FTP服务器；是提供FTP服务的计算机。 上传：从客户将文件传到FTP服务器的过程。 下载：从FTP服务器将文件传到客户机的过程。,6,1.2 Internet提供的服务,万维网服务（World Wide Web服务，简称www 服务） 将在下一节详细介绍 新闻公告类服务 提供针对某问题展开讨论的服务，如BBS（电子公告牌）、网络新闻组等。USENET是规模最大的网络新闻组，它拥有数以千计的讨论组，在网上讨论各种专题。,7,1.3 www服务（万维网服务）,万维网上不仅可以看到文字、图片,而且可听到声音、看到动画。 www服务是通过客户机上的Web浏览器和Web站点上的Web服务器之间的通信来实现的。 信息以网页的形式存放在Web服务器上，用户在客户机上通过Web浏览器（是一个软件）向Web服务器发出请求，Web服务器按此请求将需要的页面发送给用户。 这些页面实际上都是一个个文件。用户直接看到的是文本信息本身，在浏览文本信息的同时，随时可以选中其中的“热字”。热字往往是与上下文关联的单词，通过选择热字就可以链接到另外一个地址并看到其他文本的信息。,8,1.3 www服务,9,1.4 网页和超文本,网页（Web page） 网页是我们在网上用浏览器（如Internet Explorer，简称IE）看到的那些页面。在www系统中，信息是按超文本方式组织的。 页面实际上都是一个个文件 。 由若干互连的文本块组成的文本就是超文本（Hyper Text）。 超文本方式是实现www的关键技术。,10,1.4 网页和超文本,网页（Web page） 这些页面实际上都是一个个文件。如果用鼠标点击页面（文本）上的热字（高亮度或带下划线的条目），就可以链接并打开另一个你希望看到的页面。这种由若干互连的文本块组成的文本就是超文本（Hyper Text）。 页面上看到的信息单元可以是一屏文字，也可能是一个窗口，或者是一个图象。我们把每个信息单元称作一个节点（node）。节点又有文字节点、图形节点、按钮节点之分。按钮节点用于执行一个过程，这些节点之间都是用链来连接的。,11,1.4 网页和超文本,HTML文件 （Hyper Text Markup Language） 是用超文本标语言（HTML，Hyper Text Markup Language）写的，它存放在WEB服务器上 。 http协议（Hyper Text Transfer Protocol） 即超文本传输协议，www服务是执行http协议进行传输的。 /index.html 其中：http:是协议类型，这里是检索文挡的超文本传输协议，是服务器的主机域名，/的后面是路径或文件名。hit是哈工大的代号。 我们把/index.html称为是哈工大的www服务器的URL（统一资源定位器，其英文形式是Uniform Resource Locators ）。,12,1.4 网页和超文本,www浏览器 通过它可以去找到并浏览Internet上各种WWW服务器上的主页。 常用的浏览器软件有 Internet Explorer和Netscape 公司Navigator等 搜索引擎 搜索引擎是Internet上的一种www服务器，它能在Internet中主动搜索其他www服务器中的信息并对其索引，将索引内容存储在大型数据库中。 使用搜索引擎时，用户输入关键字后，搜索引擎能返回包含该关键字信息的URL，并提供通向该站点的链接，使用户获得所需要的信息。,13,2 HTML,主要内容： 2.1 用HTML做简单的网页 2.2 HTML文档的一般结构 2.3 常用的HTML标记元素 2.4 在网页中插入图片 2.5 用HTML定义表格,14,2.1 用HTML做简单的网页,超文本文件是由超文本标记语言写成。 其文件的格式采用ASCII格式。 ASCII格式的文件本身其实是一种没格式的文件。 为了在浏览时能看到带有格式的文件，办法是把文档中各种不同的内容用不同的标记元素对其属性做上标记。 所以，超文本是由标记和文本内容两者组成的。例如为了显示“网络营销”四个大字，可按以下写出：,15,2.1 用HTML做简单的网页,这里：和是一对标记元素，用来改变字体大小。 SIZE 和 FACE 是标记元素的属性，又称参数。 SIZE说明字的大小，从1到7，数愈大，字愈大； FACE说明字体。 如果把这一句写到 记事本上做成 .txt文件，再将其后缀.txt改成 .HTML, 就做成了一个HTML超文本文件。鼠标双击此文件，就能在屏幕上显示出 “网络营销”四个大字。,16,2.1 用HTML做简单的网页,超文本文件ASCII格式 双标记方式（用一对标记来标记 ）,单标记方式（用一个标记来表示 ） ,17,2.2 HTML文档的一般结构, 网上手机市场 你想要买手机吗? 你可以访问 手机 网站了解有关信息。 ,18,2.3 常用的HTML标记元素,19,2.3 常用的HTML标记元素,20,2.3 常用的HTML标记元素,21,2.3 常用的HTML标记元素,22,2.4 在网页中插入图片,如果想在方才显示的屏幕上增加一个名为gxkj.gif的图形，只要在上述HTML文档中增加： IMG SRC= “gxkj.gif” width “20” height “15” ,23,2.5 用HTML定义表格,浏览器上显示的表格,表格名称,24,2.5 用HTML定义表格,系统的特征： 可以显示上页图中所示表格的HTML文本： 表格名称 第一标题列第二标题列第三标题列 ,25,3 FrontPage,使用微软公司的FrontPage WEB编程工具可以做到在几乎不需要编写HTML代码的情况下，完成网页的制作，同时自动地生成HTML文件。,26,3 FrontPage,用FrontPage制作页面,主页面,网上手机商场 产品价格表见 正按八折销售,欢迎选购,动态字幕后,27,3 FrontPage,用FrontPage制作页面,被连接的页面,产品价格表,28,3 FrontPage,用FrontPage制作页面,29,4 交互网页的制作,本节内容： 4.1 交互性标记元素 4.2 FORM标记元素,30,4.1 交互性标记元素,人机对话的表单接口界面,为了在浏览器上看到这个表单界面，就需要使用FORM 标记元素。FORM 可译作“表单”。,31,4.2 FORM标记元素,32,4.2 FORM标记元素,当表单提交后，在Web服务器端被处理后将此页面返回给用户。 应当指出，HTML的交互性标记元素FORM和INPUT仅仅提供了一个接口界面, 要全部实现交互功能，仅靠HTML是不够的。还必须有ASP环境来进行处理(将在下面讲述)。,33,5 ASP（动态服务主页）,本节内容： 5.1 什么是ASP？ 5.2 ASP的工作原理 5.3 ASP脚本编程,34,5.1 什么是ASP？,ASP （Active Server Pages）是微软公司为它的WEB服务器（互联网信息服务器，简称IIS）开发的一个组件（软件）。它是一种实现动态网页开发技术的服务器端的开发环境。 以前面讲的为例: 提交后的表单在Web服务器端被处理后页面被返回给用户的过程必须由ASP环境来进行处理。,35,5.1 什么是ASP？,通过ASP，我们能够将HTML页面、脚本命令、ASP内置对象和Active X组件结合起来，建立动态、交互而又高效的Web应用程序。 ASP可利用ADO（Active Data Object）方便地访问数据库。,36,5.2 ASP的工作原理,ASP文件可以由以下几个部分组成： 文本 HTML标记 ASP脚本命令等。 其中ASP脚本命令可以包含： ASP对象 ActiveX组件 任何脚本语言（如VB脚本所言、JAVA脚本语言等）。 ASP脚本命令写在“%”和“%”两个符号之间。,37,5.2 ASP的工作原理,ASP文件实例：VB-SCR-EXM.ASP （在 两者之间是脚本文件） html head title手机市场标题/title /head body % for i=3 to 7% Font size =%=i% 这里是手机市场！BR % next % /body /html,38,5.2 ASP的工作原理,运行结果,这里是手机市场！ 这里是手机市场！ 这里是手机市场！ 这里是手机市场！ 这里是手机市场！,浏览屏幕,39,5.2 ASP的工作原理,ASP文件的运行过程,40,5.2 ASP的工作原理,怎样做ASP文件？ ASP文件的后缀名为ASP，它以文件的形式存放在WEB服务器上。 ASP实际是一个纯文本文件，只是它的扩展名固定为.ASP。 ASP文件可以使用文本编辑器（如记事本）进行编辑。即将 .TXT 改为 .ASP。 ASP文件也可以用WEB编程工具FrontPage来做。,41,5.3 ASP脚本编程, ASP脚本命令的内容包括： 1. 脚本语言可用VBScript写，也可用 JAVAScript作为脚本语言。 2.ASP内置对象如Request.。 3. Active X组件ASP支持的Active X组件 包括 ASP服务器本身附带的内置组 件和用户自己创建的ASP组件。 用户与WEB服务器之间的信息交互通过 HTML中的FORM（表单）来实现。,42,5.3 ASP脚本编程,ASP环境下处理数据实例(提交) Tijiao.htm 请提供以下信息，然后单击提交。 姓名： 密码： ,43,5.3 ASP脚本编程,ASP环境下处理数据实例(返回) Fanhui.asp 对不起！您的密码不对。 ,44,6 Web数据库,本节内容： 6.1 数据库管理信息系统 6.2 Web数据库,45,6.1 数据库管理信息系统,数据库管理系统的功能: 建立数据库 管理数据库 实现数据的传送等,46,6.2 Web数据库,ASP可利用ADO（Active Data Object）方便地访问数据库。 Web数据库系统是指以HTML为代表的Web页面（即网页）与位于底层的数据库的集成。 数据库管理系统解决Web页面和数据库之间的通信问题 开放式数据库连接器ODBC ODBC是一种编程接口，它能使应用程序访问支持SQL查询语言的数据库管理系统，实现与各种数据库的通信。 SQL查询语言 本书第三章已有介绍,47,6.2 Web数据库,Web数据库的应用 现在有一客户在已知新书代码后希望知道该书的单价和是否有书。 客户向WEB服务器发出HTTP请求 首先是客户向WEB服务器发出http请求，CX-SEND.ASP程序产生页面 用户在屏幕上看到的如图所示,查询输入屏幕,48,6.2 Web数据库,从浏览器上调用下列CX-SEND.ASP程序产生的页面，并输入新书代码后提交。 欢迎查看新书价格和库存量 欢迎查看新书价格和库存量 请输入新书代码 ,49,6.2 Web数据库,Web服务器上的ASP软件对此程序进行解释并执行另外一个名为cx-back.asp的程序。 欢迎查看新书价格和库存量 % Set conn = Server.CreateObject(“ADODB.Connection“) DBPath = Server.MapPath(“tsxt.mdb“),50,6.2 Web数据库,conn.Open “driver=Microsoft Access Driver (*.mdb);dbq=“ & DBPath Set rs = Server.CreateObject(“ADODB.Recordset“) sql=“select * from tsxt“ sql=sql & “ where id like %“ & id & “%“ conn.execute sql rs.open sql,conn,1,3 % 您查询的新书详单 新书代码 新书名称,51,6.2 Web数据库,单价（元） 库存量 对不起，没有您要查找的书籍数据！,52,6.2 Web数据库,53,6.2 Web数据库,查询结果输出屏幕,您查询的新书单价和库存量,54,6.2 Web数据库,Web服务器上的ASP软件对程序的解释和执行过程取得用户传来的新书代码（见程序第6行） Web页面与数据库Text.mdb相边接（见程序8-11行） 第89行，创建一个Connection对象 第10行，是打开连接。 第11行，是创建一个记录集对象。 用SQL查询数据库（见第1215行） 在浏览