超文本与超媒体技术

超文本与超媒体技术本章内容提要掌握超文本、超媒体的基本知识掌握超媒体、流媒体的基本概念了解超媒体系统的构成了解Web超媒体系统的构成掌握动态网页制作技术本章教学目的要求：掌握超文本和超媒体基本知识，了解超媒体系统的构成，掌握动态网页制作技术。本章教学重点：掌握动态网页制作技术。10/30/2023§7.1超文本1引言文本：人类最熟悉的一种信息表示方式。文章、程序、书、文件等等都是以文本出现的，一般以字、句子、段落、节、章作为文本内容的基本逻辑单位，以字节、行、页、册、卷为基本物理存储单位。文本的特点：它在组织上是采用线性的和顺序的结构。阅读文本时只能按固定的线性顺序一字一字、一句一句、一行一行、一段一段、一页一页、一页一页、一章一章地阅读下去。人类记忆特点：不是采用简单的线性顺序结构，而是采用一种联想式的非线性顺序方式的记忆，这种非线性顺序方式构成了人类记忆的“网状”结构，类似于“互联网网状”结构，从一个结点到其它任何结点的路径不仅只有一条，可能存在多条路径，因此，不同的联想检索方式必然导致不同的路径。2002-2-810:54AM例如：对“夏天”一词，某人可能会产生如下联想，“夏天→山洪→洪灾→大船→大海→海鱼→饭→饭盒→餐具→银器→戒指→婚礼→婚纱→雪”。在另一时间或另一个人，同样对“夏天”这个词可能会产生另一种联想，“夏天→太阳→热→空调→夜晚→星空→星星→望远镜→伽利略→比萨→斜塔→意大利→米兰→AC米兰→国际米兰→足球德比大赛”。

结论：用文本是无法管理这种互联网网状的信息结构，必须采用一种更高级的信息管理技术来模拟人脑的这种信息存储与检索机制。这就是超文本技术。2002-2-810:54AM2超文本结构超文本(Hypertext)结构：类似于“互联网网状”式的联想记忆结构，它采用一种非线性的网状结构来组织信息，没有固定的顺序，也不要求读者按某个顺序来阅读。超文本组成：把文本按其内部固有的独立性和相关性划分成不同的基本信息块，这种信息块称结点(node)，如卷、文件、帧或更小的信息单位。结点之间按照它们的自然关联，用链连接成网，链的起点称锚结点(anchornode)，终止结点称目的结点如图所示的一个超文本结构，表现的是从“录音与播放”开始产生的联想式的信息组织结构，显然这种文本组织方式与人类的思维方式和工作方式比较接近，更易便于人类学习知识和掌握知识。图7.1小型超文本结构示意图2002-2-810:54AM3超文本超文本：由信息结点和表示信息结点间相关性的链构成的一个具有逻辑结构和语义的网络。结点：是超文本的最基本单位。抽象地说，是一个信息块，具体地说，是某一字符文本集合，也可以是屏幕中某一大小的显示区，它比字符高出一个层次。因此，结点大小是不确定的、可变的，它是由实际条件决定的。超文本的特点：是一种文本；是一种组织文本内容的方法，即让技术能够象人脑思维一样响应和方便获取需要的文本内容。2002-2-810:54AM超文本系统：能对超文本进行管理和使用的系统称为超文本系统。超文本与超文本系统的关系与数据库与数据库管理系统的关系相似。超文本系统的特点：在用户界面中，包括对超文本的网络结构的一个显式表示，即向用户展示结点和链的形式。给用户一个网络结构的动态总貌图，使用户在每时都可得到当前结点的邻接环境。超文本系统一般使用双向链，这种链应支持跨越各种计算机网络，如局域网和因特网。用户可以通过自己的联想和感知，根据自己的需要动态地改变网络中的结点和链，以便对网络中的信息进行快速、直观、灵活的访问，比如浏览、查询、标注等等。尽可能不依赖它的具体特性、命令或信息结构，而更多地强调它的用户界面的“视觉和感觉”。

