第3章 图像和其他媒体.

Presentation on theme: "第3章 图像和其他媒体."— Presentation transcript:

1 第3章 图像和其他媒体

2 第3章 图像及其他媒体 内容提要 图像及声音文件的格式 插入网页图像的方法 插入声音的方法 插入Flash动画的方法
第1章 网页设计与制作概述

3 第3章 图像及其他媒体 3.1 插入图像 图像是一种重要的信息载体，通过在文档中插入精美的图像元素，可以实现深度视觉冲击，使得文档更具有吸引力，有效突出文档的主题。 3.1.1网页中常见的图像格式 在计算机中使用的图像文件有很多种图形文件格式，例如PCX、PCD、JPEG、PNG、GIF、BMP、TIFF等，但 Web 页面中通常使用的只有三种，即 GIF、JPEG 和PNG。 1.GIF 文件 GIF（图形交换格式）是一种基于LZW算法的连续色调的无损压缩格式，其压缩率一般在50％左右。GIF文件最多使用 256 种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。 2.JPEG文件 JPEG （联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG 文件可以包含数百万种颜色。随着 JPEG 文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩 JPEG 文件在图像品质和文件大小之间达到良好的平衡。 3.PNG 文件 第1章 网页设计与制作概述

4 第3章 图像及其他媒体 3.1 插入图像 3.1.2插入网页图像 1.在设计视图中插入图像
在将图像插入 Dreamweaver 8 文档时，自动在 HTML 源代码中生成对该图像文件的引用，为了确保引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中， Dreamweaver 8 会询问是否要将此文件复制到当前站点中。 若要插入图像，可以执行以下操作： （1）在“文档”窗口中，将插入点放置在要显示图像的地方，然后执行以下操作之一： 在“插入”栏的“常用”类别中，单击“图像”图标，如图3.1所示。 第1章 网页设计与制作概述

5 第3章 图像及其他媒体 3.1 插入图像 3.1.2插入网页图像 1.在设计视图中插入图像
（2）出现的“选择图像源”对话框,执行下列操作之一： 选择“文件系统”以选择一个图形文件。 选择“数据源”以选择一个动态图像源。 图3.2 选择图像源对话框 （3）浏览以选择要插入的图像或内容源。 如果当前文档是一个未保存的文档，则 Dreamweaver 8 生成一个对图像文件的引用，将文档保存到站点中的任何位置后 ，Dreamweaver 8 将该引用转换为文档相对路径。 （4） 单击“确定”按钮，将显示“图像标签辅助功能属性”对话框（该对话框需要在“首选参数”中激活）， （5）在“替换文本”和“详细说明”文本框中输入值，然后单击“确定”按钮。 第1章 网页设计与制作概述

6 第3章 图像及其他媒体 3.1 插入图像 3.1.2插入网页图像 2.在代码视图中插入图像
在 HTML 中，图像由 <img> 标签定义。<img> 是空标签它只包含属性，并且没有闭合标签。 要在页面上显示图像，需要使用源属性（src）。src 指 "source"，源属性的值是图像的 URL 地址。 定义图像的语法是： <img src="url" alt=" "> URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 的 images 目录中，那么其 URL 为 alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。 <img src="boat.gif" alt="Big Boat"> 在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。此时，浏览器将显示这个替代性的文本而不是图像，为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。 第1章 网页设计与制作概述

7 第3章 图像及其他媒体 3.1 插入图像 3.1.3 设置网页图像的属性 1.图像的属性面板
在“属性”面板（“窗口”→“属性”）中，设置该图像的属性，如图3.4所示。 图3.4 “属性”面板 2.对齐图像 通过对齐图像操作，可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐，还可以设置图像的水平对齐方式。 若要对齐图像，执行以下操作： （1）在“设计”视图中选择该图像。 （2）在“属性”面板中设置该图像的对齐属性，如图3.5所示，可以设置相对于同一段落或行中的其它元素的对齐方式。 第1章 网页设计与制作概述

