第3章HTML超级链接与网页中的多媒体
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3.2 网页中的多媒体
例3-2的运行效果图
3.2 网页中的多媒体
3.2.1.2 图像的超链接 图象的超链接就是当网页浏览者在图形上单击时，就能连接 到另一个地址上去。实现的方法和文字的链接方法是一样的， 都是用<a>标签来完成。只要将<img>标签放在<a>和</a>之 间就可以了。 其基本格式如下： <a href="资源地址"><img src="图形文件地址"></a> 例如： <a href="index.htm"><ima src="1.gif"></a> 显示结果为：在网页中显示图像1.gif,当浏览者点击这个图像 时，便可连接到网页index.htm。
3.2 网页中的多媒体
3.2 网页中的多媒体
例3-2： <html> <head> <title>图像标签的应用示例</title> <body> <h3 align=center>爱在深秋</h3> <img src="1.gif" width=100 heigth=100 align="left" hspace="30" vspace="20"> 秋雨无声无息地下着。<br> 飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能 带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了， 地上落叶多了……<br> 黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。然而，“雨到深 秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀 呢?<br> </body> </html>
3.1 建立超链接
3.1.2 相对路径和绝对路径 3.1.2.1 绝对路径 绝对路径：包含了标识internet上的文件所需要的所有信息。 文件的链接是相对原文档而定的。包括完整的协议名称，主 机名称，文件夹名称和文件名称。 其格式为： 通讯协议：//服务器地址：通讯端口/文件位置....../文件名。 例：http://www.163.net/myweb/book.htm（此网址为假设） 表明采用http协议从名为www.163.net的服务器上的目录 myweb中获得文件book.htm。
3.1 建立超链接
3.1.5 电子邮件链接 在网站中，你经常会看到"联系我们"的链接，一点击这个链 接，就会触发你的邮件客户端，比如outlook express，然后 显示一个新建mail的窗口。用<a></a>可以实现这样的功能。 例如： <a href = "mailto:info@sina.com">联系新浪</a> <a href="mailto:xiaohua9981@sina.com">这是我的电子信 箱</a> 3.1.6 目录链接 前面所介绍的资源地址，只是单纯的指向一个文件，但是， 在浏览页面时如果页面很长，要不断的拖动滚动条给浏览带 来不便，要是浏览者可以从上头阅读到尾，又可以选择自己 感兴趣的部分阅读，以上方法却是无法做到的。对于直接链 接到某文件上部、下部或是其中的任意部分，可以使用目录 链接。这种链接又称为书签链接或是锚点链接。
3.2.3.2 用<embed>标签自动载入音乐 基本语法是： <embed src="音乐文件地址">
3.2 网页中的多媒体
例3-6： <html> <head><title>视频播放</title></head> <body> <embed src="midi.mid" autostart=true hidden=true loop=true width=145 height=60> </body> </html> 本例在运行时播放器窗口被隐藏，当打开页面时自动开始播 放。如果将hidden=true属性取消，则可显示一个播放器窗 口。
3.2 网页中的多媒体
例3-5： <html> <head><title>视频播放</title></head> <body> <embed src="welcome.avi“ autostart=false loop=false width=350 height=250> </body> </html> 本例在运行时显示一个播放器 窗口，当点击播放按钮时开始 播放。
3.1 建立超链接
HTML文件中最重要的应用之一就是超链接， 超链接是一个网站的灵魂，WEB上的网页是互 相链接的，单击被称为超链接的文本或图形就 可以链接到其它页面。超文本具有的链接能力, 可层层链接相关文件，这种具有超级链能力的 操作，即称为超级链接。超级链接除了可链接 文本外，也可链接各种媒体，如声音、图象、 动画，通过它们就可享受丰富多采的多媒体世 界。
3.1 建立超链接
制作目录链接方法是： （1）创建一个定位标记，设置文件中将要链接的位置。 格式是： <a name="链接位置名称"></a> （2）在调用此链接的文件中的特定部分，定义连接。 格式是： <a href="文件名＃链接位置名称">链接文字</a>。 如果是在一个文件内跳转，文件名可以省略不写。
3.2 网页中的多媒体
3.2.1 使用图像 3.2.1.1 插入图象标签<img> 插入图像标签的格式为： <img src="图形文件地址"> src属性指明了所要链接的图象文件地址，这个图形文 件可以是本地机器上的图形文件，也可以是位于远端 主机上的图形文件。地址的表示方法可以沿用上一篇 内容“文件的链接”中URL地址表示方法。 表3-1列举了插入图片标签<img>中经常使用的属性。 例： <img src="images/ball.gif">
3.2 网页中的多媒体
3.2.1.3 影像地图超链接 在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不 同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域， 再让不同的区域进行不同的超链接。这就是影像地图。要完成地图区域 超链接要用到三种标签：<img><map><area>。 使用格式如下： <img src="图形文件地址" usemap="#图的名称"> <map name="图的名称"> <area shape=形状1 coords=区域座标列表1 href="URL资源地址1"> <area shape=形状2 coords=区域座标列表2 href="URL资源地址2"> ……… <area shape=形状n coords=区域座标列表n href="URL资源地址n"> </map>
3.2 网页中的多媒体
3.2.2.2 用<a>标签链接一个视频文件 将视频文件做成一个链接的方法是： <a href="视频地址">视频名称</a> 例如：<a href="avifile.avi">欣赏影片</a> 运行时网页上显示“欣赏影片”字样，当浏览者点 击此处时，便播放所链接的电影文件。 3.2.2.3用<embed>标签自动载入视频文件 使用<embed>标签播放视频的格式为： <embed src="视频文件地址">
3.1 建立超链接
3.1.2.2 相对路径 相对路经是以当前文件所在路径为起点，进行相对文件的查找。 一个相对的URL不包括协议和主机地址信息，表示它的路径与当 前文档的访问协议和主机名相同，甚至有相同的目录路径。通常 只包含文件夹名和文件名。甚至只有文件名。可以用相对URL指 向与源文档位于同一服务器或同文件夹中的文件。此时，浏览器 链接的目标文档处在同一服务器或同一文件夹下。 如果链接到同一目录下，则只需输入要链接文件的名称。 例如，在info.html里要引用index.html文件作为超链接， 设 info.html路径是：c:\inetpub\wwwroot\sites\blabla\info.html； index.html路径是：c:\inetpub\wwwroot\sites\blabla\index.html， 两者在同一个目录下， 则在info.html中加入index.html超链接的代码应该这样写： <a href = "index.html">index.html</a>
3.1 建立超链接
3.1.1 超链接标签<a></a> 超链接标签<a></a>用于在网页中建立超级链接。 基本格式为： <a href="资源地址">链接文字</a> 标签<a>表示一个链接的开始，</a>表示链接的结束； 属性“href”定义了这个链接所指的地方，可以指向任何一个 文件源：例如一个HTML网页，一个图片，一个影视文件等等。 浏览者通过点击“链接文字”可以到达指定的文件。 例如：<a href="http://www.sina.com">新浪主页</a> 浏览器运行时，网页中显示“新浪主页”为带有下划线的文字， 当浏览者点击它时，可以到达新浪网站的主页。 链接分为本地链接、URL链接和目录链接。在各种链接的各 个要素中，资源地址是最重要的，一旦路径上出现差错，该资 源就无法从用户端取得。
3.2 网页中的Baidu Nhomakorabea媒体
3.2.2 使用视频 在网页中可以嵌入.mov,.mpg,.avi等文件类型的动画或影片。 常用的方法有以下三种。 3.2.2.1 用<img>标签插入视频文件 用<img>标签插入视频文件的格式是： <img dynsrc="avi文件地址"> 例如：<img dynsrc="avifile.avi" loop=3 start=mouseover> 该语句的作用是在网页中嵌入一个名为avifile.avi的电影文件， 往复播放3遍，并且当鼠标划过该对象时开始播放。
3.2 网页中的多媒体
例3-4： <html> <head><title>影像地图</title></head> <body> <img src="1.gif" alt="影像地图" hspace="10" align="left" usemap="#yxdt" > <map name="yxdt"> <area shape="rect" coords="80,69,180,120" href="1.htm" > <area shape="circle" coords="103,95,45" href="2.htm" > </map> </body> </html> 本例在运行时，点击图像上的不同区域，分别可以链接到1.htm页面或者 2.htm页面。
3.2 网页中的多媒体
3.2.3 播放音乐 HTML除了可以插入图形和视频之外，还可以播放音乐。用浏览器可 以播放的音乐格式有：MIDI音乐、WAV音乐、AU格式。 3.2.3.1用<a>标签点播音乐 将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的 音乐了，这样做的方法很简单： 使用的格式为： <a href="音乐地址">乐曲名</a> 例如： <a href="you.au">同桌的你-au音乐</a>
3.1 建立超链接
3.1.3 本地链接 对同一台机器上的不同文件进行的连接称为本地链接，它使用 unix或dos系统中文件路径的表示方法，采用绝对路径或相对 路径来指示一个文件。 例如：我们现在正在浏览的这一页的绝对路径是： c:\study\html\index.htm。若以相对路径表示则为： <a href="index.htm">文件的链接</a> 3.1.4 URL链接 如果链接的文件在其它服务器上，我们就要弄清我们所指向的 文件时采用的哪一种URL地址。URL意思是统一资源定位器， 通过它可以以多种通讯协议与外界沟通来交换信息。 URL链接的形式是： 协议名：//主机.域名／路径／文件名 写在HTML文件中，链接其他主机上的文件时，格式如下： <a href="http://www.phei.com.cn">电子工业出版社</a>
第 3 章
超级链接与网页中的多媒体
本章知识技能要点：
掌握创建页面之间超级链接的基本方法 掌握绝对路径和相对路径的概念及其使用方法 掌握建立页面目录链接的方法 掌握在网页中插入图像以及设置各种图像效果的方法 掌握在网页中嵌入视频文件和音频文件的方法 掌握制作滚动对象的基本方法