第6章 插入外部资源

上一章学习了HTML控制图片在网页上的表现，读者制作的网页已经有了比较丰富的表现力。随着多媒体网络的到来，网页上表现各种多媒体资源已经是大势所趋，本章学习HTML控制外部多媒体资源在网页的表现。本章还会学习服务器端程序和客户端程序的区别。

6.1 插入多媒体资源

由于网络带宽的不断提升，网络应用中多媒体元素随处可见。本节学习利用HTML代码在网页中加入多媒体元素。

说明：多媒体元素范围比较广，一般指音频文件、视频文件以及Flash动画文件。

6.1.1 为网页添加背景声音

如果只是为网页添加背景音乐，使用HTML中的单标签<bgsound />是简单快捷的办法。<bgsound />标签有2个属性，src和loop。

类似于<img />标签，<bgsound />标签的src属性用于指定所连接的音乐资源路径，常用的音乐文件格式有midi、wav、mp3等。不过由于页面须完全载入音乐文件到浏览端，音乐文件才开始播放，所以体积小巧的midi音乐文件是最佳选择。<bgsound />标签的loop属性用于指定背景音乐的循环播放次数，如果设置为-1，则表示无限循环，这种情况下，浏览者可以通过单击浏览器的“停止”按钮停止背景音乐的播放。

说明：midi音乐文件音乐细节比较简单，如果不在乎背景音乐的延迟，读者可以选择音质较好的mp3文件。wav文件体积最大，所以不推荐使用。

在D:\web\目录下创建audio目录，放入文件名为wind.mp3的音乐文件。创建网页文件，命名为bgsound.htm，编写代码如代码6.1所示。

代码6.1 背景音乐：bgsound.htm

        <html>
        <head>
          <title>背景音乐</title>
        </head>
        <body>
        <bgsound src = "audio/wind.mp3" loop = "-1">
        <p align="center">现在页面正在播放背景音乐，无限循环。<br />
                          读者可以单击浏览器的“停止”按钮停止播放背景音乐。
        </p>
        </body>
        </html>

在浏览器地址栏输入http://localhost/bgsound.htm，浏览效果如图6.1所示。

图6.1 背景音乐

6.1.2 为网页添加音乐、动画等更多媒体资源

网页中只有背景音乐是不够吸引浏览者的，网页可以实现调用浏览者系统的媒体播放器，播放网络上的音乐及视频资源。HTML技术中能完成上述功能的是双标签<embed></embed>。其最常用的属性是src，和前面的标签一样，用于指定资源的路径。

说明：<embed></embed>标签可以插入多种音频和视频格式，格式播放支持取决于浏览者系统中的播放器，确保浏览者系统中的播放器支持网络上的相应格式的多媒体资源播放。

<embed></embed>标签的width和height两个属性也是影响显示的，用于设置播放器界面的宽度和高度，单位默认为像素。<embed></embed>标签的autostart属性用于设置是否自动播放，autostart属性取值为true或false，前者为自动播放，后者为浏览者控制是否播放。

说明：默认情况下，多媒体资源不是自动播放的。

除了播放音频和视频文件外，<embed></embed>标签还可以插入外部的Flash动画文件。Flash是网络上最流行的动画元素，有丰富的表现力，其文件扩展名为swf。在D:\web\目录下创建video目录，放入文件名为nba.wmv的视频文件。在D:\web\目录下创建swf目录，放入文件名为mouse.swf的Flash动画文件。创建网页文件，命名为media.htm，编写代码如代码6.2所示。

代码6.2 多媒体资源的设置：media.htm

        <html>
        <head>
          <title>多媒体资源的设置</title>
        </head>
        <body>
        <p align="center">下面是视频文件的播放界面。</p>
        <embed src="video/nba.wmv" width="400" height="300" autostart="true"> </embed>
        <p align="center">下面是音频文件的播放界面。</p>
        <embed src="audio/wind.mp3" width="400" height="100"></embed>
        <p align="center">下面是Flash动画文件。</p>
        <embed src="swf/mouse.swf" width="400"></embed>
        </body>
        </html>

