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

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

1、管理信息系统 第四章 Web开发的基本技术 内容提要 v第一节* WWW（World Wide Web） v第二节* HTML v第三节 Frontpage v第四节 交互网页的制作 v第五节 ASP（动态服务主页） v第六节 Web数据库 第一节 WWW（World Wide Web） v本节内容 一、Internet地址 二、Internet提供的服务 三、www服务 四、网页和超文本 一、Internet服务 vInternet地址唯一地确定Internet上每台 计算机与每个用户的位置。对用户来说， Internet地址有两种表示形式： v1.IP地址 IP地址分前后二部分，前面部分叫

2、网络号，后面 部分叫主机号。 v2.域名 用一个文字IP地址来表示。 二、Internet提供的服务 v1.电子邮件 即E-maill服务 v2.文件传输服务 即FTP服务：file transfer protocol v3.www服务（World Wide Web） v4.新闻公告类服务 提供针对某问题展开讨论的服务，如BBS（电子 公告牌）、网络新闻组等。 三、www服务 v万维网上不仅可以看到文字、图片，而且可 以带声音、带动画。 vwww服务是通过客户机上的Web浏览器和Web 站点上的Web服务器之间的通信来实现的。 HTML文件 Web浏览器（软件）客户机 Internet上的We

3、b服务器Internet上的Web服务器 访问链接 的信息 链接 http协议 用户 Web服务器的工作原理 三、www服务 四、网页和超文本 v 1.超文本：在www系统中，信息是按超文本方式组织 的。超文本方式是实现www的关键技术。 v 2.HTML语言（Hyper Text Markup Language） v 3.http协议（Hyper Text Transfer Protocol） ：超文本传输协议，www服务是执行http协议进行传 输的。 v 4.www浏览器：通过它可以去找到并浏览Internet 上各种WWW服务器上的主页。 v 5.搜索引擎：它能在Internet中主动

4、搜索其他www 服务器中的信息并对其索引，将索引内容存储在大 型数据库中，供用户查询。 第二节 HTML 本节内容 一、HTML元素 二、HTML常用标签 三、格式标签 四、特殊字符显示 五、HTML链接 六、表格 七、列表 八、图片 HTML概观 vHTML即“超文本标记语言”Hyper Text Markup Language vHTML文件是包括一些标签的文本文件 v这些标签告诉浏览器如果显示页面内容 vHTML文件必须以HTM或HTML为扩展名 v可以用文本编辑器建立HTML文件 1. HTML的第一个例子 我的主页 这是我的第一个网页 这里的文字用粗体显 示 查看效果查看源文件 FF

5、 2. HTML元素 vHTML的元素用标签来标记 vHTML标记用两个符号（大于号和小于号称 为“尖括号”）括起来 vHTML的标签一般都成对出现，例如 v第一个称为开始标签，第二个称为结束标签 v两个标签之间的内容是元素的内容 vHTML的标签可以用大写或小写（推荐用小写 ） 看例子 F 3.HTML常用标签 v v vheadings标题标签。定义不同 大小的标题, vparagraphs段落标签。 v* Line breaks断行标签 vHTML中的注释 查看效果查看源文件 FF 4.HTML格式标签 v 粗体 v 大字体 v 强调 v 斜体 v 小字体 v 粗体 v 下标 v 上标

6、v预格式文本 * 查看效果 查看源文件 F F 查看pre效果查看pre源文件 FF 5. HTML特殊字符显示 符号名称代码数字 空格 大于 “引号 分 英镑 元 节 版权 注册商标 乘 除 查看效果查看源文件 FF 6.HTML链接 v锚标签 v之间的内容会以超链接的形式显示 。语法： vText to be displayed v锚标签的属性 Href指示链接地址 湘潭大学 Target指示打开位置 Target=“_blank”表示在新的浏览器窗口中打开超 链接。否则会在原来的窗口中打开超链接。 查看效果查看源文件 FF 7.HTML表格 v标签 标签 标签 v表格属性： border

