图像和多媒体_第1页
图像和多媒体_第2页
图像和多媒体_第3页
图像和多媒体_第4页
图像和多媒体_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

图像和多媒体第1页，共29页，2023年，2月20日，星期四1.添加图像万维网与其他网络类型（如FTP）最大的不同就在于它在网页上可以呈现丰富的色彩及图像。第2页，共29页，2023年，2月20日，星期四1.1图像格式GIF格式GIF格式适合于商标、新闻式的标题或其他小于256色的图像。它采用的LZW压缩不会造成任何品质上的损失，而且压缩率高，适合在互联网上使用。JPEG格式JPEG格式通常用来保存超过256色的图像格式。PNG格式PNG格式提供了将图像文件以最小的方式压缩又不造成图像失真的技术。第3页，共29页，2023年，2月20日，星期四1.2添加图像——img语法：<imgsrc=“图像文件的地址”/>在该语法中，src参数用来设置图像文件所在的地址，可以是相对路径，也可以是绝对路径。实例：4-1img.html<body>

<!--在页面中居中插入一张图片--> <center> <imgsrc="pic.jpg"/> </center></body>第4页，共29页，2023年，2月20日，星期四1.3图像高度和宽度——height、width语法：

<imgsrc=“图像文件的地址”height=“图像的高度”width=“图像的高度”/>在该语法中，高度和宽度的单位是像素。如果只设置了高度或宽度，则另一个参数会等比例变化。如果同时设置两个属性，且缩放比例不同的情况下，图像很可能会变形。实例：4-2height.html、4-3width.html

<!--在页面中居中插入两张图片--> <center> <!--设置图片的宽度为160像素--> <imgsrc="pic.jpg"width="260"/> <!--同时设置图片的高度和宽度--> <imgsrc="pic.jpg"width="260"height="140"/> </center>第5页，共29页，2023年，2月20日，星期四1.4图像边框——border默认情况下，页面中插入的图像时没有边框的，可以通过border属性为图像添加边框。语法：<imgsrc=“图像地址”border=“图像边框的宽度”/>在该语法中，宽度的单位是像素。实例：4-4border.html

<!--在页面中居中插入两张图片--> <center> <!--不设置图片的边框--> <imgsrc="pic.jpg“/> <!--设置图片的边框为5像素--> <imgsrc="pic.jpg"border="5"/> </center>第6页，共29页，2023年，2月20日，星期四1.5图像水平和垂直间距——hspace、vspace如果不使用<br/>或者<p>标记进行换行显示，那么添加的图像会紧跟在文字之后，图像和文字之间的间距是可以调整的。语法：<imgsrc=“图像地址”hspace=“水平间距”vspace=“垂直间距”/>在该语法中，间距的单位是像素。实例：4-5hspace.html、4-6vspace.html<!--设置图片的水平间距为20像素、垂直间距为100--><imgsrc="pic11.jpg"border="2"hspace="20"vspace="100"/><imgsrc="pic12.jpg"border="2"hspace="20"/>第7页，共29页，2023年，2月20日，星期四1.6图像相对于文字基准线的对齐方式图像的绝对对齐方式包括左对齐、右对齐和居中对齐3种，而相对于文字的对齐方式则是指图像与文字的相对位置。语法：<imgsrc=“图像地址”align=“相对文字的对齐方式”/>align的取值表示的含义top图像的顶部和同行的最高部分对齐middle图像的中部和行的中部对齐bottom图像的底部和同行文本的底部对齐texttop图像的顶部和同行中最高的文本顶部对齐（Netscape）absmiddle图像的中部和同行中最大项的中部对齐（Netscape）baseline图像的底部和文本的基线对齐（Netscape）absbottom图像的底部和同行中的最低项对齐（Netscape）left图像和左边界对齐（文本环绕图像）right图像和右边界对齐（文本环绕图像）第8页，共29页，2023年，2月20日，星期四1.6图像相对于文字基准线的对齐方式实例：4-7align.html<body>

图像的底端与文字的底端对齐

<imgsrc="pic.gif"width="85"align="bottom"/>

图像的中间与文字的中间线对齐

