131

第四章 超文本与超媒体

Embed Size (px)

DESCRIPTION

第四章 超文本与超媒体. 主讲 :. 电话 :. 邮箱 :. 教学目标. 掌握超文本和超媒体的基本概念 了解超文本和超媒体的表示模型 掌握超文本标记语言的基本语法及特点 掌握网页创作工具 Dreamweaver 的使用 方法. 超文本和超媒体是管理多媒体数据信息 的一种技术,其本质是采用 非线性的网状结 构组织块状信息 。近年来,超文本和超媒体 在很多领域得到了广泛的应用,它突破了传 统的信息获取模式,为人们更有效快捷地获 取信息提供了有效的手段和方法。本章主要 介绍超文本、超媒体技术在 WWW 中的应用, - PowerPoint PPT Presentation

Citation preview

Page 1: 第四章 超文本与超媒体
Page 2: 第四章 超文本与超媒体

教学目标教学目标

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

方法方法

Page 3: 第四章 超文本与超媒体

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

Page 4: 第四章 超文本与超媒体

内容导航内容导航

4.1 4.1 超文本与超媒体的基本概念超文本与超媒体的基本概念

4.2 4.2 超文本标记语言超文本标记语言

4.3 4.3 DreamweaverDreamweaver 的使用的使用

Page 5: 第四章 超文本与超媒体

4.1 4.1 超文本与超媒体的基本概念超文本与超媒体的基本概念

4.1.1 4.1.1 超文本与超媒体的基本概念超文本与超媒体的基本概念

4.1.2 4.1.2 超文本的体系结构模型超文本的体系结构模型

Page 6: 第四章 超文本与超媒体

传统的信息形态,如一本书、一篇文章和一段传统的信息形态,如一本书、一篇文章和一段计算机程序等都称为文本(计算机程序等都称为文本( TextText )信息,它们共同)信息,它们共同的特点是在组织上是的特点是在组织上是线性线性的和的和顺序顺序的。这种线性结构的。这种线性结构体现在阅读文本时必须是按固定的顺序一页一页地有体现在阅读文本时必须是按固定的顺序一页一页地有次序的进行,读者没有选择阅读内容的余地。次序的进行,读者没有选择阅读内容的余地。

人类的记忆是层次网状结构,知识的获取采用人类的记忆是层次网状结构,知识的获取采用联想方式,联想检索必然会导致选择不同的路径,联想方式,联想检索必然会导致选择不同的路径,并产生不同的效果。并产生不同的效果。

4.1.1 4.1.1 超文本与超媒体的基本概念超文本与超媒体的基本概念

传统的信息形态传统的信息形态

人脑的记忆机制人脑的记忆机制

Page 7: 第四章 超文本与超媒体

超文本超文本 是由信息 是由信息节点节点和表示信息结点间相关和表示信息结点间相关性的性的链链构成的具有一定逻辑结构和语义的构成的具有一定逻辑结构和语义的网络网络。。

超文本结构超文本结构 类似于人类这种联想记忆结构,它 类似于人类这种联想记忆结构,它采用一种非线性的网状结构组织块状信息。 采用一种非线性的网状结构组织块状信息。

节点节点 是围绕一个特殊主题组织起来的数据集合。 是围绕一个特殊主题组织起来的数据集合。它可以是一个信息块,也可以是信息的一部分它可以是一个信息块,也可以是信息的一部分 ,, 如空如空间屏幕中某一大小的显示区。 间屏幕中某一大小的显示区。

链链 形式上是从一个节点指向另一个节点的指 形式上是从一个节点指向另一个节点的指针,本质上表示不同节点上存在着的信息的联系。针,本质上表示不同节点上存在着的信息的联系。

超文本的概念超文本的概念

Page 8: 第四章 超文本与超媒体

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

超文本的分类超文本的分类

Page 9: 第四章 超文本与超媒体

按照表现形式可分为按照表现形式可分为 :: 框架式框架式和和窗口式窗口式两种两种基于框架的节点基于框架的节点 其内容放在某种尺寸固定的框架 其内容放在某种尺寸固定的框架内。内。基于窗口的节点基于窗口的节点 其内容放在具有水平和垂直滚动 其内容放在具有水平和垂直滚动条的窗口内。条的窗口内。

按照结构可分为按照结构可分为 :: 原子节点原子节点、、复合节点和包含节点复合节点和包含节点。。原子节点原子节点 是不能再分割的最小信息单元 是不能再分割的最小信息单元复合节点复合节点 是由若干原子节点构成的节点 是由若干原子节点构成的节点包含节点包含节点 是指还包含其它节点的节点。 是指还包含其它节点的节点。 按照状态可分为:按照状态可分为:静态节点静态节点和和动态节点动态节点。。静态节点静态节点 是在物理上稳定地占据外存储器的空间 是在物理上稳定地占据外存储器的空间节点。节点。动态节点动态节点 是不占据外存储空间,而是要在需要时 是不占据外存储空间,而是要在需要时动态生成的节点。动态生成的节点。

按照用途可分为:按照用途可分为:操作型操作型、、组织型组织型和和推理型推理型。。操作型节点操作型节点 是通过超媒体按钮来访问的节点。 是通过超媒体按钮来访问的节点。组织型节点组织型节点 是通过目录索引方式来访问的节点。 是通过目录索引方式来访问的节点。推理型节点推理型节点 是通过推理链和计算链来访问的节点。 是通过推理链和计算链来访问的节点。

超文本的节点超文本的节点

Page 10: 第四章 超文本与超媒体

链是组成超文本的基本单元链是组成超文本的基本单元 ,, 是连接节点的纽带。是连接节点的纽带。链的结构一般分为链的结构一般分为链源链源、、链宿链宿及链的及链的属性属性三个部分。三个部分。链源链源 是导致节点信息迁移的原因,链源可以是 是导致节点信息迁移的原因,链源可以是热字、热区、热元、热点、热属性等。热字、热区、热元、热点、热属性等。热字热字 将需要进一步解释或含有特殊含义的字、 将需要进一步解释或含有特殊含义的字、词或词组做成带下划线的字体,点击这些热字词或词组做成带下划线的字体,点击这些热字可得到进一步的解释和说明。可得到进一步的解释和说明。

热区热区 在图像的显示区上指明一个敏感区域,作为触 在图像的显示区上指明一个敏感区域,作为触发转移的源点,当鼠标标志进入热区时发转移的源点,当鼠标标志进入热区时 ,,将有多边形显将有多边形显示示 ,, 指示用户点击进入描述更为详尽的新图片区。指示用户点击进入描述更为详尽的新图片区。

热元热元 用于图形节点的触发。当需要用另一幅 用于图形节点的触发。当需要用另一幅图形详细描述本图形的某部分图形详细描述本图形的某部分 ((如加入注释如加入注释 ),), 可可用热元形式与目标图形相链接。用热元形式与目标图形相链接。

热点热点 用于时基类媒体在时间轴上触发转移 用于时基类媒体在时间轴上触发转移 ,,热点记录热点记录下某段时间内感兴趣的信息的起止时间点下某段时间内感兴趣的信息的起止时间点 ,, 用户触发该用户触发该时间区内任何点都能调出感兴趣的信息。时间区内任何点都能调出感兴趣的信息。

热属性热属性 是将关系数据库中的属性作为热标来使用 是将关系数据库中的属性作为热标来使用 ,,由于数据媒体是一种特定的格式化符号数据由于数据媒体是一种特定的格式化符号数据 ,,因此因此 ,, 可用可用特定的保留属性字方法指明热标触发后表现的内容特定的保留属性字方法指明热标触发后表现的内容 ..链宿链宿 是链所指向的目标 是链所指向的目标 ,, 在超文本中一般为一个在超文本中一般为一个节点。节点。链属性链属性 是指它的类型、版本和权限等。 是指它的类型、版本和权限等。

超文本的链超文本的链

Page 11: 第四章 超文本与超媒体

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

Page 12: 第四章 超文本与超媒体

关键字链关键字链 为超文本中的每个节点定义一个或 为超文本中的每个节点定义一个或多个关键字,通过对关键字的查询操作驱动相多个关键字,通过对关键字的查询操作驱动相应的目标节点。应的目标节点。执行链执行链 又称按钮,它将超文本系统与高级程 又称按钮,它将超文本系统与高级程序设计生成一个接口,触发按钮可以启动一个序设计生成一个接口,触发按钮可以启动一个计算机程序,以完成特殊的操作。计算机程序,以完成特殊的操作。

超文本是由节点和链构成的有向网络图,超文超文本是由节点和链构成的有向网络图,超文本中的两个节点之间可以存在单方面的关系,也可以本中的两个节点之间可以存在单方面的关系,也可以存在可逆关系,从而对应还分有存在可逆关系,从而对应还分有单向单向 // 双向链双向链。另外,。另外,按用途来分还有按用途来分还有导航链导航链、、推理链推理链和和计算链计算链等。等。

Page 13: 第四章 超文本与超媒体

将超文本系统与多媒体技术结合起来,并强将超文本系统与多媒体技术结合起来,并强调系统处理多媒体信息的能力就称为超媒体调系统处理多媒体信息的能力就称为超媒体

超媒体超媒体 == 多媒体多媒体 ++ 超文超文本本