8 第3章 图像及其他媒体 3.1 插入图像 3.1.3 设置网页图像的属性 2.对齐图像
Dreamweaver 8提供的对齐方式，如图3.6所示： 【默认值】：默认值对齐通常是指按照指定基线对齐。（根据站点访问者的浏览器的不同，默认值也会有所不同。） 【基线和底部】: 基线和底部对齐是指将文本（或同一段落中的其它元素）的基线与选定对象的底部对齐。 【顶端】: 顶端对齐是将图像的顶端与当前行中最高项（图像或文本）的顶端对齐，如图。 【居中】: 居中对齐是将图像的中部与当前行的基线对齐。 【文本上方】: 文本上方对齐是将图像的顶端与文本行中最高字符的顶端对齐。 【绝对居中】: 绝对居中对齐是将图像的中部与当前行中文本的中部对齐。 【绝对底部】: 绝对底部对齐是将图像的底部与文本行（这包括字母下部，例如在字母 g 中）的底部对齐。 【左对齐】: 左对齐是将所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。 【右对齐】: 右对齐是将图像放置在右边，文本在对象的左侧换行。如果右对齐文本在行上处于对象之前，它通常强制右对齐对象换到一个新行。 第1章 网页设计与制作概述

9 第1章 网页设计与制作概述

10 第3章 图像及其他媒体 3.1 插入图像 3.1.3 设置网页图像的属性 3.调整图像大小
（1）在“文档”窗口中选择该元素（例如，一个图像或 SWF 文件），选定元素后，元素的底部、右侧及右下角出现调整大小控制点，如图3.7所示。如果未出现调整大小控制点，则单击要调整大小的元素以外的部分然后重新选择它，或在标签选择器中单击相应的标签以选择该元素。 图3.7图像的调整大小控制点 （2）执行下列操作之一，调整元素的大小： 若要调整元素的宽度，拖动右侧的选择控制点。 若要调整元素的高度，拖动底部的选择控制点。 若要同时调整元素的宽度和高度，拖动顶角的选择控制点。 若要在调整元素尺寸时保持元素的比例（宽高比），在按住 Shift 键的同时拖动顶角的选择控制点。 在可视方式下用户最小可以将元素大小调整到 8 x 8 像素。若要将元素的宽度和高度调整到更小的大小（例如 1 x 1 像素），在“属性”面板如图3.8所示的红色方框区域中输入数值。 图3.8 通过“属性”面板调整大小 （3）将调整过大小的图像回复到其原始大小，执行以下操作之一： 单击图像“属性”面板中的“重设大小”按钮。 在“属性”面板中删除“宽”和“高”文本框中的值。 （4）重新取样图像，通过重新取样操作可以实现将用户对图像的尺寸的调整写入图像文件，保存调整结果。对已调整大小的图像重新取样，单击图像“属性”面板中的“重新取样”按钮。 第1章 网页设计与制作概述

11 第3章 图像及其他媒体 3.1 插入图像 3.1.3 设置网页图像的属性
2（1）在“文档”窗口中选择该元素（例如，一个图像或 SWF 文件），选定元素后，元素的底部、右侧及右下角出现调整大小控制点，如图3.7所示。如果未出现调整大小控制点，则单击要调整大小的元素以外的部分然后重新选择它，或在标签选择器中单击相应的标签以选择该元素。 图3.7图像的调整大小控制点 （2）执行下列操作之一，调整元素的大小： 若要调整元素的宽度，拖动右侧的选择控制点。 若要调整元素的高度，拖动底部的选择控制点。 若要同时调整元素的宽度和高度，拖动顶角的选择控制点。 若要在调整元素尺寸时保持元素的比例（宽高比），在按住 Shift 键的同时拖动顶角的选择控制点。 在可视方式下用户最小可以将元素大小调整到 8 x 8 像素。若要将元素的宽度和高度调整到更小的大小（例如 1 x 1 像素），在“属性”面板如图3.8所示的红色方框区域中输入数值。 图3.8 通过“属性”面板调整大小 （3）将调整过大小的图像回复到其原始大小，执行以下操作之一： 单击图像“属性”面板中的“重设大小”按钮。 在“属性”面板中删除“宽”和“高”文本框中的值。 （4）重新取样图像，通过重新取样操作可以实现将用户对图像的尺寸的调整写入图像文件，保存调整结果。对已调整大小的图像重新取样，单击图像“属性”面板中的“重新取样”按钮。 第1章 网页设计与制作概述