由代码6.2可知，笔者在media.htm页面中用了2组<embed></embed>标签，上面的用于播放nba.wmv视频文件，下面用于播放wind.mp3音频文件，并且视频文件的<embed></embed>标签设置为自动播放。在浏览器地址栏输入http://localhost/media.htm，浏览效果如图6.3所示。

图6.3 多媒体资源的设置

从media.htm的操作体验中，读者会发现操作时多媒体元素周围有虚线框，必须单击后才能操作播放器或Flash动画。在后面的JavaScript学习中将解决这个问题。

说明：造成虚线框这种情况很正常，是微软在2006年发布的一个补丁所导致的。

6.2 插入外部程序

一个完整的网站的开发离不开程序，本节了解一下程序和HTML代码的联系。网站的程序分为服务器端和客户端（即浏览器端），为了以后更深入地学习网站技术，本节对此作一些浅层次的介绍。

6.2.1 插入外部JavaScript程序

JavaScript技术上网页技术的一个重点，在前面学习头部信息的时候，学习过HTML头部代码如何嵌入JavaScript程序。在很多网站应用中，部分JavaScript程序是很多网页共用的，这时JavaScript程序必须以单独的文件形式独立于网页。本节以一个小例子来说明怎样连接外部的JavaScript程序文件。在D:\web\目录下创建script目录，并在script目录中放入一个JavaScript程序，文件名为time.js，编写如代码6.3所示，HTML页面如代码6.4所示。

代码6.3 JavaScript程序：time.js

        // 下面为实现时间的程序。
        setInterval("webjx.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四
    五六'.charAt(new Date().getDay());",1000);

代码6.4 连接外部JavaScript程序：time.htm

        <html>
        <head>
          <title>连接外部JavaScript程序</title>
          <script src="script/time.js"></script>
        </head>
        <body>
          <div id="webjx"></div>
        </body>
        </html>

在浏览器地址栏输入http://localhost/time.htm，浏览效果如图6.4所示。

图6.4 插入图片

time.htm页面显示了time.js中的程序运行结果。由代码6.4可知，通过修改头部信息，双标签<script></script>的src属性可以连接外部的JavaScript程序。当网站内多个页面需要时间程序时，就可共用一个time.js程序了。

注意：新手比较常见的错误是忘了写</script>结束标签。

6.2.2 区分程序的客户端程序与服务器端程序

上一节的JavaScript程序属于网络技术中的客户端程序（浏览器端程序）。而动态网页技术的程序属于服务器端程序。

所谓客户端程序，即程序在浏览者的系统中运行并得出结果；服务器端程序，即程序在网站服务器的系统中运行，得出的结果发给浏览者。

举个例子，上一节的JavaScript程序在浏览者的系统中运行，所以JavaScript程序所取得的时间为浏览者系统的时间。反之，网页中如果使用服务器端程序，程序所得的时间为网页服务器的系统时间。

由于客户端程序（浏览器端程序）需要在浏览者的系统中运行，而JavaScript属于脚本语言，所以JavaScript的源代码暴露在HTML的源代码中。服务器端的程序（如ASP、PHP等）在服务器已经完成了运行，得出了结果，所以发送到浏览器端的HTML页面是看不到程序源代码的。

由于JavaScript的源代码暴露在HTML网页中，对于初学者，可以从优秀的网页的HTML源代码中很方便地学习JavaScript程序。

6.3 小结

本章学习了各种外部资源插入HTML文档，通过这些操作，网页不再是简单的图文组合，而是丰富的多媒体界面。CSS代码可用于控制页面样式，JavaScript代码可用于控制页面的交互行为，整合这两部分到HTML文档中，是网页制作的标准做法。而丰富的多媒体元素（如音频、视频和动画）加入到网页，也是未来网页发展的趋势。本章内容不多，但其重要性不言而喻。

上一章目录下一章