在超媒体中,节点不仅可以包含文字而且还可在超媒体中,节点不仅可以包含文字而且还可以包含图形、图像、动画、声音、和电视片断,这以包含图形、图像、动画、声音、和电视片断,这些媒体之间也是用超链接组织的,而且它们之间的些媒体之间也是用超链接组织的,而且它们之间的链接方法也是各式各样、错综复杂的。 链接方法也是各式各样、错综复杂的。

超媒体的概念超媒体的概念

Page 14: 第四章 超文本与超媒体

超媒体与超文本之间的不同之处:超媒体与超文本之间的不同之处:

超文本主要是以文字的形式表示信息,建立 链接关系主要是文句之间的链接关系。

超媒体除了使用文本外,还使用图形、图像、 声音、动画和影视片断等媒体之间的链接关系

Page 15: 第四章 超文本与超媒体

19881988 年, 年, CampbellCampbell 和和 GoodmanGoodman 提出提出 HAM(HAM( 超超文本抽象机文本抽象机 )) 模型。模型。 HAMHAM 模型把超文本系统划分模型把超文本系统划分为为 33 个层次: 个层次: 用户界面层用户界面层, , HAMHAM 层层, , 数据库层数据库层。。

用户界面层超文本抽象机层

数据库层

4.1.2 4.1.2 超文本的体系结构模型超文本的体系结构模型

HAMHAM 模型模型

Page 16: 第四章 超文本与超媒体

数据库层数据库层 提供的功能是存储、共享数据和网络访问,提供的功能是存储、共享数据和网络访问,处于处于 33 层模型的最低层。层模型的最低层。 特点是:特点是: 数据库层要保证信息的存取操作对于高层的数据库层要保证信息的存取操作对于高层的

超超 文本抽象机来说是透明的。 文本抽象机来说是透明的。 数据库还要处理其他传统的数据库管理问题,数据库还要处理其他传统的数据库管理问题,

诸如多用户并发访问、安全、版本问题等。诸如多用户并发访问、安全、版本问题等。 与传统数据库不同的是增加了对节点、链的与传统数据库不同的是增加了对节点、链的

索索 引与查询。引与查询。

Page 17: 第四章 超文本与超媒体

超文本抽象机层超文本抽象机层 决定超文本系统 决定超文本系统节点和链的基本特点,记录了节点之间链的关系,节点和链的基本特点,记录了节点之间链的关系,并保存有关节点和链的结构信息。并保存有关节点和链的结构信息。

HAMHAM 层是实现超文本层是实现超文本输入输出格式标准化转输入输出格式标准化转换换的最佳层次。因数据库层存储格式过分依赖机器,的最佳层次。因数据库层存储格式过分依赖机器,用户界面层各系统风格差别很大,很难统一,因此用户界面层各系统风格差别很大,很难统一,因此需要这样的中间层实现格式的转换。需要这样的中间层实现格式的转换。

HAMHAM 层可理解为超文本概念模式,它提供了层可理解为超文本概念模式,它提供了对数据库下层的对数据库下层的透明性和透明性和对上层用户界面层的对上层用户界面层的标准标准性性。 。

Page 18: 第四章 超文本与超媒体

用户界面层又称为表现层用户界面层又称为表现层:: 用户界面层负责处理超文本抽象机用户界面层负责处理超文本抽象机中信息的表现, 包括:用户可以使用的命令,中信息的表现, 包括:用户可以使用的命令, HHAMAM 层信息如何展示,是否要包括总体概貌图来层信息如何展示,是否要包括总体概貌图来表示信息的组织,以便及时告知用户当前所处的表示信息的组织,以便及时告知用户当前所处的位置等等。位置等等。

目前流行的界面风格有以下几类:目前流行的界面风格有以下几类: (1)(1)命令语言;命令语言; (2)(2)菜单选项;菜单选项; (3)(3) 表格填充;表格填充; (4)(4)直接操作;直接操作; (5)(5)自然语言。 自然语言。

Page 19: 第四章 超文本与超媒体

19881988 年年 1010月, 在美国新罕布尔州的月, 在美国新罕布尔州的 DexterDexter饭店发起组织了一个研究超文本模型小组, 致力饭店发起组织了一个研究超文本模型小组, 致力于超文本标准化的研究, 以后逐渐形成了一个超于超文本标准化的研究, 以后逐渐形成了一个超文本参考模型, 简称为文本参考模型, 简称为 DexterDexter 模型。 模型。

成员内部层 定位机制定位机制存 储 层播放规范播放规范运 行 层

DexterDexter 模型模型

Page 20: 第四章 超文本与超媒体

锚值用来指定位置、范围子成员内部的项或子锚值用来指定位置、范围子成员内部的项或子结构的任意值。 结构的任意值。

成员内部层:成员内部层: 成员内部层描述超文本中成员的内容和结成员内部层描述超文本中成员的内容和结构,对应于各个媒体单个应用成员。构,对应于各个媒体单个应用成员。

从结构上从结构上 ,, 成员可由简单结构和复杂结构。成员可由简单结构和复杂结构。

简单结构就是每个成员内部仅由同一种数据媒体构成简单结构就是每个成员内部仅由同一种数据媒体构成复杂结构的成员内部又由各个子成员构成。复杂结构的成员内部又由各个子成员构成。

成员内部层和存储层之间的接口称为成员内部层和存储层之间的接口称为定位机制定位机制,,其基本成分是锚。其基本成分是锚。

锚由两部分组成: 锚标识和锚值。锚由两部分组成: 锚标识和锚值。

锚标识是每个锚在成员范围内的标识符,它可以锚标识是每个锚在成员范围内的标识符,它可以唯一地标识跨越由多个超文本组成的整个网络的成员。唯一地标识跨越由多个超文本组成的整个网络的成员。

Page 21: 第四章 超文本与超媒体

存储层存储层 描述成员之间的网状关系。描述成员之间的网状关系。

每个成员都有一个唯一的标识符,称为每个成员都有一个唯一的标识符,称为 UIUI

DD 。存储层定义了访问函数,通过。存储层定义了访问函数,通过 UIDUID 可以直接访可以直接访问到该成员,另外存储层还定义了由多个函数组成问到该成员,另外存储层还定义了由多个函数组成的操作集合,用于实时地对超文本系统进行访问和的操作集合,用于实时地对超文本系统进行访问和修改。修改。

Page 22: 第四章 超文本与超媒体

运行层运行层 运行层描述支持用户和超文本交运行层描述支持用户和超文本交互作用的机制, 它可直接访问和操作在存储互作用的机制, 它可直接访问和操作在存储层和成员内部层定义的网状数据模型。层和成员内部层定义的网状数据模型。

运行层为用户提供友好的界面。 运行层为用户提供友好的界面。

介于存储层和运行层之间的接口,称为播放规范,介于存储层和运行层之间的接口,称为播放规范,它规定了同一数据呈现给用户的不同表现性质,提供它规定了同一数据呈现给用户的不同表现性质,提供确定各个成员在运行时表现的视图和操作权限等内容。确定各个成员在运行时表现的视图和操作权限等内容。

Page 23: 第四章 超文本与超媒体

4.2 4.2 超文本标记语言超文本标记语言 HTMLHTML

4.2.1 4.2.1 超文本标记语言模型超文本标记语言模型

4.2.2 4.2.2 超文本超文本标记语言标记语言 HTMLHTML

Page 24: 第四章 超文本与超媒体

主要有以下三种模型:主要有以下三种模型: SGMLSGML 、、 ODAODA、、 HytimeHytime①① SGML SGML 这是标准通用标记语言,它制定了标记这是标准通用标记语言,它制定了标记语言的标准,奠定了其它超文本标记语言的基础。语言的标准,奠定了其它超文本标记语言的基础。 SGMLSGML 是标记和内容混排的排版语言。是标记和内容混排的排版语言。

4.2.1 4.2.1 超文本标记语言模型 超文本标记语言模型

②② ODA ODA 称作开放式文档结构称作开放式文档结构 ,, 是是 ISOISO在在 19881988年公年公布的一个标准化文献模型布的一个标准化文献模型 ,, 主要用于办公文档处理。 主要用于办公文档处理。 ③③ Hytime Hytime 全称是时基超媒体结构化语言,它是一全称是时基超媒体结构化语言,它是一个标准的中性标记语言, 表示超文本和时基文献的逻个标准的中性标记语言, 表示超文本和时基文献的逻辑结构。主要用于处理节点内的时基媒体。辑结构。主要用于处理节点内的时基媒体。

Page 25: 第四章 超文本与超媒体

4.2.2 4.2.2 超文本标记语言超文本标记语言 HTMLHTML

HTMLHTML 是是 SGMLSGML 的一个子集,比的一个子集,比 SGMLSGML 更更加简单易行,加简单易行, InteInterrnetnet 网上网上 WWWWWW服务都是基于服务都是基于HTMLHTML 语言。语言。基本结构基本结构

一个文档通常由文档头一个文档通常由文档头 (head)(head) 、文档名称、文档名称(title)(title) 、表格、表格 (table)(table) 、段落、段落 (paragraph)(paragraph) 和列表和列表 (list)(list)等成分构成。使用超文本标记语言等成分构成。使用超文本标记语言 HTMLHTML规定的标签规定的标签(tag)(tag) 来标识这些成分,由来标识这些成分,由 33 部分组成:部分组成:左尖括号“左尖括号“ <”<” ,“标签名称”和右尖括号“,“标签名称”和右尖括号“ >”>”例如 例如 <head><head>

