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

下载本文档

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

文档简介

第4章图像与多媒体多媒体元素包括图像元素、视频元素和音频元素。在第2章中我们使用了图像作背景对盒子模型进行美化。本章将继续探讨与图像相关的内容，学习插入图像、图像热区等图像基本应用以及图像相关的样式；并在图像背景的基础上，进一步学习CSS雪碧图的原理和用法；最后介绍网页视频、音频等多媒体元素了解图像元素、视频元素、音频元素的基本标签和基本属性理解CSS图像热区的基本原理和用法掌握CSS雪碧图的的基本应用方法能熟练使用图像元素进行页面美化内容安排网页图像4.1CSS雪碧图（Sprite）4.2多媒体网页4.3小试牛刀4.44.1网页图像文字与图像是构成一个网页的两个最基本的元素。如果说文字是负责网页的内容，那么图像就负责网页的美观。对于网页图像，一般需要考虑以下几个因素，包括图像的格式、图像的尺寸、图像的透明性等。网页图像4.14.1.1网页图像标签<img>格式：<imgsrc="image-URL"/>4.1.2图像热区

格式：<img

src=”图像文件”

usemap="#MAP-Name">

<map

name="MAP-Name">

<areashade=”形状”coords=“坐标”href=“URL”>

</map>

形状shape属性coords属性coords属性取值含义矩形shape="rect"coords="x1,y1,x2,y2"coords表示矩形左上(x1,y1)及右下(x2,y2)的坐标圆形shape="circle"coords="x,y,r"coords表示圆中心点坐标(x,y)及半径多边形shape="poly"coords="x1,y1,x2,y2,x3,y3..."coords表示多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...网页图像4.14.1.3图像相关样式 与图像相关的CSS样式属性有：宽度属性width；高度属性height；边框属性border，使用border属性可以创建缩略图；圆角属性border-radius，通过使用border-radius属性可以创建圆形图像；不透明度属性opacity，该属性设置一个图像的不透明度，属性值从0.0（完全不透明）到1.0（完全透明），默认值为1。4.1.4Bootstrap图片类Bootstrap提供了三个可对图片应用简单样式的预定义类“.rounded”、“.rounded-circle”和“.img-thumbnail”。这三个类的功能与效果见表4-2所示。类功能应用效果.rounded添加border-radius:6px来获得图片圆角<imgsrc="t1.jpg"class="rounded">.rounded-circle添加border-radius:50%来让整个图片变成圆形<imgsrc="t1.jpg"class="rounded-circle">img-thumbnail添加一些内边距（padding）和一个灰色的边框<imgsrc="t1.jpg"class="img-thumbnail">4.1.5图像应用案例4.1案例4-1：在网页中插入三个图像，分别定义其替代文字和鼠标经过时的文字。三个图像分别使用Bootstrap预定义类.img-thumbnail、.rounded-circle和.rounded，使之分别呈现缩略图效果、椭圆边框效果和圆角边框效果。三个图像分别加上超级链接<a>标签，在网页中点击图像会在新窗口打开相应的图像文件。设置三个图像的不透明度为0.5，使之模糊；鼠标经过时将不透明度改为1，使之变为清晰<!doctypehtml><html><head><metacharset="utf-8"><title>案例4-1</title><linkhref="css/bootstrap.min.css"rel="stylesheet"><style> a:link,a:visited{opacity:0.5;} a:hover{opacity:1;}</style></head><body><ahref="images/t1.jpg"target="_blank"><imgsrc="images/t1.jpg"width="190"height="361"class="img-thumbnail"alt="衣服1"title="红色风衣399元"></a><ahref="images/t2.jpg"target="_blank"><imgsrc="images/t2.jpg"width="190"height="361"class="rounded-circle"alt="衣服2"title="羊毛大衣439元"></a><ahref="images/t3.jpg"target="_blank"><imgsrc="images/t3.jpg"width="190"height="361"class="rounded"alt="衣服3"title="杏色经典大衣180元"/></a></body></html>4.1.6任务4-1：运用图像热区制作地图链接页面4.11.任务描述本任务制作4个网页，其中yts.html为阳台山森林公园网页；dpz.html为大屏障森林公园网页、nms.html为南门山森林公园网页。主网页为一张地图，如图4-2所示。点击地图中阳台山森林公园、大屏障森林公园、南门山森林公园所在位置，在新窗口打开相应的网页。2.任务要求通过地图链接页面的制作，掌握并巩固<img>标签的用法；要熟练使用Bootstrap图片类；能运用图像热区创建网页。3.任务分析使用Bootstrap图片类对三个森林公园的网页图片进行美化，分别呈现椭圆、圆角、缩略图三种效果；主网页插入图像地图pic.jpg，分别在阳台山森林公园、大屏障森林公园、南门山森林公园所在位置定义三种不同形状（矩形、圆形、多边形）的热区，点击图像热区，在新窗口打开相应的网页。定义热区形状时需使用Dreamweaver设计视图的地图热点工具，自动生成坐标代码。4.1.6任务4-1：运用图像热区制作地图链接页面4.14.工作过程步骤1站点规划新建文件夹作为站点；站点内建立images文件夹，将本节素材存放在images文件夹中；步骤2新建阳台山森林公园网页（1）新建网页，设置<title>为“阳台山森林公园”；网页命名为yts.html保存在站点所在的目录；（2）网页yts.html在头元素引入Bootstrap内核文件，最外层用div.container包裹，里面的内容包含标题栏div.h1元素和img图像元素。img图像元素使用rounded类，作圆角处理，设置其替代文字和鼠标经过时的文字为“阳台山森林公园”，效果如图4-3所示4.1.6任务4-1：运用图像热区制作地图链接页面4.1步骤3新建南门山森林公园网页（1）新建网页，设置<title>为“南门山森林公园”；网页命名为nms.html保存在站点所在的目录；（2）网页nms.html的结构与yts.html相同。img图像元素使用rounded-circle类，作椭圆状，设置其替代文字和鼠标经过时的文字为“南门山森林公园”，效果如图4-4所示步骤4新建大屏障森林公园网页（1）新建网页，设置<title>为“大屏障森林公园”；将网页命名为dpz.html保存在站点所在的目录；（2）网页dpz.html的结构与yts.html相同。img图像元素使用img-thumbnail类，作缩略图状，设置其替代文字和鼠标经过时的文字为“大屏障森林公园”，效果如图4-5所示4.1.6任务4-1：运用图像热区制作地图链接页面4.1步骤5创建主网页文件（1）新建网页，设置<title>为“任务4-1”，将网页命名为task4-1.html保存在站点所在的目录；（2）在网页task4-1.html中插入图像pic.jpg，并输入替代文字"地图"；（3）在DW设计视图打开属性窗口，点击左下角的地图工具的矩形按钮，如图4-6所示，在阳台山森林公园所在位置定义矩形热区，设置热点链接为“yts.html”；设置目标为“_blank”，即点击矩形图像热区会在新窗口打开yts.html网页。（4）DW设计视图点击左下角的地图工具的圆形按钮，在大屏障森林公园所在位置定义圆形热区，设置热点链接为“dpz.html”；设置目标为“_blank”，即点击圆形图像热区会在新窗口打开dpz.html网页。（5）DW设计视图点击左下角的地图工具的多边形按钮，在南门山森林公园所在位置勾勒出多边形，定义多边形热区，设置热点链接为“nms.html”；设置目标为“_blank”，即点击多边形图像热区会在新窗口打开nms.html网页。步骤6保存文件task4-1.html，完成制作。4.2CSS雪碧图（Sprite）雪碧图又叫精灵图，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。CSS雪碧图（Sprite）4.24.2.1雪碧图技术概述CSS雪碧图片使用background-image和background-position属性进行渲染。图片是在CSS中定义的背景图，而非<img>标签。如果要使用图4-7所示的第一个“笑脸”表情，需在页面上设置一个宽为150px；高为150px的盒子。盒子使用图4-7的雪碧图作为背景图，并将背景图的位置background-position设置为（0，0）即可。雪碧图位置示意如图4-8所示，图片中有标记部分即“笑脸”表情的位置为（0，0）。如果想显示其他表情，例如要显示第2行第3个表情，即“哭脸”表情。这时需要将背景图的位置在水平方向左移300px，在垂直方向上移150px。反映在background-position属性上是一个负值，即（-300，-150）。4.2.2雪碧图（Sprite）技术应用案例4.2案例4-2：把一个超级链接用CSS做成按钮的样式。按钮使用如图4-10所示的雪碧图作背景。按钮的三个状态，即a:link，a:hover，a:active分别取雪碧图上、中、下三个部分。<!doctypehtml><html><head><metacharset="utf-8"><title>案例4-2</title><style>a{display:block;width:200px;height:65px;line-height:65px;/*定义按钮基本样式*/text-indent:-2015px;/*隐藏文字*/background-image:url(images/button.png);/*定义背景图片*/}a:link{background-position:00;/*定义链接的普通状态，此时图像显示的是顶上的部分*/}a:hover{background-position:0-66px;/*定义链接的滑过状态，此时显示中间部分，向下取负值*/}a:active{background-position:0-132px;/*定义链接的按下状态，此时显示下面部分，向下取负值*/}</style></head><body><ahref="#">链接</a></body></html>4.2.3任务4-2：使用雪碧图技术制作页面4.21.任务描述使用如图4-12所示的雪碧图制作网页。页面效果如图4-11所示。页面从上到下分为标题、导航、最新文章、前端商城和页脚五部分。导航在鼠标经过时呈现出高光效果。2.任务要求本任务所有图像要求使用一张雪碧图（如图4-12所示）。通过本任务的练习，要熟练掌握雪碧图的基本应用，尤其是在超级链接的背景中使用雪碧图的技巧和方法。4.2.3任务4-2：使用雪碧图技术制作页面4.23.任务分析本任务的关键是确定雪碧图中图标的大小和位置。用Photoshop打开雪碧图，首先将默认的尺寸单位改为像素，方法如下：（1）点击菜单栏“编辑-首选项”，打开首选项对话框；（2）在首选项对话框中，点击“单位与标尺”，如图4-13所示，将标尺单位改为像素。（3）用矩形选框选中图标，在菜单栏点击“窗口-信息”，打开信息窗口，在W和H值可见图标的尺寸，如图4-14所示。（4）把鼠标放在矩形选框的左上角，在信息窗口的X和Y可见图标的位置，如图4-14所示。4.2.3任务4-2：使用雪碧图技术制作页面4.24.工作过程步骤1站点规划（1）新建文件夹作为站点，站点内建立images文件夹，将本节素材存放在images文件夹中；（2）新建网页，设置<title>为“任务4-2”；将网页命名为task4-2.html保存在站点所在的目录。步骤2建立网页的基本结构（1）网页task4-2.html最外层为div#container，里面从上到下包含div#banner、div#nav、“最新文章”标题、“最新文章”内容、“前端商城”标题、“前端商城”内容、div#footer；（2）设置最外层div#container宽度720px，高度1280px，加框线。4.2.3任务4-2：使用雪碧图技术制作页面4.2步骤3制作横幅（1）输入div#banner的内容：在文字前面加入i元素用于显示图标；（2）设置i元素的样式：i元素用于在网页中呈现图标，设置为行内块，与同一行文字的对齐方式为中间对齐；采用雪碧图为背景；（3）设置div#banner的样式：高度为96px，设置文字大小、颜色和垂直居中，底部加上一条框线；（4）设置div#banner中i元素的背景雪碧图的大小和位置：参照本节任务分析中介绍的方法，如图4-14框线所示，div#banner中i元素的尺寸为宽度80px高度为80px，雪碧图背景位置为（-100px-500px）。完成设置后的效果如图4-15所示。4.2.3任务4-2：使用雪碧图技术制作页面4.2步骤4制作导航（1）建立导航的基本结构；（2）设置导航的基本样式：ul元素去掉项目符号和默认的内外边距；（3）设置导航div#nav高度为350px，底部加框线；（4）设置li元素为行内块，并且顶端对齐，使各个链接水平排列；设置#nav下的ul元素字符间隔为-5px，以消除行内块之间的距离；（5）设置a元素为块状元素，宽度为40px，高度为350px。该尺寸为雪碧图背景通过PS测出的导航图标的尺寸（参照本节任务分析介绍的方法）；（6）设置导航中5个超级链接的样式：每个链接都使用雪碧图作背景，雪碧图位置通过PS测得在水平方向间隔为80px，垂直方向无变化；鼠标经过时，各个链接的背景图位置左移40px，为高光背景图；（7）设置导航右侧的行内块li.item6的样式：参照本节任务分析介绍的方法使用雪碧图背景，并且设置margin-left:120px;与导航保持120px的距离。导航效果如图4-16所示。4.2.3任务4-2：使用雪碧图技术制作页面4.2步骤5制作“最新文章”的内容（1）输入“最新文章”的内容；（2）设置“最新文章”标题的样式：在标题处使用i元素显示雪碧图图标，参照本节任务分析中介绍的方法，确定图标尺寸和位置；（3）设置“最新文章”内容的样式：在内容处li元素使用i元素显示雪碧图图标，参照本节任务分析中介绍的方法，确定图标尺寸和位置；（4）设置超级链接a元素的样式，完成设置之后的效果如图4-17所示。4.2.3任务4-2：使用雪碧图技术制作页面4.2步骤6制作“前端商城”的内容（1）输入“前端商城”的内容；（2）设置“前端商城”标题的样式；（3）设置“前端商城”内容的样式，完成设置之后的效果如图4-18所示。步骤7制作页脚（1）输入页脚内容；（2）设置页脚样式步骤8保存文件，完成制作。4.3多媒体网页在网页中，多媒体元素扮演重要的角色。多媒体元素主要是指声音和视像。由于声音和视像从采集、制作到发布，每一个环节都涉及不同的公司，采用不同的软件，使用不同的硬件设备，因而音视频的格式众多。多媒体网页4.3

