第7章超文本和WEB系统

多媒体技术及应用华北电力大学何慧第7章超文本和WEB系统超文本的概念和发展简史•在当今的信息社会里，信息以爆炸形式增长，影响着人类的工作、学习和生活各个方面，面对浩如烟海的信息，关键是需要一种有效的利用信息的手段。•现有的信息存储和检索机制大都是以文本方式和线性检索为手段，不足以充分利用信息，这就需要一种新的技术或工具，它可以建立并使用信息直接的链接结构，使得各种信息能被有效的利用。超文本的概念•文本--文本是人们最熟悉的信息表示方式。--逻辑单位：字、句子、段落、节、章--物理单位：字节、行、页、册、卷--特点：线性和顺序的•人脑的记忆机制--一种具有网状结构的联想式的记忆--具有跳跃式、多层次、多路径、多方位思维和访问信息的非线性结构。超文本的概念•超文本(Hypertext)--超文本采用一种非线性的网状结构组织块状信息，没有固定的顺序，也不要求读者按某个顺序来读。--超文本把文本按其内部固有的独立性和相关性划分成不同的基本信息块，称为结点（node）。结点之间按它们的自然关联，用链连接成网，链的起始结点称为锚结点（anchornode），终止结点称为目的结点。超文本是由信息结点和表示信息结点间相关性的链构成的具有一定逻辑结构的语义的网络。超文本的概念•超文本系统--所谓超文本系统即是能对文本进行管理和使用的系统。超文本与超文本系统的关系和数据库与数据库管理系统的关系类似。系统特点：在用户界面中包含对超文本的网络结构的一个显示表示。给用户一个网络结构的动态总貌图。使用户每一时刻都可以得到当前结点的邻接环境。超文本系统一般使用双向链，支持跨越各种计算机网络。用户可以对网络中的信息进行快速、直观、灵活的访问。尽可能不依赖具体的特性，命令或信息结构。而更多强调用户界面的视觉和感觉。超文本的概念•超媒体--不仅可以包含文字而且还可以包含图形、图像、动画、声音、和电视片断，这些媒体之间也是用超链接组织的，而且它们之间的链接也是错综复杂的。超文本的概念•超文本与超媒体的区别--超文本主要是以文字的形式表示信息，建立链接关系主要是文句之间的链接关系。--超媒体除了使用文本外，还使用图形、图像、声音、动画和影视片断等媒体之间的链接关系。超文本的发展简史•概念产生时期（1945年-1965年）--标志性事件：Bush提出Memex，Nelson创造“超文本”•概念系统的研究时期（1967年–1985年）--1967年，第一个可运行的超文本系统TheHypertextEditingSystem•成熟与发展时期（1985年-）超文本系统的结构•超文本系统结构模型•超文本的主要成分超文本系统结构模型•HAM模型--1988年，Campbell和Goodman提出超文本抽象机(Hypertextabstractmachine，HMA模型)。--HAM模型把超文本系统划分为3个层次：用户界面层、超文本抽象层、数据库层。超文本系统结构模型•数据库层--提供存储、共享数据和网络访问功能，处于3层模型的最低层。保证信息的存取对上层透明，还处理其他传统数据库管理问题，如安全、维护等。•超文本抽象机层--决定了超文本系统结点和链的基本特点，记录了结点之间链的关系，并保存了有关结点和链的结构信息。提供了对数据库层的透明性和对用户界面层的标准性。•用户界面层--又称为表现层，它构成了超文本系统特殊性的重要表现，具有简明生动、直观、灵活、方便等特点。超文本系统结构模型•Dexter模型--1988年10月，在美国新罕布尔州的Dexter饭店召开的关于超媒体设计的研讨会上，主持人J.Leggett和J.Walker组织了一个研究超文本模型小组，致力于超文本标准化的研究，以后逐渐形成了超文本参考模型，简称为Dexter模型。--Dexter模型分为三层：存储层、运行层和成员内部层，各层之间通过定义好接口互相连接。超文本系统结构模型•存储层--描述超文本中的结点成员之间的网状关系。--每个成员都有一个唯一的标识符，称为UID。，存储层定义了访问函数，通过UID可以直接访问到该成员，还定义了由多个函数组成的操作集合，用于实时地对超文本系统进行访问和修改。•成员内部层--描述超文本中各个成员的内容和结构，对应于各个媒体单个应用成员。从结构上，成员可由简单结构和复杂结构。简单结构就是每个成员内部仅由同一种数据媒体构成，复杂结构的成员内部又由各个子成员构成。超文本系统结构模型•运行层--描述支持用户和超文本交互作用的机制，它可直接访问和操作在存储层和成员层内部层定义的网状数据模型。运行层为用户提供友好的界面。•表现规范--介于存储层和运行层之间的接口称为表现规范，它规定了同一数据呈现给用户的不同表现性质，确定了各个成员在不同用户访问时表现的视图和操作权限等内容。超文本系统结构模型•锚定机制--存储层和内部成员之间的接口称为锚定机制，其基本成分是锚（anchor）。--锚由两部分组成：锚号和锚值，完成存储层到成员内部层、成员内部层到存储层的检索定位过程。--锚号：每个锚的标识符。--锚值：元素内部的位置和子结构。超文本的主要成分•结点•链•宏结点结点•结点--是超文本表达信息的一个基本单位，结点的内容可以是文本、图形、图像、音频、视频等。•结点的类型媒体类结点：存放各种媒体信息，细分为文本结点、图形结点、图像结点、声音结点和混合媒体结点。动作与操作结点：定义了一些操作，典型的操作结点是按钮结点。组织结点：组织型结点包括各种媒体结点的索引结点和目录结点。推理结点：推理结点用于辅助链的推理和计算，它包括对象结点和规则结点。链•链--从一个结点指向另一个结点的指针，本质上表示不同结点上存在着的信息的联系。定义了超文本的结构并提供浏览和探索结点的能力。链•链的类型--基本类型：具有固定明确的导航和索引信息链。包括：基本链：用来建立结点之间的基本顺序。交叉索引链：将结点连接成交叉的网络结构。结点内注释链：指向结点内部附加注视信息的链。缩放链：可以扩大当前的结点。全景链：这种链将返回超文本系统的高层视图。链•链的类型--组织链：用于结点的组织。包括索引链，Is-a链，Has-a链，执行链。索引链:这种链将用户从一个索引结点引向该结点的索引入口。Is-a：用于指明对象结点中的某类成员。Has-a：描述结点的性质。执行链：这类链主要形式是蕴含链，用在推理树中事实的连接，它们通常等价于规则。链•链的类型--推理链：主要形式是蕴涵链，用在推理树中事实的连接，通常等价于规则。宏结点•宏结点--链接在一起的结点群，一个宏结点就是超文本网络中的一个子网。简化了网络结构，增加了管理与检索的层次。程序设计•HTML语言•XML语言•动态网页生成技术语言•基本结构HTML语言编写的网页超文本信息按多级标题结构进行组织，其结构如下：〈HTML〉〈HEAD〉〈TITLE〉标题名〈/TITLE〉〈/HEAD〉〈BODY〉〈H1〉一级标题名〈/H1〉……WEB页主体〈/BODY〉〈/HTML〉语言说明：HTML标记包含包容标记和空标记。空标记：用于说明一次性指令。如换行BR包容标记：由一个开始标记和一个结束标记构成。标记名数据/标记名HTML标记还可以带属性：IMGSRC=“GLOBE.GIF”其中SRC是属性，告诉浏览器图像的文件名。语言•超文本标记方法字体黑体:〈B〉文本〈/B〉斜体：〈I〉文本〈/I〉下划线：〈U〉文本〈/U〉打字体：〈TT〉文本〈/TT〉语言•超文本标记方法字号与颜色设定基准字号：〈BASEFONTSIZE=#〉其中#=1~7设定指定字号：〈FONTSIZE=#〉文本〈/FONT〉说明：#=1、2、3、4、5、6、7表示指定的字体大小#=+（-）2、3、4、5、6、7表示字体大小的相对改变设定字体颜色：〈FONTCOLOR=“hex_rgb”〉文本〈/FONT〉或〈FONTCOLOR=“colorname”〉文本〈/FONT〉语言•超文本标记方法段落格式：包括换行符〈BR〉，分段符〈P〉，分界尺符号〈HR〉。文本链接：通过点击一段文本检索浏览另一超文本网页。〈AHREF=“ART.HTML”〉CLICHHERE〈/A〉图像链接：通过点击一个图像检索浏览另一超文本网页。〈AHREF=“DOG.HTML”〉〈IMGSRC=“dog.gif”〉〈/A〉语言•超文本标记方法FTP和Email链接：在HTML页面中实现与FTP和Email系统的链接。〈AHREF=“”〉getfreeware〈/A〉〈AHREF=“mailto:[e-mail]”〉mailtome〈/A〉非图像浏览器图像替换：如不能浏览图像用ALT指定替代文字〈AHREF=“dog.html”〉〈IMGSRC=“dog.gif”ALT=“[一幅狗图片]”〉〈/A〉语言•多媒体信息图像显示IMGSRC=file:///d:/html/jet.gifWIDTH=？HEIGHT=？VSPACE=？HSPACE=？其中WIDTH，HEIGHT为图像的宽、高；VSPACE，HSPACE为垂直、水平空格数。列表有序OL无序ULLILILILI/OL/UL语言•多媒体信息音频HTML中可以指定背景音乐（#为循环次数）BGSoundSRC=“Path/Filename.wav”Loop=#也可以通过链接启动声音AHREF=“Path/Filename.wav”LinkText/A语言•多媒体信息视频与动画在HTML中播放视频与动画标记格式如下：IMGdynsrc=“user.avi”START=fileopen（ormouseover）WIDTH=?HEIGHT=?VSPACE=?HSPACE=?LOOP=?IMGd