12 第3章 图像及其他媒体 3.1 插入图像 3.1.3 设置网页图像的属性 4.裁剪图像
Dreamweaver 8 支持裁剪（或修剪）位图文件图像。若需要裁剪图像文件，执行以下操作： （1）打开包含要裁剪的图像的页面，选择图像，并执行下列操作之一： 单击图像属性面板中的“裁减工具图标。 选择“修改”→“图像”→“裁剪”。 （2）将显示如图3.9所示的“永久更改”对话框，提示正在裁剪的图像文件将在磁盘上更改，单击“确定”按钮，所选图像周围会出现如图3.10所示的裁剪控制点。 （3）调整裁剪控制点直到边界框包含的图像区域符合所需大小。 （4）在边界框内部双击或按 Enter 键裁剪所选区域，所选位图的边界框外的所有像素都将被删除，但将保留图像中的其它对象。 （5）若要撤消裁剪命令的效果，执行以下操作： 选择“编辑”→“撤消裁剪”回复原始图像；在退出 Dreamweaver 8 或在外部图像编辑应用程序中编辑该文件之前，可以撤消“裁剪”命令的效果（并回复到原始图像文件）。 第1章 网页设计与制作概述

13 第3章 图像及其他媒体 3.1 插入图像 3.1.3 设置网页图像的属性 5.调整图像的亮度和对比度
调整“亮度/对比度”操作将影响图像的高亮显示、阴影和中间色调，主要用于修正过暗或过亮的图像。 若要调整图像的亮度和对比度，执行以下操作： （1）打开包含要调整的图像的页面，选择图像。 （2）拖动亮度和对比度滑动块调整设置，设置值的范围从 -100 到 100。 （3）单击“确定”按钮后图像的亮度更改将保存在文件中。 第1章 网页设计与制作概述

14 第3章 图像及其他媒体 3.1 插入图像 3.1.3 设置网页图像的属性 6.锐化图像
锐化是通过增加图像中对象边缘的像素的对比度，从而增加图像清晰度或锐度。若要锐化图像，执行以下操作： （1）打开包含要锐化的图像的页面，选择图像，并执行下列操作之一： 单击图像属性面板中的“锐化”按钮。 选择“修改”→“图像”→“锐化”，显示图3.12所示的“锐化”对话框。 图3.12“锐化”对话框 （2）可以通过拖动滑块控件或在文本框中输入一个 0 到 10 之间的值，来指定 Dreamweaver 8应用于图像的锐化程度，同时可以预览对该图像所做的更改。 （3）单击“确定”按钮，图像的锐化更改将保存在文件中。 （4）若要撤消“锐化”命令的效果，可以选择“编辑”→“撤消锐化”。 撤消锐化只能在保存包含图像的页面之前撤消“锐化”命令的效果（并回复到原始图像文件），页面一旦保存，对图像所做更改即永久保存。 第1章 网页设计与制作概述

15 第3章 图像及其他媒体 3.1 插入图像 3.1.4图像占位符 图像占位符是在准备好将最终图像添加到 Web 页面之前使用的占位图形。通过插入指定大小的图像占位符可以在页面中预留图像的位置，从而实现预览页面基本效果。 若要插入图像占位符，执行以下操作： （1）在“文档”窗口中，将插入点放置在要插入占位符图形的位置。 （2）执行下列操作之一： 在“常用”插入栏中，单击“图像占位符”图标，如图3.13所示。 选择“插入”→“图像占位符”， “图像占位符”对话框。 （3）在该对话框中，可以为图像占位符添加相应的标签名称、宽度、高度、颜色以及替换文本等属性。 （4）单击“确定”按钮。 文档中就会出现图像占位符，同时占位符上会显示占位符的颜色、大小和标签属性的值。 第1章 网页设计与制作概述

