第四章 超文本与超媒体

1. 第四章 超文本与超媒体 主讲: 电话: 邮箱:

2. 教学目标 掌握超文本和超媒体的基本概念 了解超文本和超媒体的表示模型 掌握超文本标记语言的基本语法及特点 掌握网页创作工具Dreamweaver的使用 方法

3. 超文本和超媒体是管理多媒体数据信息 的一种技术，其本质是采用非线性的网状结 构组织块状信息。近年来，超文本和超媒体 在很多领域得到了广泛的应用，它突破了传 统的信息获取模式，为人们更有效快捷地获 取信息提供了有效的手段和方法。本章主要 介绍超文本、超媒体技术在WWW中的应用， 包括HTML、网页创作工具Dreamweaver等内容

4. 内容导航 4.1 超文本与超媒体的基本概念 4.2 超文本标记语言 4.3 Dreamweaver的使用

5. 4.1 超文本与超媒体的基本概念 4.1.1 超文本与超媒体的基本概念 4.1.2 超文本的体系结构模型

6. 4.1.1 超文本与超媒体的基本概念 传统的信息形态 传统的信息形态，如一本书、一篇文章和一段计算机程序等都称为文本（Text）信息，它们共同的特点是在组织上是线性的和顺序的。这种线性结构体现在阅读文本时必须是按固定的顺序一页一页地有次序的进行，读者没有选择阅读内容的余地。 人脑的记忆机制 人类的记忆是层次网状结构，知识的获取采用联想方式，联想检索必然会导致选择不同的路径，并产生不同的效果。

7. 超文本的概念 超文本结构 类似于人类这种联想记忆结构，它采用一种非线性的网状结构组织块状信息。 超文本 是由信息节点和表示信息结点间相关性的链构成的具有一定逻辑结构和语义的网络。 节点 是围绕一个特殊主题组织起来的数据集合。它可以是一个信息块，也可以是信息的一部分,如空间屏幕中某一大小的显示区。 链 形式上是从一个节点指向另一个节点的指针，本质上表示不同节点上存在着的信息的联系。

8. 超文本的分类 微文本 又称小型超文本,是一种在节点之间具有明显链接的文本,它支持对结点信息的浏览。 宏文本 又称大型超文本,它的超链存在于许多不同的文本之间,而不是在一个文本之内,它支持对宏节点的查找与索引。 组文本 是由若干人协同创建或存取的文本。运用组文本可实现"你所见即我所见"的屏幕处理能力. 专家文本 也称动态文本,它是把人工智能的原理结合到超文本系统中的文本。 具体的也有智能微文本、智能宏文本和智能组文本的形式。

9. 超文本的节点 按照表现形式可分为:框架式和窗口式两种 基于框架的节点 其内容放在某种尺寸固定的框架 内。 基于窗口的节点 其内容放在具有水平和垂直滚动 条的窗口内。 按照结构可分为:原子节点、复合节点和包含节点。 包含节点 是指还包含其它节点的节点。 原子节点 是不能再分割的最小信息单元 复合节点 是由若干原子节点构成的节点 按照状态可分为：静态节点和动态节点。 静态节点 是在物理上稳定地占据外存储器的空间 节点。 动态节点 是不占据外存储空间，而是要在需要时 动态生成的节点。 按照用途可分为：操作型、组织型和推理型。 操作型节点 是通过超媒体按钮来访问的节点。 推理型节点 是通过推理链和计算链来访问的节点。 组织型节点 是通过目录索引方式来访问的节点。

10. 超文本的链 链是组成超文本的基本单元,是连接节点的纽带。链的结构一般分为链源、链宿及链的属性三个部分。 链源 是导致节点信息迁移的原因，链源可以是热字、热区、热元、热点、热属性等。 热点 用于时基类媒体在时间轴上触发转移,热点记录 下某段时间内感兴趣的信息的起止时间点,用户触发该 时间区内任何点都能调出感兴趣的信息。 热元 用于图形节点的触发。当需要用另一幅 图形详细描述本图形的某部分(如加入注释),可 用热元形式与目标图形相链接。 热字 将需要进一步解释或含有特殊含义的字、 词或词组做成带下划线的字体，点击这些热字 可得到进一步的解释和说明。 热属性 是将关系数据库中的属性作为热标来使用, 由于数据媒体是一种特定的格式化符号数据,因此,可用 特定的保留属性字方法指明热标触发后表现的内容. 热区 在图像的显示区上指明一个敏感区域，作为触 发转移的源点，当鼠标标志进入热区时,将有多边形显 示,指示用户点击进入描述更为详尽的新图片区。 链宿 是链所指向的目标,在超文本中一般为一个节点。 链属性 是指它的类型、版本和权限等。

