网页设计与制作 第 7 章 插入图像和多媒体对象

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
《网页设计与制作》
第 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 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.5 锐化图像
锐化将增加对象边缘像素的对比度,从而增加图像的淸晰度或锐度。
Dreamweaver的编辑功能仅适用于JPEG和 GIF图像文件格式,其他位图图 像格式不能使用这些图像编辑功能。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
《网页设计与制作》
第 7 章 插入图像和多媒体对象
本章要点: ◆ 插入图像和Image Objects ◆ 设置图像的属性 ◆ 图像编辑 ◆ 添加多媒体及参数设置 ◆ 图像和多媒体应用技巧
《网页设计与制作》
第 7 章 插入图像和多媒体对象
在网络上随意浏览一个页面,都会发现除了文字以外还有 各种各样的其他元素,如图像、动画和声音。图像或多媒 体是文本的解释和说明,在文档的适当位置上放置一些图 像或多媒体文件,不仅可以使文本更加容易阅读而且使得 文档更加具有吸引力。本章主要讲述图像的基本使用、添 加Flash影片、插入视频文件和插入其他多媒体对象。
《网页设计与制作》
第 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.2 在页面中插入图像
7.2.1 插入图像
打开源文件
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.1 插入图像
【选择图像源文件】对话框
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.1 图像文件格式
1 GIF图像格式
GIF格式是由Compuserve公司提出的与设备无关的 图像存储标准,也是Web上使用最早、应用最广泛的图 像格式。 它是通过减少组成图像的每个像素的储存位数和 LZH压缩存储技术来减少图像文件的大小。
GIF格式最多只能是256色的图像,具有图像文件短 小、下载速度快等特点。
7.3.2 创建鼠标经过图像
03在对话框中单击【原始图像】文本框右边的【浏览】按钮,弹出【原始图 像:】对话框,在对话框中选择图像529.jpg 。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
04单击【确定】按钮,将图像路径添加到文本框中。单击【鼠标经过图像】 文本框右边的【浏览】按钮,弹出【鼠标经过图像】对话框,在对话框中选 择图像530.jpg 。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.4 调整图像的亮度和对比度
01打开“源文件\ch7\7_2\7_2_4\index.htm”,选中要 调整亮度和对比度的图像,单击【属性】面板中的 【亮度和对比度】按钮,弹出如图所示的提示对话框。 02单击【确定】按钮,弹出【亮度/对比度】对话框, 在对话框中将【亮度】设置为“-15”, 【对比度】设 置为“10”。
7.2.1 插入图像
02单击【确定】按钮,插入图像
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.1 插入图像
03保存文档,按F12键在浏览器中浏览效果
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.2 设置图像属性
在文档中插入图像后,Dreamweaver CS4会自动按照图像的大小显示, 所以还需要对图像的属性进行具体的调整,如大小、位置和对齐等。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
05单击【确定】按钮,将图像路径添加到文本框中。 06单击【确定】按钮,插入鼠标经过图像,将【对齐】设置为【右对齐】。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.4 插入Flash对象
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.3 裁剪图像
02【确定】按钮,此时在图像的周围会出现调整图像大小的控制手柄 。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.4 调整图像的亮度和对比度
图像编辑功能可以不用离开Dreamweaver就能够完成, 编辑工具是内嵌的Fireworks技术。这样在编辑网页图 像时就轻松多了,不需要一定打开其他的图像处理工具 进行处理,从而大大提髙了工作效率。在 Dreamweaver CS4中还可以直接调整图像的亮度/对比 度。这将影响图像的高亮显示、阴影和中间色调。修正 过暗或过亮的图像时通常使用亮度/对比度。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.1 图像文件格式
3 PNG图像格式
PNG是英文单词“Portable Network Graphic”的缩写, 即便携网络图像,该文件格式是一种替代GIF格式的无 专利权限制的格式,它包括对索引色、灰度、真彩色 图像以及alpha 通道透明的支持。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.2 设置图像属性
01打开“源文件\ch7\7_2\7_2_2\index.htm”页面
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.2 设置图像属性
02选中图像,在图像的【属性】面板中【替换】下拉列表中输入【粽 子】,将对齐设置为【右对齐】。
7.3 插入其他网页图像
7.3.1 插入图像占位符
有时候根据页面布局的需要,要在网页中插入一幅图片。这个时候 可以不制作图片,而是使用占位符来代替图片位置,如图所示是插 入图像占位符的效果。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.1 插入图像占位符
01打开“源文件\ch7\7_3\7_3_1\index.htm”网页文档
PNG是Macromedia Fireworks固有的文件格式。 PNG文件可保留所有原始层、矢量、颜色和效果信息, 并且在任何时候所有元素都是可以完全编辑的。 文件必须具有 “.png”文件扩展名才能被Dreamweaver识 别为PNG文件。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.1 插入图像占位符
02将光标放置在要插入图像占位符的位置,选择【插入】|【图像对 象】|【图像占位符】 命令,弹出【图像占位符】对话框,在对话框 进行相应的设置
03单击【确定】按钮,插入图像占位符。 《网页设计与制作》
Βιβλιοθήκη Baidu
FLV 文件 (.flv) 一种视频文件,它包含经过编码的音频和视频数 据,用于通过 Flash Player进行传送。例如,如果有QuickTime 或 Windows Media 视频文件,则可以使用编码器(如 Flash® CS4 Video Encoder 或 Sorensen Squeeze)将视频文件转换为 FLV 文件。
FLA 文件 (.fla) 所有项目的源文件,使用 Flash 创作工具创建。 此类型的文件只能在 Flash 中打开(而无法在 Dreamweaver或浏 览器中打开)。您可以在 Flash 中打开 FLA 文件,然后将它发 布为 SWF 或 SWT 文件以在浏览器中使用。
SWF 文件 (.swf) FLA (.fla) 文件的编译版本,已进行优化,可以在 Web 上查看。此文件可以在浏览器中播放并且可以在Dreamweaver 中 进行预览,但不能在 Flash中编辑此文件。
低颜色数下的GIF图比JPEG图装载得更快,可用许 多具有同样大小的图像文件组成动画,在GIF图像中可 指定透明区域,使图像具有非同一般的显示效果。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.1 图像文件格式
2 JPEG图像格式
JPEG格式是目前互联网中最受欢迎的图像格式,可支 持多达16M颜色。 它能展现十分丰富生动的图像,还能压缩。但压缩方式 是以损失图像质量为代价,压缩比越高图像质量损失越 大,图像文件也就越小。 一般情况下,同一图像的BMP格式的大小是JPEG格式 的5至10倍,而GIF格式最多只能是256色,因此载入 256色以上图像的JPEG格式就成了互联网中最受欢迎 的图像格式。 网页中的图像格式一般以GIF为主,如果涉及到照片类 似的图像,则选择JPEG格式。
7.2.1 插入图像
图像是网页中最主要的元素之一,一幅幅图像和一个个漂亮 的按钮不但使网页更加美观、形象和生动,而且与文本相比 能够更直观地说明问题,使表达的意思一目了然,这样图像 就会为网站增添生命力,同时也加深用户对网站良好的印象。
01打开“源文件\ch7\7_2\7_2_1\index.htm”页面,将光标置于要插入 图像的位置,如图所示。选择菜单中的【插入】|【图像】命令,弹出 【选择图像源文件】对话框,在对话框中选择图像529.jpg。
《网页设计与制作》
第 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中 。
01打开“\源文件\ch7\7_3\7_3_2\index.htm”原始文件,如图7.20所示. 02将光标置于插入鼠标经过图像的位置,选择菜单中的【插入】|【图像对象】 |【鼠标经过图像】命令,弹出【插入鼠标经过图像】对话框。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.2 设置图像属性
03保存文档,按F12键即可在浏览器预览效果
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.3 裁剪图像
01打开“源文件\ch7\7_2\7_2_3\index.htm”页面,选择要裁剪的图像, 单击【属性】面板中的【裁剪】按钮,弹出提示对话框 。 提示:dreamweaver裁剪图像时,会更改磁盘上的原图像文件,因此用 户可能需要事先备一份图像文件,以便在需要恢复到原始图像时使用。
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
鼠标经过图像就是当鼠标经过图像时,原图像会变成另外一幅图像。鼠标经 过图像其实是由两张图像(即原始图像和鼠标经过图像)组成的。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
相关文档
最新文档