Page 26: 第四章 超文本与超媒体

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

Page 27: 第四章 超文本与超媒体

HTMLHTML 标签包含标签包含包容标签包容标签和和空标签空标签。。 空标签空标签用于说明一次性指令,如换行标记用于说明一次性指令,如换行标记为为 <BR>;<BR>;水平线标记为水平线标记为 <HR><HR> 包容标签包容标签由开始标签和结束标签构成, 由开始标签和结束标签构成, 结结构如下:构如下: << 标标签签名名 > > 数据 数据 </</ 标标签签名名 > >

HTMLHTML 语言中除了特殊字符外语言中除了特殊字符外 ,, 标签名字没有大标签名字没有大小写之分小写之分 ,, 如如 <BODY><BODY> 、、 <body><body> 、、 <Body><Body> 所表示的所表示的意义是相同的。在编写意义是相同的。在编写 HTMLHTML 文件时文件时 ,, 为实现为实现 HTMLHTML 文文档的易读性,一般都把标签写成大写形式。档的易读性,一般都把标签写成大写形式。

标签类型和属性标签类型和属性

Page 28: 第四章 超文本与超媒体

HTMLHTML 标签有些可以带有属性,属性是指用标签有些可以带有属性,属性是指用来修改来修改 HTMLHTML 标签之间的文素特性。其语法是:标签之间的文素特性。其语法是: << 标签名字 属性标签名字 属性 1 1 属性属性 2 2 属性属性 3 …> 3 …> 例如例如 ::

<P><FONT COLOR="#FF0000" SIZE<P><FONT COLOR="#FF0000" SIZE="4">="4"> 理解字符属性的概念理解字符属性的概念 </FONT></</FONT></P>P>

这条语句表示“理解字符属性的概念”这这条语句表示“理解字符属性的概念”这几个字的颜色是红色,字号等于几个字的颜色是红色,字号等于 44 。。

Page 29: 第四章 超文本与超媒体

(( 11 ) ) <html><html> 标签 标签 <HTML><HTML> 和和 </HTML></HTML> 标签置于整个文件的标签置于整个文件的起始及结束处,表示文件是属起始及结束处,表示文件是属 HTML HTML 语言格语言格式。其余标签都应该位于该标签里面。式。其余标签都应该位于该标签里面。

(( 22 ) ) <head><head> 标签 标签

<HEAD><HEAD> 和和 </HEAD></HEAD> 标签标明文件的表头段,标签标明文件的表头段,主要说明本文内容整体信息,是文章的开场白。所主要说明本文内容整体信息,是文章的开场白。所有在表头段的内容都不会显现在浏览器窗口的本体有在表头段的内容都不会显现在浏览器窗口的本体段段 (Client area)(Client area) 里。里。

HTMLHTML 的常用标签的常用标签

Page 30: 第四章 超文本与超媒体

(( 44 )) <body><body> 标签 标签

<BODY><BODY> 和和 </BODY></BODY> 标签标明文件的本体区标签标明文件的本体区段,位于表头段以下的地方,即是指经浏览器解读段,位于表头段以下的地方,即是指经浏览器解读后显示在窗口本体段后显示在窗口本体段 (Client area)(Client area) 的内容。的内容。

文档名称标签告诉浏览器在文档名称标签告诉浏览器在 <title>...</titl<title>...</title>e> 之间包含的是具体的之间包含的是具体的 HTMLHTML 文档名称,名称的文档名称,名称的长度通常不超过长度通常不超过 6464 个字符数。个字符数。 <TITLE><TITLE> 标签里不标签里不允许有其它的标签存在。允许有其它的标签存在。

(( 33 )) <title><title> 标签 标签

Page 31: 第四章 超文本与超媒体

(( 55 )) <hn><hn> 标签 标签 <Hn><Hn> 和和 <<// Hn>Hn>叫子标题标识,用来区分叫子标题标识,用来区分章节标题字体的大小,浏览时会显示不同的大小字章节标题字体的大小,浏览时会显示不同的大小字型。型。 HTMLHTML 定义了6个级别的子标题,其格式为:定义了6个级别的子标题,其格式为:<Hn><Hn>子标题内容子标题内容 </Hn></Hn> 。其中。其中 nn 可在1可在1 ~~6中进6中进行选择(1号最大,6号最小)。行选择(1号最大,6号最小)。 (( 66 )) <p><p> 标签 标签

段落标签告诉浏览器在段落标签告诉浏览器在 <p>......</p><p>......</p> 之间包之间包含的是一段文字。在含的是一段文字。在 HTMLHTML 文档中,文档中, <P><P> 和和 </P></P>之间不论有多少行,不论每一行有多长或者多短,也之间不论有多少行,不论每一行有多长或者多短,也不论其间有多少个空格,浏览器都把它作为一个段落不论其间有多少个空格,浏览器都把它作为一个段落来处理。来处理。

Page 32: 第四章 超文本与超媒体

(( 77 )) <PRE><PRE> 标签 标签 预格式文本标签用于产预格式文本标签用于产生固定宽度的字符,在生固定宽度的字符,在 <PRE<PRE>......</PRE>>......</PRE> 之间的空格、新行、之间的空格、新行、空行和表格与空行和表格与 HTMLHTML源文档中的源文档中的一致。一致。例如:预格式文本定义例如:预格式文本定义

<PRE ><PRE >

登鹳雀楼登鹳雀楼白日依山尽,白日依山尽,黄河入海流,黄河入海流,欲穷千里目,欲穷千里目,更上一层楼。更上一层楼。</PRE></PRE>

例如:段落文本定义例如:段落文本定义 <P align=center><P align=center>

登鹳雀楼登鹳雀楼白日依山尽,白日依山尽,黄河入海流,黄河入海流,欲穷千里目,欲穷千里目,更上一层楼。更上一层楼。</P></P>

在段落标签中可以添加在段落标签中可以添加对齐方式属性对齐方式属性 align,align, 属性值可取属性值可取center,left,rightcenter,left,right 之一,默认为之一,默认为 leleft.ft.

Page 33: 第四章 超文本与超媒体

(( 88 )) <br><br> 标签 标签 换行控制标签换行控制标签

(( 99 )) <hr><hr> 标签 标签

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

Page 34: 第四章 超文本与超媒体

(( 1010 )) <font><font> 标签 标签

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

Page 35: 第四章 超文本与超媒体

(( 1111 ))列表标签 列表标签

HTML HTML 语言提供多种表结构的元素,根语言提供多种表结构的元素,根据显示外观的不同可分为两类:词汇表据显示外观的不同可分为两类:词汇表 (Glossa(Glossary List)ry List) 和规律性表和规律性表 (Regular List) (Regular List) 。。

规律性表又可分为两种:规律性表又可分为两种:第一种是有序表;第二种是无序表。第一种是有序表;第二种是无序表。

Page 36: 第四章 超文本与超媒体

定义表定义表 (DL)(DL)

定义表属于词汇表定义表属于词汇表,它是由一系列项目,它是由一系列项目和其定义叙述所组成的。一般定义表的每个项和其定义叙述所组成的。一般定义表的每个项目都列在左边,而其定义则列在右边或下一行目都列在左边,而其定义则列在右边或下一行有缩排的段落。有缩排的段落。

定义表结构块,是由起始标签定义表结构块,是由起始标签 <DL><DL> 和和结束标签结束标签 </DL></DL> 包围形成的,而每一个项目包围形成的,而每一个项目则以则以 <DT><DT> 项目标签和项目标签和 <DD><DD> 定义叙述标签来定义叙述标签来表示。表示。

Page 37: 第四章 超文本与超媒体

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

实例:

Page 38: 第四章 超文本与超媒体

规律性表规律性表规律性表结构是一组序列段落,以一个特规律性表结构是一组序列段落,以一个特

殊记号、序数或空格为分项符号。它的一般语法殊记号、序数或空格为分项符号。它的一般语法为:为:

<< 表列元素起始标签表列元素起始标签 >> << 表列项目元素表列项目元素 >> << 表列项目元素表列项目元素 >> .............................. ..............................<< 表列元素结束标签表列元素结束标签 >>

Page 39: 第四章 超文本与超媒体

①①. . 无序表无序表 典型的无序表的每一个项目前端,都典型的无序表的每一个项目前端,都用一个实心小圆点作为分项符号。无序表结构块,用一个实心小圆点作为分项符号。无序表结构块,是由起始标签是由起始标签 <UL><UL> 和结束标签和结束标签 </UL></UL> 包围形包围形成的,而每一个项目是以成的,而每一个项目是以 <LI><LI>项目标签来表示。项目标签来表示。

浏览器为无序表元素添加了属性浏览器为无序表元素添加了属性 TYPETYPE ,,它的值分别是表的分项符号样式,其值共有三它的值分别是表的分项符号样式,其值共有三种:种: DISCDISC(( 实心小圆点实心小圆点 )) 、、 CIRCLECIRCLE((虚心小圆虚心小圆圈圈 )) 和和 SQUARESQUARE(( 实心小方块实心小方块 )) ,缺省为,缺省为 DISCDISC 。。

Page 40: 第四章 超文本与超媒体

<UL><UL> <LI><LI> 理解理解 InternetInternet <LI><LI>访问访问WWWWWW <LI><LI> 理解理解 WebWeb 发发布布</UL></UL>