11. 在超文本系统中，由于节点联系的多样性使得链具有多种不同的类型，常见的有：在超文本系统中，由于节点联系的多样性使得链具有多种不同的类型，常见的有： 顺序链 将超文本中的节点按照基本顺序连接在一起，使节点信息在总体上呈现线性结构。 结构链 将超文本结构中的节点组织成树状结构，其中，上层节点称为下层节点的父节点，父节点可以连接它的所有子节点。 索引链 将超文本中的节点组织成交叉的网状的结构，用热字、热区或热点作为索引链源，链宿为目标节点。 节点内注释链 用热字、热区或热点作为链源,链宿为一个注释体。

12. 关键字链 为超文本中的每个节点定义一个或 多个关键字，通过对关键字的查询操作驱动相 应的目标节点。 执行链 又称按钮，它将超文本系统与高级程 序设计生成一个接口，触发按钮可以启动一个 计算机程序，以完成特殊的操作。 超文本是由节点和链构成的有向网络图，超文本中的两个节点之间可以存在单方面的关系，也可以存在可逆关系，从而对应还分有单向/双向链。另外，按用途来分还有导航链、推理链和计算链等。

13. 超媒体的概念 将超文本系统与多媒体技术结合起来，并强调系统处理多媒体信息的能力就称为超媒体 超媒体=多媒体+超文本 在超媒体中，节点不仅可以包含文字而且还可以包含图形、图像、动画、声音、和电视片断，这些媒体之间也是用超链接组织的，而且它们之间的链接方法也是各式各样、错综复杂的。

14. 超媒体与超文本之间的不同之处： 超文本主要是以文字的形式表示信息，建立 链接关系主要是文句之间的链接关系。 超媒体除了使用文本外，还使用图形、图像、 声音、动画和影视片断等媒体之间的链接关系

15. 4.1.2 超文本的体系结构模型 HAM模型 1988年， Campbell和Goodman提出HAM(超 文本抽象机)模型。HAM模型把超文本系统划分 为3个层次： 用户界面层， HAM层， 数据库层。

16. 数据库层 提供的功能是存储、共享数据和网络访问，处于3层模型的最低层。 特点是： 数据库层要保证信息的存取操作对于高层的超 文本抽象机来说是透明的。 数据库还要处理其他传统的数据库管理问题， 诸如多用户并发访问、安全、版本问题等。 与传统数据库不同的是增加了对节点、链的索 引与查询。

17. 超文本抽象机层 决定超文本系统节点和链的基本特点，记录了节点之间链的关系，并保存有关节点和链的结构信息。 HAM层是实现超文本输入输出格式标准化转换的最佳层次。因数据库层存储格式过分依赖机器，用户界面层各系统风格差别很大，很难统一，因此需要这样的中间层实现格式的转换。 HAM层可理解为超文本概念模式，它提供了对数据库下层的透明性和对上层用户界面层的标准性。

18. 用户界面层又称为表现层： 用户界面层负责处理超文本抽象机中信息的表现， 包括：用户可以使用的命令，HAM层信息如何展示，是否要包括总体概貌图来表示信息的组织，以便及时告知用户当前所处的位置等等。 目前流行的界面风格有以下几类： (1)命令语言； (2)菜单选项； (3)表格填充； (4)直接操作； (5)自然语言。

19. 运 行 层 播放规范 存 储 层 定位机制 成员内部层 Dexter模型 1988年10月， 在美国新罕布尔州的Dexter饭店发起组织了一个研究超文本模型小组， 致力于超文本标准化的研究， 以后逐渐形成了一个超文本参考模型， 简称为Dexter模型。