16 第3章 图像及其他媒体 3.1 插入图像 3.1.5设置网页背景图像
在Dreamweaver 8中可以将图片设置为页面背景。若要添加页面背景图像，执行以下操作： （1）打开“页面属性”对话框 按照2.3.2所述的方法进入页面属性设置对话框（“修改”→“页面属性”），在“外观”设置中有“背景图像”一栏，如图3.16中所示。 （2）选择图像源文件 通过以下的方法之一实现选择背景图像的源文件。 直接在“背景图像”文本框中输入图像文件的名称及完整路径。 单击“背景图像”的“浏览”按钮，弹出如图3.17所示的“选择图像源文件”对话框。在该对话框中选择相应的图像源文件后单击“确定”按钮。 （3）设置网页背景图像的重复方式 通过选择在图3.16的“重复”一项，可以实现设置背景图像在网页上的平铺方式，对于网页的背景图片有“不重复”、“重复”、“横向重复”、“纵向重复”四个选项，可以根据需要进行选择。 第1章 网页设计与制作概述

17 第3章 图像及其他媒体 3.1 插入图像 在Dreamweaver 8中，用户可以在页面中插入鼠标经过图像。鼠标经过图像在浏览器中浏览时，当鼠标经过这种图像时，图像会发生变化。鼠标经过图像实际上由两个图像组成，原始图像(当首次载入页时显示的图像)和鼠标经过图像(当鼠标指针移到原始图像时显示的图像)。通常情况下这两张图像要求大小一致，如果不一致，Dreamweaver 8会自动调整鼠标经过图像的大小使其与原始图像一致。 若要添加鼠标经过图像，执行以下操作： （1）确定图像的位置 若要创建鼠标经过图像，在文档窗口中，将插入点放置在要显示鼠标经过图像的位置。 （2）插入鼠标经过图像 选择主菜单“插入”→“图像对象”→“鼠标经过图像”，弹出“插入鼠标经过图像”对话框，如图3.18所示。 （3）输入参数 在“插入鼠标经过图像”对话框中分别输入“原始图像”和“鼠标经过图像”两个图像文件的路径以及相关参数后，单击“确定”按钮，即完成鼠标经过图像的创建。 第1章 网页设计与制作概述

18 第3章 图像及其他媒体 3.2 插入声音 3.2.1常见的音频文件格式
通过在网页中加入声音可以增强页面信息的感染力，烘托页面的氛围，网页中常见的音频格式有wav、midi、ra 和 mp3等。 .midi 或 .mid （乐器数字接口）格式用于器乐，MIDI 文件不能被录制并且必须使用特殊的硬件和软件在计算机上合成，很小的 MIDI文件就可以提供较长时间的声音剪辑。许多浏览器都支持 MIDI 文件，并且不需要插件。尽管 MIDI 文件的声音品质非常好，但也可能因访问者的声卡而异。 .wav（Waveform 扩展名）格式文件具有较好的声音品质，许多浏览器都支持此类格式文件并且不要求插件，可以从 CD、磁带、麦克风等录制自己的 WAV 文件。但是，其较大的文件大小严格限制了可以在Web 页面上使用的声音剪辑的长度。 .mp3 （运动图像专家组音频，即 MPEG-音频层-3）格式是一种压缩格式，它可令声音文件明显缩小。其声音品质非常好，如果正确录制和压缩 MP3 文件，其质量甚至可以和 CD 质量相媲美。MP3 技术可以对文件进行“流式处理”，以便访问者不必等待整个文件下载完成即可收听该文件。但是，其文件大小要大于 Real Audio 文件，因此通过典型的拨号（电话线）调制解调器连接下载整首歌曲可能仍要花较长的时间。若要播放 MP3 文件，访问者必须下载并安装辅助应用程序或插件，例如 QuickTime、Windows Media Player 或RealPlayer。 .ra、.ram、.rpm 或 Real Audio 格式具有非常高的压缩程度，文件大小要小于 MP3。全部歌曲文件可以在合理的时间范围内下载。因为可以在普通的 Web 服务器上对这些文件进行“流式处理” ，所以访问者在文件完全下载完之前就可听到声音。访问者必须下载并安装RealPlayer 辅助应用程序或插件才可以播放这些文件。 qt、.qtm、.mov 和 QuickTime 是由 Apple Computer 开发的音频和视频格式。AppleMacintosh 操作系统中包含了 QuickTime，并且大多数使用音频、视频或动画的Macintosh 应用程序都使用 QuickTime。PC 也可播放 QuickTime 格式的文件，但是要求特殊的 QuickTime 驱动程序。QuickTime 支持大多数编码格式，如 Cinepak、JPEG和 MPEG。 第1章 网页设计与制作概述