实例:实例:

实例:实例:

<UL <UL TYPETYPE = = SQUARESQUARE >> <LI><LI> 理解理解 InternetInternet <LI><LI>访问访问WWWWWW <LI><LI> 理解理解 WebWeb发布发布</UL></UL>

Page 41: 第四章 超文本与超媒体

②②. . 有序表有序表有序表的每个项目都有前后顺序之分多有序表的每个项目都有前后顺序之分多

数用数字来表示。有序表结构块,是由起始标数用数字来表示。有序表结构块,是由起始标签签 <OL><OL> 和结束标签和结束标签 </OL></OL> 包围形成的。而包围形成的。而每一个项目是以每一个项目是以 <LI><LI>项目标签来表示。项目标签来表示。

浏览器为有序表添加了浏览器为有序表添加了 TYPETYPE 和和 STARTSTART属性,属性, TYPETYPE属性可提供更多项目识别符号。属性可提供更多项目识别符号。它总共提供了五种不同样式的分项符号,分别它总共提供了五种不同样式的分项符号,分别如下所列。缺省值为如下所列。缺省值为 TYPE=1TYPE=1 。。

Page 42: 第四章 超文本与超媒体

STARTSTART 属性属性可设置表项目的初始值,其可设置表项目的初始值,其值为分项符号样式列中第几个,如值为分项符号样式列中第几个,如 START=5START=5就表示由‘就表示由‘ 5’5’ 、‘、‘ E’E’ 、‘、‘ e’e’ 、‘、‘ V’V’ 、‘、‘ v’v’开始。 开始。

<OL TYPE=1> <OL TYPE=1> 数字,如数字,如 1,2,3...1,2,3...<OL TYPE=A> <OL TYPE=A> 大写字母,如大写字母,如 A,B,C...A,B,C...<OL TYPE=a> <OL TYPE=a> 小写字母,如小写字母,如 a,b,c...a,b,c...<OL TYPE=I> <OL TYPE=I> 大写罗马字母,如Ⅰ大写罗马字母,如Ⅰ , , ...ⅡⅢ, , ...ⅡⅢ<OL TYPE=i> <OL TYPE=i> 小写罗马字母,如小写罗马字母,如 i,ii,iii...i,ii,iii...

Page 43: 第四章 超文本与超媒体

<H2><H2>打开打开WebWeb资源的步骤资源的步骤 </H2></H2>

<OL><OL>

<LI><LI> 在用户浏览器中,输要访问资源的完整在用户浏览器中,输要访问资源的完整 URLURL 。。    <LI><LI> 浏览器把请示发送到正与之通信的服务器。浏览器把请示发送到正与之通信的服务器。    <LI><LI> 用户服务器把该请求转发一在用户服务器把该请求转发一在 URLURL 中所规定的中所规定的服务器。服务器。    <LI><LI>那个服务器查找资源并把它发回到用户服务器。那个服务器查找资源并把它发回到用户服务器。    <LI><LI> 用户服务器把资源发送到用户浏览器。用户服务器把资源发送到用户浏览器。 </OL></OL>

实例实例 ::

Page 44: 第四章 超文本与超媒体

实例实例 ::

<H2><H2>打开打开WebWeb资源的步骤资源的步骤 </H2></H2>

<OL type=a start=3><OL type=a start=3>

<LI><LI> 在用户浏览器中,输要访问资源的完整在用户浏览器中,输要访问资源的完整 URLURL 。。

    <LI type=1><LI type=1> 浏览器把请示发送到正与之通信的服务器。浏览器把请示发送到正与之通信的服务器。

   <LI><LI> 用户服务器把该请求转发一在用户服务器把该请求转发一在 URLURL 中所规定的服务中所规定的服务

器。器。

   <LI><LI>那个服务器查找资源并把它发回到用户服务器。那个服务器查找资源并把它发回到用户服务器。

   <LI><LI> 用户服务器把资源发送到用户浏览器。用户服务器把资源发送到用户浏览器。

</OL></OL>

Page 45: 第四章 超文本与超媒体

(( 1212 ))超链接标签超链接标签

链接是链接是 HTMLHTML 的一个最强大和最有价的一个最强大和最有价值的功能。链接是指文档中的文素或者图象与另值的功能。链接是指文档中的文素或者图象与另一个文档、文档的一部分或者一幅图象链接在一一个文档、文档的一部分或者一幅图象链接在一起。在起。在 HTMLHTML 中,简单的链接标签是中,简单的链接标签是 <A><A> ,也,也称为锚称为锚 (anchor)(anchor) 签。签。

要把一个文档包含在你的文档中,它的基要把一个文档包含在你的文档中,它的基本语法是:本语法是:<A HREF="<A HREF=" 文件名文件名 "> ... </A>"> ... </A> 或 或 <A HREF="URL"> ... </A><A HREF="URL"> ... </A>

其中其中 HREFHREF 是是 hypertext referencehypertext reference 的缩略词的缩略词

Page 46: 第四章 超文本与超媒体

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

例如例如 : :

Page 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>

Page 48: 第四章 超文本与超媒体

这个文档在浏览器上将显示为如下样式这个文档在浏览器上将显示为如下样式

在在 WebWeb 浏览器上显示文档时,通常用不浏览器上显示文档时,通常用不同的颜色来区分有链接关系和没有链接关系的文同的颜色来区分有链接关系和没有链接关系的文素。有链接关系的文素通常用蓝色和下划线表示。素。有链接关系的文素通常用蓝色和下划线表示。

Page 49: 第四章 超文本与超媒体

URLURL(Uniform Resource Locator)(Uniform Resource Locator) 是识别因特是识别因特网网 (Internet)(Internet) 上任何一个文件地址或资源地址的标上任何一个文件地址或资源地址的标准表示法,称为统一资源地址。万维网准表示法,称为统一资源地址。万维网 (WWW)(WWW)使用使用 URLURL 来指定在其他服务器上文档的位置。一来指定在其他服务器上文档的位置。一个信息资源在网络上的个信息资源在网络上的 URLURL 地址通常由三个部分地址通常由三个部分组成:组成:

(( 11 )请求服务类型,它用来说明使用什么网络协议)请求服务类型,它用来说明使用什么网络协议来存取资源,如来存取资源,如 WebWeb 上的服务程序使用上的服务程序使用 httphttp ,文件,文件传送使用传送使用 ftpftp 等。等。(( 22 )网络上的主机名。)网络上的主机名。(( 33 )服务机上的文件名。)服务机上的文件名。

Page 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 的文件”。

Page 51: 第四章 超文本与超媒体

例如例如上例中上例中 ,, 如果文档“如果文档“ HTMLPrimerP1.html ”HTMLPrimerP1.html ” 不不在同一台机器上,而是在在同一台机器上,而是在URLURL== http://nn.sce.tsinghua.edu.cn/kj/Lec01/http://nn.sce.tsinghua.edu.cn/kj/Lec01/

下,就要使用绝对路径并写成:下,就要使用绝对路径并写成:

<A href="http://nn.sce.tsinghua.edu.cn/kj<A href="http://nn.sce.tsinghua.edu.cn/kj /Lec01/HTMLPrimerP1.html">/Lec01/HTMLPrimerP1.html"> 第一第一部分部分 </A></A>

Page 52: 第四章 超文本与超媒体

在在 HTMLHTML 中,不仅可以从网页链接到网中,不仅可以从网页链接到网页,而且还可以在一个网页内部链接。因此页,而且还可以在一个网页内部链接。因此 ,, 链接链接分成两种分成两种 :: 一种是一种是标准链接标准链接,另一种是,另一种是页内链接页内链接。。

标准链接标准链接是两个网页间的链接,它有绝对是两个网页间的链接,它有绝对 URLURL 和相对和相对

URLURL 两种链接方式。绝对两种链接方式。绝对 URLURL 中要包含协议指示中要包含协议指示符、主机名、文件夹名和文件名符、主机名、文件夹名和文件名 ,, 相对相对 URLURL 通常只通常只包含文件夹和文件名,甚至只有文件名。因此,相包含文件夹和文件名,甚至只有文件名。因此,相对链接有着极大的优势,可以任意的将网站文件或对链接有着极大的优势,可以任意的将网站文件或文件夹转移到其他位置,而网页文件之间的链接关文件夹转移到其他位置,而网页文件之间的链接关系不会破坏。系不会破坏。

Page 53: 第四章 超文本与超媒体

页内链接页内链接 即指向单个即指向单个 HTMLHTML 网页内的任何地方的网页内的任何地方的链接,在网页中定义一个书签链接,在网页中定义一个书签 bookbook ,然后可以在,然后可以在网页中设置一个页内链接。网页中设置一个页内链接。

制作页内链接的方法是:制作页内链接的方法是:① ① 首先把某段落设置为链接位置,格式为首先把某段落设置为链接位置,格式为 <A NAME=“<A NAME=“链接位置名称”链接位置名称” ></A>></A>② ② 再调用此链接部分的文件,格式为再调用此链接部分的文件,格式为 <A HREF=“<A HREF=“文件名文件名 ##链接位置名称”链接位置名称” >>链源文字链源文字</A></A> 如果是在一个文件内跳转,文件名可以省去如果是在一个文件内跳转,文件名可以省去

Page 54: 第四章 超文本与超媒体