<imgsrc="pic.gif"width="85"align="middle"/><br/>

图像的顶端与文字的顶端对齐

<imgsrc="pic.gif"width="85"align="texttop"/>

图像的中间线与文字的中间线对齐

<imgsrc="pic.gif"width="85"align="absmiddle"/><br/>

图像的底端与文字的底端对齐

<imgsrc="pic.gif"width="85"align="baseline"/><br/></body>第9页，共29页，2023年，2月20日，星期四1.7图像的提示文字——alt当图像没有装载到浏览器上时，图像的位置会显示提示文字，而下载图像以后，当鼠标停留在图像上方时也会显示出提示文字。语法：<imgsrc=“图像地址”alt=“提示文字”/>实例：4-8alt.html<body><h3>史密斯夫妇——Mr.andMrs.Smith</h3> <imgsrc=“pic.jpg”hspace="20"align="left"alt=“影片——史密斯夫妇"/></body>第10页，共29页，2023年，2月20日，星期四2.动态文字网页多媒体元素一般包括动态文字、动态图像、声音以及动画等。其中最简单的就是添加一些滚动文字。第11页，共29页，2023年，2月20日，星期四2.1滚动文字——marquee语法：<marquee>滚动的文字</marquee>只要在标记之间添加要进行滚动的文字即可，而且可以在标记之间设置这些文字的字体、颜色等。实例：4-9marquee.html<body> <marquee> <fontface="隶书"color="#CC0000"size=“4”>你好，欢迎光临梦幻小屋!这里有欢乐的歌声，这里有美好的景色</font> </marquee></body>第12页，共29页，2023年，2月20日，星期四2.2滚动方向——direction默认情况下文字是从右向左滚动，可以自定义滚动方向。语法：<marqueedirection=“滚动方向”>滚动文字</marquee>其中，滚动方向可以取up、down、left和right，分别表示文字向上、向下、向左和向右滚动。实例：4-10direction.html、4-11direction1.html <marqueedirection="up"> <fontcolor="#3300FF"face="楷体_GB2312">

你好，欢迎您的光临<br/>

这里是梦想小屋<br/>

让我们与您分享您的点点快乐<br/>

让我们与您分担您的片片忧伤<br/> </font> </marquee>第13页，共29页，2023年，2月20日，星期四2.3文字的滚动方式——behavior语法：<marqueebehavior=“滚动方式”>滚动文字</marquee>滚动方式共有3种，具体如下：Behavior的取值滚动效果scroll循环滚动，默认效果slide只滚动一次就停止alternate来回交替进行滚动第14页，共29页，2023年，2月20日，星期四2.3文字的滚动方式——behavior实例：4-12behavior.html<body> <marqueebehavior="scroll">你好，欢迎您的光临</marquee> <br/><br/> <marqueebehavior="slide">让我们与您分享您的点点快乐</marquee> <br/><br/> <marqueebehavior="alternate">让我们与您分担您的片片忧伤</marquee></body>第15页，共29页，2023年，2月20日，星期四2.4循环设置——loop如果希望文字滚动几次就停止，可以使用loop参数来进行设置。语法：<marqueeloop=“循环次数”>滚动文字</marquee>实例：4-13loop.html、4-14loop1.html <marqueedirection="up"loop="3"> <fontcolor="#3300FF"face="楷体_GB2312">

你好，欢迎您的光临<br/>

这里是梦想小屋<br/>

让我们与您分享您的点点快乐<br/>

