第四章 Web开发的基本技术

Download Report

Transcript 第四章 Web开发的基本技术 

第四章
第一节
第二节
第三节
第四节
第五节
第六节
Web开发的基本技术
WWW（World Wide Web）
HTML
Frontpage
交互网页的制作
ASP（动态服务主页）
Web数据库
第一节
WWW（World Wide Web）
• 背景——以电子商务应用为例
商家
客户
网上营销
本节内容
一、Internet地址
二、Internet提供的服务
三、www服务
四、网页和超文本
WEB服务器
ASP文件形式、
HTML文件形式
应用软件
一、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服务 -2
Internet上的Web服务器
Internet上的Web服务器
HTML文件
链接
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>
标记元素的功能
注释标记
锚元素，定义超文本链接点
地址信息起止
字体颜色加深
基锚，说明链接的基地址
字体闪烁
块引用
超文本正文主体的起止
回车换行
标题，多用于表格
元素间的内容居中
表明其间的内容是引文或例证
代码
三、常用的HTML标记元素 -2
标记元素开始
标记元素结束
标记元素的功能
<DD>
文字缩格
<DL>
线缩格或不显示<LI>的标题符号
<DT>
回车换行，但不缩格
<EM>
</EM>
强调，斜体且颜色加重
<FONT>
</FONT>
变化字体大小和颜色
<HEAD>
</HEAD>
交互项元素的起止
<FRAME>
</FRAME>
展示页的版面分割
<HEAD>
</HEAD>
超文本文件头的起止
<HEADER>
</HEADER>
与<head>和</head>等价
<HR>
画水平间隔线
<Hn>
</Hn>
定义标题字体大小，n值为1-6
<HTML>
</HTML>
超文本文的开始和结束
<I>
</I>
字体为斜体
三、常用的HTML标记元素 -3
标记元素开始
<IMG>
标记元素结束
</IMG>
标记元素的功能
插入图形图像文件
<INPUT>
输入信息元素
<LI>
清单条目，多用于目录列表
<LIST>
</LIST>
显示文本内容，但不执行标记命令
<MARQUEE>
</MARQUEE>
字符移动方式控制
<META>
资料说明
<NEXTID>
下一个标识
<OL>
</OL>
用序号显示一级标题
<P>
</P>
段落的起止，也可以加空行
<PRE>
</PRE>
按原文格式
<S>
</S>
中划线
<SMALL>
</SMALL>
用小号字表示
<STRONG>
</STRONG>
字体颜色加重
三、常用的HTML标记元素 -4
标记元素开始
标记元素结束
标记元素的功能
<SUB>
</SUB>
下角标
<SUP>
</SUP>
上角标
<TABLE>
</TABLE>
表格的起止，图文混排时也使用
<TD>
</TD>
表格中一栏内容的起止
<TEXTAREA>
</TEXTAREA>
用文本区输入信息
<TH>
</TH>
表头的起止
<TITLE>
</TITLE>
超文本标题的起止
<TR>
</TR>
表中一行的起止
<TT>
</TT>
固定宽度
<U>
</U>
下划线
<UL>
</UL>
同一级标题的限定，无序号
<VAR>
</VAR>
变量
<XMP>
</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作上述网页的步骤
操作目的
操作步骤
定义主网页
新建——网页——普通网页——确定网页名字并存储
网页分区
点击“插入表格”按钮，做出2×2表格，并把表格实线变为虚线（办
法
是在表格上点击右键选属性后，将各数均改为0）。
输入网页标题文字
方法类同用WORD写字，在左上格写上“网上手机商场”几个字。
插入照片
点击选图片钮——用右键点图片——点击图片属性——外观尺寸（修
改其大小）。
做动态字幕
在右下格写“正按八折销售,欢迎选购”字样，选中后——插入——
组
件——字幕——字幕属性——样式——格式——字体。
点击预览，即可看到动态字幕。
做被连接的网页
另外做一个被连接的网页（手机价格表）。
建立超接，填URL
地址
在主网页右上写“产品价格表见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的工作原理 -1
ASP文件可以包含以下的几个部分：
1.文本
2.HTML标记
3.ASP脚本命令等
ASP脚本命令可以包含ASP对象，ActiveX组件和任何脚本语
言（如VB脚本语言、JAVA脚本语言等）。ASP脚本命令写在“〈%”
和“%〉”两个符号之间。
ASP文件可以使用文本编辑器（如记事本）进行编辑，也可
以用WEB编程工具FrontPage来做。
二、ASP的工作原理 -2
ASP文件实例：VB-SCR-EXM.ASP
〈html〉
〈head〉
〈title〉手机市场标题〈/title〉
〈/head〉
〈body〉
〈% for i=3 to 7%〉
〈Font size =〈%=i%〉〉
这里是手机市场！〈BR〉
〈% next %〉
〈/body〉
〈/html〉
二、ASP的工作原理 -3
ASP文件实例：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脚本编程 -4
ASP环境下处理数据实例
 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数据库 -2
 数据库的应用实例
现在有一客户在已知新书代码后
希望知道该书的单价和是否有书。
• 客户向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数据库 -5
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
%>
<%if not rs.eof and not rs.bof then%>
您查询的新书详单
<table border="1" width="80%">
<tr>
<td>新书代码</td>
<td>新书名称</td>
二、Web数据库 -6
<td>单价（元）</td>
<td>库存量</td>
</tr>
<tr>
<td height="30">&nbsp;<%=rs("id")%></td>
<td height="30">&nbsp;<%=rs("sm")%></td>
<td height="30">&nbsp;<%=rs("dj")%></td>
<td height="30">&nbsp;<%=rs("kcl")%></td>
</tr> </table>
<%else%>
对不起，没有您要查找的书籍数据！
二、Web数据库 -7
<%rs.close set rs=nothing
conn.close
set conn=nothing%>
</center>
<%end if%>
</body>
</html>
•由CX-SEND.ASP调用CX-BACK.ASP后的屏幕输出见图。
二、Web数据库 -8
您查询的新书单价和库存量
新书代码
新书名称
单价（元）
库存量
1003
人工智能
程序设计
23.30
70
查询结果输出屏幕
二、Web数据库 -9
 Web服务器上的ASP软件对程序的解释和执行过程
 取得用户传来的新书代码（见程序第6行）
 Web页面与数据库Tsxt.mdb相边接（见程序8-11行）
第8～9行，创建一个Connectcon对象
第10行，是打开连接。
第11行，是创建一个记录集对象。
 用SQL查询数据库（见第12～15行）
 在浏览器上显示出查询结果
[演示B4] 网上图书销售演示系统（见演示光盘）
[演示B5] 工资管理演示系统 （见演示光盘）
小
WWW
Web开
发
的
基
本
技
术
HTML
Frontpage
交互网页、
ASP动态服
务网页
Web数据库
结
通过客户机上的Web浏览器和Web站点上
的Web服务器之间的通信来实现。
利用FrontPage这种WEB编程工具可以
做到在几乎不需要编写HTML代码的情
况下，完成网页的制作，并自动地生
成HTML文件。
ASP是位于Web服务器端的脚本运行环
境。通过这种环境，用户可以创建和
运行动态的、交互式的Web服务器应用
程序，实现动态的交互。
Internet用户可以通过Web页面来访问数
据库中的数据。