第7章-超文本与超媒体技术

7.1概述7.2超文本的组成要素7.3超文本标记语言7.4超媒体系统7.5本章小结第7章超文本与超媒体技术7.1概述超文本可以简单地定义为收集、存储和浏览离散信息，以及建立和表示信息之间关系的技术。它采用一种非线性的网状结构组织块状信息，没有固定的顺序，也不要求读者必须按某个顺序来阅读。超文本由节点与超链组成，由于超链的作用，文本的阅读可以跳转。超文本具有以下特点：7.1概述多媒体信息可以包含文本、图形、图像、动画、音频和视频等多种媒体信息网络结构形式按照信息在现实世界中的自然联系以及人们的逻辑思维方式有机的组织信息，使其表达的信息更加接近现实生活。交互特征交互性是人们在浏览超文本时最重要的动态特征。7.2超文本的组成要素7.2.1节点7.2.2链7.2.3网络7.2.4宏节点7.2.5热标7.2.1节点节点是表达信息的基本单位，可以是文本、图像、视频、音频、动画或一段计算机程序等各种媒体信息以及它们的组合，其内容还包括对媒体数据属性的描述和表现方法。节点可以按不同方式分类(1)按照表现形式可分为两类：基于框架和基于窗口。(2)按照结构可分为原子节点、复合节点和包含节点。(3)按照状态可分为静态节点和动态节点。(4)按照用途可分为操作型、组织型和推理型三类节点。7.2.2链链，又称超链(HyperLink)，是超媒体的组成部分。它将节点链接在一起，描述节点之间的关系。链具有方向性，由三个部分组成：链源、链宿以及链的属性。一个链的起端称为链源，表现为一个节点中的“点”或“域”，通过它可以访问另一节点，是导致节点信息迁移的原因。链宿是链的目的，一般指节点，也可以是其他媒体对象。链的属性决定链的类型，这是链的主要特性，另外还有一般属性，如链的类型、版本和权限等。当链的属性很强时，链可以作为独立的实体，如类型链等。链还可以分为显形链和隐形链，基本结构链和索引链属于显形链。7.2.2链根据超链的特点及功能，链可以分为基本结构链、组织链和推理链三大类型。（1）基本结构链：是一种由超媒体系统作者事先说明的，具有固定明确特点的实链。基本结构链又可以分为基本链、交叉索引链和节点内注释链三种类型。（2）组织链和推理链组织链和推理链可以分为索引链、蕴含链和执行链。基本结构链基本链用来建立节点之间基本顺序的链，它使信息在总体上呈现出层次结构。基本链的链源和链宿都是节点，它决定节点的固定顺序。基本链又可以分为：顺序链、结构链、查询链、移动链、缩放链、全景链和视图链。顺序链是将超文本或者超媒体节点按最基本的先后顺序排成一个队列。各节点之间呈现出线性结构。基本结构链交叉索引链将节点连结成交叉的网状结构组织链和推理链组织链和推理链可以分为索引链、蕴含链和执行链。索引链将用户从一个索引节点引到该节点相应的索引入口。索引用于与数据库的接口及查找共享同一索引项的文献。蕴含链用于连接推理树中的事实。执行链是一种将执行活动与按钮节点相连的特殊节点。推理链是一种虚链或称之为动态链。7.2.3网络超文本信息网络是由节点和链构成的一个有向信息网络，这种信息网络类似于人工智能中的语义网络，语义网是一种知识表示方法，其中节点表示概念，而节点之间的弧表示两个概念之间的关系。超媒体中的网络结构不仅仅提供了知识、信息，同时还包含对知识信息的分析和推理。如果网络中节点内不仅有文本，而且还包含有图形、动画、声音及它们的组合等多种信息，即为超媒体网络。7.2.4宏节点宏节点是指链接在一起的节点群。准确地说，一个宏节点就是超文本网络的一部分，即子网（Web）。宏文本和微文本表示不同层次的超文本。微文本也称小型文本，支持对节点信息的浏览；宏文本也称大型超文本，支持对文献（宏节点）的查找与索引，它强调存在于许多文献之间的链，可以跨越文献进行查询和检索。在计算机网络中，很多超媒体的Web网分散在多台计算机中，这些Web网称为宏节点或者文献，它们之间通过跨越计算机网络的链进行链接。计算机网络宏节点的一种表示(图)宏节点宏节点宏节点计算机网络7.2.5热标热标是超媒体中特有的元素，它确定相关信息的链源，通过它可以引起相关内容的转移。热标可分为热字、热区、热元、热点和热属性五类热字热字往往存在于文本当中，把需要进一步解释和含有特殊含义的字、词或词组做成带下划线和特别颜色，与其他内容区别开来，而各保留字和转移目的却不显示出来，读者通过点击这些热字可得到进一步的解释和说明。据了解，目前广东铁青已率先推出了前往包头，途经呼和浩特的火车旅游路线――“内蒙响沙湾、山西太原、平遥古城、云岗石窟、五台山空调双卧9天”，7.2.5热标热区热区是在图像等静态视觉媒体节点中某一感兴趣的区域，作为触发转移的源点。通常使鼠标标志在进入热区时变形为一种多边形，用户便知道可以转移到另一幅能够更详尽地描述当前图像部位的新图片。下图所示就是网页中一幅由分为多个热区的地图，对于不同的省份，对应的地方就是一个热区，当单击某个热区时，就会打开对应省份的详细信息的目标节点。7.2.5热标热元主要用于图形节点。由于图形的最基本单位是图元(如一个图、一条线、一个圆等)，当图形在超媒体页面中移动时，图元跟着移动。如果为了在另一幅图形中详细描述本图形的某一部分，便可用热元的形式与转换的目标图形相链接。热元在CAD工程设计中的建筑图注释、机器设备联机维护手册等方面有广泛的用途。7.2.5热标下图则是网页上利用图像作为一组热元的示例，单击某一个图片就可以打开相应的目标节点窗口。7.2.5热标热点热点是对于具有时间特性的媒体节点而言的，如动画、视频、声音节点，如果用户对其中某一段时间内的信息感兴趣，就记录下这段时间的起止，把这一段（或几帧）信息称为热点。比如有一段视频影像介绍黄山上的四季美景。用户想要了解仲秋时节景象，可在时间轴上设定一个[b,a,c]的敏感区间，其中a为仲秋时节，b、a、c按时间顺序排列。那么，用户触发了[b,a,c]区间内任一点都有效，都可以调出仲秋附近季节黄山的景色7.2.5热标热属性热属性是将关系数据库中的属性作为热标来使用。由于数据媒体是一种特定的格式化符号数据，故可把热标定为一个属性，用特定的保留属性字方法指明热标触发后表现的内容。如用IMAGE属性表示后继各元组中该属性字符为图像对象名。属性中的元组有多个，每个元组又对应不同的内容，所以在把属性当作热标时，要对每一个元组都指明不同的链。7.3超文本标记语言7.3.1超文本标记语言HTML1.HTML基本语法2.HTML特点3.HTML的应用7.3.2XML1.概述2.XML的基本组成超文本标记语言HTMLHTML基本语法:控制命令用括起来。主要标记有：文件头。文件体。标题头(Heading)。文本块结构(BlockStructuringElement)。列表结构ListElement。锚元素Anchor。嵌入图像标记。表格标记Table。输入表标记。分割窗口标记。换行符。水平线。超文本标记语言HTMLHTML特点(1)创建和实现独立于平台的文档(2)与Internet上其他文档相连接(3)页面包括图形和多媒体(4)能够链接Internet上的其他资源超文本标记语言HTMLHTML的应用一个多媒体网页中可能包括背景、文本内容、表格、背景音乐、音乐链接、视频链接、嵌入的图像或图像链接等，表现力十分丰富。HTML用于对多媒体信息进行组织并以网页形式展示给用户。目前在互联网上的大多数网页是由HTML编写的。利用HTML建立网页，可以使用任意一个文本编辑器或专用软件，这里以DreamwaverMX2004为工具，介绍HTML在网页制作中的使用方法，如文本展示、插入表格、音频、视频等多媒体信息。HTML的应用每一个网页都具有如下的基本形式：htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312title无标题文档/title/headbody/body/htmlHTML的应用(1)在网页中展示不同效果的文本信息(2)在网页中插入带边框的图象(3)在网页中插入音乐(4)在网页中插入视频(5)在网页中插入表格网页中置入文本内容可在body…/body标记插入以下代码：tabletrtdwidth=200/tdpbrpbrfontstyle=color:red;font-family:courier;font-size:20pt;font-style:italic;font-weight:bold;text-decoration:blink;background-color:black;face=宋体br文本内容br各种文字效果。br/font/p/table网页中置入文本内容保存并在InternetExplorer中运行，得到如下图所示的显示结果。在网页中插入动态文字可在body…/body标记插入以下代码：pfontstyle=color:red;font-size:20pt;font-style:italic;font-weight:bold;face:宋体;text-decoration:blinkmarqueedirection=upbehavior=scrollscrollamount=2align=middlebgcolor=greenheight=80width=80开/marqueefontstyle=color:red;font-size:20pt;font-style:italic;font-weight:bold;face:宋体;text-decoration:blinkmarqueedirection=upbehavior=scrollscrollamount=2align=middlebgcolor=greenheight=80width=80心/marqueefontstyle=color:black;font-size:20pt;font-style:italic;font-weight:bold;face:宋体在网页中插入动态文字marqueedirection=downbehavior=scrollscrollamount=3align=middlebgcolor=greenheight=80width=80每/marqueefontstyle=color:white;font-size:20pt;font-style:italic;font-weight:bold;face:宋体marqueedirection=downbehavior=scrollscrollamount=3align=middlebgcolor=greenheight=80width=80一/marqueefontstyle=color:yellow;font-size:20pt;font-style:italic;font-weight:bold;face:宋体在网页中插入动态文字marqueedirection=downbehavior=scrollscrollamount=3align=middlebgcolor=greenheight=80width=80天/marquee/font/font/font/font/font保存并在InternetExplorer中运行，得到如图7.9所示的显示结果。在本例中，如果改变direction中标记的值，可改变文字移动的方向。其中up为向上移动，down表示向下，left表示向左，right表示向右。在网页中插入带边框的图象可在body…/body标记插入以下代码：divalign=centertablebordercolor=#000