《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块4 网页中的图像与多媒体技术PPT.pptx

模块四网页中的图像与多媒体技术

目录

任务一

制作“在线学习网”的平面作品展示页面

任务二

任务三

制作“在线学习网”的广告作品展示页面

制作“在线学习网”的多媒体作品展示页面

引入知识点

4.1认识网页中的图像

4.2使用img标记插入图像

任务1制作“在线学习网”的

平面作品展示页面

4.1认识网页中的图像

在网络带宽的不断提升以及人们的审美情趣越来越高的今天，图像已经成为网页中必不可少的重要元素之一。网页图像运用的好坏，决定了网页设计的成败。

任务1制作“在线学习网”的

平面作品展示页面

4.1认识网页中的图像

4.1.1网页常用图像格式

了解网页图像的类型和格式是在网页中合理使用图像的基础。图像的文件格式有很多种，但由于受到网络带宽和浏览器的限制，通常在网页中使用的有JPEG、GIF和PNG三种。其中JPEG和GIF图像格式在网页上使用最广，能支持大多数浏览器。

任务1制作“在线学习网”的

平面作品展示页面

4.1认识网页中的图像

4.1.2网页图像使用原则

目前，虽然宽带在国内普及，但在制作网页时也要在速度和美观之间取得较好地结合点。一般普通的首页应该限制在100KB以内，其他页面最好控制在500KB以内。因为，如果一个网页很大，在浏览器里超过30秒还没有打开，大部分浏览者都会选择放弃。

任务1制作“在线学习网”的

平面作品展示页面

4.2使用img标记插入图像

在网页中插入图像可以起到美化页面的作用。HTML提供了img标记来插入图像。

基本语法格式如下：

imgsrc=图像文件路径

任务1制作“在线学习网”的

平面作品展示页面

4.2使用img标记插入图像

4.2.1使用标记属性设置图像大小

使用img标记插入图像，默认情况下将插入原始大小的图像，如果想在插入时修改图像的大小，可以使用height和width属性来实现。

基本语法格式如下：

imgsrc=图像文件路径width=图像的宽度height=图像的高度

任务1制作“在线学习网”的

平面作品展示页面

4.2使用img标记插入图像

4.2.2使用标记属性设置图像描述信息和替换信息

设置图像提示信息使用title属性，设置图像的替换信息使用alt属性。

基本语法格式如下：

imgsrc=图像文件的路径title=图像描述信息alt=图像替换信息

任务1制作“在线学习网”的

平面作品展示页面

4.2使用img标记插入图像

4.2.3使用标记属性设置图像的边框

默认情况下，插入图像是没有边框的，有时在我们设计网页时为了获得某种效果，需要让图像显示边框。设置图像的边框可以使用图像的border属性。

基本语法如下：

imgsrc=图像文件的路径border=边框宽度

语法说明：边框宽度的单位为像素，最小值是1。

任务1制作“在线学习网”的

平面作品展示页面

4.2使用img标记插入图像

4.2.4使用标记属性设置图像的对齐方式

默认情况下，插入图像在水平方向放置在对象的左边，在垂直方向则与baseline（基线）对齐。我们可以使用图像的align属性修改它的对齐方式。

基本语法如下：

imgsrc=图像文件的路径align=对齐方式

任务1制作“在线学习网”的

平面作品展示页面

4.2使用img标记插入图像

4.2.5使用标记属性设置图像与周围对象的间距

默认情况下，图像与周围对象的水平间距和垂直间距都比较紧凑，显得较为拥挤。这样的间距，很多时候都不符合我们的设计需要。使用图像的hspace属性和vspace属性可以分别设置图像与周围对象的间距。

基本语法格式如下：

imgsrc=“图像文件的路径”vspace=“垂直间距数值”hspace=“水平间距数值

任务1制作“在线学习网”的

平面作品展示页面

任务实现

（1）在“在线学习网”平面作品展示页面中插入文字和5张平面作品的图像。

（2）设置文字和图像的属性，让网页页面更加美观。

任务1制作“在线学习网”的

平面作品展示页面

引入知识点

任务2制作在“在线学习网”

的广告作品展示页面

4.3使用object标记在网页中插入Flash动画

4.4使用embed标记在网页中插入多媒体内容

4.3使用object标记在网页中插入Flash动画

object标记用于包含音频、视频、Javaapplets、ActiveX、PDF以及Flash等对象。object标记设计的初衷是取代img和applet标记。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。

object标记可用于WindowsIE3.0及以后浏览器或者其他支持ActiveX控件的浏览器。针对不同的浏览器，object标记的语法也有