7、, cellspacing, bordercolor v单元格属性： align, colspan, rowspan 查看效果 查看源文件 F F 查看效果 查看源文件 F F 查看效果 查看源文件 F F 8.列表 LISTS vHTML中的常用列表包括： v有序列表ordered list v无序列表 unordered list v定义列表definition list 用定义term,用 定义 definition 查看效果查看源文件 FF 9. 图片image v标签。 v的属性 src指定图片的文件名。 alt显示图片的替代文本。（当图片不能 显示时，显示这些文字） height,

8、 width指定图片的大小。 用图片作超链接。只要把图片的标签放在 之间就可以了 查看效果查看源文件 FF 10.网页背景 v网页可以指定某一种颜色做背景，也可以用 图片作背景。需要改动的是的属性。 vbgcolor属性设置颜色 vbackground属性设置背景图片 查看效果 查看源文件 F F 查看效果 查看源文件 F F 第三节 FrontPage v使用微软公司的FrontPage WEB编程工具可 以做到在几乎不需要编写HTML代码的情况下 ，完成网页的制作，同时自动地生成HTML文 件。 v 本节内容： v 用FrontPage制作页面 用FrontPage制作页面 -1 -主页面

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

10、尺寸（修 改其大小）。 做动态字幕 在右下格写“正按八折销售,欢迎选购”字样，选中后插入组 件字幕字幕属性样式格式字体。 点击预览 ，即可看到动态字幕。 做被连接的网页 另外做一个被连接的网页（手机价格表）。 建立超接，填URL地址 在主网页右上写“产品价格表见http:/”,选中后，用 右键点击选“超链接属性”，填上URL地址（产品价格表所在地址）。 第四节 交互网页的制作 仅有静态的网页是不够的。我们需要通过网页 实现网上注册（客户在网页上写入自己的姓名和密 码）、网上交谈、网上查询（客户在网页上输入自 己要买的产品名，网站返回该产品名的性能、价格 等）。 本节内容： 一、交互性标记元素

11、二、FORM标记元素 一、交互性标记元素 v-人机对话的表单接口界面 请提供以下信息，然后单击提交 姓名： 密码： 提交清除 人机对话的界面 二、FORM标记元素 -1 v用FORM标记元素在HTML页面上实现“提交”（ 一部分功能）的HTML文档 请提供以下信息,然后单击提交。 姓名： 密码： 二、FORM标记元素 -2 vFORM语句段的结构 第五节 ASP（动态服务主页） v 用HTML写的文本是静态的。你可以看 到页面上的内容，但不能在屏幕上输入并传 送数据到Web服务器，更无法进行完整的人 机对话。当涉及到页面与数据库的连接问题 和从站点返回一个页面给客户的问题时，仅 依靠HTML文

12、本是做不到的。ASP就是为了解 决动态交互的问题和与数据库连接的问题而 设计的。 v 本节内容： v 一、什么是ASP？ v 二、ASP的工作原理 v 三、ASP脚本编程 一、什么是ASP？ ASP （Active Server Pages）是微软公司为 它的WEB服务器（互联网信息服务器，简称IIS） 开发的一个组件（软件）。它是一种实现动态网 页开发技术的服务器端的开发环境。 通过ASP，我们能够将HTML页面、脚本命令、ASP 内置对象和Active X组件结合起来，建立动态、 交互而又高效的Web应用程序。 ASP可利用ADO（Active Data Object）方便地 访问数据库。

13、 二、ASP的工作原理 -1 vASP文件可以包含以下的几个部分： v 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%

14、 这里是手机市场！BR % next % /body /html 二、ASP的工作原理 -3 vASP文件实例：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 v-ASP文件的运行过程 浏览器 http请求 http响应 Web服务器 ASP ASP的工

