第 8 章超媒体与 Web 系统

1. 第8章超媒体与Web系统 • 8.1 超媒体系统的组成 • 8.2 Web超媒体系统 • 8.3 智能超媒体系统

2. 8.1 超媒体系统的组成

3. 8.1.1 超媒体的概念和发展历史 • 1. 超文本和超媒体的概念 • 在当今的信息社会，信息以爆炸形式增长，如何来有效的利用这些信息？ • 1950年在计算机普及之前，世界范围内信息量的增长速度是每150年翻一番；随着计算机的广泛应用，1950-1960年间信息量的增长达到每10年翻一番；1960-1992年间缩短为每5年翻一番。人们预计2020年以后信息量每73天就要翻一番。 • 治疗癌症的方法 • 信息的存储与检索机制

4. 文本 • 文本是我们最熟悉的信息表示方式。通常以字、句子、段落、节、章作为文本内容的逻辑单位，以字节、行、页、册、卷为物理单位。 • 最显著的特点是它在组织上是线性的和顺序的 • 人脑的记忆机制 • 人类的记忆是联想式的记忆。 • 网状结构。和线性结构单一路径不同，可能有多条路径。不同的联想检索必然导致不同的路径。 • 冬天-->结冰-->河-->鱼-->宴会-->婚礼 • 冬天-->冷-->太阳-->飞船-->宇航员-->吃饭-->多宝鱼-->农民-->… • 用文本无法管理这种互联的网状信息结构。

5. 8.1.1 超媒体的概念和发展历史 • 超文本（hypertext） • 超文本结构类似于人类这种联想记忆结构，采用一种非线性的网状结构组织块状信息，没有固定的顺序，也不要求读者按照某个顺序来读。 • 超文本把文本按其内部固有的独立性和相关性划分成不同的基本信息块，称为结点（node）；结点之间按它们的自然关联，用链连接成网。 • 超文本的简洁定义： • 超文本是由信息结点和表示信息结点间相关性的链构成的一个具有一定逻辑结构和语义的网络。 • 在超文本信息管理技术中，结点是基本单位。 • 超媒体＝多媒体＋超文本

6. A …..* ..*. B …*.. .*.. C …... * ... D …... .... E …... *.. A B C D E 8.1.1 超媒体的概念和发展历史 图 超文本结构

7. 8.1.1 超媒体的概念和发展历史 • 2. 超媒体的发展简史 • 概念产生时期（1945-1965） • 标志性的事件 • Bush提出Memex（memory extender）， • Engelbart的NLS系统 • Nelson创造Hypertext

8. 8.1.1 超媒体的概念和发展历史 • 鼻祖:美国著名科学家V. Bush(1890-1974) • 1945，“As We May Think”，《大西洋月刊》Memex(Memory extender的缩写,即存储扩充器)设想（ 1932年和1933提出）；

9. 8.1.1 超媒体的概念和发展历史 • 提出设想的原因 • 科学信息量迅速增长：他担心即使是某一门学科的专家也不可能跟踪该学科的发展情况。 • 200多年来印刷技术没有什么突破性的进展，有关共享与表现信息的方法也很少,不敷应用。 • 检索困难：当要查找某一信息时,要遍历所有对象逐一查找，信息的定位繁琐； • Memex是什么？ • 一种专门存储书籍、档案和信件的设备； • 是机械的。

10. 8.1.1 超媒体的概念和发展历史 • 组成与结构 • 信息存在缩微胶片中； • 有一个扫描器输入新的资料； • 可以在页边用手加注释和说明。 • 元素之间链连成对,任意元素都可以随意、迅速而且自动地选择另一元素 • 《时代》和《生活》刊登了Memex模型

11. 8.1.1 超媒体的概念和发展历史 • 先驱者Douglas Engelbart • 受Bush的影响 • 斯坦福研究所开展Augment课题 • Augment Human Intellect扩展人类智力 • 开发一个计算机系统帮助人类思维 • 实验工具NLS(oN-Line System,联机系统) • 1968年,在美国秋季联合计算机会议上作了精彩的表演； • 他利用NLS与500英里外的同事一起建立一超文本文献。 • 有些人认是Engelbart发明了超文本

12. 8.1.1 超媒体的概念和发展历史 • Ted Nelson杜撰了“超文本” • 1960年，毕业后又回到哈佛大学进修“计算机程序设计”； • 他提出了一“文本处理”系统作为课程设计题目； • 60年代末应布朗大学邀请共同研究超文本问题； • 提出了Xanadu系统的设想，撰写超文本研究专著“Xanadu”