现仍以《现仍以《 HTMLHTML初学者指南》文档为初学者指南》文档为例。假设该文档分成例。假设该文档分成 44 个部分,而且这个部分,而且这 44 个部分个部分都在同一个文档中,要求在浏览器上显示如图所都在同一个文档中,要求在浏览器上显示如图所示的样式示的样式

Page 55: 第四章 超文本与超媒体

源文件如下所示:源文件如下所示:<HTML><HTML><HEAD><TITLE>HTML<HEAD><TITLE>HTML初学者指南初学者指南 </TITLE></HEAD></TITLE></HEAD><BODY><BODY><H2 ALIGN="CENTER"><A NAME="HTML<H2 ALIGN="CENTER"><A NAME="HTML 入门入门 "></"></A>HTMLA>HTML入门入门 </H2></H2><CENTER><CENTER><A><A HREF="#<A><A HREF="# 第一部分 第一部分 HTMLHTML简介简介 ">">第一部分第一部分 </A</A> |> |<A><A HREF="#<A><A HREF="# 第二部分 第二部分 HTMLHTML 标签和属性标签和属性 ">">第二第二部分部分 </A> |</A> |<A><A HREF="#<A><A HREF="# 第三部分 字符样式第三部分 字符样式 ">">第三部分第三部分 </A> |</A> |<A><A HREF="#<A><A HREF="# 第四部分 超链接第四部分 超链接 ">">第四部分第四部分 </A></C</A></CENTER>ENTER><CENTER>…</CENTER><BR><CENTER>…</CENTER><BR>

Page 56: 第四章 超文本与超媒体

<H3 ALIGN="CENTER"><A NAME="<H3 ALIGN="CENTER"><A NAME=" 第一部分 第一部分 HTHTMLML简介简介 ">">第一部分 第一部分 HTMLHTML简介 简介 </A></H3></A></H3><CENTER>…</CENTER><CENTER>…</CENTER><CENTER><A HREF="#HTML<CENTER><A HREF="#HTML 入门入门 ">">返回到开头返回到开头 </</A></CENTER>A></CENTER><H3 ALIGN="CENTER"><A NAME="<H3 ALIGN="CENTER"><A NAME=" 第二部分 第二部分 HTHTMLML 标签和属性标签和属性 "></A>"></A>第二部分 第二部分 HTMLHTML 标签和属性标签和属性 </</H3>H3><CENTER>…</CENTER><CENTER>…</CENTER><CENTER><A HREF="#HTML<CENTER><A HREF="#HTML 入门入门 ">">返回到开头返回到开头 </</A></CENTER>A></CENTER><H3 ALIGN="CENTER"><A NAME="<H3 ALIGN="CENTER"><A NAME=" 第三部分 字符第三部分 字符样式样式 "></A>"></A>第三部分 字符样式 第三部分 字符样式 </H3></H3><CENTER>…</CENTER><CENTER>…</CENTER><CENTER><A HREF="#HTML<CENTER><A HREF="#HTML 入门入门 ">">返回到开头返回到开头 </</A></CENTER>A></CENTER>

Page 57: 第四章 超文本与超媒体

<H3 ALIGN="CENTER"><A NAME="<H3 ALIGN="CENTER"><A NAME="第四部分 超第四部分 超链接链接 "></A>"></A> 第四部分 超链接第四部分 超链接 </H3></H3><CENTER>…</CENTER><CENTER>…</CENTER><CENTER><A HREF="#HTML<CENTER><A HREF="#HTML 入门入门 ">"> 返回到开头返回到开头</A></CENTER></A></CENTER></BODY></BODY></HTML></HTML>

Page 58: 第四章 超文本与超媒体

(( 1313 ))链接电子邮件程序 链接电子邮件程序

<a href=mailto:[email protected]><a href=mailto:[email protected]> 与我联系与我联系 </a></a>

在在 WebWeb 页面上链接电子邮件程序需要使页面上链接电子邮件程序需要使用“用“ mailto”mailto” 。使用。使用 mailtomailto 可以创建预先填入有电可以创建预先填入有电子邮件地址的表单,其中的电子邮件地址可以是子邮件地址的表单,其中的电子邮件地址可以是作者的,也可以是第三者的,这样可鼓励读者反作者的,也可以是第三者的,这样可鼓励读者反馈信息,如馈信息,如 ::

只要你用鼠标器点击它,就会调出电子邮件只要你用鼠标器点击它,就会调出电子邮件编辑器供你编写电子函件。编辑器供你编写电子函件。

Page 59: 第四章 超文本与超媒体

(( 1414 ))图像的链接与插入 图像的链接与插入

<a href=“图像文件地址 ">图像名称 </a>①①图像的链接格式图像的链接格式

②②图像的插入格式图像的插入格式<IMG SRC=“图像文件地址 ">

插入图像的属性可以有:插入图像的属性可以有: height,width,alignheight,width,align(图文对齐方式)(图文对齐方式) ,Hspace(,Hspace( 图文水平位置),图文水平位置), vspacvspacee(( 图文水平位置图文水平位置 ))等等

Page 60: 第四章 超文本与超媒体

图形顶端位置与文字基线对齐 ALIGN=top

图形中间位置与文字基线对齐 ALIGN=middle

图形底端位置与文字基线对齐 ALIGN=bottom(缺省值 )图形顶端位置与文字最高位置对齐 ALIGN=texttop图形顶端位置与行文字基线对齐 ALIGN=baseline

图文对齐排列方式图文对齐排列方式

例如:例如:<img src=“love.gif” align=top><img src=“love.gif” align=top>美丽的图片美丽的图片<img src=“love.gif” align=right><img src=“love.gif” align=right>美丽的图片美丽的图片<img src=“love.gif” hspace=50><img src=“love.gif” hspace=50>美丽的图片美丽的图片

Page 61: 第四章 超文本与超媒体

③③用图像作超链接用图像作超链接<A HREF=“资源地址 "> <IMG HREF=“图像文件地址 "> </A>

④④用图像作网页的背景 用图像作网页的背景

<BODY BACKGROUND="filename.gif"><BODY BACKGROUND="filename.gif">

Page 62: 第四章 超文本与超媒体

(( 1515 ))声音文件的链接与嵌入 声音文件的链接与嵌入

<A HREF=“声音文件地址” >声音名称 </A>①①声音的链接格式声音的链接格式

②②声音的嵌入格式声音的嵌入格式<EMBED SRC=“声音文件地址 ">

嵌入声音的属性可以有:嵌入声音的属性可以有: autostart=ture/false,autostart=ture/false,loop=ture/false,width,height, loop=ture/false,width,height, 等。等。

③③网页的背景声音 网页的背景声音 <BGSOUND SRC=“声音文件地址 ">

Page 63: 第四章 超文本与超媒体

(( 1616 ))视频文件的链接与嵌入 视频文件的链接与嵌入

<A HREF=“视频文件地址” >视频名称 </A>①①视频的链接格式视频的链接格式

②②视频的嵌入格式视频的嵌入格式<EMBED SRC=“视频文件地址 ">

嵌入视频的属性可以有:嵌入视频的属性可以有: autostart=ture/false,autostart=ture/false,loop=ture/false,width,height, loop=ture/false,width,height, 等。等。

Page 64: 第四章 超文本与超媒体

(( 1717 ))移动对象 移动对象 移动标签移动标签 <marquee></marquee><marquee></marquee>可以使放置可以使放置于其中的对象产生滚动的效果。于其中的对象产生滚动的效果。 其属性有:其属性有: 方向方向 direction=left/right/up/dowmdirection=left/right/up/dowm 方式方式 behavior=scroll/slide/alternatebehavior=scroll/slide/alternate 循环循环 loop=loop=次数次数 速度速度 scrollamount=scrollamount= 整数整数 延时延时 scrolldelay=scrolldelay= 整数整数 对齐对齐 align=top/middle/bottomalign=top/middle/bottom 背景色背景色 bgcolor=bgcolor=十六进制数码十六进制数码 移动区域移动区域 height=height= 像素 像素 width=width= 像素像素

Page 65: 第四章 超文本与超媒体

交易表单标签用来收集用户的信息,交易表单标签用来收集用户的信息,它可以包含让用户输入文本和选择项目的它可以包含让用户输入文本和选择项目的接口构件,如文本域、按钮、复选框、单接口构件,如文本域、按钮、复选框、单选按钮和选择列表等。选按钮和选择列表等。

(( 1818 )) <from><from> 交易表单命令标签 交易表单命令标签

11 、交易表单中的所有构件必须在、交易表单中的所有构件必须在 <form>......</<form>......</form>form>之间定义。之间定义。

22、在交易表单中的每个接口构件必须和输入标签、在交易表单中的每个接口构件必须和输入标签(<input>)(<input>)或者选择标签或者选择标签 (<selection>)(<selection>)一起定一起定义义 ;;

设置交易表单时需要注意 :

Page 66: 第四章 超文本与超媒体

表单的基本语法是:表单的基本语法是:<form action=“url” method=get/post><form action=“url” method=get/post>…………<input type=* name=**><input type=* name=**></form></form>

url:url: 动作页面的地址。即将动作页面的地址。即将 formform 区域内部各个对象的 区域内部各个对象的 当前内容递交到服务器端用来处理这些信息的页面地址 当前内容递交到服务器端用来处理这些信息的页面地址 GetGet:表单递交为获取方式。当想从服务器上获取数据,:表单递交为获取方式。当想从服务器上获取数据,并且不改变服务器上的数据时选此法。此法只适合发送并且不改变服务器上的数据时选此法。此法只适合发送字节低于字节低于 10241024字节的场合。字节的场合。

