《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】键,即可在浏览器中收听到刚键,即可在浏览器中收听到刚刚添加的音乐。刚添加的音乐。