四章Web开发的基本技术.ppt

《四章Web开发的基本技术.ppt》由会员分享，可在线阅读，更多相关《四章Web开发的基本技术.ppt（58页珍藏版）》请在三一文库上搜索。

1、第四章第四章 WebWeb开发的基本技术开发的基本技术 主要内容： WWW（World Wide Web） HTML Frontpage 交互网页的制作 ASP（动态服务主页） Web数据库 ASP的安装 1 1 WWW（World Wide Web） 本节内容： 1.1 Internet服务 1.2 Internet提供的服务 1.3 www服务 1.4 网页和超文本 2 1.1 Internet服务 Internet地址 Internet地址唯一地确定Internet上每台计算机 与每个用户的位置。 Internet地址有两种表示形式 IP地址 n像电话有电话号码那样，接入Internet

2、的计算机也 有一个由授权机构分配的号码，即IP地址。 nIP地址分前后两部分，前面部分叫网络号，后面 叫主机号。 184.117.143.112 3 1.1 Internet服务 Internet地址 域名 n由于IP地址的数字地址很难记忆，通常使 用一个文字IP地址来表示，把它叫做域名 。 n例如：, 其中：cn代表中 国，edu 表示教育机构，hit指哈尔滨工业 大学。 4 1.2 Internet提供的服务 电子邮件 即E-maill服务。 文件传输服务 即FTP服务：file transfer protocol FTP服务执行TCP/IP中的FTP传输协议，允 许在计算机之间传送文件。

3、 ； FTP服务器；是提供FTP服务的计算机。 上传：从客户将文件传到FTP服务器的过程 。 下载：从FTP服务器将文件传到客户机的过 程。 5 1.2 Internet提供的服务 万维网服务（World Wide Web服务，简称 www 服务） 将在下一节详细介绍 新闻公告类服务 提供针对某问题展开讨论的服务，如BBS（电 子公告牌）、网络新闻组等。USENET是规模最 大的网络新闻组，它拥有数以千计的讨论组，在 网上讨论各种专题。 6 1.3 www服务（万维网服务） 万维网上不仅可以看到文字、图片,而且可听到声音、 看到动画。 www服务是通过客户机上的Web浏览器和Web站点上 的W

4、eb服务器之间的通信来实现的。 信息以网页的形式存放在Web服务器上，用户在客户 机上通过Web浏览器（是一个软件）向Web服务器发 出请求，Web服务器按此请求将需要的页面发送给用 户。 这些页面实际上都是一个个文件。用户直接看到的是 文本信息本身，在浏览文本信息的同时，随时可以选 中其中的“热字”。热字往往是与上下文关联的单词， 通过选择热字就可以链接到另外一个地址并看到其他 文本的信息。 7 1.3 www服务 HTML文件 Web浏览器（软件）客户机 Internet上的Web服务器Internet上的Web服务器 访问链接 的信息 链接 http协议 用户 Web服务器的工作原理 8

5、 1.4 网页和超文本 网页（Web page） 网页是我们在网上用浏览器（如Internet Explorer，简称IE）看到的那些页面。在 www系统中，信息是按超文本方式组织的。 页面实际上都是一个个文件 。 由若干互连的文本块组成的文本就是超文本 （Hyper Text）。 超文本方式是实现www的关键技术。 9 1.4 网页和超文本 网页（Web page） 这些页面实际上都是一个个文件。如果用鼠标点击页 面（文本）上的热字（高亮度或带下划线的条目）， 就可以链接并打开另一个你希望看到的页面。这种由 若干互连的文本块组成的文本就是超文本（Hyper Text）。 页面上看到的信息单元

6、可以是一屏文字，也可能是一 个窗口，或者是一个图象。我们把每个信息单元称作 一个节点（node）。节点又有文字节点、图形节点 、按钮节点之分。按钮节点用于执行一个过程，这些 节点之间都是用链来连接的。 10 1.4 网页和超文本 HTML文件 （Hyper Text Markup Language） 是用超文本标语言（HTML，Hyper Text Markup Language）写的，它存放在WEB服务 器上 。 http协议（Hyper Text Transfer Protocol） 即超文本传输协议，www服务是执行http协议进行传 输的。 nhttp:/ 其中：http:是协议类型，

