第四章第一节第二节第三节第四节第五节第六节

第四章第一节第二节第三节第四节第五节第六节

Web 开发的基本技术WWW （ World Wide Web ）HTMLFrontpage交互网页的制作ASP （动态服务主页）Web 数据库

第一节WWW （ World Wide Web ）• 背景——以电子商务应用为例

商家客户ASP 文件形式、

网上营销 WEB 服务器 HTML 文件形式应用软件

本节内容一、 Internet 地址二、 Internet 提供的服务三、 www 服务四、网页和超文本

一、 Internet 服务Internet 地址唯一地确定 Internet 上每台计算机与每个用户的位置。对用户来说， Internet地址有两种表示形式：

1.IP 地址IP 地址分前后二部分，前面部分叫网络号，后面部分叫主机号。

2. 域名用一个文字 IP 地址来表示。

二、 Internet 提供的服务1. 电子邮件即 E-maill 服务。2. 文件传输服务即 FTP 服务： file transfer protocol

3.www 服务（ World Wide Web ）4. 新闻公告类服务提供针对某问题展开讨论的服务，如 BBS（电子公告牌）、网络新闻组等。

三、 www 服务 -1

万维网上不仅可以看到文字、图片、而且可以带声音、带动画。www 服务是通过客户机上的 Web 浏览器和Web 站点上的 Web 服务器之间的通信来实现的。

三、 www 服务 -2Internet 上的 Web 服务器

HTML 文件

链接

Internet 上的 Web 服务器

http 协议

Web 浏览器（软件）

访问链接的信息

客户机

用户Web 服务器的工作原理

四、网页和超文本1. 超文本在 www 系统中，信息是按超文本方式组织的。超文本方式是实现 www 的关键技术。

2.HTML 语言（ Hyrer Text Markup Language ）超文本标记语言，存放在 WEB 服务器上。3.http 协议（ Hyper Text Transfer Protocol ）超文本传输协议， www 服务是执行 http 协议进行传输的。

4.www 浏览器通过它可以去找到并浏览 Internet 上各种 WWW 服务器上的主页。5. 搜索引擎搜索引擎是 Internet 上的一种 www 服务器，它能在 Internet 中主动搜索其他 www 服务器中的信息并对其索引，将索引内容存储在大型数据库中，供用户查询。

第二节本节内容一、用 HTML 做简单的网页二、 HTML 文档的一般结构三、常用的 HTML 标记元素四、在网页中插入图片五、用 HTML 定义表格

HTML

< >

一、用 HTML 做简单的网页超文本文件—— ASCII 格式

• 双标记方式

标记元素开始

FONT SIZE=6

标记元素的属性

FACE=“ 宋体”

标记元素结束

网络营销 </ FONT>

标记名

• 单标记方式标记元素的属性要显示的文本内容

<HR SIZE=2 ALIGN=LEFT WIDTH=200>

二、 HTML 文档的一般结构<html>

<head><title> 网上手机市场 </ title>

</head><body><p> 你想要买手机吗 ?</P><p> 你可以访问

<a href=“http://www.shouji.com”> 手机网站 </a> 了解有关信息。</body>

</html>

三、常用的 HTML 标记元素 -1标记元素开始

<! 注释内容 ><A><ADDRESS><B><BASE><BLINK><BLOCKQUOTE><BODY><BR><CAPTION><CENTER><CITE><CODE>

标记元素结束<!></A></ADDRESS></B>

</BLINK></BLOCKQUOTE ></BODY><></CAPTION></CENTER></CITE></CODE>

标记元素的功能注释标记锚元素，定义超文本链接点地址信息起止字体颜色加深基锚，说明链接的基地址字体闪烁块引用超文本正文主体的起止回车换行标题，多用于表格元素间的内容居中表明其间的内容是引文或例证代码


<DD>

<DL>

<DT>

<EM>

<FONT>

<HEAD>

<FRAME>

<HEAD>

<HEADER>

<HR>

<Hn>

<HTML>

<I>

标记元素结束

</EM>

</FONT>

</HEAD>

</FRAME>

</HEAD>

</HEADER>

</Hn>

</HTML>

</I>

标记元素的功能文字缩格线缩格或不显示 <LI> 的标题符号回车换行，但不缩格强调，斜体且颜色加重变化字体大小和颜色交互项元素的起止展示页的版面分割超文本文件头的起止与 <head> 和 </head> 等价画水平间隔线定义标题字体大小， n值为 1-6