格式描述mp3ISO音频格式，在低至64kbps的比特率下提供接近CD音质的音频质量。mp4MPEG4文件使用H264视频编解码器和AAC音频编解码器mid电子乐器的演奏控制格式，通常不带有音频采样wav支持的编码技术大部分只能在Windows平台下使用，用于音频原始素材保存。avi音频视频交错(AudioVideoInterleaved)的英文缩写，由微软公司发表的视频格式，在视频领域可以说是最悠久的格式之一。wma在Windows平台下使用的音频格式。wmv一种独立于编码方式的在Internet上实时传播多媒体的技术标准，Microsoft公司希望用其取代QuickTime之类的技术标准以及WAV、AVI之类的文件扩展名movQuickTime的视频格式，QuickTime是Apple公司的一种图像视频处理软件flvFLV是FLASHVIDEO的简称，FLV流媒体格式解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点WebM由Google提出，是一个开放、免费的媒体文件格式,使用VP8视频编解码器和Vorbis音频编解码器oggHTML5通用音视频格式,使用Theora视频编解码器和Vorbis音频编解码器多媒体网页4.3

4.3.1音频视频相关标签与音频视频相关的标签有音频标签<audio>标签、视频标签<video>、媒体嵌入标签<embed>、对象标签<object>、图形标签<figure>和图形标题标签<figcaption>。1.音频标签<audio> 格式：<audiocontrols> <sourcesrc="多媒体文件url"> …