让我们与您分担您的片片忧伤<br/> </font> </marquee>第16页，共29页，2023年，2月20日，星期四2.5滚动速度——scrollamount语法：<marqueescrollamount=“滚动速度”>滚动文字</marquee>实例：4-15scrollamount.html<body> <marqueescrollamount="3">看看我走得速度怎么样？</marquee><br/><br/> <marqueescrollamount="10">看看我走得速度怎么样？</marquee><br/><br/> <marqueescrollamount="50">看看我走得速度怎么样？</marquee></body>第17页，共29页，2023年，2月20日，星期四2.6滚动延迟——scrolldelay设置滚动文字滚动的时间间隔。单位是毫秒。语法：<marqueescrolldelay=“时间间隔”>滚动文字</marquee>实例：4-16scrolldelay.html<body> <marqueescrollamount=“10”scrolldelay=“0”>看我不停脚步的走！</marquee><br/><br/> <marqueescrollamount="50"scrolldelay="500">看我走走歇歇！</marquee><br/><br/> <marqueescrollamount="100"scrolldelay="1000">我要走一步停一停！</marquee></body>第18页，共29页，2023年，2月20日，星期四2.7滚动文字的背景——bgcolor滚动文字也可以单独设置背景色。语法：<marqueebgcolor=“颜色代码”>滚动文字</marquee>实例：4-17bgcolor.html <marqueebehavior="alternate"bgcolor="#FFFF66">

这里是梦幻小屋，欢迎光临

</marquee> <br/><br/> <marqueedirection="up"bgcolor="#99CCFF">

你好，欢迎您的光临<br/>

这里是梦想小屋<br/>

让我们与您分享您的点点快乐<br/>

让我们与您分担您的片片忧伤<br/> </marquee>第19页，共29页，2023年，2月20日，星期四2.8滚动背景面积——width、height默认情况下，水平滚动的文字背景与文字同高、与浏览器窗口同宽。需要时可以自行设置。语法：<marqueewidth=“背景宽度”height=“背景高度”>滚动文字</marquee>宽度和高度单位均为像素。实例：4-18width、height.html<body> <marqueebehavior="alternate"bgcolor="#99CCFF"width="280"height="50">

这里是梦幻小屋，欢迎光临

</marquee></body>第20页，共29页，2023年，2月20日，星期四2.9设置空白空间——hspace、vspace默认情况下，滚动文字周围的文字或图像是与滚动背景紧密连接的，可以设置他们之间的空白空间。语法：<marqueehspace=“水平范围”vspace=“垂直范围”>滚动文字</marquee>实例：4-19space.html<body>

设置水平为70像素、垂直为50像素的空白空间：

<marqueebehavior="alternate"bgcolor="#99CCCC"hspace="70"vspace="50">

这里是梦幻小屋，欢迎光临

</marquee></body>第21页，共29页，2023年，2月20日，星期四3.背景音乐作为背景音乐的可以是音乐文件，也可以是声音文件，其中最常用的是midi文件。第22页，共29页，2023年，2月20日，星期四3.1设置背景音乐——bgsound作为背景音乐的文件最常用的是midi文件。如果需要指定背景音乐的播放次数，可以使用loop属性。语法：<bgsoundsrc=“背景音乐的地址”loop=“循环次数”/>实例：4-20bgsound.html<body> <bgsoundsrc="exam02.mid"loop="3“/></body>第23页，共29页，2023年，2月20日，星期四4.多媒体文件在网页中加入音乐或视频文件，可以使单调的网页变得更加生动。如果要正确浏览嵌入了这些文件的网页，就需要在客户端安装相应的播放软件。第24页，共29页，2023年，2月20日，星期四4.1添加多媒体——embed网页中常见的多媒体文件包括声音文件和视频文件。语法：<embedsrc=“多媒体文件地址”width=“播放界面的宽度”height=“播放界面的高度”></embed>在该语法中，width和height一定要设置，单位是像素，否则无法正确显示播放多媒体文件的软件。实例：4-21embed.html<body>

下面是嵌入的多媒体文件：<br/> <embedsrc="exam01.mid"width="500"height="200"></embed></body>第25页，共29页，2023年，2月20日，星期四4.2设置自动运行——autostart语法：<embedsrc=“多媒体文件地址”autostart=“true/false”></embed>其中，true代表自动播放，false代表不自动播放。实例：4-22autostart.html<body>

下面的视频文件中左边的视频文件将会自动播放，而右边的视频文件则需要手动播放：<br/> <embedsrc="exam01.avi"width="300"autostart=“true"></embed> <embedsrc="exam01.avi"width="300"autostart=“false"></embed></body>第26页，共29页，2023年，2月20日，星期四4.3媒体文件的循环播放——loop语法：<embedsrc=“多媒体文件地址”loop=“true/false”></embed>其中，loop的

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论