超文本文的开始和结束字体为斜体


<IMG>

<INPUT>

<LI>

<LIST>

<MARQUEE>

<META>

<NEXTID>

<OL>

<P>

<PRE>

<S>

<SMALL>

<STRONG>

标记元素结束</IMG>

</LIST>

</MARQUEE>

</OL>

</P>

</PRE>

</S>

</SMALL>

</STRONG>

标记元素的功能插入图形图像文件输入信息元素清单条目，多用于目录列表显示文本内容，但不执行标记命令字符移动方式控制资料说明下一个标识用序号显示一级标题段落的起止，也可以加空行按原文格式中划线用小号字表示字体颜色加重


<SUB>

<SUP>

<TABLE>

<TD>

<TEXTAREA>

<TH>

<TITLE>

<TR>

<TT>

<U>

<UL>

<VAR>

<XMP>

标记元素结束</SUB>

</SUP>

</TABLE>

</TD>

</TEXTAREA>

</TH>

</TITLE>

</TR>

</TT>

</U>

</UL>

</VAR>

</XMP>

标记元素的功能下角标上角标表格的起止，图文混排时也使用表格中一栏内容的起止用文本区输入信息表头的起止超文本标题的起止表中一行的起止固定宽度下划线同一级标题的限定，无序号变量功能同 <LIST> ，仅字体略小

四、在网页中插入图片如果想在方才显示的屏幕上增加一个名为 gxkj.gif 的图形，只要在上述 HTML 文档中增加：〈 IMG SRC= “gxkj.gif” widfh “20” height “15” 〉

你想买手机吗？你可以访问手机网站了解有关信息图片

插入图片

五、用 HTML 定义表格 -1

表格名称第一标题列第二标题列

浏览器上显示的表格

第三标题列

五、用 HTML 定义表格 -2可以显示上页图中所示表格的 HTML 文本：

<HTML><BODY>

<table border="1" width="80%" cellspacing="0"><caption> 表格名称 </caption><tr align=center>

<td width="30%"> 第一标题列 </th><td width="30%"> 第二标题列 </td><td width="40%"> 第三标题列 </td></tr><tr><td></td><td></td><td></td></tr></table></BODY></HTML>

第三节 FrontPage使用微软公司的 FrontPage WEB编程工具可以做到在几乎不需要编写 HTML 代码的情况下，完成网页的制作，同时自动地生成 HTML 文件。

本节内容：用 FrontPage 制作页面

用 FrontPage 制作页面 -1- 主页面

网上手机商场产品价格表见http://www.shouji.com

动态字幕后正按八折销售 ,欢迎选购

用 FrontPage 制作页面 -2-被连接的页面

产品价格表产品号产品型号生产厂家价格

用 FrontPage 制作页面 -3用 FrontPage 作上述网页的步骤操作目的

定义主网页网页分区输入网页标题文字插入照片做动态字幕做被连接的网页建立超接，填 URL地址

操作步骤新建——网页——普通网页——确定网页名字并存储点击“插入表格”按钮，做出 2×2 表格，并把表格实线变为虚线（办法是在表格上点击右键选属性后，将各数均改为 0 ）。方法类同用 WORD写字，在左上格写上“网上手机商场”几个字。点击选图片钮——用右键点图片——点击图片属性——外观尺寸（修改其大小）。在右下格写“正按八折销售 ,欢迎选购”字样，选中后——插入——组件——字幕——字幕属性——样式——格式——字体。点击预览，即可看到动态字幕。另外做一个被连接的网页（手机价格表）。在主网页右上写“产品价格表见 http://www.shouji.com”,选中后，用右键点击选“超链接属性”，填上 URL 地址（产品价格表所在地址）。

第四节交互网页的制作仅有静态的网页是不够的。我们需要通过网页实现网上注册（客户在网页上写入自己的姓名和密码）、网上交谈、网上查询（客户在网页上输入自己要买的产品名，网站返回该产品名的性能、价格等）。本节内容：一、交互性标记元素二、 FORM 标记元素

一、交互性标记元素-人机对话的表单接口界面

请提供以下信息，然后单击提交姓名：密码：

提交清除人机对话的界面

二、 FORM 标记元素 -1

用 FORM 标记元素在 HTML 页面上实现“提交”（一部分功能）的 HTML 文档<form method=”post" action=”fanhui3.asp”><p>请提供以下信息 ,然后单击提交。