13. 8.1.1 超媒体的概念和发展历史 • 概念系统的研究时期（1967-1985） • 1967年, 布朗大学Andy van Dam等研制第一个可运行超文本系统The Hypertext Editing System; • 1968年, Douglas Engelbart在FJCC上演示NLS系统; • 1968年, 布朗大学推出FRESS; • 1975年, CMU推出ZOG(现为KMS); • 1978年, MIT建筑机械组推出第一个超媒体视频盘片系统Aspen Movie Map

14. 8.1.1 超媒体的概念和发展历史 • 成熟与发展时期（1985－ ） • 1985年, Janet Walker研制的Symbolics Document Examiner； • 1985年, 布朗大学推出Intermedia系统,在Macintosh上运行; • 1986年, OWL引入Guide,这是第一个广泛应用的超文本; • 1987年, Xerox公司推出Notecards,苹果公司Bill Atkinson研制Hypercard； • 1991年, 美国Asymetrix公司推出ToolBook系统; • 1990年, 位于日内瓦的欧洲量子物理实验室CERN开发的运行于Internet的WWW系统,对人类社会产生深远影响.

15. 8.1.2 超媒体的组成要素 • 1. 结点 • 结点是超文本表达信息的一个基本单位，其大小可变，结点的内容可以是文本、图形、图像、音频、视频等，也可以是一段程序。 • 结点的表示方法在不同的系统中是不同的。 • 常见的基本类型有： • 媒体类结点 • 动作与操作结点 • 组织结点 • 推理结点

16. 8.1.2 超媒体的组成要素 • 2. 链 • 组成超文本的基本单位，形式上是从一个结点指向另一个结点的指针，本质上表示不同结点上存在着的信息的联系。 • 链定义了超文本的结构并提供浏览和探索结点的能力。 • 比较典型的链型 • 基本结构链 • 基本链，交叉索引链，节点内注释链 • 组织链和推理链 • 索引链，执行链 • 其他链型 • 自动链接，类型链

17. 8.1.2 超媒体的组成要素 • 3. 热标 • 热标是确定信息关联的链源，由它将引起向相关内容的转移。 • 热标的形式一般有： • 热字 －－ ……@图8-1所示|Example.jpg@ … … • 热区 －－ 在图像中直接指明。矩形，多边形 • 热元 －－ 图元 • 热点 －－ 时基类媒体，[b，a，c] • 热属性 －－ 数据库中的属性作为热源

18. 8.1.2 超媒体的组成要素 • 4. 宏节点 • 链接在一起的结点群，更确切的说，一个宏结点就是超文本网络的一部分（有某种共同特征的子集） • 分层是简化网络拓扑结构最有效的方法 • 宏文本和微文本: 表示不同层次的超文本。 • 微文本又称小型超文本, 它支持对结点信息的浏览; • 宏文本又称大型超文本,支持对宏结点的查找与索引。 • 宏结点的引入虽然简化了网络结构, 却增加了管理与检索的层次。

19. 8.1.2 超媒体的组成要素 图 宏结点

20. 8.1.3 超媒体系统的Dexter模型 • 目标 • 为开发分布信息之间的交互操作和信息共享提供一种标准或者参考规范。 • Dexter模型分为三层： • 存储层 • 运行层 • 元素内部层 • 各层之间通过两个接口： • 锚定接口 • 表现规范

21. 8.1.3 超媒体系统的Dexter模型 • 存储层 • 描述成员之间的网状关系。 • 成员描述系统的基本对象,包括结点和链等。 • 原子成员是最小成员单位,也即超文本中的结点,其内容可为不同媒体的信息。 • 复合成员是具有嵌套层次的成员,由原子成员和链复合而成。 • 链是表示元素与元素之间关系的一种实体。一般由两个或多个成员“结点”构成。

22. 8.1.3 超媒体系统的Dexter模型 • 存储层（续） • 每个成员都有一个唯一的标识符，称为UID。 • 超文本由一个有限个成员组成的集合和2个函数构成。 • Hypertext = (E1, E2, …, En, F1, F2) • F1, F2是用于检索定位的函数，分别称为访问函数和分解函数。 • 定义了由多个函数组成的操作集合，用于实时地对超文本系统进行访问和修改。

