Dreamweaver CS3网页制作实用教程第5章 插入多媒体内容和超链接

中文版中文版Dreamweaver CS3实用实用教程教程第第5章章 插入多媒体内容和超链接插入多媒体内容和超链接 随着网络的发展，多媒体在网络上得到了更广泛的应用，因此，对网页设计随着网络的发展，多媒体在网络上得到了更广泛的应用，因此，对网页设计页提出了更高地要求。在页提出了更高地要求。在Dreamweaver CS3Dreamweaver CS3中，可以快速、方便地为网页添中，可以快速、方便地为网页添加声音、影片等多媒体内容，使网页更加生动，还可以插入和编辑多媒体文件加声音、影片等多媒体内容，使网页更加生动，还可以插入和编辑多媒体文件和对象，例如和对象，例如FlashFlash动画、动画、Java AppletsJava Applets、ActiveXActiveX控件等。网站都是由许多网控件等。网站都是由许多网页组成的，网页之间通常又是通过超链接方式相互建立关联的。超链接的应用页组成的，网页之间通常又是通过超链接方式相互建立关联的。超链接的应用范围很广，利用它不仅可以链接到其他网页，还可以链接到其他图像文件、多范围很广，利用它不仅可以链接到其他网页，还可以链接到其他图像文件、多媒体文件及下载程序，也可以利用它在网页内部进行链接或是发送媒体文件及下载程序，也可以利用它在网页内部进行链接或是发送E-mailE-mail等。等。在在Dreamweaver CS3Dreamweaver CS3中，可以将文档中的任何文字及任意位置的图片设置为中，可以将文档中的任何文字及任意位置的图片设置为超链接。超链接类型有页间链接、页内链接、超链接。超链接类型有页间链接、页内链接、E-mailE-mail链接、空链接及脚本链接链接、空链接及脚本链接等。等。中文版中文版Dreamweaver CS3实用实用教程教程教学重点与难点教学重点与难点uu 选择对象选择对象 uu 插入多媒体内容插入多媒体内容uu 认识超链接认识超链接uu 创建超连接创建超连接uu 管理超链接管理超链接中文版中文版Dreamweaver CS3实用实用教程教程5.1 插入多媒体内容 在网页中的插入多媒体内容主要包括Flash动画、音频文件、视频文件，插入这些对象可以增强网页的互动性。uu 插入插入FlashFlash动画动画 uu 插入其他媒体对象插入其他媒体对象 uu 插入音频和视频插入音频和视频中文版中文版Dreamweaver CS3实用实用教程教程5.1.1 插入Flash动画 目前，目前，FlashFlash动画使网页上最流行的动画格式，大量用于网页中。在动画使网页上最流行的动画格式，大量用于网页中。在DreamweaverDreamweaver中，中，FlashFlash动画也是最常用的多媒体插件之一，它将声音、图像动画也是最常用的多媒体插件之一，它将声音、图像和动画等内容加入到一个文件中，并能制作较好的动画效果，同时还使用了优和动画等内容加入到一个文件中，并能制作较好的动画效果，同时还使用了优化的算法将多媒体数据进行压缩，是文件变得很小，因此，非常适合在网上传化的算法将多媒体数据进行压缩，是文件变得很小，因此，非常适合在网上传播。播。中文版中文版Dreamweaver CS3实用实用教程教程5.1.2 插入其他媒体对象插入其他媒体对象 在在Dreamweaver CS3Dreamweaver CS3中，除了插入中，除了插入FlashFlash动画、按钮、文本对外外，还可以动画、按钮、文本对外外，还可以插入插入ShockwaveShockwave影片、影片、JavaScriptJavaScript、ActiveXActiveX控件。控件。中文版中文版Dreamweaver CS3实用实用教程教程5.1.3 插入音频和视频 现在浏览器能支持的多媒体文件越来越多，文件也越来越小，但表现的效果现在浏览器能支持的多媒体文件越来越多，文件也越来越小，但表现的效果却越来越好。在网页中，还可以插入声音和视频文件，并可以在浏览器中播放。却越来越好。在网页中，还可以插入声音和视频文件，并可以在浏览器中播放。中文版中文版Dreamweaver CS3实用实用教程教程5.2 创建超链接创建超链接 超链接是超链接是WebWeb的精华。没有超链接，就无法通过单击的方式遨游的精华。没有超链接，就无法通过单击的方式遨游WebWeb世世界，而如果没有了单击的功能，界，而如果没有了单击的功能，WebWeb就会是死水一潭。超链接的应用范围很广，就会是死水一潭。超链接的应用范围很广，利用它不仅可以链接到其他网页，还可以链接到其他图像文件、多媒体文件及利用它不仅可以链接到其他网页，还可以链接到其他图像文件、多媒体文件及下载程序，也可以利用它在网页内部进行链接或是发送下载程序，也可以利用它在网页内部进行链接或是发送E-mailE-mail等。在等。在Dreamweaver CS3Dreamweaver CS3中，可以将文档中的任何文字及任意位置的图片设置为超中，可以将文档中的任何文字及任意位置的图片设置为超链接。链接。uu 认识超链接认识超链接 uu 超链接的类型超链接的类型uu 创建超链接的方法创建超链接的方法中文版中文版Dreamweaver CS3实用实用教程教程5.2.1 认识超链接认识超链接 超超链链接接与与URLURL及及网网页页文文件件的的存存放放路路径径是是紧紧密密相相关关的的。URLURL可可以以简简单单地地称称为为网网址址，顾顾名名思思义义，就就是是InternetInternet文文件件在在网网上上的的地地址址，定定义义超超链链接接其其实实就就是是指指定定一一个个URLURL地地址址来来访访问问它它指指向向的的Internet Internet 资资源源。同同时时，认认识识从从作作为为链链接接起起点点的的文文档档到到作作为为链链接接目目标标的的文文档档之之间间的的文文件件路路径径，对对于于创创建建链链接接至至关关重重要要。一一般般来来说说，链接路径可以分为绝对路径与相对路径两类。链接路径可以分为绝对路径与相对路径两类。中文版中文版Dreamweaver CS3实用实用教程教程5.2.2 超链接的类型超链接的类型 在在Dreamweaver CS3Dreamweaver CS3中可以创建各种超链接。中可以创建各种超链接。为了在本地站点内移动或重命为了在本地站点内移动或重命名文档或其他链接文件时，依然可以自动更新指向文档的链接名文档或其他链接文件时，依然可以自动更新指向文档的链接DreamweaverDreamweaver通常使用文档相对路径创建指定站点中其他网页的链接。在通常使用文档相对路径创建指定站点中其他网页的链接。在Dreamweaver Dreamweaver CS3CS3中，可以创建中，可以创建 页间链接：利用该链接可以跳转到其他文档或文件，如图页间链接：利用该链接可以跳转到其他文档或文件，如图形、电影、形、电影、PDFPDF或声音文件。或声音文件。页内链接：也被称为锚记链接，利用它可以跳页内链接：也被称为锚记链接，利用它可以跳转到本站点指定文档的位置。转到本站点指定文档的位置。E-mailE-mail链接：使用该链接，可以启动电子邮件程链接：使用该链接，可以启动电子邮件程序，允许用户书写电子邮件，并发送到指定地址。序，允许用户书写电子邮件，并发送到指定地址。空链接及脚本链接：它允空链接及脚本链接：它允许用户附加行为至对象或创建一个执行许用户附加行为至对象或创建一个执行JavaScriptJavaScript代码的链接。代码的链接。中文版中文版Dreamweaver CS3实用实用教程教程5.2.3 创建超链接的方法创建超链接的方法 在在Dreamweaver Dreamweaver CS3CS3中中，可可以以随随时时随随地地在在所所需需的的位位置置创创建建各各种种超超级级链链接接，并并且且可可以以通通过过多多种种方方法法来来创创建建超超链链接接，可可以以在在“属属性性”面面板板中中创创建建、使使用用菜菜单单命命令创建或使用指向文件图标来创建超链接。令创建或使用指向文件图标来创建超链接。中文版中文版Dreamweaver CS3实用实用教程教程5.3 创建各种类型的超链接创建各种类型的超链接 在在对对超超级级链链接接有有着着一一定定初初步步了了解解的的基基础础上上，将将分分类类介介绍绍各各种种超超级级链链接接的的方方法法，包括创建文本超链接、图像超链接、锚点链接、包括创建文本超链接、图像超链接、锚点链接、E-mailE-mail链接和图形热点链接。链接和图形热点链接。uu 创建文本超链接创建文本超链接 u 创建图像超链接创建图像超链接 uu 创建页内超链接创建页内超链接 uu 创建创建E-mailE-mail链接链接 uu 创建虚链接和脚本链接创建虚链接和脚本链接 uu 创建图形热点链接创建图形热点链接中文版中文版Dreamweaver CS3实用实用教程教程5.3.1 创建文本超链接创建文本超链接 当光标移至浏览器中的文本链接时，光标会变成一只手的形状，此时单当光标移至浏览器中的文本链接时，光标会变成一只手的形状，此时单击链接便可以打开链接所指向的目标网页。要创建文本超链接，首先选中要设击链接便可以打开链接所指向的目标网页。要创建文本超链接，首先选中要设置超链接的文本，在置超链接的文本，在“属性属性”面板中单击面板中单击“链接链接”文本框右侧的文件夹图标，文本框右侧的文件夹图标，打开打开“选择文件选择文件”对话框，选择要链接的文件，单击对话框，选择要链接的文件，单击“确定确定”按钮，即可将文按钮，即可将文件添加到件添加到“链接链接”文本框中，如图所示。也可以在文本框中，如图所示。也可以在“链接链接”文本框中输入链接文本框中输入链接的的URLURL地址。地址。中文版中文版Dreamweaver CS3实用实用教程教程5.3.2 创建图像超链接创建图像超链接 创创建建图图像像超超链链接接的的方方法法与与创创建建文文本本超超链链接接的的方方法法相相同同。选选中中要要创创建建超超链链接接的的图图像像，打打开开“属属性性”面面板板，单单击击“链链接接”文文本本框框右右侧侧的的文文件件夹夹图图标标，打打开开“选选择择文文件件”对对话话框框，选选择择要要链链接接的的文文件件，单单击击“确确定定”按按钮钮，即即可可将将文文件件添添加加到到“链接链接”文本框中，也可以在文本框中，也可以在“链接链接”文本框中输入链接的文本框中输入链接的URLURL地址。地址。中文版中文版Dreamweaver CS3实用实用教程教程5.3.3 创建页内超链接创建页内超链接 创建页内超链接是通过使用创建页内超链接是通过使用“命名锚记命名锚记”(用于标记位置的标识用于标记位置的标识)来完成的，来完成的，因此，因此，“页内超链接页内超链接”又称为又称为“命名锚记链接命名锚记链接”。通过对文档中指定位置的命。通过对文档中指定位置的命名，允许利用链接打开目标文档时直接跳转到相应的命名位置。名，允许利用链接打开目标文档时直接跳转到相应的命名位置。创建创建“命名锚记链接命名锚记链接”的过程分为两步，首先加入一个命名锚记，可以将光的过程分为两步，首先加入一个命名锚记，可以将光标置于文本中需要创建超链接的位置，然后选择标置于文本中需要创建超链接的位置，然后选择“插入记录插入记录”|“|“命名锚记命名锚记”命令，或者单击命令，或者单击“插入插入”栏中的栏中的“常用常用”选项卡，打开选项卡，打开“常用常用”插入栏，单击插入栏，单击“命名标记命名标记”按钮，打开按钮，打开“命名锚记命名锚记”对话框，如图所示。在对话框，如图所示。在“锚记名称锚记名称”文文本框中本框中“输入锚记输入锚记”的名称的名称text_toptext_top，然后单击，然后单击“确定确定”按钮即可。按钮即可。中文版中文版Dreamweaver CS3实用实用教程教程5.3.4 创建创建E-mail链接链接 E-mailE-mail链链接接是是一一种种特特殊殊的的链链接接，单单击击E-mailE-mail链链接接，可可以以打打开开一一个个空空白白通通讯讯窗窗口口。在在E-mailE-mail通讯窗口中，可以创建电子邮件，并发送到指定的地址，如图所示。通讯窗口中，可以创建电子邮件，并发送到指定的地址，如图所示。中文版中文版Dreamweaver CS3实用实用教程教程5.3.5 创建虚链接和脚本链接创建虚链接和脚本链接 虚虚链链接接实实际际上上是是一一个个未未设设计计的的链链接接，使使用用虚虚链链接接可可以以激激活活页页面面上上的的对对象象或或文文本本。一一旦旦对对象象或或文文本本被被激激活活，当当光光标标经经过过该该链链接接时时，可可以以附附加加行行为为来来交交换换图图片片或或显显示示层层。要要创创建建虚虚链链接接，选选中中所所需需创创建建链链接接的的文文字字或或图图片片后后，打打开开“属属性性”面面板板，在在“链链接接”文文本本框框中中输输入入javascript:;(javascriptjavascript:;(javascript一一词词后后依依次次接接一一个个冒冒号号和一个分号和一个分号)或是一个或是一个#号即可。号即可。脚脚本本链链接接是是指指执执行行JavaScriptJavaScript代代码码或或调调用用JavaScriptJavaScript函函数数。创创建建脚脚本本链链接接后后，在在不不离离开开当当前前页页面面的的情情况况下下可可以以了了解解关关于于某某个个项项目目的的一一些些附附加加信信息息。常常用用于于执执行计算、表单验证或其他任务。行计算、表单验证或其他任务。中文版中文版Dreamweaver CS3实用实用教程教程5.3.6 创建图形热点链接创建图形热点链接 在在创创建建图图形形链链接接的的过过程程中中，当当图图片片比比较较大大，或或是是要要创创建建链链接接的的区区域域是是不不规规则则区区域域，或或是是只只给给图图片片中中部部分分区区域域创创建建链链接接，在在这这些些情情况况下下，可可以以将将图图片片分分为为几几个个区区(又又称称为为“热热点点”)，单单击击不不同同的的区区域域可可以以打打开开不不同同的的链链接接，这这样样的的链链接接就就称称为为“图形热点链接图形热点链接”。在图像的。在图像的“属性属性”面板中可以方便地创建图形热点链接。面板中可以方便地创建图形热点链接。中文版中文版Dreamweaver CS3实用实用教程教程5.4 管理超链接管理超链接 超链接是网页中不可缺少的一部分，通过超链接可以使各个网页链接起来，超链接是网页中不可缺少的一部分，通过超链接可以使各个网页链接起来，使网站中众多的网页构成一个有机的整体，通过管理网页中的超链接，可以对使网站中众多的网页构成一个有机的整体，通过管理网页中的超链接，可以对网页进行相应的管理。网页进行相应的管理。uu 自动更新链接自动更新链接 u 更改超链接更改超链接 u 在在“站点地图站点地图”中创建和修改链接中创建和修改链接 中文版中文版Dreamweaver CS3实用实用教程教程5.4.1 自动更新链接自动更新链接 在站点内移动或重命名文档时，在站点内移动或重命名文档时，DreamweaverDreamweaver会自动更新指向该文档的链会自动更新指向该文档的链接，将整个站点存储在本地磁盘上时，自动更新链接功能最适用，但要注意的接，将整个站点存储在本地磁盘上时，自动更新链接功能最适用，但要注意的是，是，DreamweaverDreamweaver不会更改远程文件夹中的相应文件。为了加快更新速度，不会更改远程文件夹中的相应文件。为了加快更新速度，DreamweaverDreamweaver会创建一个缓存文件，用来存储跟本地文件夹有关的所有链接会创建一个缓存文件，用来存储跟本地文件夹有关的所有链接信息，在添加、删除或更改指向本地站点上的文件的链接时，该缓存文件会以信息，在添加、删除或更改指向本地站点上的文件的链接时，该缓存文件会以可见方式进行更新。可见方式进行更新。中文版中文版Dreamweaver CS3实用实用教程教程5.4.2 更改超链接更改超链接 除了自动更新链接外，还可以手动更改所有创建的超链接，以指向其他位置。除了自动更新链接外，还可以手动更改所有创建的超链接，以指向其他位置。要手动更改所有创建的超链接，打开一个文件，选择要手动更改所有创建的超链接，打开一个文件，选择“站点站点”|“|“改变站点链改变站点链接范围的链接接范围的链接”命令，打开命令，打开“更改整个站点链接更改整个站点链接”对话框，如图所示。在对话框，如图所示。在“变变成新链接成新链接”文本框中输入链接的文件，单击文本框中输入链接的文件，单击“确定确定”按钮，打开按钮，打开“更改文件更改文件”对话框，如图所示，单击对话框，如图所示，单击“更新更新”按钮，即可更改整个站点范围内的链接。按钮，即可更改整个站点范围内的链接。“更改整个站点链接”对话框 “更改文件”对话框中文版中文版Dreamweaver CS3实用实用教程教程5.4.3 在在“站点地图站点地图”中创建和修改链中创建和修改链接接 可以在可以在“文件文件”面板中添加、更改和删除链接来修改站点的结构。面板中添加、更改和删除链接来修改站点的结构。DreamweaverDreamweaver会自动更新会自动更新“文件文件”面板以显示对站点所做的更改。面板以显示对站点所做的更改。