延安大学：《网页制作基础教程》课程PPT教学课件_第五章 使用图像与多媒体

网页制作基础教程 牛永洁 延安大学计算机学院

网页制作基础教程 延安大学计算机学院 牛永洁

第五章使用圜像与多媒体 本章主要内容 令如何在网页中使用图片 ◆如何在网页中使用多媒体 由于有图片与多媒体的使用,本章的内容显 的比较有趣,但是如果使用不当,会弄巧成 拙,使网页显得臃肿,拥挤

第五章 使用图像与多媒体 ❖如何在网页中使用图片 ❖如何在网页中使用多媒体 由于有图片与多媒体的使用，本章的内容显 的比较有趣，但是如果使用不当，会弄巧成 拙，使网页显得臃肿，拥挤。 本章主要内容

使用片 使用图片的步骤 1.根据网页内容,准备图片(ps,f 2.根据网页格式,将网页放置在适当的位置 3.调整图片的大小,对齐方式等

使用图片 ❖ 使用图片的步骤 1. 根据网页内容，准备图片（ps，fw） 2. 根据网页格式，将网页放置在适当的位置 3. 调整图片的大小，对齐方式等

使用片 令使用图片的标签是。网页中支持的图片格 式:jpg,gjf等 ◆img标签的属性值 属性值 说明 src 设置图片的地址 alt 「提示文字 width 宽度 height 高度 border 边框 vspace 「垂直间距 hspace 水平间距 align 对齐方式

使用图片 ❖使用图片的标签是。网页中支持的图片格 式：jpg,gif等 ❖img标签的属性值 属性值 说明 src 设置图片的地址 alt 提示文字 width 宽度 height 高度 border 边框 vspace 垂直间距 hspace 水平间距 align 对齐方式

使用图片 图片对齐方式的取值 属性值 说明 bottom 底 top 顶端 middle 中间 left right 左右 abs bottom 绝对底部 abs middle 绝对居中 baseline 基线 texttop 文本上方

使用图片 ❖图片对齐方式的取值 属性值 说明 bottom 底 top 顶端 middle 中间 left 左 right 右 abs bottom 绝对底部 abs middle 绝对居中 baseline 基线 texttop 文本上方

定义囹像地图 令定义图像地图. ◆定义图像地图中的可点击区城. ☆定义一个客户端图像映射。图像映射( mage map)指带有可点击区域的一幅图像。 令area元素永远嵌套在map元素内部。aea元素 可定义图像映射中的区域

定义图像地图 ❖定义图像地图 … ❖定义图像地图中的可点击区域 … ❖定义一个客户端图像映射。图像映射（image￾map）指带有可点击区域的一幅图像。 ❖area 元素永远嵌套在 map 元素内部。area 元素 可定义图像映射中的区域

定义囹像地图

定义图像地图

定义囹像地图 map标签的属性值 属性 取值 说明 coos坐标值定义可点击区域(热区)的坐标 href URL 定义热区的目标URL nohref| nohref从图像映射排除某个区域 shape default 定义区域的形状 rect cIrc poly target blank 规定在何处打开hre「属性指定的目标网页 parent self top

定义图像地图 属性 取值 说明 coords 坐标值 定义可点击区域（热区）的坐标 href URL 定义热区的目标URL nohref nohref 从图像映射排除某个区域 shape default rect circ poly 定义区域的形状 target _blank _parent _self _top 规定在何处打开href属性指定的目标网页 map标签的属性值

定义图像地图 <area〉标签的 coords属性定义了客户端图像热区中的坐标。坐标的 数字及其含义取决于 shape属性中决定的区域形状。 圆形: shape=" circle", coords="x,yz 这里的x和y定义了圆心的位置("0,0"是图像左上角的坐标),r是以 像素为单位的圆形半径。 多边形: shape=" polygon", coords="kx1,y1,x2,y2,x3,y3,, 每一对"x,y"坐标都定义了多边形的一个顶点("0.0"是图像左上角的坐 标)。多边形需要更多数量的顶点。多边形会自动封闭,因此在列表的结尾不 需要重复第一个坐标来闭合整个区域 REE: shape="rectangle",coords"xl,y1, x 2, y2 第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标, 0,0"是图像左上角的坐标

定义图像地图 标签的 coords 属性定义了客户端图像热区中的坐标。坐标的 数字及其含义取决于 shape 属性中决定的区域形状。 ⚫ 圆形：shape="circle"，coords="x,y,z" 这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以 像素为单位的圆形半径。 ⚫ 多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..." 每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐 标）。多边形需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不 需要重复第一个坐标来闭合整个区域。 ⚫ 矩形：shape="rectangle"，coords="x1,y1,x2,y2" 第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标， "0,0" 是图像左上角的坐标

添加背景音乐 令背景音乐< bgsound src=“.” 属性 说明 src 声音文件地址 lop|循环播放次数:-1为无穷 volume 声音的大小,最大为0,最小为-10000 delay 播放延时的设置 balance 设置音箱的声音平衡,-10000,+1000

添加背景音乐 ❖背景音乐 属性 说明 src 声音文件地址 loop 循环播放次数 ：-1为无穷 volume 声音的大小,最大为0，最小为-10000 delay 播放延时的设置 balance 设置音箱的声音平衡，-10000，+10000