2002-2-810:54AM超链接(HypertextLink)：就是将一个超文本中的元素与自身或其它朝文本的一个元素链接在一起，这里的元素可以是一个基本单词、短语、图形、图像、表格，甚至是超文本的结点、和另一个超文本，所以也称为超文本链接，简称超链接、链接。4超文本的基本结构⑴结点(Node)结点：是超文本表达信息的一个基本单位，它是围绕一个特殊主题组织起来的数据集合，结点的大小是可变的，其内容可以是文本、图像、图形、音频、视频等多媒体数据，甚至可以是一段程序或一个文档。注意：结点表示方法在不同的超文本系统中是不同的。如在HyperCard中的结点用卡片来表示，而每张卡片又由字段、按钮、图形等组成。又比如在因特网中，结点是由不同的Web页面所组成的。2002-2-810:54AM结点的类型：不同类型的结点表示的信息也不同。常见的基本类型的结点有：文本结点：由文本或其片断组成。图形结点：可以是用系统提供的工具绘制的一幅图形或其中的一部分，还可以包括图形的性质。图像结点：用扫描仪或摄像机输入的一幅图像，并包括其性质。视频结点：由电视机、摄像机、录像机等获取的视频信息。声音结点：可以是一段录音或合成的声音。混合媒体结点：上述结点的某种组合，在许多情形中，相关信息可以通过结点的连接来表示，也可以由单个的混合结点来表示。按钮结点：按钮是执行某一过程，而按钮结点是表示某过程的执行结果。注意：上述7个结点只表示信息而不表示知识。2002-2-810:54AM在超文本系统还存在一些可以表示结点组织和推理类型的结点：索引文本结点：包含了指引索引结点的链，索引是描述结点组织的一种方法。索引结点：由单个索引项组成，包含连接指向整个索引项表示的概念的定义；连接指向相关项或同义语；连接指向对应于多个关系表中的相同列的连接；连接指向引用它们的索引文本结点等等。对象结点：它用于描述对象，由描述对象的诸如属性、行为、方法、类、继承等组成，同时还可以附加一些过程，表示“是一个……”，能够指明对象结点中的某类成员。它同下面的类链、语义链一起可以用来表现知识的结构、分类等等。规则结点：这种结点存放规则，指明符合规则的对象，判定规则是否被使用以及规则解释说明等等。2002-2-810:54AM⑵链(link)链：是组成超文本的基本单位，形式上是从一个结点指向另一个结点的指针，本质上表示不同结点上存在着的内在联系。链定义了超文本的结构并提供浏览和探索结点的能力。链和结点可以存储在一起，使链嵌于结点中，也可以分开单独存储。链有如下几种类型：基本链：用来建立结点之间的基本顺序，它们使结点信息在总体上呈现为某一层次结构，如一本书的章、节、小节等。交叉链：这些链能交叉链接到相关的结点，从而组成一个网状结构，能起到一种超文本的导航作用。缩放链：这些链可以扩大当前结点，让结点按照一定规则显示个数可变的结点集或内容是可变的结点等等，类似于windows的资源管理器中的目录结构“+”、“-”缩放功能。全景链：这些链将返回超文本系统的最高层，与缩放链相对应，类似于文章的目录结构。2002-2-810:54AM视图链、也称注释链：这些链的作用依赖于用户使用的目的，它们常常被用来实现可靠性和安全性。除开上述用于导航和检索信息的链以外，还存在下面的涉及结点或组织与推理的链：索引链：这些链实现结点中的“点”、“域”之间的连接。链的起始点称为锚，终止点称为目的，通常为结点或结点中的“域”。双向链：一种支持跨越各种计算机网络(比如局域网、Internet、Intranet等等)的链接结构。对象链：是组织链的一种。类似于分类，表示“是一个……”，它用于指明对象结点中的某类成员。语义链：是组织链的一种。表示“有一个…”，用于描述结点的性质或定义。执行链、也称按钮链、控制链：是一种特殊的组织链，提供超文本系统与高级程序设计接口，触发执行链，结果是触发一段代码并运行。蕴含链、也称推理链：这些链用于推理树中事实的连接，它们通常等价于规则。2002-2-810:54AM3宏结点宏结点：就是链接在一起的结点群。确切地讲，一个宏结点就是超文本系统中的一部分、即子系统，如图7-2所示。微文本又称小超文本：就是支持对结点信息的浏览。宏文本也称大超文本：就是支持对宏结点(比如文献)的查找与索引。它强调存在于许多文献之间的链，构造出文献相互间的关系，查询与检索将跨越宏结点(如文献)进行。从概念或定量来讲，这里的大小是不存在严格意义的划分的，也就是说宏文本与微文本之间的界限不是十分明确而是模糊的，但在实际应用中这个界限能一目了然。宏结点的用途：当超文本系统巨大时，或按照分布式方式存储在不同地点时，宏结点的引入虽然简化了网络结构，提高了知识管理的效率。因为通过宏节点可以实现分层，而分层是简化系统网络拓扑结构最有效的方法和手段，但是，同时也增大了管理与检索的层次。2002-2-810:54AM综上所述，超文本系统的结构主要包含了三个内容：超文本的存储、超文本的组织和管理、超文本的呈现，如图7-3所示。图7.2一个宏结点的结构示意图图7.3超文本系统的结构图2002-2-810:54AM§7.2超文本7.2.1超媒体历史：由于历史的原因和计算机能力的限制，第一代超文本系统处理信息的对象还停留在文字和数值信息阶段