Page 67: 第四章 超文本与超媒体

Post:Post:表单递交为发送方式。当发送的数据将改表单递交为发送方式。当发送的数据将改变服务器端的数据或给变服务器端的数据或给 cgicgi程序发送的 数据超过程序发送的 数据超过了了 10241024字节时,选用此法。 字节时,选用此法。

*:*: 输入类型。可以是输入类型。可以是 text(text( 单行文本框)、单行文本框)、 passwworpasswwordd((密码框)、密码框)、 checkbox(checkbox( 复选框)、复选框)、 radioradio(单选框)、(单选框)、hidden(hidden(隐藏域)、隐藏域)、 submit(submit(提交)、提交)、 resetreset (重置)(重置)等等****:可以被:可以被 cgicgi脚本或程序引用的符号名称脚本或程序引用的符号名称

Page 68: 第四章 超文本与超媒体

<html><html><head><title><head><title>检查身份检查身份 </head></title></head></title><body background=bj001.jpg><body background=bj001.jpg><center><font size =+2 color=“#ff0099”><b<center><font size =+2 color=“#ff0099”><b> > 欢迎 欢迎 选修选修 </b></font><br></b></font><br>

<font color=#0000ff><font color=#0000ff> 多媒体技术多媒体技术 </font></ce</font></center>nter><hr><hr>

例: 例: <form><form> 标签使用标签使用

Page 69: 第四章 超文本与超媒体

<form method="post" action="cgi-bin/passwod<form method="post" action="cgi-bin/passwodl.asp">?l.asp">?<font size=+1><font size=+1> 请输入您的姓名请输入您的姓名 :: <input type="text“ name="firstname"><br><input type="text“ name="firstname"><br> 请输入您的密码请输入您的密码 :: <input type="password“ name="passwd"><br><input type="password“ name="passwd"><br> <pre><input type="submit“ value="<pre><input type="submit“ value=" 提交提交 "> "> <input type="reset"? value="<input type="reset"? value="重填重填 "></font>"></font> </body></body> </html></html>

Page 70: 第四章 超文本与超媒体

( 19)表格标签 HTMLHTML 中语言中用中语言中用 <table>...</table><table>...</table> 定定义表格。义表格。

基本表格结构基本表格结构在基本表格结构中,在基本表格结构中,表格标题表格标题、、项目表头项目表头

和和数据资料数据资料构成了表格基本结构三个要素。构成了表格基本结构三个要素。表格标题用表格标题用 <caption>...</caption> <caption>...</caption> 定义定义 项目表头用项目表头用 <th>...</th><th>...</th> 定义定义数据资料用数据资料用 <td>...</td><td>...</td> 定义定义用用 <tr>...</tr><tr>...</tr> 定义表行定义表行

Page 71: 第四章 超文本与超媒体

设置表格设置表格 设置设置有框线表格有框线表格:: <table border>...</table><table border>...</table> 或或 <table border=1>...</table><table border=1>...</table> 设置设置无框线表格无框线表格:: <table>...</table><table>...</table> 或或 <table border=0>...</table><table border=0>...</table> 设置设置表格的大小表格的大小:: <table width=n1 height=n2><table width=n1 height=n2>

设置表格行数:设置表格行数: TRTR元素表示表格的行一份表格的元素表示表格的行一份表格的行数由行数由 <TR><TR>标签个数来决定。标签个数来决定。设置表格列数:表格列数由一行中所包括的设置表格列数:表格列数由一行中所包括的 THTH 和和 TDTD元素个数来决定。元素个数来决定。

Page 72: 第四章 超文本与超媒体

<table border><table border><caption>Internet<caption>Internet 应用形态比较 应用形态比较 </caption></caption><tr><th><tr><th>应用类型应用类型 \\年度年度 </th><th>1993</th> </th><th>1993</th> <th>1994<th>1994 年年 </th><th>1995</th><th>1995年年 </th></tr></th></tr><tr><th><tr><th>当月传输量当月传输量 <br>(Giga Byte)</th> <br>(Giga Byte)</th> <td>5,159</td><td>10,294</td><td>5,159</td><td>10,294</td> <td>19,119</td></tr><td>19,119</td></tr><tr><th>FTP</th><td>2,412</td><td>4,243</td><tr><th>FTP</th><td>2,412</td><td>4,243</td> <td>5,784</td></tr><td>5,784</td></tr><tr><th>WWW</th><td>0.122</td><td>269</td><tr><th>WWW</th><td>0.122</td><td>269</td> <td>3,382<td></tr><td>3,382<td></tr></table> </table>

实例:

Page 73: 第四章 超文本与超媒体
Page 74: 第四章 超文本与超媒体

4.HTML 的特点 创建和实现独立于平台的文档 与 Internet 上其他文档相连接 WWW 页面包括图形和多媒体 能够链接 Internet 上的其他资源

Page 75: 第四章 超文本与超媒体

Dreamweaver 是由美国 Macromedia公司开发的集网页制作和管理网站于一体的网页编辑器。 Dreamweaver 的主要特点有:

* 简单易用的操作环境;

* 完善的 HTML控制和编辑功能;

* 方便有效的站点管理;

* 丰富的基本对象和网页元素等。

4.3 4.3 Dreamweaver 的使用

Page 76: 第四章 超文本与超媒体

这里以 Dreamweaver MX中文版为例介绍其功能与应用。这是一个专业的创建 Web应用程序的可视化编辑器。它不仅能完成一个网页的编辑任务,它还可以实现完整的数据库文件的编写。

4.3.1 4.3.1 Dreamweaver MXDreamweaver MX 的基本使的基本使用用4.3.2 4.3.2 基本基本 WebWeb 页面的制作页面的制作

4.3.3 4.3.3 框架、表格和表单的使用框架、表格和表单的使用

Page 77: 第四章 超文本与超媒体

在 Dreamweaver MX中,操作界面

由标题栏、菜单栏、对象工具栏面板以及位

于工作区上的各种浮动面板等构件组成,如

图所示是 Dreamweaver MX启动后的一个界

1 、操作界面介绍

4.3.1 4.3.1 Dreamweaver mx 的基本使用

Page 78: 第四章 超文本与超媒体
Page 79: 第四章 超文本与超媒体

11 、标题栏和菜单栏及工具栏 、标题栏和菜单栏及工具栏

标题栏 在文档窗口的最上面,它标注了标题栏 在文档窗口的最上面,它标注了 编辑文档的标题编辑文档的标题主菜单 也叫文件菜单或程序菜单,分为文 主菜单 也叫文件菜单或程序菜单,分为文 件、编辑、查看、插入、修改、文件、编辑、查看、插入、修改、文 本、命令、站点、窗口和帮助几类本、命令、站点、窗口和帮助几类文档工具栏 可以切换代码编辑模式、设计文档工具栏 可以切换代码编辑模式、设计 编辑模式和拆分编辑模式,可修改编辑模式和拆分编辑模式,可修改 文档名称,还有调式和辅助设计按文档名称,还有调式和辅助设计按 钮。钮。

Page 80: 第四章 超文本与超媒体

2、对象工具栏面板 对象工具栏包含了用于创建不同类型对对象工具栏包含了用于创建不同类型对象(如图像、表格和层等)的按钮,利用对象象(如图像、表格和层等)的按钮,利用对象工具栏面板,能够插入各种工具栏面板,能够插入各种 DreamweaverDreamweaver 所支所支持的对象。图中显示的是常用对象面板,其它持的对象。图中显示的是常用对象面板,其它的还有表单、布局、字符等面板,可以插入图的还有表单、布局、字符等面板,可以插入图像、表格、层、邮件链接、像、表格、层、邮件链接、 FlashFlash 动画和导航动画和导航等各种对象。等各种对象。 3、对象属性面板

属性浮动面板用来设置对象的属性。当选属性浮动面板用来设置对象的属性。当选择不同的对象时会自动切换到该对象对应的属择不同的对象时会自动切换到该对象对应的属性面板性面板 ,, 供用户进行相关对象属性的设置与修供用户进行相关对象属性的设置与修改。改。

Page 81: 第四章 超文本与超媒体

4、状态栏 操作界面的最下面是状态栏,用来显示一些有用的信息。如当前操作对象所对应的 HTML 标识符、窗口显示的大小和该页面预计下载的速度以及一个可操作的小型启动面板等。

5、制作工具面板组

屏幕右边是制作工具面板组 ,包括 : 设计、代码、应用程序、文件、标签检查器面板。

Page 82: 第四章 超文本与超媒体

设计面板设计面板中包括中包括 CSSCSS 样式管理工具和层管理样式管理工具和层管理代码面板代码面板中包括很多代码片段,可以在制作 中包括很多代码片段,可以在制作 程序的过程中随便调用,另外还可 程序的过程中随便调用,另外还可 在线查阅资料。在线查阅资料。应用程序面板应用程序面板中包括了数据库、绑定、服务中包括了数据库、绑定、服务 器行为及组件,可方便地创建站点、器行为及组件,可方便地创建站点、 绑定数据、在服务器上测试网站效绑定数据、在服务器上测试网站效 果。果。文件面板文件面板里可方便地添加或删除文件,管理里可方便地添加或删除文件,管理 网页文件,还可调用各种媒体资源网页文件,还可调用各种媒体资源标签面板标签面板可修改主页面的特性,如背景颜色可修改主页面的特性,如背景颜色

