HTML网页设计教程_第9章_多媒体应用.ppt

第九章 网页中的多媒体应用 主要内容 9.1图片 9.1.1 插入图片标记IMG 高质量的图片一般用TIFF格式保存，但其图片体积过大，不太适合网络传输。 不同的图片格式会表现出不同的颜色分辨率和颜色标准，当然也会影响其体积的大小。 网页中常用的图片格式为GIF、JPEG和PNG。 一般在网页设计中选择的图片不要超过8KB，如必须选用较大图片时，可先将其分成若干小图片，显示时再通过表格将这些小图片拼合起来。 如果在同一文件中多次使用相同的图片时，最好使用相对路径查找该图片。 在HTML文档中，显示图片所用的标记是img。 9.1.1 插入图片标记IMG 基本语法： 9.1.1 插入图片标记IMG 语法说明： - img是插入图片的标记，其常用属性如表9-1。其中src是其必须的属性； - src属性用来指定图像源，即图像的URL路径。该路径可以是相对路径， 也可以是绝对路径。 9.1.1 插入图片标记IMG 示例代码!--程序9-1-- 9.1.1 插入图片标记IMG 程序9-1采用img标记插入了两幅图片，其执行效果如图9-1所示。 其src属性分别采用了相对路径和绝对路径。 9.1.2 指定图像的高与宽 默认情况下，在HTML页面中显示的是图像的原始大小。 如果要显示指定的图像大小，就需采用img标记的width和height属性。 基本语法： 9.1.2 指定图像的高与宽 语法说明： - width和height的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比； - 在width和height属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致的话，那么显示的图像会相对于原图变形或失真。 9.1.2 指定图像的高与宽 程序9-2的执行效果如图9-2所示。 已知原图大小为600px*404px。第一个图像设置宽为300px，所以，其为原图的四分之一大小。第二个图设置为50%，可明显看出其宽度为显示窗口宽度大小的二分之一。 9.1.3 指定图像的间距 示例代码!--程序9-3 -- 9.1.4 指定图像的对齐方式 img标记的align属性用来指定图像与周围元素的对齐方式。其取值如表9-2所示。 9.1.4 指定图像的对齐方式 示例代码!--程序9-4 -- 9.1.5 指定图片的边框与文字说明 据图9-6所示比较可以发现： 第一幅图由于路径错误而未能显示，其alt属性的值就显示到图像所在的位置，而后三幅图像只有当鼠标放到图像位置时才显示alt属性的值。 前两幅图像的边框属性border没有设定，所以默认边框宽度为0；后两幅图像的边框为5px。 第三幅图像的边框颜色默认为黑色；而第四幅图像被设为图像超链接，其颜色为蓝色。 小结 本章主要介绍了插入图片标记img及其属性、插入滚动文字标记marquee及其属性、插入背景音乐标记bgsound及其属性、插入各种多媒体标记embed及其属性、采用超链接标记a插入多媒体文件等内容。 这些技术对于丰富网页内容、吸引浏览者光顾网站等有很重要的作用，所以，对这些标记及其属性的使用应特殊掌握。 9.3 背景音乐 除了使用图片和滚动文字外，也可以使用音频、视频、Flash等给浏览者创造氛围，使他们喜欢上你的网站。 背景音乐是它们中的一种，该设置在网页中不显示播放软件面板。 设置背景音乐的标记为bgsound，其参数设定不多，可播放的声音文件格式包括WAV、AU、MIDI、WMV、MP3等。 9.3 背景音乐 基本语法： 语法说明： - src指定声音文件的URL来源，即其路径，为必选属性； - loop指定声音文件的循环播放次数，其值为正整数可 指定播放次数，值为-1或infinite指定循环播放无限次。 bgsound src=url loop= 9.3 背景音乐 示例代码!--程序9-8-- headtitle插入背景音乐示例/title style type=text/css !-- body{background-image:url(img/008.jpg);background-repeat:repeat-x;background-position:100% 100%} -- /style /head body bgsound src=sound/music.mp3 loop=-1 center font size=50《菊花》br