《Dreamweaver_CS5-ch05-使用图像与多媒体丰富网页内容》由会员分享，可在线阅读，更多相关《Dreamweaver_CS5-ch05-使用图像与多媒体丰富网页内容（18页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver CS5Dreamweaver CS5网页设计与制作基础教程网页设计与制作基础教程第5章 使用图像与多媒体丰富网页内容5.1 网页中常见的图像格式网页中常见的图像格式n n5.1.1 GIF格式图像n n5.1.2 JPEG格式图像n n5.1.3 PNG格式图像5.1.1 GIF格式图像格式图像n nGIF格式图像，可译为“图像交换格式”，是一种无损压缩格式的图像，使文件大小最小化，支持动画格式，能在一个图像文件中包含多帧图像页，浏览器中浏览时可看到动感图像效果，网上小一点的动画一般都是GIF格式的图像。5.1.2 JPEG格式图像格式图像n nJPG/JPEG可译为“
2、联合图像专家组”，是一种压缩格式的图像，通过压缩JPEG文件使其在图像品质和文件大小之间达到较好的平衡，损失了原图像中不易为人眼察觉的内容，获得较小文件尺寸。5.1.3 PNG格式图像格式图像n nPNG可译为“便携网络图像”，是一种格式非常灵活的图像，用于在WWW上无损压缩和显示图像。5.2 插入与设置图像插入与设置图像n n5.2.1 在网页中插入图像n n5.2.2 设置图像属性n n5.2.3 图像的对齐方式5.2.1 在网页中插入图像在网页中插入图像n n启动启动Dreamweaver CS5Dreamweaver CS5，打开素材文件，将光标放置于准备插入，打开素材文件，将光标放置
3、于准备插入图像的位置。图像的位置。n n在菜单栏中，选择在菜单栏中，选择【插入插入】【图像图像】菜单项。菜单项。n n弹出弹出【选择图像源文件选择图像源文件】对话框，选择准备插入的图像，单击对话框，选择准备插入的图像，单击【确定确定】按钮。按钮。n n弹出弹出【图像标签辅助功能属性图像标签辅助功能属性】对话框，单击对话框，单击【确定确定】按钮，按钮，完成图像标签辅助功能属性的设置。完成图像标签辅助功能属性的设置。n n图像已经插入到网页中，在网页中还可以调整图像的大小，在图像已经插入到网页中，在网页中还可以调整图像的大小，在菜单栏中，选择菜单栏中，选择【文件文件】【保存保存】菜单项，保存页面。
4、菜单项，保存页面。n n在在【工具栏工具栏】中，单击中，单击【在浏览器中预览在浏览器中预览】按钮按钮 ，预览页面效，预览页面效果。果。5.2.2 设置图像属性设置图像属性n n在Dreamweaver CS5中插入图像文件之后，可以对其进行设置，设置图像属性可以使用属性面板。5.2.3 图像的对齐方式图像的对齐方式n n当网页文件中包括图像文件和文本时，需要对图像进行对齐设置，包括【默认值】、【基线】、【顶部】、【居中】、【底部】、【文本上方】、【绝对居中】、【绝对底部】等。5.3 插入其他图像元素插入其他图像元素n n5.3.1 插入图像占位符n n5.3.2 设置图像占位符n n5.3.3
5、 插入鼠标经过图像5.3.1 插入图像占位符插入图像占位符n n启动启动Dreamweaver CS5Dreamweaver CS5，将鼠标光标定位于网页文档中，将鼠标光标定位于网页文档中，在在【常用常用】插入栏中，单击插入栏中，单击【图像图像】下拉按钮，选择下拉按钮，选择【图像占位符图像占位符】选项。选项。n n弹出弹出【图像占位符图像占位符】对话框，在对话框，在【名称名称】文本框中，文本框中，输入名称输入名称“ “picpic” ”，设置占位符的高度和宽度为，设置占位符的高度和宽度为“ “3232”3232”，设置占位符的颜色为，设置占位符的颜色为“ “红色红色” ”，单击，单击【确定确定
6、】按钮。按钮。n n此时，在网页中名可以看到刚刚插入的占位符此时，在网页中名可以看到刚刚插入的占位符。5.3.2 设置图像占位符设置图像占位符n n在网页文件中插入图像占位符之后，可以在属性面板中对齐进行设置。5.3.3 插入鼠标经过图像插入鼠标经过图像n n启动启动Dreamweaver CS5Dreamweaver CS5，将鼠标光标定位于准备插入鼠标经过图，将鼠标光标定位于准备插入鼠标经过图像的位置。像的位置。n n在在【常用常用】插入栏中，单击插入栏中，单击【图像图像】下拉按钮，选择下拉按钮，选择【鼠标经鼠标经过图像过图像】选项。选项。n n弹出【插入鼠标经过图像】对话框弹出【插入鼠标
7、经过图像】对话框，单击【原始图像】后面的单击【原始图像】后面的【浏览】按钮，选择原始图像【浏览】按钮，选择原始图像，单击【鼠标经过图像】后面的单击【鼠标经过图像】后面的【浏览】按钮，添加图像【浏览】按钮，添加图像，单击【确定】按钮单击【确定】按钮。n n保存网页文档，按下键盘上的保存网页文档，按下键盘上的【F12F12】键，即可在浏览器中查看键，即可在浏览器中查看刚刚添加的图像，当鼠标经过时，图像有所变化。刚刚添加的图像，当鼠标经过时，图像有所变化。5.4多媒体在网页中的应用多媒体在网页中的应用n n5.4.1插入Flash动画n n5.4.2插入FLV视频n n5.4.3为网页添加背景音乐n
8、 n5.4.4在网页中插入音频5.4.1插入插入Flash动画动画n n启动启动Dreamweaver CS5Dreamweaver CS5，在菜单栏中，选择，在菜单栏中，选择【插入插入】【媒体媒体】【SWFSWF】菜单栏。菜单栏。n n弹出弹出【选择选择SWFSWF】对话框，选择准备插入的文件，单对话框，选择准备插入的文件，单击击【确定确定】按钮。按钮。n n弹出弹出【图像标签辅助功能属性图像标签辅助功能属性】对话框，单击对话框，单击【确定确定】按钮，完成图像标签辅助功能属性的设置。按钮，完成图像标签辅助功能属性的设置。n n保存文档，按下键盘上的保存文档，按下键盘上的【F12F12】键，即
9、可在浏览器键，即可在浏览器中预览到添加的中预览到添加的FlashFlash效果。效果。5.4.2插入插入FLV视频视频n n启动Dreamweaver CS5，在菜单栏中，选择【插入】【媒体】【FLV】菜单栏。n n弹出【插入flv】对话框，1. 单击【浏览】按钮，选择视频文件，2. 进行相应的设置，3. 单击【确定】按钮。n n保存文档，按下键盘上的【F12】键，即可在浏览器中预览到添加的FLV效果。5.4.3为网页添加背景音乐为网页添加背景音乐n n启动启动Dreamweaver CS5Dreamweaver CS5，打开素材文件。，打开素材文件。n n单击工具栏中单击工具栏中【代码代码】
10、按钮，转换至按钮，转换至【代码代码】视图，在视图，在【代码代码】视图中视图中，输入，输入【 】。n n保存文档，按下键盘上的保存文档，按下键盘上的【F12F12】键，即可在浏览器中收听到刚刚添加的键，即可在浏览器中收听到刚刚添加的音乐。音乐。5.4.4在网页中插入音频在网页中插入音频n n启动启动Dreamweaver CS5Dreamweaver CS5，打开素材文件。，打开素材文件。n n在在【插入插入】面板中，单击面板中，单击【媒体媒体】下拉按钮，选中下拉按钮，选中【插件插件】选选项项n n弹出弹出【选择文件选择文件】对话框，选择准备插入是文件，单击对话框，选择准备插入是文件，单击【确定确定】按钮。按钮。n n在在【属性属性】面板中，设置宽和高的数值，分别为面板中，设置宽和高的数值，分别为700700和和6060，可以，可以看到页面中发生变化看到页面中发生变化n n如果希望打开网页的时候，声音能够自动播放，可以单击如果希望打开网页的时候，声音能够自动播放，可以单击【属属性性】面板中的面板中的【参数参数】按钮按钮n n弹出弹出【参数参数】对话框，分别在对话框，分别在【参数参数】和和【值值】文本框中输入文本框中输入文本文本n n保存文档，按下键盘上的保存文档，按下键盘上的【F12F12】键，即可在浏览器中收听到刚键，即可在浏览器中收听到刚刚添加的音乐。刚添加的音乐。