23. 8.1.3 超媒体系统的Dexter模型 • 元素内部层 • 描述超文本中各个成员的内容和结构，对应于各个媒体单个应用成员。 • 从结构上分为 • 简单结构 • 复杂结构 • 简单结构就是每个成员内部仅由同一种数据媒体构成 • 复杂结构的成员内部又由各个子成员构成。这种嵌套结构的成员定义为描述复杂的混和类型成员提供了灵活性。

24. 8.1.3 超媒体系统的Dexter模型 • 运行层 • 支持用户和超文本交互作用的机制，可直接访问和操作在存储层和成员内部层定义的网状数据模型。 • 定位机制 • 通过锚定接口完成 • 其基本成分是锚（anchor），锚由两部分组成： • 锚号和锚值。 • 锚和链的差别在于链仅指向元素，而锚可指向成员内的具体内容。 • 表现规范 • 规定了同一数据呈现给用户的不同表现性质

25. 8.2 Web超媒体系统

26. 8.2.1 分布式超媒体系统www • WWW采用客户/服务期体系结构 • Web超文本系统可以分为三层结构 • 表现层，即用户接口层 • 由运行在用户计算机上的客户浏览器管理 • 超文本抽象机层：存储节点和链 • 由HTML和HTTP组成 • 超文本信息库层：存储数据，共享数据和网络访问 • 由Internet上遍及全球的称为“服务器”的计算机组成

27. 8.2.2 www中的超媒体协议与标记语言 • 1. HTTP：超文本传输协议 • HTTP的运作方式

28. 8.2.2 www中的超媒体协议与标记语言 • HTTP的消息结构 • 客户发出的请求消息 • 请求消息＝请求行* （通用消息头|请求头|实体头）CRLF[实体内容] • 请求行＝方法 请求URL HTTP版本号 CRLF • 方法＝“GET”|“HEAD”|“POST”|扩展方法 • URL＝协议名称＋宿主名＋目录与文件名

29. 8.2.2 www中的超媒体协议与标记语言 • HTTP的消息结构（续） • 服务器发出的响应消息 • 响应消息＝状态行*（通用消息头|响应头|实体头） CRLF[实体内容] • 状态行＝HTTP版本号 状态码 原因叙述 • 1××：表示保留，HTTP未用 • 2××：表示请求成功地接收 • 3××：表示为了完成请求，客户必须进一步细化请求 • 4××：表示客户错误 • 5××：表示服务器错误

30. 8.2.2 www中的超媒体协议与标记语言 • 2. HTML：超文本标记语言 • WWW基本概念 • HTML基本概念 • HTML文字排版格式 • HTML标题格式 • HTML字体 • HTML表格

31. 8.2.2 www中的超媒体协议与标记语言 • WWW的基本概念 • WWW也就是World Wide Web，俗称万维网，或环球信息网，也有简称为3w，Web等。 • WWW是一个基于超文本方式的信息查询工具。它利用链接从一个站点到达另一个站点，并提供一种友好的信息查询接口，即用户仅需提出查询要求，而到什么地方查询及如何查询则由WWW自动完成。 • WWW的信息查询主要靠网页来完成，网页采用超文本标记语言（HTML）格式写成，可为WWW浏览器识别显示。

32. 8.2.2 www中的超媒体协议与标记语言 • 网页制作的目标 • 内容丰富，速度快，页面漂亮，经常维护更新。 • 信息的组织 • 主要是根据信息的特点来确定其组织的形式，现在网页的制作中主要流行帧结构(Frame)。 • 网页制作语言 • 网页开发都用HTML语言，必要时可嵌入一些脚本语言来增强功能，如JavaScript，VBScript等。 • 网页制作工具 • 理论上，只要一个记事本即可，现在出现了很多集成化工具，如Frontpage，DreamWeaver, Netscape编辑器等

33. 8.2.2 WWW中的超媒体协议与标记语言 • 什么是HTML • HTML即超文本标记语言（Hypertext Makeup Language）一种利用专用符号以显示某些特征或功能的超文字的语言。 • HTML被广泛用于创建存储在WWW服务器和客户端的多媒体文档，并能被浏览器解释浏览。 • HTML不需要专门的编辑器。HTML所生成的文档是解释执行的，可以用任何文本编辑器来完成超文本文档的制作。