<p>姓名： <input name=”myname” size=”36”><p>密码： <input name=”password" type=password

size=”36”><p><input type=submit value =” 提交” ><input

type=reset value=”清除” ></form>

二、 FORM 标记元素 -2

FORM 语句段的结构<FORM METHOD=”POST”(指从客户机将信息发送到

WEB 服务器 )ACTION=”URL”(激活处理交互信息的程序 )

<INPUT TYPE= …NAME= …VALUE= … >

</FORM>

第五节 ASP （动态服务主页）用 HTML写的文本是静态的。你可以看到页面上的内容，但不能在屏幕上输入并传送数据到 Web 服务器，更无法进行完整的人机对话，当涉及到页面与数据库的连接问题和从站点返回一个页面给客户的问题时，仅依靠 HTML 文本是做不到的。 ASP就是为了解决动态交互的问题和与数据库连接的问题而设计的。本节内容：一、什么是 ASP？二、 ASP 的工作原理三、 ASP脚本编程

一、什么是 ASP？– ASP （ Active Server Pages ）是微软公司为它的 WEB 服务器（互联网信息服务器，简称 IIS ）开发的一个组件（软件）。它是一种实现动态网页开发技术的服务器端的开发环境。– 通过 ASP ，我们能够将 HTML 页面、脚本命令、 ASP内置对象和 Active X 组件结合起来，建立动态、交互而又高效的 Web 应用程序。

– ASP 可利用 ADO （ Active Data Object ）方便地访问数据库。

二、 ASP 的工作原理 -1ASP 文件可以包含以下的几个部分：

1. 文本2.HTML 标记3.ASP脚本命令等

ASP脚本命令可以包含 ASP 对象， AcriveX 组件和任何脚本语言（如 VB脚本所言、 JAVA脚本语言等）。 ASP脚本命令写在“〈%” 和“%〉”两个符号之间ASP 文件可以使用文本编辑器（如记事本）进行编辑，也可以用 WEB编程工具 FrontPage 来做。

二、 ASP 的工作原理 -2ASP 文件实例： VB-SCR-EXM.ASP〈 html〉〈 head〉〈 title〉手机市场标题〈 /title〉〈 /head〉〈 body〉〈% for i=3 to 7%〉〈 Font size =〈%=i%〉〉这里是手机市场！〈 BR〉〈% next %〉〈 /body〉〈 /html〉

二、 ASP 的工作原理 -3ASP 文件实例： VB-SCR-EXM.ASP （去掉 <% 和 %> ）〈 html〉〈 head〉〈 title〉手机市场标题〈 /title〉〈 /head〉〈 body〉

for i=3 to 7〈 Font size =i〉这里是手机市场！〈 BR〉next〈 /body〉〈 /html〉

二、 ASP 的工作原理 -4– 浏览结果这里是手机市场！

这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！

浏览屏幕

二、 ASP 的工作原理 -5-ASP 文件的运行过程

Web 服务器ASP

http请求

http响应浏览器 ASP 的工作过程

三、 ASP脚本编程 -1-ASP脚本命令包含内容脚本语言——可用 VBScript写ASP 内置对象—— Rehuest就是一个内置对象Active X 组件—— ASP支持的 Active X 组件包括

ASP 服务器本身附带的内置组件和用户自己（第三方）创建的 ASP 组件。

三、 ASP脚本编程 -2

- 用户与 WEB 服务器之间的信息交互使用 HTML 中的 FORM （表单）ASP 文件中可使用 VBScript 作为脚本语言，也可用 JAVAScript 作为脚本语言。

三、 ASP脚本编程 -3

ASP环境下处理数据实例– Tijiao3.htm<form method=“post”action=“fanhui3.asp”><p>请提供以下信息，然后单击提交。

<p>姓名： <input name=“myname”size=“36”><p>密码： <input name=“password”type=password

size=“36”><p><input type=submit value=“ 提交” ><input

type=reset value=“清除” ></form>

三、 ASP脚本编程 -4ASP环境下处理数据实例

– Fanhui3.asp– <% myname=Request.Form(“myname”)– password=request.form(“password”)– If password=”123456”then%>– <%=myname %〉先生（女士）– ：我们接受您的申请。– 您可以用以下密码查阅我们的资料： abcde– <% else%>– 对不起！您的密码不对。– <%End if%>

