1 / 48

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

Web 开发的基本技术 WWW （ World Wide Web ） HTML Frontpage 交互网页的制作 ASP （动态服务主页） Web 数据库. 第四章 第一节 第二节 第三节 第四节 第五节 第六节. 第一节. WWW （ World Wide Web ）. • 背景 —— 以电子商务应用为例. 商家. 客户. ASP 文件形式、. HTML 文件形式. 网上营销. 应用软件. WEB 服务器. 本节内容 一、 Internet 地址 二、 Internet 提供的服务 三、 www 服务

taylor
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web开发的基本技术 WWW（World Wide Web） HTML Frontpage 交互网页的制作 ASP（动态服务主页） Web数据库 第四章 第一节 第二节 第三节 第四节 第五节 第六节

  2. 第一节 WWW（World Wide Web） • 背景——以电子商务应用为例 商家 客户 ASP文件形式、 HTML文件形式 网上营销 应用软件 WEB服务器 本节内容 一、Internet地址 二、Internet提供的服务 三、www服务 四、网页和超文本

  3. 一、Internet服务 Internet地址唯一地确定Internet上每台计算 机与每个用户的位置。对用户来说，Internet 地址有两种表示形式： 1.IP地址 IP地址分前后二部分，前面部分叫网络号，后 面部分叫主机号。 2.域名 用一个文字IP地址来表示。

  4. 二、Internet提供的服务 1.电子邮件 即E-maill服务。 2.文件传输服务 即FTP服务：file transfer protocol 3.www服务（World Wide Web） 4.新闻公告类服务 提供针对某问题展开讨论的服务，如BBS （电子公告牌）、网络新闻组等。

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

  6. 三、www服务 -2 Internet上的Web服务器 Internet上的Web服务器 HTML文件 链接 http协议 Web浏览器（软件） 访问链接 的信息 客户机 用户 Web服务器的工作原理

  7. 四、网页和超文本 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服务器中的信息并对其索引，将索引内容存 储在大型数据库中，供用户查询。

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

  9. 一、用HTML做简单的网页 超文本文件——ASCII格式 • 双标记方式 < FONT SIZE=6 标记元素的属性 FACE=“宋体” 标记元素结束 > 网络营销 </ FONT> 标记元素开始 标记名 •单标记方式 标记元素的属性 要显示的文本内容 <HR SIZE=2 ALIGN=LEFT WIDTH=200>

  10. 二、HTML文档的一般结构 <html> <head> <title>网上手机市场</ title> </head> <body> <p>你想要买手机吗?</P> <p>你可以访问 <a href=“http://www.shouji.com”>手机网 站</a>了解有关信息。 </body> </html>

  11. 三、常用的HTML标记元素 -1 标记元素开始 <!注释内容> <A> <ADDRESS> <B> <BASE> <BLINK> <BLOCKQUOTE> <BODY> <BR> <CAPTION> <CENTER> <CITE> <CODE> 标记元素结束 <!> </A> </ADDRESS> </B> </BLINK> </BLOCKQUOTE > </BODY> <> </CAPTION> </CENTER> </CITE> </CODE> 标记元素的功能 注释标记 锚元素，定义超文本链接点 地址信息起止 字体颜色加深 基锚，说明链接的基地址 字体闪烁 块引用 超文本正文主体的起止 回车换行 标题，多用于表格 元素间的内容居中 表明其间的内容是引文或例证 代码

  12. 三、常用的HTML标记元素 -2 标记元素开始 <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 超文本文的开始和结束 字体为斜体

  13. 三、常用的HTML标记元素 -3 标记元素开始 <IMG> <INPUT> <LI> <LIST> <MARQUEE> <META> <NEXTID> <OL> <P> <PRE> <S> <SMALL> <STRONG> 标记元素结束 </IMG> </LIST> </MARQUEE> </OL> </P> </PRE> </S> </SMALL> </STRONG> 标记元素的功能 插入图形图像文件 输入信息元素 清单条目，多用于目录列表 显示文本内容，但不执行标记命令 字符移动方式控制 资料说明 下一个标识 用序号显示一级标题 段落的起止，也可以加空行 按原文格式 中划线 用小号字表示 字体颜色加重

  14. 三、常用的HTML标记元素 -4 标记元素开始 <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>，仅字体略小

  15. 四、在网页中插入图片 如果想在方才显示的屏幕上增加一个名为gxkj.gif的图形， 只要在上述HTML文档中增加： 〈IMG SRC= “gxkj.gif” widfh “20” height “15” 〉 你想买手机吗？ 你可以访问手机网站了解有关信息 图片 插入图片

  16. 五、用HTML定义表格 -1 表格名称 第一标题列 第二标题列 浏览器上显示的表格 第三标题列

  17. 五、用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>

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

  19. 用FrontPage制作页面 -1 -主页面 网上手机商场 产品价格表见 http://www.shouji.com 动态字幕后 正按八折销售,欢迎选购

  20. 用FrontPage制作页面 -2 -被连接的页面 产品价格表 产品号 产品型号 生产厂家 价格

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

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

  23. 一、交互性标记元素 -人机对话的表单接口界面 请提供以下信息，然后单击提交 姓名： 密码： 提交 清除 人机对话的界面

  24. 二、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>

  25. 二、FORM标记元素 -2 FORM语句段的结构 <FORM METHOD=”POST”(指从客户机将信息发送到 WEB服务器) ACTION=”URL”(激活处理交互信息的程序) <INPUT TYPE= … NAME= … VALUE= … > </FORM>

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

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

  28. 二、ASP的工作原理 -1 ASP文件可以包含以下的几个部分： 1.文本 2.HTML标记 3.ASP脚本命令等 ASP脚本命令可以包含ASP对象，AcriveX组件和任何脚本 语言（如VB脚本所言、JAVA脚本语言等）。ASP脚本命 令写在“〈%”和“%〉”两个符号之间 ASP文件可以使用文本编辑器（如记事本）进行编辑，也 可以用WEB编程工具FrontPage来做。

  29. 二、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〉

  30. 二、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〉

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

  32. 二、ASP的工作原理 -5 -ASP文件的运行过程 Web服务器 ASP http请求 http响应 ASP的工作过程 浏览器

  33. 三、ASP脚本编程 -1 -ASP脚本命令包含内容 脚本语言——可用VBScript写 ASP内置对象——Rehuest就是一个内置对象 Active X组件——ASP支持的Active X组件包括 ASP服务器本身附带的内置组件和用户自己 （第三方）创建的ASP组件。

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

  35. 三、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>

  36. 三、ASP脚本编程 -4 ASP环境下处理数据实例 – Fanhui3.asp – <% myname=Request.Form(“myname”) – password=request.form(“password”) – If password=”123456”then%> – <%=myname %〉先生（女士） – ：我们接受您的申请。 – 您可以用以下密码查阅我们的资料：abcde – <% else%> – 对不起！您的密码不对。 – <%End if%>

  37. 第六节 Web数据库 网站运用了数据库技术，就可以实现网页更新的 自动化，即只要将数据库中的内容更新了，网页 上的内容也就自动更新了。 本节内容： 一、数据库管理信息系统 二、Web数据库

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

  39. 二、Web数据库 -1 -Web数据库系统是指以HTML为代表的Web页面（即 网页）与位于底层的数据库的集成。 -数据库管理系统解决Web页面和数据库之间的通 信问题。 •开放式数据库连接器ODBC ODBC是一种编程接口，它能使应用程序 访问支持SQL查询语言的数据库管理系统，实 现与各种数据库的通信。 •SQL查询语言

  40. 二、Web数据库 -2 欢迎查看新书价格和库存量 请输入新书代码 确认 重写 查询输入屏幕 – 数据库的应用实例 现在有一客户在已知新书代码 后希望知道该书的单价和是否 有书。 • 客户向WEB服务器发出HTTP请 求 • 用户在屏幕上看到的如图所示

  41. 二、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> 认"> 写">

  42. 二、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")

  43. 二、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>

  44. 二、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%> 对不起，没有您要查找的书籍数据！

  45. 二、Web数据库 -7 <%rs.close set rs=nothing conn.close set conn=nothing%> </center> <%end if%> </body> </html> •由CX-SEND.ASP调用CX-BACK.ASP后的屏幕输出见 图。

  46. 二、Web数据库 -8 您查询的新书单价和库存量 新书代码 1003 新书名称 人工智能 程序设计 单价（元） 23.30 库存量 70 查询结果输出屏幕

  47. 二、Web数据库 -9 • Web服务器上的ASP软件对程序的解释和执行过程 – 取得用户传来的新书代码（见程序第6行） – Web页面与数据库Tsxt.mdb相边接（见程序8-11行） 第8～9行，创建一个Connectcon对象 第10行，是打开连接。 第11行，是创建一个记录集对象。 – 用SQL查询数据库（见第12～15行） – 在浏览器上显示出查询结果 [演示B4] 网上图书销售演示系统（见演示光盘） [演示B5] 工资管理演示系统 （见演示光盘）

  48. 第四章 Web开发的基本技术 小结 通过客户机上的Web浏览器和Web站 WWW 点上的Web服务器之间的通信来实现 利用FrontPage这种WEB编程工具 可以做到在几乎不需要编写HTML 代码的情况下，完成网页的制 作，并自动地生成HTML文件。 ASP是位于Web服务器端的脚本运行 环境。通过这种环境，用户可以创 建和运行动态的、交互式的Web服 务器应用程序，实现动态的交互。 Internet用户可以通过Web页面来访 问数据库中的数据。 Web 开 发 HTML Frontpage 交互网页、 ASP动态服 务网页 Web数据库 的 基 本 技 术

More Related