7、这里是检索文挡的超文本传输 协议，是服务器的主机域名，/的后面是路径或文 件名。hit是哈工大的代号。 我们把http:/ www服务器的URL（统一资源定位器，其英文形式是 Uniform Resource Locators ）。 11 1.4 网页和超文本 www浏览器 通过它可以去找到并浏览Internet上各种WWW服务器 上的主页。 常用的浏览器软件有 Internet Explorer和Netscape 公司Navigator等 搜索引擎 搜索引擎是Internet上的一种www服务器，它能在 Internet中主动搜索其他www服务器中的信息并对其 索引，将索引内容存储在大型数据

8、库中。 使用搜索引擎时，用户输入关键字后，搜索引擎能返 回包含该关键字信息的URL，并提供通向该站点的链 接，使用户获得所需要的信息。 12 2 HTML 主要内容： 2.1 用HTML做简单的网页 2.2 HTML文档的一般结构 2.3 常用的HTML标记元素 2.4 在网页中插入图片 2.5 用HTML定义表格 13 2.1 用HTML做简单的网页 超文本文件是由超文本标记语言写成。 其文件的格式采用ASCII格式 。 ASCII格式的文件本身其实是一种 没格式的文件。 为了在浏览时能看到带有格式的文 件，办法是把文档中各种不同的内容用 不同的标记元素对其属性做上标记。 所以，超文本是由标

9、记和文本内容 两者组成的。例如为了显示“网络营销” 四个大字，可按以下写出： 14 2.1 用HTML做简单的网页 这里：和是一对标记元素，用来改变字体大小 。 SIZE 和 FACE 是标记元素的属性，又称参数。 SIZE说明字的大小，从1到7，数愈大，字愈大； FACE说明字体。 如果把这一句写到 记事本上做成 .txt文件，再将其后缀.txt改成 .HTML, 就做成了一个HTML超文本文件。鼠标双击此文件，就能在屏幕上 显示出 “网络营销”四个大字。 15 2.1 用HTML做简单的网页 超文本文件ASCII格式 n双标记方式（用一对标记来标记 ） 网络营销 标记元素开始 标记元素的属

10、性 标记元素结束 标记名 标记元素的属性 要显示的文本内容 n单标记方式（用一个标记来表示 ） 16 2.2 HTML文档的一般结构 网上手机市场 你想要买手机吗? 你可以访问 手机 网站了解有关信息。 17 2.3 常用的HTML标记元素 标记标记 元素开始标记标记 元素结结束标记标记 元素的功能 注释标记释标记 锚锚元素，定义义超文本链链接点 地址信息起止 字体颜颜色加深 基锚锚，说说明链链接的基地址 字体闪烁闪烁 块块引用 超文本正文主体的起止 回车换车换 行 标题标题 ，多用于表格 元素间间的内容居中 表明其间间的内容是引文或例证证 代码码 18 2.3 常用的HTML标记元素 标记

11、元素开始标记 元素结束标记 元素的功能 文字缩缩格 线缩线缩 格或不显显示的标题标题 符 号 回车换车换 行，但不缩缩格 强调调，斜体且颜颜色加重 变变化字体大小和颜颜色 交互项项元素的起止 展示页页的版面分割 超文本文件头头的起止 与和等价 画水平间间隔线线 定义标题义标题 字体大小，n值为值为 1-6 超文本文的开始和结结束 字体为为斜体19 2.3 常用的HTML标记元素 标记标记 元素开始标记标记 元素结结束标记标记 元素的功能 插入图图形图图像文件 输输入信息元素 清单单条目，多用于目录录列表 显显示文本内容，但不执执行标记标记 命令 字符移动动方式控制 资资料说说明 下一个标识标识

12、 用序号显显示一级标题级标题 段落的起止，也可以加空行 按原文格式 中划线线 用小号字表示 字体颜颜色加重 20 2.3 常用的HTML标记元素 标记标记 元素开始标记标记 元素结结束标记标记 元素的功能 下角标标 上角标标 表格的起止，图图文混排时时也使用 表格中一栏栏内容的起止 用文本区输输入信息 表头头的起止 超文本标题标题 的起止 表中一行的起止 固定宽宽度 下划线线 同一级标题级标题 的限定，无序号 变变量 功能同，仅仅字体略小 21 2.4 在网页中插入图片 如果想在方才显示的屏幕上增加一个名为gxkj.gif 的图形，只要在上述HTML文档中增加： IMG SRC= “gxkj.

13、gif” width “20” height “15” 你想买手机吗？ 你可以访问手机网站了解有关信息 图片 插入图片 22 2.5 用HTML定义表格 第一标题标题 列第二标题标题 列第三标题标题 列 浏览器上显示的表格 表格名称 23 2.5 用HTML定义表格 系统的特征： 可以显示上页图中所示表格的HTML文本： 表格名称 第一标题列第二标题列 第三标题列 24 3 FrontPage 使用微软公司的FrontPage WEB编 程工具可以做到在几乎不需要编写HTML 代码的情况下，完成网页的制作，同时自 动地生成HTML文件。 25 3 FrontPage 用FrontPage制作页