</audio>功能：audio元素用于定义声音，比如音乐或其他音频流。audio元素支持三种文件格式：mp3、Wav、Ogg。可以在<audio>和</audio>之间放置文本内容，这些文本信息将会被显示在那些不支持<audio>标签的浏览器中。controls属性供添加播放、暂停和音量控件。由于HTML5取消了自动播放，所有的媒体都需要用户驱动，所以controls是必须要有的属性。audio元素允许使用多个source元素。source元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。多媒体网页4.3

2.视频标签<video> 格式：<videocontrols> <sourcesrc="多媒体文件url"> …

</video>功能：video元素用于定义视频，比如电影片段或其他视频流。video元素支持三种视频格式：mp4、WebM、Ogg。可以在<video>和</video>之间放置文本内容，这些文本信息将会被显示在那些不支持<video>标签的浏览器中。controls属性供添加播放、暂停、全屏控件和音量控件。由于HTML5取消了自动播放，所有的媒体都需要用户驱动，所以controls是必须要有的属性。多媒体网页4.3

3.媒体嵌入标签<embed>格式：<embedsrc="多媒体文件url">4.对象标签<object> 格式：<objectdata="多媒体文件url"></object>功能：object元素用于定义一个嵌入的对象。比如图像、音频、视频等，支持wav、ogg、mp3等音频格式，mp4、WebM、Ogg等视频格式以及pdf、jpg、png等图像格式，还可以直接嵌入HTML文档。5.图形标签<figure>图形标签<figure></figure>用于包裹媒体内容。多媒体元素包括img、audio、video、embed、object都是行内块元素，而figure元素是块元素，其内容是文档中的一个图像、图表、照片、代码等多媒体元素。6.图形标题标签<figcaption>图形标题标签<figcaption></figcaption>用于定义figure元素的标题。figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置。4.3.2多媒体元素应用案例4.3

