Download presentation
Presentation is loading. Please wait.
1
DreamweaverCS4基础知识 第五章 图像和媒体 窦店中学 吴振海 2013年12月
2
第五章 图像和媒体 学习要点 插入图像 设置图像属性 制作图像映射 插入声音等媒体元素 插入背景音乐
本章介绍图像和声音等媒体的基本知识及使用方法。内容包括：图像、声音的基本知识；在网页中插入图像的方法；图像属性的设置，翻转图像、背景图像和图像映射等效果的制作；在网页中插入声音、Flash视频、Shockwave电影、ActiveX控件和Java applets等媒体以及对其属性进行设置。还介绍了背景音乐效果等制作。 学习要点 插入图像 设置图像属性 制作图像映射 插入声音等媒体元素 插入背景音乐
3
5.1 在网页中插入图像 图像在网页中的作用是无可替代的。图像不仅可以修饰网页，使网页美观、图文并茂，而且一幅合适的图片，常常有胜过数篇洋洋洒洒的介绍的效果。 关于图像 计算机对图像的处理也是以文件的形式进行的，由于图像编码的方法很多，因而形成了许多图像文件格式。但Web页中通常使用的只有三种格式，即GIF、JPEG和PNG。本节将重点介绍三种图像格式的特点及其适用的范围。
4
5.1 在网页中插入图像 5.1.1 关于图像 （GIF图像） GIF（Graphics Interchange Format）是世界最大的联机服务机构CompuServe所在1987年开发的图像文件格式，扩展名为“.gif”。 GIF（图形交换格式）文件是经过压缩的，最多只支持256种色彩的图像，容量较小，解码与下载速度快。可以创建简单的动画，并支持透明背景。最适合显示色调不连续或具有大面积单一颜色的图像，例如网页中的导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。
5
5.1 在网页中插入图像 5.1.1 关于图像 （ JPEG图像）
JPEG格式是由联合图像专家组制定的文件格式，扩展名为“.jpg”或“.jpeg”。 JPEG（联合图像专家组标准）是一种有损压缩，可支持1670万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。所以在网页中使用JPEG图像时，不妨多试几次不同的压缩率，以找到压缩率与失真度之间的最佳结合点。
6
5.1 在网页中插入图像 5.1.1 关于图像 （ PNG图像） PNG（Portable Network Graphic Format）是20世纪90年代中期开发的一种新兴的网络图像格式，文件扩展名是“.PNG”。 PNG（可移植网络图形）文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明的支持。是Fireworks的默认格式，可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是完全可编辑的。文件必须具有.PNG文件扩展名才能被Dreamweaver识别为PNG文件。 提示：不同浏览器对PNG的支持是不一样的。因此如果使用PNG文件， 应该将它们导出为GIF或JPEG，以确保他们具有WEB版本。
7
5.1 在网页中插入图像 5.1.1 关于图像 在Dreamweaver文档中，GIF、JPG和PNG图片都可以加入。这些图片不仅可以直接放在页面上，也可以放在表格、表单以及层里面。在加入图片时，还能直接对图片做一些修改。如在属性面板中为图片添加链接、给图片加上一个边框、改变图片的尺寸、在图片周围加上空白区间以及设定图片对齐方式。还可以通过Dreamweaver的行为创建翻转图片、导航条或图片地图等交互式图片。 使用Dreamweaver的参数设置对话框设定首选图像编辑器（如Fireworks）可以提高整个工作过程的效率。如果将Fireworks设置成首选图片编辑器的话，在Fireworks里面修改完图片后只需简单地单击鼠标就可以自动更新Dreamweaver中的图片文件了。
8
5.1 在网页中插入图像 5.1.2 插入图像 当在Dreamweaver文件中插入图片时，Dreamweaver会自动在网页的HTML源代码中生成对该图像文件的引用。为了确保此引用的正确性，该图片文件必须保存在当前站点目录中。如果所用的图片不在当前站点目录中。如果所用的图片不在当前站点目录中，Dreamweaver将询问是否将其复制到当前站点目录下。 图像通常用来添加图形界面（例如导航按钮）、具有视觉感染力的内容（例如照片）或交互式设计元素（例如鼠标经过图像或图像地图）。 在DreamweaverCS4中，可以在“设计”视图或“代码”视图中将图像插入文档。在Dreamweaver文档中添加图像时，可以设置或修改图像属性并直接在“文档”窗口中查看所做的更改。 在文档中插入图像，可以使用菜单栏中“插入”|“图像”命令，也可以使用“插入”/“常用”面板中的插入图像按钮。
9
5.1 在网页中插入图像 5.1.2 插入图像 在文档中插入图像，可以使用菜单栏中“插入”|“图像”命令，也可以使用“插入”/“常用”面板中的插入图像按钮。 下面通过插入图片和文字的示例，了解插入图片的具体步骤。 ……………..
10
5.1 在网页中插入图像 5.1.3 图像的属性 将图像插入文档中后，DreamweaverCS4会自动按照图像的大小显示，但往往还要对图像的一些属性进行具体调整，如大小、位置、对齐等。这就要通过图像属性控制面板实现。选中一个图像之后，文档窗口下方会出现图像属性控制面板，如图1所示。 图1、 图像属性控制面板
11
5.1 在网页中插入图像 5.1.4 图像大小的设置 所谓图像大小的设置，是指调整图像在文档中显示的宽度和高度，而不是指图像文件的存储大小。可以在Dreamweaver的“文档”窗口的“设计”视图中以可视化的形式调整图片的大小，图片的文件大小不发生变化。 在Dreamweaver中图像的宽度和高度默认单位为像素（Pixel）。在文档中调整图像的宽度和高度可以通过在图像属性控制面板中设置，也可以直接通过鼠标拖动来改变图像的大小。调整图像大小时，属性检查器的“宽”和“高”域，显示该元素当前的宽度和高度。
12
5.1 在网页中插入图像 5.1.5 创建翻转图像 翻转图像就是当鼠标指针经过图片时，图片会变成另外一张。一个翻转图像其实是由两张图片组成的： 第一图像（当页面显示时的图像）和翻转图像（鼠标经过第一图像时显示的图像）。组成图像翻转的两张图片必须有相同的尺寸。如果两张图片的尺寸不同，DreamweaverCS4会自动将第二张图片尺寸调整为第一张同样大小。 下面，通过创建一个具体翻转图像的实例，了解创建翻转图像的具体操作。
13
5.1 在网页中插入图像 5.1.6 设置背景图像 若要定义页面背景的图像，可以使用“页面属性”对话框。如果同时使用背景图像和背景颜色，下载图像时会出现颜色，然后图像覆盖颜色。如果背景图像包含任何透明像素，则背景颜色透过背景图像显示出来。 下面通过简单实例演示背景图像的创建过程。 （1）执行“修改”|“页面属性”命令，弹出“页面属性”对话框，如图所示。 （2）设置背景图像。单击“浏览”按钮，然后浏览并选择图像，或者直接在“背景图像”文本框中输入背景图像的路径。 （3）保存文件完成背景图像的制作，按下F12在浏览器中观察创建的结果。
14
5.1 在网页中插入图像 5.1.6 设置背景图像 如果背景图像没有填满整个窗口，Dreamweaver会平铺（重复）背景图像，就像图所示的那样。若要防止背景图像平铺，可以使用CSS样式表禁用图像平铺。 下面通过一个实例介绍禁用图像平铺的步骤。 （1）打开上例制作的文件，然后执行“窗口”/“CSS样式”命令，打开“CSS样式”浮动面板。 （2）单击“CSS样式”面板，点击“新建CSS规则”按钮，弹出“新建CSS规则”对话框。 （3）在“新建CSS规则”对话框中“选择器类型”下拉列表框中选择“类”，在“选择器名称”文本框中输入 .bg1。“规则定义”下拉列表框中选择“仅限该文档”。单击“确定”按钮，弹出对应的“CSS规则定义”对话框。
15
5.1 在网页中插入图像 5.1.6 设置背景图像 （4）在CSS规则定义对话框左侧的“分类”列表框中，选择“背景”选项，如图所示。
（5）单击“浏览”按钮，选择图像文件，或是直接在“背景图像”文本框中输入图像地址。 （6）单击“重复”下拉列表框下拉箭头，在下拉列表中选择“不重复”。 选项介绍（不重复、重复、横向重复 、纵向重复） （7）完成以上设置单击“确定”按钮，然后再标签选择器中右击<body>标签，在单击“设置类”子菜单中的bg1(上述步骤建立的CSS样式名)，应用样式，如图所示 （8）保存文件完成背景制作，按下F12键在浏览器中查看效果。
16
5.1 在网页中插入图像 5.1.7 使用图像映射 图像映射是指将一幅图像分割为若干个区域，并将这些子区域设置成热点区域，然后将这些不同热点区域链接到不同的页面，当单击图像上的不同热点区域时，就可以跳转到不同的页面。使用图像属性检查器可通过图形方式创建或编辑客户端图像映射。 下面通过一个实例来说明如何使用图像映射。
17
在网页中插入音频时，考虑到下载速度、声音效果等因素，一般采用rm或mp3格式的音频。
5.2 添加声音 在网页中插入音频时，考虑到下载速度、声音效果等因素，一般采用rm或mp3格式的音频。 1、链接到音频文件 2、嵌入音乐文件 可以介绍一下 HIDDEN 值TRUE LOOP 值TRUE 的作用
18
5.3 添加Shockwave电影 Shockwave是Adobe公司开发的标准的网络交互多媒体的压缩文件格式。Shockwave提供了强大的、可扩展的脚本引擎，使得它可以制作聊天室、操作html、解析xml文档、控制矢量图形。Shockwave动画是用Director制作，文件扩展名是“.dcr”。 常见的视频格式有“wmv”、“avi”、“mpg”、“rmvb”等等，Dreamweaver会根据视频格式不同，选用不同的播放器，默认的播放器是Windows Media Player。 参数：AutoStart 值 true Sound 值 true
19
5.4 插入ActiveX控件 以前称为 OLE 控件或 OCX 控件是组件 （或对象） 打包别人编程功能.以便您可以重用 Web页或在其他程序中插入。 例如, 随 InternetExplorer 一起提供 ActiveX 控件可用于增强 Web页具有复杂格式功能和动画。
20
5.5、添加Flash视频内容 1、插入 swf文件 2、插入 flv文件
21
谢谢观看
Similar presentations