14、面 主页面 网上手机商场 产品价格表见 http:/ 正按八折销售,欢迎选购 动态字幕后 26 3 FrontPage 用FrontPage制作页面 被连接的页面 产品价格表产产品号产产品型号生产产厂 家 价格 27 3 FrontPage 用FrontPage制作页面 操作目的操作步骤骤 定义义主网页页 新建网页页普通网页页确定网页页名字并存储储 网页页分区 点击击“插入表格”按钮钮，做出22表格，并把表格实线变为实线变为 虚 线线（办办法 是在表格上点击击右键选键选 属性后，将各数均改为为0）。 输输入网页标题页标题 文 字 方法类类同用WORD写字，在左上格写上“网上手机商场场”几个字

15、。 插入照片 点击选图击选图 片钮钮用右键键点图图片点击图击图 片属性外观观尺 寸（修改其大小）。 做动态动态 字幕 在右下格写“正按八折销销售,欢欢迎选购选购 ”字样样，选选中后插 入组组件字幕字幕属性样样式格式字体 。 点击预览击预览 ，即可看到动态动态 字幕。 做被连连接的网页页 另外做一个被连连接的网页页（手机价格表）。 建立超超接，填 URL地址 在主网页页右上写“产产品价格表见见http:/”,选选 中后，用右键键点击选击选 “超链链接属性”，填上URL地址（产产品价格 表所在地址）。 28 4 交互网页的制作 本节内容： 4.1 交互性标记元素 4.2 FORM标记元素 29 4

16、.1 交互性标记元素 人机对话的表单接口界面 请提供以下信息，然后单击提交 姓名： 密码： 提交清除 为了在浏览器上看到这个表单界面，就需要使用 FORM 标记元素。FORM 可译作“表单”。 30 4.2 FORM标记元素 31 4.2 FORM标记元素 当表单提交后，在Web服务器端被处 理后将此页面返回给用户。 应当指出，HTML的交互性标记元素 FORM和INPUT仅仅提供了一个 接口界面, 要全部实现交互功能，仅靠 HTML是不够的。还必须有ASP环境来进 行处理(将在下面讲述)。 32 5 ASP（动态服务主页） 本节内容： 5.1 什么是ASP？ 5.2 ASP的工作原理 5.3

17、 ASP脚本编程 33 5.1 什么是ASP？ ASP （Active Server Pages）是微软 公司为它的WEB服务器（互联网信息服务器 ，简称IIS）开发的一个组件（软件）。它是 一种实现动态网页开发技术的服务器端的开 发环境。 以前面讲的为例: 提交后的表单在Web 服务器端被处理后页面被返回给用户的过程 必须由ASP环境来进行处理。 34 5.1 什么是ASP？ 通过ASP，我们能够将HTML页面、脚本 命令、ASP内置对象和Active X组件结合起 来，建立动态、交互而又高效的Web应用程 序。 ASP可利用ADO（Active Data Object ）方便地访问数据库。

18、 35 5.2 ASP的工作原理 ASP文件可以由以下几个部分组成： n文本 nHTML标记 nASP脚本命令等。 其中ASP脚本命令可以包含： ASP对象 ActiveX组件 任何脚本语言（如VB脚本所言、 JAVA脚本语言等）。 ASP脚本命令写在“%”和“%”两个符号 之间。 36 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 37

19、 5.2 ASP的工作原理 运行结果 这里是手机市场！ 这里是手机市场！ 这里是手机市场！ 这里是手机市场！ 这里是手机市场！ 浏览屏幕 38 5.2 ASP的工作原理 ASP文件的运行过程 浏览器 http请求 http响应 Web服务器 ASP 39 5.2 ASP的工作原理 怎样做ASP文件？ ASP文件的后缀名为ASP，它以文件的 形式存放在WEB服务器上。 ASP实际是一个纯文本文件，只是它的 扩展名固定为.ASP。 ASP文件可以使用文本编辑器（如记事 本）进行编辑。即将 .TXT 改为 .ASP。 ASP文件也可以用WEB编程工具 FrontPage来做。 40 5.3 ASP脚