Page 83: 第四章 超文本与超媒体

2 、设置工作环境

使用使用 DreamweaverDreamweaver 进行网页创作,首先要进行网页创作,首先要对其工作环境进行设置。在对其工作环境进行设置。在 DreamweaverDreamweaver 中,中,环境参数的设置是通过编辑菜单中的参数对话环境参数的设置是通过编辑菜单中的参数对话框来进行的,它提供了许多设置项目,如“常框来进行的,它提供了许多设置项目,如“常规项规项 || 移动文件时的新链接”项,其作用是设置移动文件时的新链接”项,其作用是设置当在站点编辑窗口中进行文件编辑操作后是否当在站点编辑窗口中进行文件编辑操作后是否自动更新与该文件有关的超链接;“在浏览器自动更新与该文件有关的超链接;“在浏览器中预览”项,用于设置使用哪种浏览器来预览中预览”项,用于设置使用哪种浏览器来预览自己所编辑的网页,可以添加自己所编辑的网页,可以添加 NetscapeNetscape 和和 IEIE 等等作为自己的预览浏览器。作为自己的预览浏览器。

Page 84: 第四章 超文本与超媒体

3 、建立站点 建立本地站点的目的是建立一个网页的大本营,这样 Dreamweaver MX才能根据定义的文件夹位置存取网页,以后所有使用到的文件都保存到这个文件夹里,以免在提取时出现找不到路径的错误。• 在自己的硬盘上建立一个新的文件夹,作为网页文件夹• 启动 Dreamweaver后,执行菜单栏命令“站 点 |管理站点”,弹出下图所示的对话框。

Page 85: 第四章 超文本与超媒体

• 在弹出窗口中,点击新建,选择站点类型在弹出窗口中,点击新建,选择站点类型 ,, 系统会弹出定义站点的导航窗口系统会弹出定义站点的导航窗口 ,, 依次定义依次定义 站点名称、选择是否使用服务器技术、新 站点名称、选择是否使用服务器技术、新 站点存入在哪个文件夹中、系统如何连接站点存入在哪个文件夹中、系统如何连接 到远程服务器上,这样新建一个站点的到远程服务器上,这样新建一个站点的 基本工作就完成了。基本工作就完成了。

Page 86: 第四章 超文本与超媒体
Page 87: 第四章 超文本与超媒体
Page 88: 第四章 超文本与超媒体
Page 89: 第四章 超文本与超媒体
Page 90: 第四章 超文本与超媒体
Page 91: 第四章 超文本与超媒体

• 更为详细的内容用高级选项卡定义。 本地信息 分类记录着网站名称,网站文件的本地 硬盘存放路径,默认图象文件夹的作用 是为网站中的图片指定一个存放路径, 在网页制作过程中,经常需要一些网站 文件夹以外的图片,系统为了保证链接 正确,会将图片自动复制到该目录下。

Page 92: 第四章 超文本与超媒体
Page 93: 第四章 超文本与超媒体

远程信息 设置如何发布站点,有如下选项 无 如果不打算将站点上传到服务器。 本地 /网络 如果访问网络文件夹,或者如果在 本地计算机上运行 Web 服务器。 FTP 如果使用 FTP 连接到 Web 服务器 RDS(远程开发服务),如果使用 RDS 连 接到 Web 服务器。 SourceSafe 数据库,如果使用 SourceSafe 数据 库连接到 Web 服务器。WebDAV(基于 Web 的分布式创作和版本控制), 如果使用 WebDAV 协议连接到 Web 服务 器。

Page 94: 第四章 超文本与超媒体
Page 95: 第四章 超文本与超媒体

• 按要求设置好远程信息后按确定,在管理 站点点击“完成”,这样,站点定义工作就 完成了。这时在文件面板可查看站点文件 的列表情况

Page 96: 第四章 超文本与超媒体

4 、管理站点 当定义站点以后,就可以在站点中进行创建或增加文件和目录等操作,并可以随时对文件进行修改。我们可以通过文件面板右上角的站点选项卡对站点进行管理,如下图

Page 97: 第四章 超文本与超媒体

本节介绍建立基本 Web 页面用到的一些常用元素及其相应的操作步骤。

1 、建立一个空白主页文件 创建本地站点,然后在该站点根目录下单击鼠标右键,在弹出的菜单中选择“新建文件”建立一个新的 Web 页面,作为该站点的第一个页面文件。也可以执行菜单命令“文件 >新建文件“来新建一个空白的文件。另外,对于已经存在的文件,只要用鼠标双击就可以在编辑器中激活来进行编辑。

4.3.2 4.3.2 基本 Web页面的制作

Page 98: 第四章 超文本与超媒体

2 、设置主页文件的属性

在网页中添加内容之前,要对网页进行

基本属性设置,如标题、背景色、文本颜色

等。在网页编辑窗口中,执行菜单命令“修

改 | 页面属性”,从弹出的对话框中选择“页面

属性”命令,即可打开页面属性对话框

Page 99: 第四章 超文本与超媒体
Page 100: 第四章 超文本与超媒体

3 、向页面中添加文本内容 文本是网页中最为重要的信息,其添加方法有两种:一是直接在页面中输入文字;二是通过剪切板使用粘贴工具把其它文字处理软件中的文本内容粘贴到当前的页面中。加入文本信息后,就可以用文字属性面板对文本的属性进行设置。

Page 101: 第四章 超文本与超媒体

4 、建立文本超链接 一个 Web 页面内会有很多超链接,可以实现在浏览时的非线性跳转,这正是超文本和超媒体的核心所在。超链接分为页内超链接和页间超链接两种。

建立页间超链接

首先用鼠标选择文本,然后在属性面板的链接栏中输入要跳转到页面的路径和文件名。

Page 102: 第四章 超文本与超媒体

链接的路径可以是绝对路径,也可以是相对路径。绝对路径是提供被链接文件完整

的 URL 。相对路径是相对于本站点的根目录而言的路径,即以本站点的根目录作为起始目录,其它的路径作为该起始目录下的子路径。一般本地链接使用相对链接比较方便,可以省略掉 URL 中相同的部分,当移动站点的位置时,不需要更改链接就可以直接使用。位于别的服务器上的文档,必须使用绝对路径。

Page 103: 第四章 超文本与超媒体

建立页内链接 在页的开始处根据文件内容把文件分成几个部分,建立目录表,然后分别把目录表项指到对应的内容中去,同时还提供能够返回到目录表处的链接。这样当别人浏览网页时,首先会对网页的内容有一个大体的了解,然后就可以根据自己的需要,快速跳转到需要的内容处浏览。

Page 104: 第四章 超文本与超媒体

页内链接的具体实现是由链接对象和锚点组成的。链接对象是用来产生链接的地方,可以是文字、图像、 Flash动画。当该对象被鼠标点击后,链接就会生效,通知浏览器跳转到锚点所在的位置以显示该区的内容。锚点用来定义链接将要跳转到的位置,当在页面中加入锚点时,需要确定它对应的标识名,这个标识名在一个网页中是唯一的,链接对象就是通过标识名与锚点建立链接关系的。

Page 105: 第四章 超文本与超媒体

具体操作如下,首先在需要分开浏览的文本部分插入锚点,执行菜单栏命令“插入 |命名锚记”,此时弹出对话框,定义锚点的标识名为abc., 如图所示 , 按确定按钮完成该锚点的设置。

Page 106: 第四章 超文本与超媒体

选择要设置超链接对象 , 如文本或图像等,在属性面板中为该对象设置链接,在“链接”处加入“ #abc”锚点名称。如图所示。从锚点处返回到页首同样采用锚点技术,只不过是方向相反的跳转而已。

Page 107: 第四章 超文本与超媒体

另外,利用锚点功能,可以实现从某一

页面跳转到另一页面内的某一个地方,它实

际上就是页间链接和页内链接的结合使用。

目标页面只要按要求设置好锚点,保证锚点

标识名在该页内是唯一的即可,源页面需要

在链接一栏中输入类似“ example.htm#abc”

Page 108: 第四章 超文本与超媒体

当 Dreamweaver 中提供的文本修饰不能满足用户需要的时候,可以使用 CSS (层叠式样表)来进行处理, Dreamweaver 中提供了 CSS浮动面板,可以使用它来引入外部CSS 文件,也可以创建自己的 CSS 文件。 CSS

在网页制作中应用很广,利用它来处理图片、定位、固定网页中文字的大小等更加方便。

Page 109: 第四章 超文本与超媒体

5 、添加电子邮件地址链接 常用超链接链接到 Web 页面,其实也可以是别的形式,如可以是软件包、电子邮件地址等。建立软件的链接,可以为用户提供软件下载服务,建立邮件地址的链接,将可以和网页的作者建立联系。用户只需点击建立了邮件地址链接的网页对象,就会启动系统默认的电子邮件处理程序,并将链接中的电子邮件地址自动输入到地址栏中。

Page 110: 第四章 超文本与超媒体

在 Dreamweaver 中建立电子邮件链接的方法是:首先选中链接的对象,然后在属性对话框的链接栏中输入诸如 “mailto: [email protected]”的字串就可完成邮件地址链接的建立。也可以执行菜单命令“插入 |电子邮件链接”将弹出下图这样的对话框。在“文本”栏中输入链接的对象,在“ E-mail”栏中输入邮件的地址。