20. 成员内部层： 成员内部层描述超文本中成员的内容和结构，对应于各个媒体单个应用成员。 从结构上,成员可由简单结构和复杂结构。 简单结构就是每个成员内部仅由同一种数据媒体构成 复杂结构的成员内部又由各个子成员构成。 成员内部层和存储层之间的接口称为定位机制，其基本成分是锚。 锚由两部分组成： 锚标识和锚值。 锚标识是每个锚在成员范围内的标识符，它可以唯一地标识跨越由多个超文本组成的整个网络的成员。 锚值用来指定位置、范围子成员内部的项或子结构的任意值。

21. 存储层 描述成员之间的网状关系。 每个成员都有一个唯一的标识符，称为UID。存储层定义了访问函数，通过UID可以直接访问到该成员，另外存储层还定义了由多个函数组成的操作集合，用于实时地对超文本系统进行访问和修改。

22. 运行层 运行层描述支持用户和超文本交互作用的机制， 它可直接访问和操作在存储层和成员内部层定义的网状数据模型。 运行层为用户提供友好的界面。 介于存储层和运行层之间的接口，称为播放规范，它规定了同一数据呈现给用户的不同表现性质，提供确定各个成员在运行时表现的视图和操作权限等内容。

23. 4.2 超文本标记语言HTML 4.2.1 超文本标记语言模型 4.2.2 超文本标记语言HTML

24. 4.2.1 超文本标记语言模型 主要有以下三种模型：SGML、ODA、Hytime • SGML 这是标准通用标记语言，它制定了标记语言的标准，奠定了其它超文本标记语言的基础。 SGML是标记和内容混排的排版语言。 • ODA 称作开放式文档结构,是ISO在1988年公布的一个标准化文献模型,主要用于办公文档处理。 • Hytime 全称是时基超媒体结构化语言，它是一个标准的中性标记语言， 表示超文本和时基文献的逻辑结构。主要用于处理节点内的时基媒体。

25. 4.2.2 超文本标记语言HTML HTML是SGML的一个子集，比SGML更加简单易行，Internet网上WWW服务都是基于HTML语言。 基本结构 一个文档通常由文档头(head)、文档名称(title)、表格(table)、段落(paragraph)和列表(list)等成分构成。使用超文本标记语言HTML规定的标签(tag)来标识这些成分，由3部分组成： 左尖括号“<”，“标签名称”和右尖括号“>” 例如 <head>

26. 每个HTML文档都是由标签<HTML>开始，而以标签</HTML>结束。每个HTML文档分成两个部分组成：文档头(head)和正文(body)，并分别用<HEAD> … </HEAD>和<BODY> … </BODY>来作标记。如下： <HTML> <HEAD><TITLE>标题名</TITLE></HEAD> <BODY> <H1>一级标题名</H1> ...... Web页主体 </BODY> </HTML>

27. 标签类型和属性 HTML标签包含包容标签和空标签。 空标签用于说明一次性指令，如换行标记 为<BR>;水平线标记为<HR> 包容标签由开始标签和结束标签构成， 结 构如下： <标签名> 数据 </标签名> HTML语言中除了特殊字符外,标签名字没有大 小写之分,如<BODY>、<body>、<Body>所表示的 意义是相同的。在编写HTML文件时,为实现HTML文 档的易读性，一般都把标签写成大写形式。

28. HTML标签有些可以带有属性，属性是指用来修改HTML标签之间的文素特性。其语法是： <标签名字 属性1 属性2 属性3 …> 例如: <P><FONT COLOR="#FF0000" SIZE="4"> 理解字符属性的概念</FONT></P> 这条语句表示“理解字符属性的概念”这几个字的颜色是红色，字号等于4。

29. HTML的常用标签 （1） <html>标签 <HTML>和</HTML>标签置于整个文件的 起始及结束处，表示文件是属HTML 语言格 式。其余标签都应该位于该标签里面。 （2） <head>标签 <HEAD>和</HEAD>标签标明文件的表头段，主要说明本文内容整体信息，是文章的开场白。所有在表头段的内容都不会显现在浏览器窗口的本体段(Client area)里。

30. （3）<title>标签 文档名称标签告诉浏览器在<title>...</title>之间包含的是具体的HTML文档名称，名称的长度通常不超过64个字符数。<TITLE>标签里不允许有其它的标签存在。 （4）<body>标签 <BODY>和</BODY>标签标明文件的本体区段，位于表头段以下的地方，即是指经浏览器解读后显示在窗口本体段(Client area)的内容。