20、本编程 ASP脚本命令的内容包括： 1. 脚本语言可用VBScript写，也可用 JAVAScript作为脚本语言。 2.ASP内置对象如Request.。 3. Active X组件ASP支持的Active X组 件 包括 ASP服务器本身附带的内置组 件和用户自己创建的ASP组件。 用户与WEB服务器之间的信息交互通过 HTML中的FORM（表单）来实现。 41 5.3 ASP脚本编程 ASP环境下处理数据实例(提交) Tijiao.htm 请提供以下信息，然后单击提交。 姓名： 密码： 42 5.3 ASP脚本编程 ASP环境下处理数据实例(返回) Fanhui.asp 对不起！您的密码

21、不对。 43 6 Web数据库 本节内容： 6.1 数据库管理信息系统 6.2 Web数据库 44 6.1 数据库管理信息系统 数据库管理系统的功能: 建立数据库 管理数据库 实现数据的传送等 45 6.2 Web数据库 ASP可利用ADO（Active Data Object）方 便地访问数据库。 Web数据库系统是指以HTML为代表的Web页 面（即网页）与位于底层的数据库的集成。 n数据库管理系统解决Web页面和数据库之间的通 信问题 开放式数据库连接器ODBC nODBC是一种编程接口，它能使应用程序访问支 持SQL查询语言的数据库管理系统，实现与各种 数据库的通信。 SQL查询语言

22、本书第三章已有介绍 46 6.2 Web数据库 Web数据库的应用 现在有一客户在已知新书 代码后希望知道该书的单 价和是否有书。 客户向WEB服务器发出 HTTP请求 首先是客户向WEB服务器 发出http请求，CX- SEND.ASP程序产生页面 用户在屏幕上看到的如图 所示 欢迎查看新书价格和库存量 请输入新书代码 确认 重写 查询输入屏幕 47 6.2 Web数据库 从浏览器上调用下列CX-SEND.ASP程序产生的页面，并输入新书代 码后提交。 欢迎查看新书价格和库存量 欢迎查看新书价格和库存量 请输入新书代码 48 6.2 Web数据库 Web服务器上的ASP软件对此程序进行解释并

23、执行另外一 个名为cx-back.asp的程序。 欢迎查看新书价格和库存量 您查询的新书详单 新书代码 新书名称 50 6.2 Web数据库 单价（元） 库存量 对不起，没有您要查找的书籍数据！ 51 6.2 Web数据库 52 6.2 Web数据库 查询结果输出屏幕 您查询的新书单价和库存量 新书书代码码新书书名称单单价（元）库库存量 1003 人工智能 程序设计设计 23.3070 53 6.2 Web数据库 Web服务器上的ASP软件对程序的解释和执 行过程取得用户传来的新书代码（见程序第6 行） Web页面与数据库Text.mdb相边接（见程序 8-11行） n 第89行，创建一个Co

24、nnection对象 n 第10行，是打开连接。 n 第11行，是创建一个记录集对象。 用SQL查询数据库（见第1215行） 在浏览器上显示出查询结果 54 7 ASP的安装 安装IIS 若操作系统中还未安装IIS服务器，可打开“控 制面板”，然后单击启动 “添加/删除程序”， 在弹出的对话框中选择 “添加/删除Windows 组件”，在Windows组件向导对话框中选中 “Internet信息服务（IIS）”，然后单击“下一 步”，按向导指示，完成对IIS的安装。 55 7 ASP的安装 启动和配置Internet信息服务（IIS） 如系统中已安装过IIS，则只需重新配置一下： 单击Wind

25、ows开始菜单-程序-管理工具-Internet 信息服务（IIS）管理器，即可启动“Internet信息服 务”管理工具 IIS安装后，系统自动创建了一个默认的Web站点， 该站点的主目录默认为C:Inetpubwww.root。 用鼠标右键单击“默认Web站点”，在弹出的快捷菜单 中选择“属性”，此时就可以打开站点属性设置对话框 ，在该对话框中，可完成对站点的全部配置。 56 7 ASP的安装 设置主页文档 单击“文档”标签，可切换到对主页文档的设置 页面，主页文档是在浏览器中键入网站域名， 而未制定所要访问的网页文件时，系统默认访 问的页面文件。IIS默认的主页文档只有 default.htm和default.asp，根据需要，利用“ 添加”和“删除”按钮，可为站点设置所能解析 的主页文档。 启动与停止IIS服务 在Internet信息服务的工具栏中提供有启动与 停止服务的功能。单击 可启动IIS服务器；单 击 则停止IIS服务器。 57 本章小结 WWW（World Wide Web） W e b 开 发 的 基 本 技 术 Web数据库 动态服务主页 Frontpage HTML 交互网页的制作 ASP的安装 58