。现状：随着多媒体技术的发展，以文本、图形、声音、动画、图像、视频等结合在一起的结点产生了，且更具魅力，这就是第二代超文本系统。为强调第二代超文本系统所具有的处理多媒体信息的能力和媒体之间的网状链接结构，称之为超媒体(Hypermedia)，而能够实现对超媒体进行管理和使用的系统称为超媒体系统。超媒体是在超文本的关系：超媒体是在超文本的基础上发展起来的，不同之处主要是表示对象的范围不同。超文本仅能表示文字信息，而超媒体可表示多媒体数据。但是，从研究内容来看，超文本与超媒体是很难区别的。发展趋势：参见教材本节。2002-2-810:54AM7.2.2流媒体1概念流媒体(StreamingMedia)技术是目前流行的多媒体技术，其基础是多媒体通信技术。是指通过Internet网络传送媒体(如视频、音频等)的技术总称。它包括流媒体数据采集、视/音频编解码、存储、传输、播放等领域。广义来讲，是使音频和视频形成稳定和连续的传输流和回放流的一系列技术、方法和协议的总称。狭义来讲，是相对于传统的下载-回放(Download-Playback)方式而言一种新的从Internet上获得音频和视频等流媒体数据的方式，这种方式支持多媒体数据流的实时传输和实时播放，客户可以边接收边播放，使延时大大减少。2002-2-810:54AM主要两种网络上传播多媒体信息的方式：下载和流式传输。下载方式是传统传输方式，而流式传输则把多媒体信息通过服务器向用户实时地提供，用户不必等到整个文件全部下载完毕，而只需经过几秒或几十秒启动延时即可播放，之后，客户端就可边接收数据边播放。流式传输具有的显著优点：一是大大地缩短了启动延时，同时也降低了对缓存容量的需求；二是实现现场直播形式的实时数据传输，其使用效果上几乎就是实时性的。2流媒体传输流程①在浏览器与服务器间通过通讯协议交换控制信息，以便把需要传输的实时数据从原始信息中检索出来。②用HTTP从Web服务器检索相关数据，初始化音频/视频播放器③按照Web服务器检索出来的相关服务器地址，定位音频/视频服务器。④播放器与服务器之间交换音频/视频传输所需实时控制协议。⑤一旦音频/视频数据抵达客户端，音频/视频播放器就可播放。2002-2-810:54AM3流媒体的传输方式流媒体的传输，即通过Internet将影视节目传送到PC机。实现流式传输有两种方法：⑴顺序流式传输：顺序流式传输就是顺序下载，用户可以观看在线媒体。但是，在给定时刻，用户只能观看已下载的那部分，而不能跳到还未下载的前部分；它不能根据用户的连接速度做调整。由于标准的HTTP服务器可发送这种形式的文件，而不需要其他特殊协议，它经常被称作HTTP流式传输。特点：顺序流式传输方式适合高质量的短片段，不支持现场广播，严格说来，它是一种点播技术；顺序流式文件是放在标准HTTP或FTP服务器上，易于管理，基本上与防火墙无关；顺序流式传输不适合长片段和有随机访问要求的视频、讲座、演说与演示。2002-2-810:54AM⑵实时流式传输：指保证媒体信号带宽与网络连接相匹配，使媒体可被实时观看到。实时流与HTTP流式传输不同，需要专用的流媒体服务器与传输协议。特别适合现场事件，也支持随机访问，用户可快进或后退以观看前面或后面的内容。理论上，实时流一经播放就可不停地收看，但实际上，可能会发生周期暂停。⑶二者比较①从视频质量上讲，实时流式传输必须匹配连接带宽，如网络拥挤或出现问题时，视频质量会很差；而顺序流式传输能保证质量②实时流式传输需要特定服务器，因而系统设置、管理比标准HTTP服务器更复杂。③实时流式传输需要特殊网络协议。TCP需要较多的开销，故不太适合传输实时数据，流式传输一般采用流媒体多层协议，用HTTP/TCP或RTCP来传输流媒体的控制信息，而用RTP/UDP来实时传输流媒体。4流媒体的应用：参见教材。2002-2-810:54AM7.3超媒体系统的构成基本构成：超媒体系统作为一个复杂的多媒体信息管理系统，其基本的构成成分类似于超文本系统，主要包括结点、链、宏结点以及结点内的多媒体数据。