19 第3章 图像及其他媒体 3.2 插入声音 3.2.2声音的插入 1.链接到音频文件
链接到音频文件是将声音添加到 Web 页面的一种简单而有效的方法，这种集成声音文件的方法可以使访问者能够选择他们是否要收听该文件，并且使文件可用于最广范围的观众。 若要创建指向某一音频文件的链接，执行以下操作： （1）选择要用作指向音频文件的链接的文本或图像。 （2）在属性面板中，单击文件夹图标浏览音频文件，或者在“链接”文本框中键入文件的路径和名称，如图3.20所示。 第1章 网页设计与制作概述

20 第3章 图像及其他媒体 3.2 插入声音 3.2.2声音的插入 2.嵌入声音文件
嵌入音频将声音直接并入页面中，但只有在访问站点的访问者具有所选声音文件的适当插件后，声音才可以播放。如果希望将声音用作背景音乐，或希望控制音量、播放器在页面上的外观或者声音文件的开始点和结束点，可以采用嵌入文件的方式添加声音。 若要嵌入音频文件，执行以下操作： （1）在“设计”视图中，将插入点放置在要嵌入文件的地方，然后执行以下操作之一： 在“插入”栏的“常用”类别中，单击“媒体”按钮，然后选择“插件”图标，如图3.21所示。 选择“插入”→“媒体”→“插件”。 （2）然后Dreamweaver 8会弹出选择文件对话框选择相应的音频文件后单击“确定”按钮。 （3）在“属性”面板中，单击文件夹图标以浏览音频文件，或者在“链接”文本框中键入文件的路径和名称可以对添加的音频文件进行调整。 （4）在“属性”面板中的文本框中输入宽度和高度或者通过在“文档”窗口中调整插件占位符的大小，能够确定音频控件在浏览器中以多大的大小显示。 第1章 网页设计与制作概述

21 第3章 图像及其他媒体 3.3 插入动画和视频 3.3.1 插入Flash动画
除了可以在网页中声音和图像以外，还可以添加动画和视频来增强网页的表现力，丰富文档的显示效果，可以在网页添加的多媒体内容有Flash动画、Shockwave影片和视频等。 3.3.1 插入Flash动画 1.Flash文件类型 （1）Flash 文件 Flash 文件扩展名为fla，是所有项目的源文件，在 Flash 程序中创建。此类型的文件只能在 Flash 中打开（而不是在 Dreamweaver 8 或浏览器中打开）。可以在 Flash 中打开 Flash 文件，然后将它导出为 SWF 或 SWT 文件以在浏览器中使用。 （2）Flash SWF 文件 Flash SWF 文件扩展名为swf，是 Flash (.fla) 文件的压缩版本，已进行了优化以便于在 Web 上查看。此文件可以在浏览器中播放并且可以在 Dreamweaver 8 中进行预览，但不能在 Flash 中编辑此文件。 （3）Flash 模板文件 Flash 模板文件扩展名为swt，使用户能够修改和替换 Flash SWF 文件中的信息。这些文件用于 Flash按钮对象中，能够用自己的文本或链接修改模板，以便创建要插入文档中的自定义 SWF。在 Dreamweaver 8 中，可以在 Dreamweaver/Configuration/Flash Objects/Flash Buttons 和 Flash Text 文件夹中找到这些模板文件。 （4）Flash 元素文件 Flash 元素文件扩展名为swc，是一个 Flash SWF 文件，通过将此类文件合并到 Web 页，可以创建丰富的 Internet 应用程序。Flash 元素有可自定义的参数，通过修改这些参数可以执行不同的应用程序功能。 （5）Flash 视频文件格式 Flash 视频文件格式flv，是一种视频文件，它包含经过编码的音频和视频数据，用于通过Flash Player 传送。 第1章 网页设计与制作概述