Page 111: 第四章 超文本与超媒体

1 、制作一个分框架的网页 网页通常使用多框架结构。框架是用来组织页面布局的一种工具,它可以将几个独立的网页同时显示在客户的浏览器中,分别定义浏览中区域的属性和各区域网页的显示样式。在框架中页面分为两类:一种是框架集;一种是独立页面。独立页面就是普通的页面,只是在框架中的某个区域内显示。框架集定义了框架的结构以及每一个区域显示的内容等。

4.3.3 4.3.3 框架、表格和表单的使用 框架、表格和表单的使用

Page 112: 第四章 超文本与超媒体

Dreamweaver 中插入框架的方法是: 在对象工具栏中,选“框架”选项,此时浮动面板显示如图所示。图中列出了系统预设的 13 个框架结构。点击任何一个 ,就可以在光标处的区域内创建一个该样式的框架集。

Page 113: 第四章 超文本与超媒体

此时如果打开框架的浮动面板,会发现该面板中已经显示出了框架的结构,如图所示。图中是把页面分成了三个区域时的显示情况。

Page 114: 第四章 超文本与超媒体

当用鼠标点击浮动面板上某区域的时候,

选中该主页面上同样的区域。当需要调节框

架的大小时,用鼠标拖动框架的分割线就可

以改变框架的大小。

用鼠标点击框架浮动面板上的一个框架区域时,属性浮动面板将随之切换为该框架区域的属性设置面板

Page 115: 第四章 超文本与超媒体

设定好框架以及为框架的不同区域设定

好显示的内容后,就需要保存文件,因为此

时的框架页面分别指向不同的几个页面,所

以存储的时候一定要搞清楚彼此间的关系。

一般是先保存框架集文件,然后依次保存各

个框架区域内的文件,保存的同时会要求设

定文件名。

Page 116: 第四章 超文本与超媒体

2 、制作交互式表单页面

表单是网页中提供交互操作的重要手段,用户可以通过表单的形式输入相关的信息,服务器方收到这些信息后,根据信息来处理用户的要求。网站制作者可以通过表单来收集浏览者的信息,进行调查等活动。表单的出现,使原来单向的用户浏览过程变成了交互式的双向过程。要实现交互,只有表单是不够的,还需要服务器端有能处理用户信息的应用程序,如ASP 、 PHP 等服务器端应用程序。这里只涉及表单的制作,关于服务器端应用程序的编写将在后面介绍。下面是制作交互式表单页面的基本步骤。

Page 117: 第四章 超文本与超媒体

( 1 )首先建立一个新的页面,然后在对象浮动面板中选“表单”选项,此时对象面板会显示成表单对象面板。 Dreamweaver 中包含标准的表单对象,如按钮、文本框、复选框等,如图所示。从图标悬浮的文字可以知道每个对象的大概功能。

Page 118: 第四章 超文本与超媒体

( 2 )建立表单体,表单对象只有放置在表单体中才能正常使用。 Dreamweaver 中的表单体就是对象面板中的第一个表单对象,点击就可以把它放置到页中。此时页面会显示两条红色虚线,虚线之间就可用来放置各种表单对象。此时属性浮动面板如图所示,其中“表单名称”标明这个表单的名称;“动作”栏用来设定处理这个表单的服务器端应用程序的位置和名称;“方法”项用来选择采用何种方式把信息传送到服务器端。通常有两种方式:“ POST” 和“GET” 。 GET 方式适应于传输信息量较少的情况;POST 方式可以将大量的信息传送到服务器端,一般选择 POST 方式。

Page 119: 第四章 超文本与超媒体
Page 120: 第四章 超文本与超媒体

( 3 )加入表单体后,就可以向其中添加表单对象,当然,表单体中也可以加入文本,图片等对象来进行修饰与说明。鉴于表单元素较多,这里只介绍其中的几个:

“文本域”对象它是用来进行文本输入的工具。

按钮表单对象 是用于提交表单时使用的工具 ,插入“按钮”对象后,属性面板如下图 ,

Page 121: 第四章 超文本与超媒体

“标签”栏中的内容作为按钮上显示的文字,可以输入中文来使用户了解按钮的作用,“动作”单选项是表示当鼠标点击按钮后执行的行为;“提交表单”表示把表单内各种对象的信息上传到服务器端;“重设表单”表示重新设置表单各对象的值。“无”这个单选项没有内部动作,它通常是作为触发器来使用的。“列表 /菜单”对象

提供一系列的选项以供选择。

Page 122: 第四章 超文本与超媒体

“文件域”表单对象 用于在表单中创建指定文件位置的输入栏,用户可以自己选择文件名 Dreamweaver 中加入了一种叫“检查表单”的行为。 具体设置的方法是选择要进行检查的“文本域”表单对象,然后激活行为浮动面板,如图所示,

Page 123: 第四章 超文本与超媒体

点击就会弹出如图所示对话框。

选择检查表单,从中可以决定该文本框内是否必须输入数值以及可以接受的值等。如果用户在提交表单时,没有按要求输入,例如输入邮件地址时没有加“@”符号,就会弹出出错的提示框 , 从而保证送到服务器端的信息是正确的 , 这样做的好处是使服务器端应用程序不需要检查用户提交的信息是否正确,在一定程度上减轻了服务器端应用程序的工作量。

Page 124: 第四章 超文本与超媒体

执行菜单命令“插入 | 表格”,弹出对话框,可从中设置表格的基本参数,如图所示。“行”“列”分别表示表格有几行几列。“宽度”用来设置表格的宽度,单位可以是象素,也可以是本页面宽度的百分比。“边框”用来选择边框的宽度。如果不想显示表格,可以把边框宽度设为零 ,点“确定”按钮 ,就会在当前页面上建立一个表格。

3 、表格在网页制作中的应用

Page 125: 第四章 超文本与超媒体

此时,属性浮动面板变成如图所示的形式。从中可以设置表格的属性,其中“间距”项表示相邻单元格边框线间的距离,“边距”项为单元格内部内容与边框之间的间距;

插入表格后,就可以向各单元中插入文本、图片等对象元素。插入对象时,单元格会随着内容的大小自动调整其尺寸,也可以人工拖动表格的框线来改变表格的大小。

Page 126: 第四章 超文本与超媒体

4 、页面布局

Dreamweaver 中提供了“布局视图”的功能,它存在于对象工具栏面板中,如图所示,正常情况下我们使用的状态是,该按钮是灰白色的;而用鼠标单击按钮则进入“布局视图”状态,该按钮为淡兰色。

Page 127: 第四章 超文本与超媒体

之后再点击按钮就可以在页面内添加表格,而点击按钮可以在表格内添加单元格,这样作的好处是可以根据需要随时调整单元格的位置,只要点中该单元格,然后按住“ Ctrl”按键,就可以用鼠标拖动这个单元格来回移动,表格会自动根据这个单元格的位置来重新划分整个表格,设定好后,再点击按钮就可以回到正常的显示方式,可以发现此时的页面已经自动被划分成了嵌套的表格。这种功能在规划页面时经常使用。

Page 128: 第四章 超文本与超媒体

本节对 Dreamweaver 进行了简单的介绍,

其中包括一些基本的操作、页面布局方面的

知识 , 这只是 Dreamweaver全部功能中很少的

一部分,还有很多的功能没有涉及到,比如

说,网页动画、添加行为、模板的制作和使

用等等,这些在实际制作网页中是很有用的。

需要我们在实践不断学习掌握。

Page 129: 第四章 超文本与超媒体

第四章补充练习题

1 、在超文本和超媒体中不同信息块之间的连接是通过( )连接。A. 节点 B.字节 C. 链 D.字2 、超文本的三个基本要素是:(1) 节点 (2) 链 (3) 网络 (4) 多媒体信息A.(1)(2)(4) B.(2)(3)(4) C.(1)(3)(4) D.(1)(2)(3)3 、超文本和超媒体体系结构的三层模型是哪一年提出的?A.1985 B.1988 C.1989 D.1990

Page 130: 第四章 超文本与超媒体

4 、下列的叙述哪些是正确的:( 1 )节点在超文本中是信息的基本单元( 2 )节点的内容可以是文本、图形、图象、 动画、视频和音频( 3 )节点是信息块之间连接的桥梁( 4 )节点在超文本中必须经过严格的定义A.(1)(3)(4) B.(1)(2) C.(3)(4) D.全部5 、超文本是一个( )结构。A.顺序的树形 B.非线形的网状 C.线形的层次 D.随机的链式6 、超文本的三个基本要素是 ____ , _____ ,  ____;在超文本和超媒体中不同信息块 之间的连接是通过 ____连接的。

Page 131: 第四章 超文本与超媒体

7 、超文本和超媒体的主要特征是 ( ) 。(1) 多媒体化 (2) 网络结构(3)交互性 (4) 非线性A. (1)(2) B. (1)(2)(3)C. (1)(4) D.全部8 、超文本和超媒体体系结构主要由三个层次组成 , 它们分别是 ( )(1) 用户接口层 (2) 超文本抽象机层(3) 数据库层 (4) 应用层A.(1)(2)(4) B.(2)(3)(4)C.(1)(2)(3) D.(1)(3)(4)