第六节 Web 数据库网站运用了数据库技术，就可以实现网页更新的自动化，即只要将数据库中的内容更新了，网页上的内容也就自动更新了。

本节内容：一、数据库管理信息系统二、 Web 数据库

一、数据库管理系统- 数据库管理系统的功能建立数据库管理数据库实现数据的传送等

二、 Web 数据库 -1

-Web 数据库系统是指以 HTML 为代表的 Web 页面（即网页）与位于底层的数据库的集成。- 数据库管理系统解决Web 页面和数据库之间的通信问题。• 开放式数据库连接器 ODBC

ODBC 是一种编程接口，它能使应用程序访问支持 SQL 查询语言的数据库管理系统，实现与各种数据库的通信。•SQL 查询语言


– 数据库的应用实例现在有一客户在已知新书代码后希望知道该书的单价和是否有书。• 客户向WEB 服务器发出 HTTP请求• 用户在屏幕上看到的如图所示

欢迎查看新书价格和库存量请输入新书代码

确认重写

查询输入屏幕

二、 Web 数据库 -3• 从浏览器上调用下列 CX-SEND.ASP程序产生的页面，并输入新书代码后提交。<html><head><title>欢迎查看新书价格和库存量 </title></head><form method=post action=cx-back.asp>欢迎查看新书价格和库存量

<table><tr>请输入新书代码 <tr>

<input type="text" name="id" size="20" maxlength="4"><input type="submit" value=" 确<input type="reset" value="重

</form></BODY></HTML>

认 ">写 ">

二、 Web 数据库 -4• Web 服务器上的 ASP 软件对此程序进行解释并执行另外一个名为 cx-back.asp 的程序。

<html><head>

<title>欢迎查看新书价格和库存量 </title></head><body>

<% id=request.form("id") /%><%

Set conn = Server.CreateObject("ADODB.Connection")DBPath = Server.MapPath("tsxt.mdb")

二、 Web 数据库 -5conn.Open "driver={Microsoft Access Driver (*.mdb)};dbq=" &

DBPathSet rs = Server.CreateObject("ADODB.Recordset")sql="select * from tsxt"

sql=sql & " where id like '%" & id & "%'"conn.execute sqlrs.open sql,conn,1,3%><%if not rs.eof and not rs.bof then%>您查询的新书详单

<table border="1" width="80%"><tr>

<td> 新书代码 </td><td> 新书名称 </td>


<td> 单价（元） </td><td> 库存量 </td></tr><tr>

<td height="30"> <%=rs("id")%></td><td height="30"> <%=rs("sm")%></td><td height="30"> <%=rs("dj")%></td><td height="30"> <%=rs("kcl")%></td></tr> </table><%else%>对不起，没有您要查找的书籍数据！


<%rs.close set rs=nothingconn.close

set conn=nothing%></center><%end if%></body></html>•由 CX-SEND.ASP调用 CX-BACK.ASP 后的屏幕输出见图。


您查询的新书单价和库存量

新书代码

1003

新书名称人工智能程序设计

单价（元）

23.30

库存量

70

查询结果输出屏幕

二、 Web 数据库 -9• Web 服务器上的 ASP 软件对程序的解释和执行过程– 取得用户传来的新书代码（见程序第 6 行）

– Web 页面与数据库 Tsxt.mdb相边接（见程序 8-11 行）第 8～ 9 行，创建一个 Connectcon 对象第 10 行，是打开连接。第 11 行，是创建一个记录集对象。– 用 SQL 查询数据库（见第 12～ 15 行）– 在浏览器上显示出查询结果[演示 B4] 网上图书销售演示系统（见演示光盘）[演示 B5] 工资管理演示系统（见演示光盘）

的基本技术

第四章 Web 开发的基本技术小结通过客户机上的 Web 浏览器和 Web 站

WWW 点上的 Web 服务器之间的通信来实现利用 FrontPage这种 WEB编程工具

Web开发HTML

Frontpage

交互网页、ASP 动态服务网页Web 数据库

可以做到在几乎不需要编写 HTML代码的情况下，完成网页的制作，并自动地生成 HTML 文件。ASP 是位于 Web 服务器端的脚本运行环境。通过这种环境，用户可以创建和运行动态的、交互式的 Web 服务器应用程序，实现动态的交互。

Internet 用户可以通过 Web 页面来访问数据库中的数据。

Documents

第四章 第一节 第二节 第三节 第四节 第五节 第六节

第四章第一节第二节第三节第四节第五节第六节