22 第3章 图像及其他媒体 3.3 插入动画和视频 （2. Flash SWF 文件的插入
（1）设置插入点。 在文档中单击实现将插入点置于欲插入动画的位置。 （2）通过下述的两种方法之一，执行Flash插入命令： 通过菜单操作，选择主菜单“插入” →“媒体” →“Flash”命令。 在“插入”栏的“常用”类别中选择Flash按钮，如图3.23所示。 图3.23插入Flash （3）添加文件位置设置辅助属性完成文件插入。 执行完第2步后，Dreamweaver 8弹出“选择文件”对话框，在对话框中选择Flash动画文件后，紧接着将弹出如图3.24所示的“对象标签辅助功能属性”对话框，在对话框的“标题”文本框中输入媒体对象的标题，单击“确定”按钮，该动画即插入到文档中，插入的Flash动画以一个带有字母F的灰色框来表示。 第1章 网页设计与制作概述

23 第3章 图像及其他媒体 3.3 插入动画和视频 3. Flash SWF动画的编辑
第1章 网页设计与制作概述

24 第3章 图像及其他媒体 3.3 插入动画和视频 4.Flash按钮的插入
通过向页面中插入Flash按钮对象可以实现在Dreamweaver 8中直接插入Flash动画格式的按钮。若要实现在页面中插入Flash按钮首先需保证当前网页已经保存过，网页中可以通过以下步骤实现Flash按钮的插入。 （1）设置插入点 在文档中单击实现将插入点置于欲插入Flash按钮的位置。 （2）执行插入Flash按钮命令 用户可以通过以下两种方法之一实现执行插入Flash按钮命令。 选择主菜单的“插入”→“媒体”→“Flash按钮”命令 在“插入”栏的“常用”类别中选择“Flash按钮”按钮 。 （3）设置Flash按钮 用户选择插入Flash按钮命令后，会出现“插入Flash按钮”对话框 （4）设置辅助参数 （5）Flash按钮的编辑 第1章 网页设计与制作概述

25 第3章 图像及其他媒体 3.3 插入动画和视频 5. 插入Flash视频 FLV流媒体格式是一种全新的视频格式，全称是Flash video。它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上使用等缺点。可以通过以下步骤实现Flash视频的插入。 （1）设置插入点 在文档中单击实现将插入点置于欲插入Flash按钮的位置。 （2）执行插入Flash视频命令 用户可以通过以下两种方法之一实现执行插入Flash视频命令。 选择主菜单的“插入”→“媒体”→“Flash 视频”命令。 在“插入”栏的“常用”类别中选择“Flash Video”按钮 （3）设置Flash视频参数 （4）编辑Flash视频属性 第1章 网页设计与制作概述

26 第3章 图像及其他媒体 3.3 插入动画和视频 3.3.2 插入视频 在Dreamweaver 8中，除了可以在页面上加入Flash格式的动画以及视频之外，还可以通过不同方式将不同格式的视频(AVI、MPEG、WMA等)添加到Web页面。在用户浏览页面时，视频可以下载给用户，或者可以对视频进行流式处理以实现边下载边播放。在页面中插入视频的方法有多种，下面着重介绍两种。 第1章 网页设计与制作概述

27 第3章 图像及其他媒体 3.3.2 插入视频 1.利用ActiveX控件插入视频 （1）设置插入点
3.3 插入动画和视频 3.3.2 插入视频 1.利用ActiveX控件插入视频 （1）设置插入点 在文档中单击实现将插入点置于欲插入ActiveX控件的位置。 （2）执行插入ActiveX控件命令 用户可以通过以下两种方法之一实现执行插入ActiveX控件命令。 选择主菜单的“插入”→“媒体”→“ ActiveX”命令 在“插入”栏的“常用”类别中选择“ActiveX”按钮。 弹出“对象标签辅助功能属性”对话框，在对话框的“标题”文本框中输入对象的标题，单击“确定”，就会在文档中插入一个ActiveX图标。 （3）编辑ActiveX控件 选中该图标，在属性面板中，设置宽高尺寸，选中“嵌入”复选框，启用“源文件”，然后单击后面的“浏览”按钮选择视频文件。然后单击该面板中的“参数”按钮，打开“参数”对话框，可以在其中为该ActiveX对象设置一些参数。 第1章 网页设计与制作概述