31. （5）<hn>标签 <Hn>和<／Hn>叫子标题标识，用来区分章节标题字体的大小，浏览时会显示不同的大小字型。HTML定义了６个级别的子标题，其格式为：<Hn>子标题内容</Hn>。其中n可在１~６中进行选择（１号最大，６号最小）。 （6）<p>标签 段落标签告诉浏览器在<p>......</p>之间包含的是一段文字。在HTML文档中，<P>和</P>之间不论有多少行，不论每一行有多长或者多短，也不论其间有多少个空格，浏览器都把它作为一个段落来处理。

32. <P align=center> 登鹳雀楼 白日依山尽， 黄河入海流， 欲穷千里目， 更上一层楼。 </P> 例如：段落文本定义 在段落标签中可以添加对齐方式属性align,属性值可取center,left,right之一，默认为left. （7）<PRE>标签 <PRE > 登鹳雀楼 白日依山尽， 黄河入海流， 欲穷千里目， 更上一层楼。 </PRE> 预格式文本标签用于产生固定宽度的字符，在<PRE>......</PRE>之间的空格、新行、空行和表格与HTML源文档中的一致。 例如：预格式文本定义

33. （8）<br>标签 换行控制标签 （9）<hr>标签 画水平线控制标签。<hr>有以下属性： Size: 表示水平线的宽度。 Width:表示水平线的长。 Align: 表示水平线的对齐方式。 Noshade: 表示线段无阴影属性，为实心线段。 Color:表示线段的颜色,是十六进制RGB数码，或者是下列预定义的色彩：black,olive,teal,red,blue, maroon,navy,lime,fuchsia,white,green,purple,silver,yellow,aqua。

34. （10）<font>标签 文字样式标签。<font>有以下属性： Size: 表示字号的大小，可取1~7，缺省为3。 face:表示字体，如宋体，楷体-GB2312等 Color:表示文字的颜色,是十六进制RGB数码，或者是下列预定义的色彩：black,olive,teal,red,blue, maroon,navy,lime,fuchsia,white,green,purple,silver,yellow,aqua。 Align: 表示文字的对齐方式。 为了让文字富有变化，或者起强调作用，html提供了一些标签产生这些效果。如<b>粗体，<i>斜体，<u>加下划线，…

35. （11）列表标签 HTML 语言提供多种表结构的元素，根据显示外观的不同可分为两类：词汇表(Glossary List)和规律性表(Regular List) 。 规律性表又可分为两种： 第一种是有序表；第二种是无序表。

36. 定义表(DL) • 定义表属于词汇表，它是由一系列项目和其定义叙述所组成的。一般定义表的每个项目都列在左边，而其定义则列在右边或下一行有缩排的段落。 • 定义表结构块，是由起始标签<DL>和结束标签</DL>包围形成的，而每一个项目则以<DT>项目标签和<DD>定义叙述标签来表示。

37. 实例： <DL> <DT>WWW<DD>WWW是全球住处网(World wide web)的缩写,也有人称之为3W、W3、Web。由欧洲量子物理实验室所开发出来的一套“分散 式超媒体数据库查询”的系统。 <DT>HyperText<DD>HyperText是超文本。文件通过超文本，可链结到其它地方的数据文件，取得分散到各地的数据。 </DL>

38. 规律性表 • 规律性表结构是一组序列段落，以一个特殊记号、序数或空格为分项符号。它的一般语法为： • <表列元素起始标签> • <表列项目元素> • <表列项目元素> • ............... • ............... • <表列元素结束标签>

39. . 无序表 • 典型的无序表的每一个项目前端，都用一个实心小圆点作为分项符号。无序表结构块，是由起始标签<UL>和结束标签</UL>包围形成的，而每一个项目是以<LI>项目标签来表示。 浏览器为无序表元素添加了属性TYPE，它的值分别是表的分项符号样式，其值共有三种：DISC(实心小圆点)、CIRCLE(虚心小圆圈)和SQUARE(实心小方块)，缺省为DISC。

40. 实例： <UL> <LI>理解Internet <LI>访问WWW <LI>理解Web发布 </UL> 实例： <UL TYPE = SQUARE> <LI>理解Internet <LI>访问WWW <LI>理解Web发布 </UL>