案例4-3：在网页中使用超级链接下载播放音视频，然后分别用<audio>标签、<video>标签、<embed>标签和<object>标签制作多媒体页面。mid音频格式和avi视频格式已不能被浏览器直接打开，使用超级链接下载后通过第三方软件打开播放。a元素用figure块元素进行包裹，并设置figcaption标题；插入<audio>标签来播放音频。音频素材分别使用wav、mp3、ogg格式，浏览器按此顺序找到可播放的第一个素材资源进行播放；插入<video>标签来播放视频。视频素材分别使用mp4、ogg、webm格式，浏览器按此顺序找到可播放的第一个素材资源进行播放；用<embed>标签插入pdf文件，可设置其尺寸；用<object>标签插入一个gif图像对象。<!DOCTYPEHTML><html><body><figure> <figcaption>音视频下载播放：</figcaption> <ahref="media/midi.mid">音乐</a> <ahref="media/clock.avi">视频</a></figure><audiocontrols> <sourcesrc="media/01.wav"> <sourcesrc="media/01.mp3"> <sourcesrc="media/01.ogg"> Yourbrowserdoesnotsupporttheaudioelement.</audio><videocontrols="controls"><sourcesrc="media/movie.mp4"><sourcesrc="media/movie.ogg"><sourcesrc="media/movie.webm"></video><embedsrc="media/Princess.pdf"height="360px"><objectdata="media/4041.GIF"></object></body></html>4.3.3任务4-3：制作音视频多媒体网页4.3

