1、第 3 章,超级链接与网页中的多媒体,本章知识技能要点：,掌握创建页面之间超级链接的基本方法 掌握绝对路径和相对路径的概念及其使用方法 掌握建立页面目录链接的方法 掌握在网页中插入图像以及设置各种图像效果的方法 掌握在网页中嵌入视频文件和音频文件的方法 掌握制作滚动对象的基本方法,3.1 建立超链接,HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，WEB上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它
2、们就可享受丰富多采的多媒体世界。,3.1.1 超链接标签 超链接标签用于在网页中建立超级链接。 基本格式为：链接文字 标签表示一个链接的开始，表示链接的结束； 属性“href”定义了这个链接所指的地方，可以指向任何一个文件源：例如一个HTML网页，一个图片，一个影视文件等等。 浏览者通过点击“链接文字”可以到达指定的文件。 例如：新浪主页 浏览器运行时，网页中显示“新浪主页”为带有下划线的文字，当浏览者点击它时，可以到达新浪网站的主页。 链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。,3.1 建立超链接,3.1
3、.2 相对路径和绝对路径 3.1.2.1 绝对路径 绝对路径：包含了标识internet上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称，主机名称，文件夹名称和文件名称。 其格式为：通讯协议：/服务器地址：通讯端口/文件位置/文件名。 例：http:/ 表明采用http协议从名为的服务器上的目录myweb中获得文件book.htm。,3.1 建立超链接,3.1.2.2 相对路径 相对路经是以当前文件所在路径为起点，进行相对文件的查找。一个相对的URL不包括协议和主机地址信息，表示它的路径与当前文档的访问协议和主机名相同，甚至有相同的目录路径。通常只包含文件夹名和文件名
4、。甚至只有文件名。可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件。此时，浏览器链接的目标文档处在同一服务器或同一文件夹下。 如果链接到同一目录下，则只需输入要链接文件的名称。 例如，在info.html里要引用index.html文件作为超链接， 设 info.html路径是：c:inetpubwwwrootsitesblablainfo.html；index.html路径是：c:inetpubwwwrootsitesblablaindex.html，两者在同一个目录下，则在info.html中加入index.html超链接的代码应该这样写：index.html,3.1 建立超链
5、接,3.1.3 本地链接 对同一台机器上的不同文件进行的连接称为本地链接，它使用unix或dos系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。 例如：我们现在正在浏览的这一页的绝对路径是：c:studyhtmlindex.htm。若以相对路径表示则为：文件的链接3.1.4 URL链接 如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通讯协议与外界沟通来交换信息。 URL链接的形式是： 协议名：/主机.域名路径文件名 写在HTML文件中，链接其他主机上的文件时，格式如下：电子工业出版社,3.1 建立
6、超链接,3.1.5 电子邮件链接 在网站中，你经常会看到“联系我们“的链接，一点击这个链接，就会触发你的邮件客户端，比如outlook express，然后显示一个新建mail的窗口。用可以实现这样的功能。 例如： 联系新浪 这是我的电子信箱 3.1.6 目录链接 前面所介绍的资源地址，只是单纯的指向一个文件，但是，在浏览页面时如果页面很长，要不断的拖动滚动条给浏览带来不便，要是浏览者可以从上头阅读到尾，又可以选择自己感兴趣的部分阅读，以上方法却是无法做到的。对于直接链接到某文件上部、下部或是其中的任意部分，可以使用目录链接。这种链接又称为书签链接或是锚点链接。,3.1 建立超链接,制作目录链
7、接方法是： （1）创建一个定位标记，设置文件中将要链接的位置。 格式是：（2）在调用此链接的文件中的特定部分，定义连接。 格式是：链接文字。如果是在一个文件内跳转，文件名可以省略不写。,3.1 建立超链接,3.2 网页中的多媒体,3.2.1 使用图像 3.2.1.1 插入图象标签 插入图像标签的格式为：src属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形文件，也可以是位于远端主机上的图形文件。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。 表3-1列举了插入图片标签中经常使用的属性。例： ,3.2 网页中的多媒体,3.2 网页中的多媒体,例3-2：图
8、像标签的应用示例爱在深秋秋雨无声无息地下着。 飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了 黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢? ,3.2 网页中的多媒体,例3-2的运行效果图,3.2 网页中的多媒体,3.2.1.2 图像的超链接 图象的超链接就是当网页浏览者在图形上单击时，就能连接到另一个地址上去。实现的方法和文字的链接方法是一样的，都是用标签来完成。只要将标签放在和之间就可以了。 其基本格式如下：例
9、如：显示结果为：在网页中显示图像1.gif,当浏览者点击这个图像时，便可连接到网页index.htm。,3.2 网页中的多媒体,3.2.1.3 影像地图超链接 在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行不同的超链接。这就是影像地图。要完成地图区域超链接要用到三种标签：。 使用格式如下： ,3.2 网页中的多媒体,例3-4：影像地图 本例在运行时，点击图像上的不同区域，分别可以链接到1.htm页面或者2.htm页面。,3.2 网页中的多媒体,3.2.2 使用视频 在网页中可以嵌入.mov,.mp
10、g,.avi等文件类型的动画或影片。常用的方法有以下三种。3.2.2.1 用标签插入视频文件 用标签插入视频文件的格式是：例如： 该语句的作用是在网页中嵌入一个名为avifile.avi的电影文件，往复播放3遍，并且当鼠标划过该对象时开始播放。,3.2 网页中的多媒体,3.2.2.2 用标签链接一个视频文件将视频文件做成一个链接的方法是：视频名称 例如：欣赏影片 运行时网页上显示“欣赏影片”字样，当浏览者点击此处时，便播放所链接的电影文件。3.2.2.3用标签自动载入视频文件使用标签播放视频的格式为：,3.2 网页中的多媒体,例3-5：视频播放 本例在运行时显示一个播放器窗口，当点击播放按钮时
11、开始播放。,3.2 网页中的多媒体,3.2.3 播放音乐HTML除了可以插入图形和视频之外，还可以播放音乐。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、AU格式。3.2.3.1用标签点播音乐将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单： 使用的格式为： 乐曲名 例如：同桌的你-au音乐3.2.3.2 用标签自动载入音乐 基本语法是：,3.2 网页中的多媒体,例3-6：视频播放 本例在运行时播放器窗口被隐藏，当打开页面时自动开始播放。如果将hidden=true属性取消，则可显示一个播放器窗口。,3.2 网页中的多媒体,3.2.3.3 背景音乐
12、标签在html文件中，还可以使用标签为网页插入背景音乐。运行的效果是当网页被打开时自动播放所设置的音乐文件。不过只有在IE浏览器中才可以听到。格式是： 其中loop=#:用于设置播放的循环次数 例：,3.2.4 滚动对象标签 在网页的设计过程中，动态效果的插入，会使网页更加生动灵活、丰富多彩。 标签可以实现设置的元素在网页中移动的效果，以达到动感十足的视觉效果。 应用格式为:滚动对象 标签有很多属性，用来定义元素的各种滚动方式。参见表3-5.,3.2 网页中的多媒体,3.2 网页中的多媒体,例3-7： 默认的滚动文字 往上滚动的文字效果 往右滚动的文字效果 来回滚动的文字效果 以下是滚动的一组图片,3.2 网页中的多媒体,3.3 练习题,一、思考题： 什么是绝对路径和相对路径？ 什么是超级链接？ 网页中经常使用的超级链接有哪些类型？ 网页中经常使用哪些格式的图像文件？ 网页中经常使用哪些格式的视频文件？ 网页中经常使用哪些格式的音频文件？ 二、操作题： 用HTML代码设计一个使用背景图像的网页，其中含有三个超级链接，分别连接到另外三个网页。 仿照例3-1的运行效果，制作一个使用目录链接的浏览形式的网页。 用HTML代码设计一个多媒体网页，要求： 使用图片，并且合理设置图像的大小、位置、对齐方式。 在网页中嵌入视频文件，并能正确浏览。 在网页中含有音频文件，并能正确播放。,