41. . 有序表 • 有序表的每个项目都有前后顺序之分多数用数字来表示。有序表结构块，是由起始标签<OL>和结束标签</OL>包围形成的。而每一个项目是以<LI>项目标签来表示。 浏览器为有序表添加了TYPE和START属性，TYPE属性可提供更多项目识别符号。它总共提供了五种不同样式的分项符号，分别如下所列。缺省值为TYPE=1。

42. <OL TYPE=1> 数字，如1,2,3... <OL TYPE=A> 大写字母，如A,B,C... <OL TYPE=a> 小写字母，如a,b,c... <OL TYPE=I> 大写罗马字母，如Ⅰ,Ⅱ,Ⅲ... <OL TYPE=i> 小写罗马字母，如i,ii,iii... START属性可设置表项目的初始值，其值为分项符号样式列中第几个，如START=5就表示由‘5’、‘E’、‘e’、‘V’、‘v’开始。

43. 实例: <H2>打开Web资源的步骤</H2> <OL> <LI>在用户浏览器中，输要访问资源的完整URL。 <LI>浏览器把请示发送到正与之通信的服务器。 <LI>用户服务器把该请求转发一在URL中所规定的服务器。 <LI>那个服务器查找资源并把它发回到用户服务器。 <LI>用户服务器把资源发送到用户浏览器。 </OL>

44. 实例: <H2>打开Web资源的步骤</H2> <OL type=a start=3> <LI>在用户浏览器中，输要访问资源的完整URL。 <LI type=1>浏览器把请示发送到正与之通信的服务器。 <LI>用户服务器把该请求转发一在URL中所规定的服务器。 <LI>那个服务器查找资源并把它发回到用户服务器。 <LI>用户服务器把资源发送到用户浏览器。 </OL>

45. （12）超链接标签 链接是HTML的一个最强大和最有价值的功能。链接是指文档中的文素或者图象与另一个文档、文档的一部分或者一幅图象链接在一起。在HTML中，简单的链接标签是<A>，也称为锚(anchor)签。 要把一个文档包含在你的文档中，它的基本语法是： <A HREF="文件名"> ... </A>或 <A HREF="URL"> ... </A> 其中HREF是hypertext reference的缩略词

46. 例如: 下面是一个使用HTML编辑器编辑的《HTML初 学者指南》文档，它的文件名是beginner.html，存放 在C:\temp目录下。该文档包含有四个部分，每个部分 用单独的一个文档来表示，分别是 HTMLPrimerP1.html，…，HTMLPrimerP4.html， 而且都存放在C:\temp目录下，《HTML初学者指南》 的文档如下所示：

47. <HTML> <HEAD> <TITLE>HTML初学者指南</TITLE> </HEAD> <BODY> <H2>HTML入门</H2> <A href="HTMLPrimerP1.html">第一部分</A> | <A href="HTMLPrimerP2.html">第二部分</A> | <A href="HTMLPrimerP3.html">第三部分</A> | <A href="HTMLPrimerP4.html">第四部分</A> </BODY> </HTML>

48. 这个文档在浏览器上将显示为如下样式 在Web浏览器上显示文档时，通常用不同的颜色来区分有链接关系和没有链接关系的文素。有链接关系的文素通常用蓝色和下划线表示。

49. URL(Uniform Resource Locator)是识别因特网(Internet)上任何一个文件地址或资源地址的标准表示法，称为统一资源地址。万维网(WWW)使用URL来指定在其他服务器上文档的位置。一个信息资源在网络上的URL地址通常由三个部分组成： （1）请求服务类型，它用来说明使用什么网络协议来存取资源，如Web上的服务程序使用http，文件传送使用ftp等。 （2）网络上的主机名。 （3）服务机上的文件名。

50. 例如 “http://www.microsoft.com/industry/justice /expttest.htm” 第一部分，冒号(:)之前的“http”表示使用的网络协议是HTTP； 第二部分，双钭线 (//) 之後“www.microsoft.com” 表示存放信息的主机名，这是微软公司的一个Web服务器； 第三部分，第一个钭线后面的 “industry/justice/expttest.htm”表示文件所在服务器上的目录和文件名。这个地址告诉Web浏览器“使用HTTP协议，从名字www.microsoft.com的服务器里、在industry/justice/目录下取名为expttest.htm的文件”。