1.任务描述本任务页面从上到下分为标题、音乐、三段视频共五部分。标题前面插入logo图标；音乐有两首，歌名后面与播放条并排；三段视频前面分别有文字作简单说明，整体效果如图4-20所示。2.任务要求本任务制作带音频、视频的多媒体页面，要灵活运用audio元素、video元素、embed元素和object元素等多媒体元素，掌握其基本使用方法和技巧。3.任务分析本任务使用img元素、audio元素、video元素、embed元素和object元素制作多媒体页面。每部分都用figure元素进行包裹。音乐用audio元素，audio元素前面的歌名用行内块定义其统一的宽度。三段视频分别使用video元素、embed元素和object元素，用figcaption元素制作每一段视频的文字说明。video元素、embed元素和object元素都可以用来插入视频，只有video元素可以实现最大化播放，object元素和embed元素不能进行最大化播放。4.24.工作过程步骤1站点规划（1）新建文件夹作为站点，站点内建立media文件夹，将本节素材存放在media文件夹中；（2）新建网页，设置<title>为“任务4-3”；将网页命名为task4-3.html保存在站点所在的目录。步骤2建立网页基本结构（1）网页task4-3.html最外层为div#container（2）最外层#container宽度设置为640px，加上边框。4.3.3任务4-3：

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

温馨提示

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

最新文档

评论

0/150

提交评论