《网页设计与制作》
第 7 章 插入图像和多媒体对象
北京师范大学出版
第 7 章 插入图像和多媒体对象
7.1图像文件格式 7.2在页面中插入图像 7.2.1插入图像 7.2.2设置图像属性 7.2.3裁剪图像 7.2.4调整图像的亮度和对比度 7.2.5锐化图像 7.3插入其他网页图像 7.3.1插入图像占位符 7.3.2创建鼠标经过图像 7.4插入Flash对象 7.4.1插入Flash动画影片 7.4.2插入Flash按钮 7.4.3插入Flash文本对象 7.5 在网页中添加声音和视频 7.5.1在网页中添加音频 7.5.2添加视频 7.6 插入其他多媒体对象 7.6.1 插入 Applet 7.6.2插入ActiveX控件 7.7 综合案例实现
7.2.1 插入图像
图像是网页中最主要的元素之一，一幅幅图像和一个个漂亮 的按钮不但使网页更加美观、形象和生动，而且与文本相比 能够更直观地说明问题，使表达的意思一目了然，这样图像 就会为网站增添生命力，同时也加深用户对网站良好的印象。
01打开“源文件\ch7\7_2\7_2_1\index.htm”页面，将光标置于要插入 图像的位置，如图所示。选择菜单中的【插入】|【图像】命令，弹出 【选择图像源文件】对话框，在对话框中选择图像529.jpg。
01打开“\源文件\ch7\7_3\7_3_2\index.htm”原始文件，如图7.20所示. 02将光标置于插入鼠标经过图像的位置，选择菜单中的【插入】|【图像对象】 |【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
鼠标经过图像就是当鼠标经过图像时，原图像会变成另外一幅图像。鼠标经 过图像其实是由两张图像（即原始图像和鼠标经过图像）组成的。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
05单击【确定】按钮，将图像路径添加到文本框中。 06单击【确定】按钮，插入鼠标经过图像，将【对齐】设置为【右对齐】。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.4 插入Flash对象
7.3 插入其他网页图像
7.3.1 插入图像占位符
有时候根据页面布局的需要，要在网页中插入一幅图片。这个时候 可以不制作图片，而是使用占位符来代替图片位置，如图所示是插 入图像占位符的效果。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.1 插入图像占位符
01打开“源文件\ch7\7_3\7_3_1\index.htm”网页文档
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.2 设置图像属性
01打开“源文件\ch7\7_2\7_2_2\index.htm”页面
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.2 设置图像属性
02选中图像，在图像的【属性】面板中【替换】下拉列表中输入【粽 子】，将对齐设置为【右对齐】。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.4 调整图像的亮度和对比度
01打开“源文件\ch7\7_2\7_2_4\index.htm”，选中要 调整亮度和对比度的图像，单击【属性】面板中的 【亮度和对比度】按钮，弹出如图所示的提示对话框。 02单击【确定】按钮，弹出【亮度/对比度】对话框， 在对话框中将【亮度】设置为“-15”， 【对比度】设 置为“10”。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.4 插入Flash对象
7.4.1 插入Flash动画影片
03单击【确定】按钮，插入SWF动画 。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.4 插入Flash对象
7.4.2 插入Flash按钮
在Dreamweaver cs3中已经没有Flash按钮了，到 cs4把Flash文本也去掉了 全部集成到flash cs4中。 Flash 按钮Dreamweaver 提供的Flash 模板。使用 该模板，设计人员可以快速制作出所需要的Flash按 钮，而避免了切换到Flash中制作按钮的操作。但是 在Dreamweaver cs3中已经没有Flash按钮了，到 cs4把Flash文本也去掉了，全部集成到flash cs4中 。
FLA 文件 (.fla) 所有项目的源文件，使用 Flash 创作工具创建。 此类型的文件只能在 Flash 中打开（而无法在 Dreamweaver或浏 览器中打开）。您可以在 Flash 中打开 FLA 文件，然后将它发 布为 SWF 或 SWT 文件以在浏览器中使用。
SWF 文件 (.swf) FLA (.fla) 文件的编译版本，已进行优化，可以在 Web 上查看。此文件可以在浏览器中播放并且可以在Dreamweaver 中 进行预览，但不能在 Flash中编辑此文件。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.5 锐化图像
锐化将增加对象边缘像素的对比度，从而增加图像的淸晰度或锐度。
Dreamweaver的编辑功能仅适用于JPEG和 GIF图像文件格式，其他位图图 像格式不能使用这些图像编辑功能。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
FLV 文件 (.flv) 一种视频文件，它包含经过编码的音频和视频数 据，用于通过 Flash Player进行传送。例如，如果有QuickTime 或 Windows Media 视频文件，则可以使用编码器（如 Flash® CS4 Video Encoder 或 Sorensen Squeeze）将视频文件转换为 FLV 文件。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.4 插入Flash对象
7.4.1 插入Flash动画影片
01打开“\源文件\ch7\7_4\7_4_1\index.htm”页面，将光标置于要插入 SWF动画的位置
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.4 插入Flash对象
7.4.1 插入Flash动画影片 02选择菜单中的【插入】丨【媒体】|【SWF】命令 弹出【选择文 件】对话框，在对话框中选择top.swf。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.1 图像文件格式
3 PNG图像格式
PNG是英文单词“Portable Network Graphic”的缩写， 即便携网络图像，该文件格式是一种替代GIF格式的无 专利权限制的格式，它包括对索引色、灰度、真彩色 图像以及alpha 通道透明的支持。
低颜色数下的GIF图比JPEG图装载得更快，可用许 多具有同样大小的图像文件组成动画，在GIF图像中可 指定透明区域，使图像具有非同一般的显示效果。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.1 图像文件格式
2 JPEG图像格式
JPEG格式是目前互联网中最受欢迎的图像格式，可支 持多达16M颜色。 它能展现十分丰富生动的图像，还能压缩。但压缩方式 是以损失图像质量为代价，压缩比越高图像质量损失越 大，图像文件也就越小。 一般情况下，同一图像的BMP格式的大小是JPEG格式 的5至10倍，而GIF格式最多只能是256色，因此载入 256色以上图像的JPEG格式就成了互联网中最受欢迎 的图像格式。 网页中的图像格式一般以GIF为主，如果涉及到照片类 似的图像，则选择JPEG格式。
7.3.2 创建鼠标经过图像
03在对话框中单击【原始图像】文本框右边的【浏览】按钮，弹出【原始图 像：】对话框，在对话框中选择图像529.jpg 。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
04单击【确定】按钮，将图像路径添加到文本框中。单击【鼠标经过图像】 文本框右边的【浏览】按钮，弹出【鼠标经过图像】对话框，在对话框中选 择图像530.jpg 。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.1 插入图像
打开源文件
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.1 插入图像
【选择图像源文件】对话框
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.3 裁剪图像
02【确定】按钮，此时在图像的周围会出现调整图像大小的控制手柄 。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.4 调整图像的亮度和对比度
图像编辑功能可以不用离开Dreamweaver就能够完成， 编辑工具是内嵌的Fireworks技术。这样在编辑网页图 像时就轻松多了，不需要一定打开其他的图像处理工具 进行处理，从而大大提髙了工作效率。在 Dreamweaver CS4中还可以直接调整图像的亮度/对比 度。这将影响图像的高亮显示、阴影和中间色调。修正 过暗或过亮的图像时通常使用亮度/对比度。
《网页设计与制作》
第 7 章 插入图像和多媒体对象