15、作过程 三、ASP脚本编程 -1 v-ASP脚本命令包含内容 v脚本语言可用VBScript写 vASP内置对象Rehuest就是一个内置对象 vActive X组件ASP支持的Active X组件包 括ASP服务器本身附带的内置组件和用户自 己（第三方）创建的ASP组件。 三、ASP脚本编程 -2 v-用户与WEB服务器之间的信息交互 v使用HTML中的FORM（表单） vASP文件中可使用VBScript作为脚本语言， 也可用JAVAScript作为脚本语言。 三、ASP脚本编程 -3 vASP环境下处理数据实例 Tijiao3.htm 请提供以下信息，然后单击提交。 姓名： 密码： 三、

16、ASP脚本编程 -4 vASP环境下处理数据实例 Fanhui3.asp 对不起！您的密码不对。 第六节 Web数据库 v 网站运用了数据库技术，就可以实现网页 更新的自动化，即只要将数据库中的内容更 新了，网页上的内容也就自动更新了。 v本节内容： v一、数据库管理信息系统 v二、Web数据库 一、数据库管理系统 v-数据库管理系统的功能 建立数据库 管理数据库 实现数据的传送等 二、Web数据库 -1 -Web数据库系统是指以HTML为代表的Web页面（即 网页）与位于底层的数据库的集成。 -数据库管理系统解决Web页面和数据库之间的通 信问题。 开放式数据库连接器ODBC ODBC是一种

17、编程接口，它能使应用程序 访问支持SQL查询语言的数据库管理系统，实 现与各种数据库的通信。 SQL查询语言 二、Web数据库 -2 数据库的应用实例 现在有一客户在已知新 书代码后希望知道该书 的单价和是否有书。 客户向WEB服务器发出 HTTP请求 用户在屏幕上看到的如 图所示 欢迎查看新书价格和库存量 请输入新书代码 确认 重写 查询输入屏幕 二、Web数据库 -3 从浏览器上调用下列CX-SEND.ASP程序产生的页面，并输入 新书代码后提交。 欢迎查看新书价格和库存量 欢迎查看新书价格和库存量 请输入新书代码 二、Web数据库 -4 Web服务器上的ASP软件对此程序进行解释并执行

18、另外一个名为cx-back.asp的程序。 欢迎查看新书价格和库存量 您查询的新书详单 新书代码 新书名称 二、Web数据库 -6 单价（元） 库存量 对不起，没有您要查找的书籍数据！ 二、Web数据库 -7 由CX-SEND.ASP调用CX-BACK.ASP后的屏幕输 出见图。 二、Web数据库 -8 查询结果输出屏幕 您查询的新书单价和库存量 新书代码新书名称单价（元）库存量 1003 人工智能 程序设计 23.3070 二、Web数据库 -9 vWeb服务器上的ASP软件对程序的解释和执行 过程 取得用户传来的新书代码（见程序第6行） Web页面与数据库Tsxt.mdb相边接（见程序8-

19、11 行） 第8-9行，创建一个Connectcon对象 第10行，是打开连接。 第11行，是创建一个记录集对象。 用SQL查询数据库（见第1215行） 在浏览器上显示出查询结果 演示B4 网上图书销售演示系统（见演示光盘 ） 演示B5 工资管理演示系统 （见演示光盘） 第四章 Web开发的基本技术 小结 WWW HTML Frontpage Web 开 发 的 基 本 技 术 通过客户机上的Web浏览器和Web站点上 的Web服务器之间的通信来实现。 Internet用户可以通过Web页面来访问数 据库中的数据。 利用FrontPage这种WEB编程工具可 以做到在几乎不需要编写HTML代码 的情况下，完成网页的制作，并自 动地生成HTML文件。 ASP是位于Web服务器端的脚本运行环 境。通过这种环境，用户可以创建和 运行动态的、交互式的Web服务器应 用程序，实现动态的交互。 交互网页、 ASP动态服 务网页 Web数据库