Dreamweaver_CS5-ch05-使用图像与多媒体丰富网页内容.pptVIP

* * Dreamweaver CS5网页设计与制作基础教程 第5章 使用图像与多媒体丰富网页内容 5.1 网页中常见的图像格式 5.1.1 GIF格式图像 5.1.2 JPEG格式图像 5.1.3 PNG格式图像 5.1.1 GIF格式图像 GIF格式图像，可译为“图像交换格式”，是一种无损压缩格式的图像，使文件大小最小化，支持动画格式，能在一个图像文件中包含多帧图像页，浏览器中浏览时可看到动感图像效果，网上小一点的动画一般都是GIF格式的图像。 5.1.2 JPEG格式图像 JPG/JPEG可译为“联合图像专家组”，是一种压缩格式的图像，通过压缩JPEG文件使其在图像品质和文件大小之间达到较好的平衡，损失了原图像中不易为人眼察觉的内容，获得较小文件尺寸。 5.1.3 PNG格式图像 PNG可译为“便携网络图像”，是一种格式非常灵活的图像，用于在WWW上无损压缩和显示图像。 5.2 插入与设置图像 5.2.1 在网页中插入图像 5.2.2 设置图像属性 5.2.3 图像的对齐方式 5.2.1 在网页中插入图像 启动Dreamweaver CS5，打开素材文件，将光标放置于准备插入图像的位置。 在菜单栏中，选择【插入】→【图像】菜单项。 弹出【选择图像源文件】对话框，选择准备插入的图像，单击【确定】按钮。 弹出【图像标签辅助功能属性】对话框，单击【确定】按钮，完成图像标签辅助功能属性的设置。 图像已经插入到网页中，在网页中还可以调整图像的大小，在菜单栏中，选择【文件】→【保存】菜单项，保存页面。 在【工具栏】中，单击【在浏览器中预览】按钮 ，预览页面效果。 5.2.2 设置图像属性 在Dreamweaver CS5中插入图像文件之后，可以对其进行设置，设置图像属性可以使用属性面板。 5.2.3 图像的对齐方式 当网页文件中包括图像文件和文本时，需要对图像进行对齐设置，包括【默认值】、【基线】、【顶部】、【居中】、【底部】、【文本上方】、【绝对居中】、【绝对底部】等。 5.3 插入其他图像元素 5.3.1 插入图像占位符 5.3.2 设置图像占位符 5.3.3 插入鼠标经过图像 5.3.1 插入图像占位符 启动Dreamweaver CS5，将鼠标光标定位于网页文档中，在【常用】插入栏中，单击【图像】下拉按钮，选择【图像占位符】选项。 弹出【图像占位符】对话框，在【名称】文本框中，输入名称“pic”，设置占位符的高度和宽度为“32×32”，设置占位符的颜色为“红色”，单击【确定】按钮。 此时，在网页中名可以看到刚刚插入的占位符。 5.3.2 设置图像占位符 在网页文件中插入图像占位符之后，可以在属性面板中对齐进行设置。 5.3.3 插入鼠标经过图像 启动Dreamweaver CS5，将鼠标光标定位于准备插入鼠标经过图像的位置。 在【常用】插入栏中，单击【图像】下拉按钮，选择【鼠标经过图像】选项。 弹出【插入鼠标经过图像】对话框，单击【原始图像】后面的【浏览】按钮，选择原始图像，单击【鼠标经过图像】后面的【浏览】按钮，添加图像，单击【确定】按钮。 保存网页文档，按下键盘上的【F12】键，即可在浏览器中查看刚刚添加的图像，当鼠标经过时，图像有所变化。 5.4　多媒体在网页中的应用 5.4.1　插入Flash动画 5.4.2　插入FLV视频 5.4.3　为网页添加背景音乐 5.4.4　在网页中插入音频 5.4.1　插入Flash动画 启动Dreamweaver CS5，在菜单栏中，选择【插入】→【媒体】→【SWF】菜单栏。 弹出【选择SWF】对话框，选择准备插入的文件，单击【确定】按钮。 弹出【图像标签辅助功能属性】对话框，单击【确定】按钮，完成图像标签辅助功能属性的设置。 保存文档，按下键盘上的【F12】键，即可在浏览器中预览到添加的Flash效果。 5.4.2　插入FLV视频 启动Dreamweaver CS5，在菜单栏中，选择【插入】→【媒体】→【FLV】菜单栏。 弹出【插入flv】对话框，1. 单击【浏览】按钮，选择视频文件，2. 进行相应的设置，3. 单击【确定】按钮。 保存文档，按下键盘上的【F12】键，即可在浏览器中预览到添加的FLV效果。 5.4.3　为网页添加背景音乐 启动Dreamweaver CS5，打开素材文件。 单击工具栏中【代码】按钮，转换至【代码】视图，在【代码】视图中body，输入【】以显示标签列表，双击选择【bgeounf】选项。 按下键盘上的【空格键】，在弹出的列表中，双击选择【src】选项，设置背景应用文件的路径。 双击【浏览】字样，弹出【选择文件】对话框，选择准备添加的音乐文件，单击【确定】按钮。 按下键盘上的【空格键】，在弹出的列表