34. 8.2.2 WWW中的超媒体协议与标记语言 • HTML的模板文件形式如下： <HTML> HTML文件起始标志，表示以下为HTML文件 <HEAD> HTML文件头开始标志 <TITLE>…</TITLE> 之间是文件标题 … </HEAD> HTML文件头结束标志 <BODY> …</BODY> 文件主体结束标志，表示文件主体到此结束 </HTML> HTML文件结尾标志

35. 8.2.2 WWW中的超媒体协议与标记语言 • 就上面所讲的模板举一个简单的例子： <HTML> <HEAD> <TITLE>Hello World Page</TITLE> </HEAD> <BODY> Hello World! </BODY> </HTML>

36. 8.2.2 WWW中的超媒体协议与标记语言 图 一个简单的HTML实例

37. 8.2.2 WWW中的超媒体协议与标记语言 • 排版标签 • <BR>---------文字转行 ………....….….<BR> • <P>------------段落 ……………..…..<P> • <PRE>-------原始文字样式 <PRE>…….</PRE> • <CENTER>------居中对齐 <CENTER>…</CENTER>

38. 8.2.2 WWW中的超媒体协议与标记语言 • 文字换行标签格式 …...<BR> • 一个无<BR>标签的例子 <HTML> <HEAD> <TITLE>普通格式的文件</TITLE> </HEAD> <BODY> 空山不见人 但闻人语声 反景赴山林 复照青苔上 </BODY> </HTML>

39. 8.2.2 WWW中的超媒体协议与标记语言 图 无<BR>标签实例图

40. 8.2.2 WWW中的超媒体协议与标记语言 • 带<BR>标签实例 <HTML> <HEAD> <TITLE>文字转行标签的应用</TITLE> </HEAD> <BODY> 空山不见人<BR> 但闻人语声<BR> 反景赴山林<BR> 复照青苔上<BR> </BODY> </HTML>

41. 8.2.2 WWW中的超媒体协议与标记语言 图 有<BR>标签实例图

42. 8.2.2 WWW中的超媒体协议与标记语言 • <BR>标签作用 • 由浏览器看到的文字转行方式跟编辑的HTML文件不同，当浏览器读入HTML文件时，只会判别标签及其文字，并不会判别Enter键，所以文字会同一行输出。 • 文字转行标签的作用在于强迫文字转行，使文字按用户的意思转行，而不会因浏览器窗口的大小而打乱顺序。

43. 8.2.2 WWW中的超媒体协议与标记语言 • 段落格式 ………<P> • 作用：段落标签<P>出现的位置会有一个空白行出现。 • 文件实例：

44. 8.2.2 WWW中的超媒体协议与标记语言 <HTML> <HEAD> <TITLE>段落标签</TITLE> </HEAD> <BODY> 空山不见人<BR> 但闻人语声<BR> 反景赴山林<BR> 复照青苔上<P> 朝辞白帝彩云间<BR> 千里江陵一日还<BR> 两岸猿声啼不住<BR> 轻舟已过万重山<P> </BODY> </HTML>

45. 8.2.2 WWW中的超媒体协议与标记语言 图 带<P>标签文件实例

46. 8.2.2 WWW中的超媒体协议与标记语言 • 原始文字样式格式 <PRE>…….</PRE> • 下面我们先看一个无<PRE>标签的例子 <HTML> <HEAD> <TITLE>文字转行</TITLE> </HEAD> <BODY> 李白<BR> 朝辞白帝彩云间<BR> 千里江陵一日还<BR> 两岸猿声啼不住<BR> 轻舟已过万重山<BR> </BODY> </HTML>

47. 8.2.2 WWW中的超媒体协议与标记语言 图 不带<PRE>标签文件实例图

48. 8.2.2 WWW中的超媒体协议与标记语言 • 一个带<PRE>标签的例子 <HTML> <HEAD> <TITLE>带有PRE标签的例子</TITLE> </HEAD> <BODY> <PRE> 李白 朝辞白帝彩云间 千里江陵一日还 两岸猿声啼不住 轻舟已过万重山 </PRE> </BODY> </HTML>

49. 8.2.2 WWW中的超媒体协议与标记语言 图 带<PRE>标签文件实例图

50. 8.2.2 WWW中的超媒体协议与标记语言 • <PRE>标签作用 • 浏览器无法判别超过一个以上的半角空白字符，因而“李白”文字前的空格不被识别。 • <PRE>的作用是使得文件在浏览器中所呈现的效果与在编辑器中看到的一样，即“所见即所得”，并省略了每一行输入<BR>的麻烦。