28 第3章 图像及其他媒体 3.3.2 插入视频 1.利用ActiveX控件插入视频 （1）设置插入点
3.3 插入动画和视频 3.3.2 插入视频 1.利用ActiveX控件插入视频 （1）设置插入点 在文档中单击实现将插入点置于欲插入ActiveX控件的位置。 （2）执行插入ActiveX控件命令 用户可以通过以下两种方法之一实现执行插入ActiveX控件命令。 选择主菜单的“插入”→“媒体”→“ ActiveX”命令 在“插入”栏的“常用”类别中选择“ActiveX”按钮。 弹出“对象标签辅助功能属性”对话框，在对话框的“标题”文本框中输入对象的标题，单击“确定”，就会在文档中插入一个ActiveX图标。 （3）编辑ActiveX控件 选中该图标，在属性面板中，设置宽高尺寸，选中“嵌入”复选框，启用“源文件”，然后单击后面的“浏览”按钮选择视频文件。然后单击该面板中的“参数”按钮，打开“参数”对话框，可以在其中为该ActiveX对象设置一些参数。 第1章 网页设计与制作概述

29 第3章 图像及其他媒体 3.3.2 插入视频 2.在代码中插入视频
3.3 插入动画和视频 3.3.2 插入视频 2.在代码中插入视频 除了上述的插入ActiveX控件的方法外，用户也可以用<embed>标签手工在代码中插入视频。<embed>标签通常用于对Windows Media Player支持的格式文件进行播放。 具体的格式如下： <embed src=文件地址 width=播放器宽度 height=播放器高度></embed> 插入完成后在设计视图中会出现插件图标如图3.43所示，在浏览器中运行的效果如图3.44所示。写入<embed>代码后，用户可以在设计视图中选择此插件，然后就可以在属性面板中修改其宽高等属性。 第1章 网页设计与制作概述

30 第3章 图像及其他媒体 3.4 其他多媒体元素的插入 3.4.1 插入FlashPaper
FlashPaper是Macromedia推出的一款电子文档类工具，通过该程序可以将文档进行简单的设置转换为SWF格式的Flash动画，原文档的排版样式和字体显示不会受到影响，通过这种方法使用户只需通过浏览器就可以观看文档内容，同时还可以进行放大、缩小、打印、翻页等操作，而不用安装相应的文档浏览程序，有利于文档的传播。 可以通过以下步骤实现插入FlashPaper。 （1）设置插入点 在文档中单击实现将插入点置于欲插入FlashPaper的位置。 （2）执行插入FlashPaper命令 用户可以通过以下两种方法之一实现执行插入FlashPaper命令。 选择主菜单的“插入”→“媒体”→“FlashPaper”命令 在“插入”栏的“常用”类别中选择“FlashPaper”按钮，如图3.45所示。 第1章 网页设计与制作概述

31 第3章 图像及其他媒体 3.4 其他多媒体元素的插入 3.4.1 插入FlashPaper （3）设置FlashPaper参数
在完成FlashPaper的插入命令后，会出现如图3.46所示的“插入FlashPaper”对话框。在对话框中，浏览到一个FlashPaper文档并将其选定。如果需要，通过输入宽度和高度(以像素为单位)指定FlashPaper对象在Web页上的尺寸。FlashPaper将缩放文档以适合宽度。单击“确定”在页面中插入文档。 （4）编辑FlashPaper FlashPaper文档本身就是Flash对象，因此页面上将出现一个Flash占位符。若要预览FlashPaper文档，可以单击该占位符，然后单击属性面板中的“播放”按钮。单击“停止”可以结束预览。也可以在浏览器中预览该文档。FlashPaper工具栏在浏览器中具有全部功能，如果需要，在属性面板中可以设置其他属性，具体操作同编辑Flash文件。 第1章 网页设计与制作概述

32 Thanks！ 第1章 网页设计与制作概述