第6章.网页中的多媒体应用
发布时间：2021-06-05
Company name
网页中的多媒体应用
主要内容
重点掌握<img>标记和<marquee>标记 了解插入背景音乐标记<bgsound>及其属性 掌握插入各种多媒体标记<embed>及其属性 掌握采用超链接标记<a>插入多媒体文件的方法
图片高质量的图片一般用TIFF格式保存，但其图片体积过大， 不太适合网络传输。 不同的图片格式会表现出不同的颜色分辨率和颜色标准， 当然也会影响其体积的大小。 网页中常用的图片格式为GIF、JPEG和PNG。 一般在网页设计中选择的图片不要超过8KB,如必须选用 较大图片时，可先将其分成若干小图片，显示时再通过表 格将这些小图片拼合起来。 如果在同一文件中多次使用相同的图片时，最好使用相对 路径查找该图片。 在HTML文档中，显示图片所用的标记是<img>。
插入图片标记IMG
基本语法： <img src=”url”>
插入图片标记IMG
语法说明： - img是插入图片的标记，其常用属性如表所示。其中src是其必须的属性； - src属性用来指定图像源，即图像的URL路径。该路径可以是相对路径， 也可以是绝对路径。<img>的属性 src width height hspace vspace align border alt 功能说明 指定图像源，即图像的URL路径 指定图像的显示宽度 指定图片的显示高度 定义图像左侧和右侧的空白。 定义图像顶部和底部的空白。 指定图片的对齐方式 指定图片的边框大小 如果图片无法显示，代替图像的说明文字
插入图片标记IMG
示例代码<!--程序6-1-->
<html> <head> <title>插入图片示例</title> </head> <body> <!—使用相对路径指定图像路径--> <img src=img/001.jpg width="240"> <comment> 使用绝对路径指定图像路径</comment> <img src= D:/程序代码/6/img/002.jpg width="240"> </body> </html>
插入图片标记IMG
程序6-1采用<img>标记插入了两幅图片，其执行效果 如图所示。 其src属性分别采用了相对路径和绝对路径。
指定图像的高与宽默认情况下，在HTML页面中显示的是图像的原 始大小。 如果要显示指定的图像大小，就需采用img标记 的width和height属性。
基本语法：<img src=" url" width=" " height=" ">
指定图像的高与宽
语法说明： - width和height的单位可以是像素，也可 以是百分比。百分比表示显示图像大小为 浏览器窗口大小的百分比； - 在width和height属性中，如果只设置了 其中的一个属性，则另一个属性会根据已 设置的属性按原图等比例显示。如果对两 个属性都进行了设置，且其比例和原图大 小的比例不一致的话，那么显示的图像会 相对于原图变形或失真。
指定图像的高与宽
示例代码：程序6-2分别采用绝对大小和相对大小的方式 设置了同一幅图片
的width属性，其height属性的设置 方法和此例类似。 <html> <head> <title>图片高和宽的设置</title> </head> <body> <img src=img/001.jpg width="300"> <img src=img/001.jpg width="50%"> </body> </html>
指定图像的高与宽
程序6-2的执行效果如图所示。 已知原图大小为600px*404px。第一个图像设置宽为300px, 所以，其为原图的四分之一大小。第二个图设置为50%,可明显 看出其宽度为显示窗口宽度大小的二分之一。
指定图像的间距
<img> 标记的 hspace 和 vspace 属性分别用
来指定图像的水平间距和垂直间距。
其值为数字，单位为px,默认值为0。
指定图像的间距
基本语法：<img src="url" hspace=" " > <img src="url" vspace=" " >
语法说明：
- hspace 指的是所设置图片与相邻元素的水平 间距； - vspace指的是所设置图片与相邻元素的垂直 间距。
指定图像的间距
示例代码<!--程序6-3 -->
<table border="1"> <tr> <th>图像间距说明</th> <th>图像间距示例</th></tr> <tr> <td>未指定图像间距</td> <td> <img src=img/001.jpg width="100"> <img src=img/001.jpg width="100"></td> </tr> <tr> <td>指定图像水平间距</td> <td> <img src=img/001.jpg width="100"> <img src=img/001.jpg width="100" hspace="55"></td> </tr> <tr> <td>指定图像垂直间距</td> <td> <img src=img/001.jpg width="100"> <img src=img/001.jpg width="100" vspace="25"></td> </tr> <tr> <td>指定了水平与垂直间距</td> <td> <img src=img/001.jpg width="100"> <img src=img/001.jpg width="100" hspace="55" vspace="25"> </td></tr> </table>
指定图像的间距
程序6-3的执行效果如图所示。 – 程序6-3通过一个表格把未指定图像间距、只指定图 像水平间距、只指定图像垂直间距、既指定水平间 距又指定垂直间距四种情况清晰地进行比较显示。
指定图像的对齐方式
<img>标记的align属性用来指定图像与周围元素的对 齐方式。其取值如下表所示。align的取值left center right top middle bottom absbottom absmiddle 在水平方向上向上左对齐 在水平方向上向上居中对齐 在水平方向上向上右对齐 图片顶部与同行其他元素顶部对齐 图片中部与同行其他元素中部对齐 图片底部与同行其他元素底部对齐 图片的底部与同行最低元素的底部对齐，常用于Netscape浏览器 图片的中部与同行最大元素的中部对齐，常用于Netscape浏览器
取值说明
baselinetexttop
图片的底部与文本基准线对齐，常用于Netscape浏览器图片的顶部与同行最高元素的顶部对齐，常用于Netscape浏览器
指定图像的对齐方式
基本语法：<img src="url" align=" " >
语法说明：
- 与其他元素不同的是图像的align属性既包括 水平对齐方式，又包括垂直对齐方式； - align的默认值为bottom。
指定图像的对齐方式
示例代码<!--程序6-4 -->
<table border="1"> <tr> <th>水平对齐方式</th> <th>水平对齐示例</th> </tr> <tr> <td align="center">默认</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150"> 春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">左对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="left">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">居中对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="center">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">右对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="right">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> </table>
指定图像的对齐方式
程序6-4在一个表格内设置了图像align属性的水平对 齐方式，并与未设置时的默认状态进行了比较。 – 程序6-4的执行效果如图所示。比较可见，水平对齐 均是水平方向向上对齐。
指定图像的对齐方式
示例代码<!--程序6-5 -->
<table border="1"> <tr> <th>垂直对齐方式</th> <th>垂直对齐示例</th> </tr> <tr> <td align="center">默认</td> <td>春天来了，我还含苞欲放。<img src=“img/001.jpg” width=“150”>春 天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">顶部对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="top">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">居中对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="middle">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">底部对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="bottom">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> </table>
指定图像的对齐方式
程序6-5的执行效果如图所示。 程序6-5在一个表格内设置了图像align属性的垂直对 齐方式，并与未设置时的默认状态进行了比较。
第6章.网页中的多媒体应用.doc
将本文的Word文档下载到电脑
下一篇：包豪斯对现代设计的影响
