Dreamweaver-CC实例教程(第5版)-第3章-图像和多媒体.pdf

第3章　图像和多媒体 本章简介： 图图像像在在网网页页中中的的作作用用是是非非常常重重要要的的，，适适当当地地添添 各各 类类图图像像可可以以使使网网页页更更 清清晰晰美美观观、、形形象象生生动动，，更更能能引引发发 浏浏览览者者的的阅阅读读兴兴趣趣。。 所所谓谓 ““媒媒体体””是是指指信信息息的的载载体体，，而而 ““多多媒媒体体””指指多多 种种媒媒体体的的综综合合使使用用，，包包括括文文字字、、图图形形、、动动画画、、音音频频和和视视 频频等等。。在在DDrreeaammwweeaavveerr CCCC中，，用用户户可可以以方方便便快快 捷捷地地向向网网页页中中添添 多多媒媒体体文文件件，，并并对对它它们们进进行行各各种种编编辑辑。。 课堂学习目标 掌握图像的格式 掌握图像的插入、图像的属性、图像替换文字、 跟踪图像的应用 掌握Flash动画、FLV、An mate作品、HTML5 V deo、音频和插件的插入 3.1　图像 课堂案例——环球旅游网页 网页中的图像格式 插入图像 设置图像属性 给图像添加文 说明 跟踪图像 3.1.1　课堂案例—环球旅游网页 使用 “Image”按钮，插入图像 使用 “CSS设计器”面板， 设置图像之间的距离。 效果图 3.1.2　网页中的图像格式 Web网页中通常使用的图像文件有JPEG、GIF、PNG 3 格式， 但大多数浏览器只支持JPEG、GIF 2 图像格式。因为要保证浏览者 下载网页的速度，所以目前网站设计者也主要使用JPEG和GIF这2 压缩格式的图像。 1．GIF文件 2．JPEG文件 3．PNG文件 3.1.3　插入图像 要在Dreamweaver CC 2019文档中插入图像，该图像必须位于 本 站点文件夹内或远程站点文件夹内，否则不能正确显示，所以在 建立站点时，网站设计者常常是先创建一个名叫“image”的文件夹， 并将需要的图像复制到其中。 3.1.4　设置图像属性 插入图像后，在 “属性”面板中显示了该图像的属性。 插入图像后的“属性”面板 3.1.5　给图像添加文字说明 当图像不能在浏览器中正常显示时，网页中图像的 置就变成空白 区域。为了让浏览者在图像不能正常显示时也能了解图像的信息，可以 为网页中的图像设置 “替换”属性，即将图像的说明文字输入 “替换” 文本框中。 “属性”面板 效果图 3.1.6　跟踪图像 在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然 后在此 础上反复修改，最终得到一幅完美的设计图。制作网页时也应采 用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到网 页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。 在Dreamweaver CC 2019中可利用 “跟踪图像”功能来实现上述网页设 计的方式。 3.2　多媒体 课堂案例——绿色农场网页 插入Flash动画 插入FLV 插入An mate作品 插入HTML5 V deo 插入音频 插入插件 3.2.1　课堂案例—绿色农场网页 使用 “Flash SWF”按钮，为网页 档插入Flash动画；使用 “属 性”面板，设置动画背景透明。 效果图 3.2.2