第九章 图片和多媒体.doc

第九章 图片和多媒体1 图片1.1 图片标记img高质量的图片一般用TIFF格式保存，但其图片体积过大，不太适合网络传输。不同的图片格式会表现出不同的颜色分辨率和颜色标准，当然也会影响其体积的大小。网页中常用的图片格式为GIF、JPEG和PNG。 一般在网页设计中选择的图片不要超过8KB，如必须选用较大图片时，可先将其分成若干小图片，显示时再通过表格将这些小图片拼合起来。如果在同一文件中多次使用相同的图片时，最好使用相对路径查找该图片。在HTML文档中，显示图片所用的标记是。格式： img是插入图片的标记，其常用属性如表9-1。其中src是其必须的属性。 src属性用来指定图像源，即图像的URL路径。该路径可以是相对路径，也可以是绝对路径。表9-1 img的属性及其功能说明img属性功能说明src指定图像源，即图像的URL路径width指定图像的显示宽度height指定图片的显示高度hspace指定图片的水平间距vspace指定图片的垂直间距align指定图片的对齐方式border指定图片的边框大小alt显示图像的说明文字实例1.html： 插入图片示例 网页效果如图9-1。图9-1插入图片示例1.2 指定图像的高与宽默认情况下，在HTML页面中显示的是图像的原始大小。如果要显示指定的图像大小，就需采用img标记的width和height属性。格式： width和height的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比。 在width和height属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致的话，那么显示的图像会相对于原图变形或失真。实例2.html： 图片高和宽的设置 第二个图设置为50%，其宽度为显示窗口宽度大小的二分之一，图的大小随浏览器窗口大小变化而变化，网页效果如图9-2。图9-2指定图像的高与宽1.3 指定图像的间距标记的hspace和vspace属性分别用来指定图像的水平间距和垂直间距。其值为数字，单位为px，默认值为0。格式：hspace 指的是所设置图片与相邻元素的水平间距。vspace指的是所设置图片与相邻元素的垂直间距。实例3.html，通过一个表格把未指定图像间距、只指定图像水平间距、只指定图像垂直间距、既指定水平间距又指定垂直间距四种情况清晰地进行比较显示。图像间距设置 图像间距说明 图像间距示例 未指定图像间距 指定图像水平间距 指定图像垂直间距 指定了水平与垂直间距 网页效果如图9-3。图9-3设置图像间距1.4 指定图像的对齐方式标记的align属性用来指定图像与周围元素的对齐方式。其取值如表9-2所示。格式：与其它元素不同的是图像的align属性既包括水平对齐方式，又包括垂直对齐方式。align的默认值为bottom。表9-2 align取值及说明align的取值说明left在水平方向上向上左对齐center在水平方向上向上居中对齐right在水平方向上向上右对齐top图片顶部与同行其它元素顶部对齐middle图片中部与同行其它元素中部对齐bottom图片底部与同行其它元素底部对齐实例4.html，在一个表格内设置了图像align属性的水平对齐方式，并与未设置时的默认状态进行了比较。图像的水平对齐方式 水平对齐方式水平对齐示例 默认春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。 左对齐春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。 居中对齐春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。 右对齐春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。 网页效果如图9-4。图9-4图像的水平对齐方式实例5.html，在一个表格内设置了图像align属性的垂直对齐方式，并与未设置时的默认状态进行了比较。图像的垂直对齐方式垂直对齐方式垂直对齐示例默认春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。顶部对齐春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。 居中对齐春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。 底部对齐春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。 网页效果如图9-5。图9-5图像的垂直对齐方式1.5 指定图片的边框与文字说明标记的border属性和alt属性分别用来指定图像的边框和图像文字说明。格式： border的值用数字表示，默认单位为px； 默认情况下图片没有边框，即border=0； 图片边框的颜色不可调整，默认为黑色。 当图片作为超链接使用时，图片边框的颜色和文字超链接的颜色一致，默认为深蓝色； 图片的alt属性用于对图片信息进行描述。在浏览器中当图片无法正常显示时，在图片位置显示该描述信息。 当图片可以正常显示时，当鼠标放在图片上面时才显示该描述信息； alt属性可在Web浏览器不支持图像显示或用户关闭图像下载功能时，告诉用户该处是一幅什么样的图像。实例6.html，插入4幅图片，第一幅图由于路径错误而未能显示，其alt属性的值就显示到图像所在的位置。后三幅图像只有当鼠标放到图像位置时才显示alt属性的值。前两幅图像的边框属性border没有设定，所以默认边框宽度为0。后两幅图像的边框为5px。第三幅图像的边框颜色默认为黑色。第四幅图像被设为图像超链接，其颜色为蓝色。图片边框和说明文字 网页效果如图9-6。图9-6图片边框和说明文字2 滚动文字插入滚动文字所用的标记是 . 。其常用属性参数设置如表9-3所示。表9-3 marquee的属性及其取值的功能说明marquee属性属性功能说明属性的取值各属性值的功能behavior设置文字的滚动方式scroll循环滚动（默认值）slide滚动一次停止alternate来回交替滚动direction设置文字的滚动方向left由右向左滚动（默认值）right有左向右滚动up由下向上滚动down由上向下滚动bgcolor设置滚动文字的背景颜色英文颜色名称表示所用颜色#rrggbb表示所用颜色width和height设置滚动背景的宽和高数字设置背景的绝对面积相对百分比设置背景相对浏览器窗口的大小hspace和vspace设置滚动文字背景和周围其它元素的空白间距数字设置背景和周围其它元素的绝对间距loop设置滚动文字的循环次数正整数n文字滚动n次infinite文字滚动无限次（默认值）scrollmount设置滚动文字每次移动的距离数字（默认单位px）文字每次移动的距离scrolldelay设置滚动文字每次滚动后的间歇时间数字（默认单位ms）滚动文字每次滚动后的间歇时间格式：滚动文字内容 将要添加效果的文字放到标记之间，同时也可以设置文字的字体、大小和颜色； 表9-3的各种属性为可选参数，根据需要可插入标记之间； 默认情况下滚动背景的面积和文字等高，和浏览器等宽。设置绝对大小时默认单位为px； 默认情况下hspace和vspace的值为0，默认单位为px。实例7.html，滚动文字放到表格内，并根据表9-3对其相关属性进行了设置。文字滚动示例 公    告     学校将于近期举办校园卡拉OK大赛，报名截止日期1月15日，报名处在班文艺委员处，希望同学们勇跃参加。 网页效果如图9-7。图9-7 文字滚动3 背景音乐除了使用图片和滚动文字外，也可以使用音频、视频、Flash等给浏览者创造氛围。背景音乐是它们中的一种，该设置在网页中不显示播放软件面板。设置背景音乐的标记为，其参数设定不多，可播放的声音文件格式包括WAV、AU、MIDI、WMV、MP3等。格式： src指定声音文件的URL来源，即其路径，为必选属性。 loop指定声音文件的循环播放次数，其值为正整数可指定播放次数，值为-1或infinite指定循环播放无限次。实例8.html，在头部通过CSS设置了背景图像及其重复方式和位置，在体部内通过设置了背景音乐music.mp3，循环次数为无限次。 插入背景音乐示例bodybackground-image:url(img/bg.gif);background-position:100% 100%菊花 飒飒西风满院栽， 蕊寒香冷蝶难来。 他年我若为青帝， 报与桃花一处开。 网页效果如图9-8。图9-8插入背景音乐4 其它多媒体文件使用标记只能添加声音文件，而且也不能显示和调整播放软件的控制面板。使用标记则可以插入各种各样的多媒体，如WMV、MP3、AVI、SWF、MOV、RMVB等格式的多媒体文件。格式： src指定多媒体文件的URL来源，即其路径，为必选属性。 loop指定声音文件的循环播放次数，值为true可循环播放无限次，值为false只播放一次，false为默认值。 autostart指定对媒体文件在下载完后