认识的基本思想：超媒体系统实际上是一个比较复杂的系统，通常采用分层的方法简化它。主要有以下几种基于层次的结构模型：图7.4超文本抽象机模型图1HAM模型HAM(超文本抽象机)模型是把超文本系统划分为三个层次：用户界面层、超文本抽象机层、数据库层。如图所示。2002-2-810:54AM⑴数据库层数据库层提供存储、共享数据和网络访问功能，处于模型的最低层，用于处理所有信息存储中的传统问题。基本要求：数据库层需要保证信息的存取操作的透明性。数据库层还要能处理其它传统的数据库管理问题。⑵超文本抽象机层超文本抽象机层是模型的中间层，它决定了超文本系统结点和链的基本特点，记录了结点之间的链的关系，并保存了有关结点和链的结构信息。基本要求：超文本系统还没有同样的标准，但需要给定标准的信息转换格式。作用：超文本抽象机层可理解为超文本概念模式，它提供了对数据库下层的透明性和对上层用户界面的标准性。通过它建立接口，达到两个层次的顺利通讯。2002-2-810:54AM⑶用户界面层用户界面层又称为表现层，它构成超文本系统特殊性的重要表现，并直接影响超文本系统的成功。它具有简明、直观、生动、灵活、方便等特点。用户界面层涉及超文本抽象机层中信息的表现，包括：用户可以使用的命令，超文本抽象机层信息(结点和链)如何展示，是否要包括总体概貌图来表示信息的组织，以便及时告知用户当前所处的位置等等。2002-2-810:54AM2Dexter模型(自学)Dexter模型的目标是开发分布信息之间的交互操作和信息共享提供一种标准或参考规范。Dexter模型也分三层，即存储层、运行层和内部成员层，各层之间通过定义好的接口相互连接。图7.5Dexter模型图2002-2-810:54AM图7.6C/S结构图2002-2-810:54AM2002-2-810:54AM2002-2-810:54AM2002-2-810:54AM图7.7SGML元素结构图图7.8SGML元素实例book类图2002-2-810:54AM2002-2-810:54AM实例，利用文本编辑器编写如下代码，以扩展名HTM或HTML保存，并在安装了IE浏览器的计算机上运行。<HTML><HEAD><TITLE>简单的HTML例子</TITLE></HEAD><BODYBGCOLOR=“#fffffff”TEXT=“660000”><P>欢迎使用HTML语言</P></BODY></HTML><!程序结束>说明：<!程序结束>是注释语句，不对程序产生影响。2002-2-810:54AM⑵标记命令①小标题实例:源代码<HTML><HEAD><TITLE>实例</TITLE></HEAD><BODY><H1>|第一级：1标记效果|</H1>……</BODY></HTML>2002-2-810:54AM②段落HTML语言中采用<BR>或<P>作为段落标志。其中：<BR>=指定其后的文本另外起行；<P>=指定其后的文本另外起行，并且还要空一行；<HR>=画一条水平线，起分割段落的作用。实例：源代码<HTML><HEAD><TITLE>水平尺线标记</TITLE></HEAD><BODY>看看下面这几条线<P>1厚度(或高度)为50的线段(或矩形)<BR><HRSIZE=50>2长度为80的线段<BR><HRWIDTH=80>3长度为40的线段，位置居右<BR><HRWIDTH=40ALIGN=RIGHT>4水平线<BR><HRNOSHADE></BODY></HTML>2002-2-810:54AM③列表HTML语言中可采用带序号或不带序号两种列表格式。<OL>=标记注明；<UL>=标记注明；<LI>=列表中的每一项总是以它开头。实例：源代码<HTML><HEAD><TITLE>一个基本表格</TITLE></HEAD><BODY><!--表格开始--><PALIGN=CENTER><TABLEBORDER="1"><!--表头--><CAPTION>昨天三个路口的交通情况</CAPTION><!-表的第一行--><TR><TH>路口名称</TH><TH>有无堵车</TH><TH>有无事故</TH><TH>有无违章</TH></TR></BODY></HTML>2002-2-810:54AM④文字修饰HTML语言中可以对文字进行修饰。其中：<B>=指定其后的文本为黑体；<I>=指定其后的文本为斜体；<EM>=强调其后的文本，以醒目显示；<FONTSIZE=“5”COLOR=“RED”>=指定其后文本的字体尺寸、颜色。实例7-1.Htm源代码<HTML><HEAD><TITLE>文字修饰实例</TITLE></HEAD><BODY><FONTSIZE="7"COLOR="red"><PALIGN=CENTER><EM><B>静夜思</B></EM></P></FONT><!EM起强调作用><FONTSIZE="5"COLOR="GREEN"><PALIGN=CENTER><STRONG>李白</STRONG></P></FONT><!STRONG起加粗作用><PALIGN=CENTER><B><FONTSIZE="5"COLOR="BLUE">床前明月光<BR>疑是地上霜<BR>举头望明月<BR>低头思故乡<BR></FONT></B><PALIGN=LEFT><I>注：唐诗一首<BR><PALIGN=RIGHT><FONTSIZE="4"COLOR="BLACK">望各位同学能在今天背诵下来<BR></FONT></I></BODY></HTML>2002-2-810:54AM2002-2-810:54AM图像映射：是另一种形式的超链接，允许将不同的URL指定给一幅图像的不同部分，使访问者根据不同的图像区域跳转到不同的位置，这些区域称做“热点”，每一个热点与一个超链接相对应。如下图汽车生产商的站点可以用新车的图像映射：当站点访问者单击车子时，就会显示详细说明车子的网页。实例：源代码2002-2-810:54AM⑥在网页中嵌入图形：HTML并不能包含图像，它只是包含图像文件的名称和相应的格式代码。<IMGSRC=“图像文件存放位置/图像文件名.扩展名”>图形的插入直接拖拽来改变图片的大小使用图片属性对话框来设置图片的替代文字、图片边框使用图片工具栏编辑图片所用图形文件格式：

GIFJPEGPNG（图形交换格式）（联合图像专家组）（可移植网络图形）可用颜色数167772161677721616777216每幅图像的颜色2561677721616777216压缩无损