第4章网页插入 文字、图像及多媒体

1、 第第4章输入和编辑网页中的基本元素章输入和编辑网页中的基本元素4.1 网页中文本的操作4.2 网页图像的运用4.3 网页多媒体的运用4.1网页中文本的操作网页中文本的操作本节课堂目标：本节课堂目标：熟练掌握网页文本的操作方法和技巧熟练掌握网页文本的操作方法和技巧本节教学内容：本节教学内容：1：文本对象的插入和格式设置（重点）：文本对象的插入和格式设置（重点）2：设置文本标题（难点）：设置文本标题（难点） 3：段落的设置效果：段落的设置效果 （难点）（难点） 4：项目符号和编号的插入使用：项目符号和编号的插入使用5：历史记录面板的使用：历史记录面板的使用思考题：根据以前所学知识说出文本的编辑和

2、设置属性思考题：根据以前所学知识说出文本的编辑和设置属性各包括几个方面？各包括几个方面？文本插入栏的按钮和属性面板的功按钮相似。文本插入栏的按钮和属性面板的功按钮相似。4. 认识文本按钮及属性面板认识文本按钮及属性面板4. 插入文本和对象插入文本和对象.文本是网页中最基础的载体；纯文本网页占用的存储空文本是网页中最基础的载体；纯文本网页占用的存储空间小，占用的网络带宽较少，打开速度快。间小，占用的网络带宽较少，打开速度快。 将将文本（英文、中文、数字）文本（英文、中文、数字）添加到文档中的方法有以下添加到文档中的方法有以下三种：三种：直接输入、粘贴剪贴板中的文字、导入直接输入、粘贴剪贴板中的文

3、字、导入word格式格式的文档的文档。 复制复制/粘贴，粘贴，巧妙使用巧妙使用“选择性粘贴选择性粘贴”命令。命令。 导入其他格式的文本（需要清理导入其他格式的文本（需要清理word生成的无关生成的无关html代码）代码）文件导入文件导入wordexcel 文档文档 也可拖动文件放入网页的适当位置，将文档链接到网页中（链接文本是链接文件的名也可拖动文件放入网页的适当位置，将文档链接到网页中（链接文本是链接文件的名称）。称）。.插入特殊字符：在插入特殊字符：在html中它被称作实体，中它被称作实体，以名称或数字的形式出现。以名称或数字的形式出现。特殊字符如右特殊字符如右所示。所示。 操作方法分别是

4、：操作方法分别是： 菜单法：插入菜单法：插入html特殊字符特殊字符 插入栏按钮法：插入文本字符按钮插入栏按钮法：插入文本字符按钮默认情况下默认情况下Html中只允许字符之间包含一中只允许字符之间包含一个空格，输入连续的多个空格的方法：个空格，输入连续的多个空格的方法：设置设置首选参数首选参数改变默认设置改变默认设置在输入法为在输入法为全角全角状态下输入多个空格状态下输入多个空格.水平线（垂直线）水平线（垂直线） 插入水平线以可视方式分割文本和对象来组织信息。插入水平线以可视方式分割文本和对象来组织信息。插入插入html水平线水平线 可在属性检查器中修改水平线（宽、高等）可在属性检查器中修改水

5、平线（宽、高等）.插入日期：插入日期：菜单法；菜单法；插入栏按钮法插入栏按钮法 5.对插入的文本也可以执行删除、搜索、替换、检查拼对插入的文本也可以执行删除、搜索、替换、检查拼写（文本检查拼写写（文本检查拼写shift+f7）等操作。）等操作。4. 设置文本格式设置文本格式 字符的样式指的是字符的外观显示方式。利用字符的样式指的是字符的外观显示方式。利用Dw可以设置多种字符样式，如字体、加粗可以设置多种字符样式，如字体、加粗 、倾斜、倾斜 、 下划线下划线 、 删除线删除线 、 打字型打字型 、 强调等强调等 。默认时默认时 Dreamweaver使用使用css设置文本的格式设置文本的格式,当

6、当使用命令来设置格式和对齐文本使用命令来设置格式和对齐文本 时，时， css规则将嵌规则将嵌入到当前文档中；入到当前文档中；也可以使用标签来对齐文本（也可以使用标签来对齐文本（div标签）和设置文标签）和设置文本格式（本格式（font标签等），但要在首选参数中进行设置。标签等），但要在首选参数中进行设置。4. 设置文本标题设置文本标题文本标题来强调段落要表现的内容。在文本标题来强调段落要表现的内容。在HTML中，定义了中，定义了6级标题，从级标题，从1到到6级，每级标题的字体大小依次递减。一段级，每级标题的字体大小依次递减。一段文字只能设置一个标题级别。文字只能设置一个标题级别。在在HTML中

7、，采用如下的标记来定义标题：中，采用如下的标记来定义标题：和和 定义标题定义标题1和和 定义标题定义标题2和和 定义标题定义标题3每级标题的字符大小并没有一个实际上的固定的值，它每级标题的字符大小并没有一个实际上的固定的值，它是由浏览器所决定的，为标题定义的级别只决定了标题之是由浏览器所决定的，为标题定义的级别只决定了标题之间的相互大小。间的相互大小。 4. 设置段落效果设置段落效果 1.设置段落格式的方法设置段落格式的方法使用使用【属性】面板的【格式】弹出式菜单【属性】面板的【格式】弹出式菜单 选择【文本】选择【文本】|【段落格式】菜单【段落格式】菜单2.缩进段落缩进段落所谓缩进，主要是相对

8、于文档窗口（或浏览器窗口）左端所谓缩进，主要是相对于文档窗口（或浏览器窗口）左端而言的。而言的。 属性检查器：属性检查器：“缩进缩进”、“凸出凸出”按钮按钮文本菜单：文本菜单：“缩进缩进”、“凸出凸出”命令命令.对齐段落对齐段落 段落的对齐方式，指的是段落相对文档窗口（或浏览器窗段落的对齐方式，指的是段落相对文档窗口（或浏览器窗口）在水平位置的对齐方式。有四种对齐方式：左对齐、口）在水平位置的对齐方式。有四种对齐方式：左对齐、居中对齐、右对齐、两端对齐。居中对齐、右对齐、两端对齐。关于文本对齐，源代码设置为：关于文本对齐，源代码设置为： .添加段间距：通过添加换行符在段间添加空行添加段间距：通

9、过添加换行符在段间添加空行 添加段落换行符：按添加段落换行符：按enter键键添加换行符：按添加换行符：按shift+enter键添加特殊字符键添加特殊字符/换行符换行符 换行与分段的区别：换行与分段的区别：文本换行时，按文本换行时，按Enter键换行的行距较键换行的行距较大大（在代码区生成（在代码区生成标签），按标签），按EnterShift键换键换行的行间距较小行的行间距较小（在代码区生成（在代码区生成标签）。标签）。4.创建项目列表创建项目列表. 在在HTML中，从总体上分有两种类型的项目列表，一种是无中，从总体上分有两种类型的项目列表，一种是无序项目列表（使用项目符号来标记项目，产生序

10、项目列表（使用项目符号来标记项目，产生ul标签标签） ，另，另一种是有序项目列表（使用编号来标记项目顺序，产生一种是有序项目列表（使用编号来标记项目顺序，产生ol标标签签）。）。.在在Dreamweaver 中，一旦插好一个，下一个列表只需按中，一旦插好一个，下一个列表只需按enter键即可；列表可以嵌套。键即可；列表可以嵌套。. 创建项目列表的步骤：创建项目列表的步骤：选中要转换为项目列表的所有段落。选中要转换为项目列表的所有段落。单击单击“属性属性”面板上的面板上的“项目列表项目列表”按钮或按钮或“编号列表编号列表”按钮；按钮；也可以单击也可以单击“文本文本”“列表列表”菜单项，菜单项，选

11、择相应的选择相应的“无序列无序列表表” 、“有序列表有序列表”菜单项。菜单项。 这时被选中的段落文字就被转换为项目列表的形式。这时被选中的段落文字就被转换为项目列表的形式。本节习题和作业本节习题和作业1. 填空题填空题（1）使用属性检查器或【文本】菜单中的选项可以设置或）使用属性检查器或【文本】菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体、字形（如粗更改所选文本的字体特性。可以设置字体、字形（如粗体或斜体）体或斜体） _ 、和、和_。（2）若要插入更多的特殊字符，请选择）若要插入更多的特殊字符，请选择_ | _ | _或在或在_栏中选择栏中选择_图标，选择一个字符，图标，选择一个

12、字符，然后单击【确定】。然后单击【确定】。2 . 选择题（多选）选择题（多选）（1）设置文本属性可以通过）设置文本属性可以通过_来设置。来设置。 A属性面板属性面板B控制面板控制面板 C启动面板启动面板D文本菜单文本菜单（2）在网页中连续输入空格的方法是）在网页中连续输入空格的方法是_。 A连续按空格键连续按空格键 B按下按下Ctrl键再连续按空格键键再连续按空格键 C转换到中文的全角状态下连续按空格键转换到中文的全角状态下连续按空格键 D按下按下Shift键再连续按空格键键再连续按空格键3.简答题：简答题：（1）下图所示情况何时出现？）下图所示情况何时出现？(2)如何将已经加入了粗、斜体的文

13、字改为正常字体？如何将已经加入了粗、斜体的文字改为正常字体？ (3)如何使日期保持在页面右下角？如何使日期保持在页面右下角？(4)如何使编号呈下图所示的样式？（属性面板如何使编号呈下图所示的样式？（属性面板列列表项目按钮）表项目按钮）4.操作题操作题（1）将页面中添加如下图所示的表格（暂将页面中添加如下图所示的表格（暂时可以通过导入时可以通过导入word文档的方法实现）文档的方法实现）（2.）制作如下的文字页面）制作如下的文字页面本节内容和目标：本节内容和目标： 了解了解GIF、PNG和和JPEG三种图像格式三种图像格式 的异同点和的异同点和使用环境。使用环境。(重点、难点重点、难点) 掌握在

14、掌握在Dreamweaver 中使用图像的一些基本方法中使用图像的一些基本方法和技巧（重点）和技巧（重点） 掌握编辑和设置图像的方法掌握编辑和设置图像的方法 掌握创建图像映射和电子相册的方法掌握创建图像映射和电子相册的方法 4.网页图像的运用网页图像的运用4.网页中图像格式简介网页中图像格式简介图像在网页中通常起到画龙点睛的作用，它能装饰网页，表图像在网页中通常起到画龙点睛的作用，它能装饰网页，表达个人的情趣和风格，恰到好处地使用图像能使网页更加地达个人的情趣和风格，恰到好处地使用图像能使网页更加地生动、形象和美观生动、形象和美观 。图像比文本更能直观地表达信息。图像比文本更能直观地表达信息。

15、 网页中图像格式有：网页中图像格式有： GIF 、JPEG 、PNG 、TIFF、BMP等，等，而最常用图像格式有：而最常用图像格式有：GIF 、JPEG 、PNG 图1 JPEG 图2 GIF 图3 PNG 1GIF（Graphics Interchange Format）格式）格式 (图形交图形交换格式换格式)：使用最早、应用最广泛。：使用最早、应用最广泛。a.无损压缩、跨平台兼容；无损压缩、跨平台兼容； b .占用磁盘空间小、支持动画，交织下载、支持透明背景占用磁盘空间小、支持动画，交织下载、支持透明背景图像。图像。c.支持支持8位位(256色）图像，能够很好地表现不连续色调和大色）图像

16、，能够很好地表现不连续色调和大面积色彩统一的图像，如：导航条、按钮、图标、广告面积色彩统一的图像，如：导航条、按钮、图标、广告条（条（banner）、徽标等对色彩要求不高的图像格式。）、徽标等对色彩要求不高的图像格式。2. JPEG：Joint Photographic Expert Group（联合图（联合图像专家组）像专家组） 格式：目前最受欢迎。格式：目前最受欢迎。 a.采用特殊的压缩算法，在失真较小的前提下，对图片采用特殊的压缩算法，在失真较小的前提下，对图片进行有损压缩；进行有损压缩； b .用来表现较为专业的或有连续色调的图像可包含用来表现较为专业的或有连续色调的图像可包含数百万种

17、色彩数百万种色彩. 分辨率较高，可用于处理照片。分辨率较高，可用于处理照片。c. JPEG格式不支持透明色，也没有动画的概念格式不支持透明色，也没有动画的概念;采用采用JPEG格式对图像进行压缩后，不能再重新打开图像。格式对图像进行压缩后，不能再重新打开图像。3.PNG：Portable Network Graphic(便携或可移植网络图形便携或可移植网络图形格式，开发于格式，开发于1995年年)：使用量逐渐增多。：使用量逐渐增多。 a .a .采用与采用与GIFGIF图像格式类似的压缩算法，能真实地显示原始图像格式类似的压缩算法，能真实地显示原始图像，支持透明背景，可控制压缩比，文件小图像，

18、支持透明背景，可控制压缩比，文件小, ,灵活性强灵活性强, ,完全可替代完全可替代GIFGIF格式格式, ,是是fireworksfireworks软件自身的文件格式，其软件自身的文件格式，其扩展名为扩展名为.png, .png, 只有带扩展名只有带扩展名dwdw才能识别才能识别. . b .b .支持真彩色，与支持真彩色，与JPEGJPEG格式没有太大的差别，目前在网络格式没有太大的差别，目前在网络上得到大力推广。上得到大力推广。 c .c .但只有但只有Microsoft IE (4.0Microsoft IE (4.0及以上版本及以上版本) )和和Netscape Netscape Na

19、vigator(4.04Navigator(4.04及以上版本及以上版本) )才支持，才支持， GIFGIF和和JPEGJPEG不受浏览不受浏览器限制，应用较广泛。器限制，应用较广泛。 d.d.PngPng支持监视器的伽码设置修正，可跨平台兼容。支持监视器的伽码设置修正，可跨平台兼容。总结：总结： 当只需要静态图像且色彩要求也不高时：当所选用图像较当只需要静态图像且色彩要求也不高时：当所选用图像较小时用小时用gif格式文件小；而当所选用图像大时用格式文件小；而当所选用图像大时用jpg格式文格式文件小。此时件小。此时png格式不具备优势。格式不具备优势。 GIFGIF、JPEG JPEG 、PN

20、GPNG这几种格式都是标准的位图格式这几种格式都是标准的位图格式. .所谓所谓位位图格式图格式就是指用图片上每一点的信息来描述图像；而就是指用图片上每一点的信息来描述图像；而矢量矢量格式格式则是用线条和填充色等数学信息来描述图像。矢量格则是用线条和填充色等数学信息来描述图像。矢量格式的文件要比位图格式的文件小得多，可表现一般的静态式的文件要比位图格式的文件小得多，可表现一般的静态画面也可以表现动画画面也可以表现动画. .在在Web页上显示图片之前，通常需要考虑下列三个问题：页上显示图片之前，通常需要考虑下列三个问题： 确保文件较小确保文件较小:采用正确的格式进行优化处理采用正确的格式进行优化处

21、理 ,使图像具使图像具有所需的像素大小有所需的像素大小 控制图像的数量和质量；控制图像的数量和质量； 合理使用动画。合理使用动画。 4.在网页中使用图像在网页中使用图像 1插入图像：为了保证参数的正确，图象文件必须保存插入图像：为了保证参数的正确，图象文件必须保存在当前站点的在当前站点的images文件夹中，否则文件夹中，否则dw提示将其复制提示将其复制到当前站点目录下。插入后产生到当前站点目录下。插入后产生img标签。标签。 具体操作步骤：具体操作步骤：单击插入单击插入-图像命令图像命令/常用插栏的插入图常用插栏的插入图像按钮像按钮 。2.插入图像占位符：暂时为图片占个位置，在浏览器中不插入

22、图像占位符：暂时为图片占个位置，在浏览器中不显示，在发布网站之前需用具体图象替换它，在属性检显示，在发布网站之前需用具体图象替换它，在属性检查器中（源文件）完成替换更新。一旦插入在查器中（源文件）完成替换更新。一旦插入在html代码代码中自动产生一个包含属性的图象标签中自动产生一个包含属性的图象标签src和替换文本标和替换文本标签（签（alt）。）。 src表示要插入图像的文件名，必须包含绝对路径或相对路表示要插入图像的文件名，必须包含绝对路径或相对路径，图像可以是径，图像可以是GIF文件、文件、JPEG文件或文件或PNG文件。文件。alt表示表示图像的简单文本说明，用于不能显示图像的浏览器或

23、浏览图像的简单文本说明，用于不能显示图像的浏览器或浏览器能显示图像但显示时间过长时先显示，以帮助访问者了器能显示图像但显示时间过长时先显示，以帮助访问者了解图像的信息。解图像的信息。 具体操作步骤具体操作步骤 ：单击单击“插入插入-图像对象图像对象图像占位符图像占位符”命令命令/常用插栏的插入图像常用插栏的插入图像图像占位符图像占位符 按钮。按钮。在名称框中给占位符取名的命名规则：字母开头，只能包在名称框中给占位符取名的命名规则：字母开头，只能包含字母和数字，不能使用空格和含字母和数字，不能使用空格和ASCII字符。字符。 3.创建鼠标经过图象（轮换图像）创建鼠标经过图象（轮换图像）：只能在浏

24、览器中查看：只能在浏览器中查看（在文档窗口中不能查看效果）并使用鼠标指针移过它（在文档窗口中不能查看效果）并使用鼠标指针移过它时发生变化的图像，时发生变化的图像，由主图像由主图像（即页面首次装载时所显（即页面首次装载时所显示出的图像）示出的图像）和翻转图像和翻转图像（当鼠标指针掠过时所显示的（当鼠标指针掠过时所显示的图像）图像）组成，组成，二者大小要一样。一旦插入在二者大小要一样。一旦插入在html代码中代码中自动产自动产onmouseover事件。事件。4. 在在dw中图像的编辑功能仅适用于中图像的编辑功能仅适用于GIF 和和JPEG 图像格式。图像格式。在属性检面板中编辑图像在属性检面板中

25、编辑图像在其中可设置图像的属性参数（宽、高、替代）、对齐图在其中可设置图像的属性参数（宽、高、替代）、对齐图像（左、右、居中对齐）、边距、边框、改变图像的尺像（左、右、居中对齐）、边距、边框、改变图像的尺寸寸 （也可直接拖动调整控制点）、裁剪图像、调整其对（也可直接拖动调整控制点）、裁剪图像、调整其对比度、锐化图像。比度、锐化图像。 上述设置也可通过菜单实现：上述设置也可通过菜单实现：修改修改-图像图像用用fireworks优化图像：优化图像： 要方便地完成相关的处理工作，则需要图形图像处理软件的要方便地完成相关的处理工作，则需要图形图像处理软件的协助。协助。 具体操作：修改具体操作：修改图像

26、图像-在在fireworks优化图像。优化图像。 在页面中合理地使用图形图像已经成为网页制作的一个在页面中合理地使用图形图像已经成为网页制作的一个基本要求。但是并非所有图形图像都可以直接用在网页中，基本要求。但是并非所有图形图像都可以直接用在网页中，大多数情况下，需要对原始图像素材进行一些处理，例如大多数情况下，需要对原始图像素材进行一些处理，例如图像优化、添加特效等，然后再在网页中使用。图像优化、添加特效等，然后再在网页中使用。为图像添加热点为图像添加热点 热点即图像上不可见的区域，该区域分配了一个超链接。热点即图像上不可见的区域，该区域分配了一个超链接。为图像添加热点就是在图像上划分区域，

27、从而设定图像上为图像添加热点就是在图像上划分区域，从而设定图像上制作超链接的范围。使用图像或图像中的某些区域来创建制作超链接的范围。使用图像或图像中的某些区域来创建超链接，为网页设计增色不少。如果我们不建立链接，只超链接，为网页设计增色不少。如果我们不建立链接，只是当鼠标移到图像的某些区域时，能显示一些提示信息或是当鼠标移到图像的某些区域时，能显示一些提示信息或对图的注释，那么效果也一定不错。对图的注释，那么效果也一定不错。 在在Dream weaver中为图像添加热点的方法为：中为图像添加热点的方法为： 选定图选定图像，打开图像属性面板，选择设置热点按钮，单击鼠标左像，打开图像属性面板，选择

28、设置热点按钮，单击鼠标左键并拖动，键并拖动， 在图像中设置热点形状。在图像中设置热点形状。 .设置图文混排和图像边距设置图文混排和图像边距的效果。的效果。图像和文字的对齐有：图像和文字的对齐有：对齐时要先选择图像，对齐时要先选择图像，再选对齐方式。再选对齐方式。设置图像边距，设置图像边距，可以使图像和相邻的可以使图像和相邻的文字或其他图片之间文字或其他图片之间有一个间距。有一个间距。7.制作电子相册：命令制作电子相册：命令创建网站相册创建网站相册本节习题和作业本节习题和作业1填空题填空题（1）在计算机领域中，图像分为）在计算机领域中，图像分为_和和_2大类。大类。（2）GIF图像采用的是图像采

29、用的是_压缩格式。压缩格式。2 选择题选择题（2）网页通常可以支持的图像格式有）网页通常可以支持的图像格式有_。 AGIF BBMP CAVI DPSD EPNG FJPEG。3简答题简答题（1）网页中常用的图像格式有哪些？各有什么特点？）网页中常用的图像格式有哪些？各有什么特点？如果在网页中添加动画格式的浮动广告，采用何种如果在网页中添加动画格式的浮动广告，采用何种格式？为什么？电子相册，应该用哪种格式最好？格式？为什么？电子相册，应该用哪种格式最好？ (2)如何创建鼠标变换图像和图像热点？如何创建鼠标变换图像和图像热点？4操作题：操作题： 搜集自己的喜爱的图片，制作一个电子相册。搜集自己的

30、喜爱的图片，制作一个电子相册。上机练习上机练习练习练习1 1 美化文字格式美化文字格式制作一个文字网页，效果如图制作一个文字网页，效果如图1-801-80所示。请按照图中所示。请按照图中的提示信息进行制作。的提示信息进行制作。设置为标题2设置为标题3设置为项目列表插入水平线插入版权符号图1-80 美化文字格式练习练习2 图文并茂图文并茂 制作一个图文并茂的网页，效果如图制作一个图文并茂的网页，效果如图1-81所示。注意这里所示。注意这里要应用图像属性中的左对齐和右对齐项设置图文并茂的网页要应用图像属性中的左对齐和右对齐项设置图文并茂的网页效果。效果。图1-81 图文并茂 4.4.网页多媒体的运

31、用网页多媒体的运用4.3.1在网页中使用视频和在网页中使用视频和flash格式格式 一个优秀的网站应该不仅仅是由文字和图片组成一个优秀的网站应该不仅仅是由文字和图片组成的，而是动态的、多媒体。为了增强网页的表现力，的，而是动态的、多媒体。为了增强网页的表现力，丰富文档的显示效果，需用向网页中插入丰富文档的显示效果，需用向网页中插入Flash动画、动画、Shockwave动画、动画、QuickTime 影片文件、影片文件、Java小程小程序、序、mp3音频播放插件等多媒体内容。音频播放插件等多媒体内容。1.网页中可用的视频文件格式有：网页中可用的视频文件格式有：DAT、AVI、RM、 WMV、

32、MPEG格式、格式、ASF、RMVB等等，通过，通过“插插入入媒体媒体插件插件”完成这些视频文件的插入，插入后完成这些视频文件的插入，插入后设置设置hidden为为false即可。经常使用的视频文件有即可。经常使用的视频文件有RM 、MPEG等。等。2.常见的常见的flash文件格式：文件格式：flash（.fla格式）格式）:是是flash软件中创建的各种项目的软件中创建的各种项目的源文件。只能在源文件。只能在flash中打开中打开,输出成输出成SWF或或SWT文件，文件，才能在浏览器中使用。才能在浏览器中使用。flash影片文件（影片文件（.swf格式）：格式）：是经过是经过压缩和优化了压

33、缩和优化了的的.fla格式文件，可在浏览器中播放。格式文件，可在浏览器中播放。flash模板文件（模板文件（swt格式）格式）可以让用户修改和替换可以让用户修改和替换swf 文件中的信息，文件中的信息，使用在使用在 flash按钮中按钮中，用户可以，用户可以使用自己的文字或链接修改模板，来创建字定义的使用自己的文字或链接修改模板，来创建字定义的swf 文件并使用。文件并使用。使用使用flash按钮和文本：按钮和文本：这两种对象所创建的文件格这两种对象所创建的文件格式也是式也是.swf，经过优化的文件的压缩版本可在浏览器，经过优化的文件的压缩版本可在浏览器和和dw中播放预览，也可在中播放预览，也

34、可在dw中编辑。中编辑。 flashflash动画：动画： FlashFlash动画以小巧、动感、富有交互动画以小巧、动感、富有交互性而风靡网络。在制作网页时，将性而风靡网络。在制作网页时，将FlashFlash动画应用动画应用到网页中，能使网页更具动感，更富有感染力。在到网页中，能使网页更具动感，更富有感染力。在网页设计中的使用非常普遍。网页设计中的使用非常普遍。 flash视频文件（视频文件（.flv格式）：格式）：Flash视频是视频是Macromedia推出的视频格式，是一种推出的视频格式，是一种有经过编码有经过编码的音频和视频数据、的音频和视频数据、适用于网络应用的媒体格式，适用于网

35、络应用的媒体格式，播放品质高，同时文件的体积比较小，播放品质高，同时文件的体积比较小，通过通过flash player传送传送。Flash视频文件的扩展名为视频文件的扩展名为.FLV。 flash元素文件（元素文件（.swc格式）：格式）：是一种特殊类型的是一种特殊类型的flash文件，通过将此类文件合并到网页，可以创建丰富的文件，通过将此类文件合并到网页，可以创建丰富的internet应用程序；有可自定义的参数。应用程序；有可自定义的参数。 flashpaper文件：是经过文件：是经过转换软件转换软件Flash Paper转换后转换后的文件，该软件允许把任何的可打印的文档直接转换成的文件，该

36、软件允许把任何的可打印的文档直接转换成Flash文档或文档或PDF文档，并且保持原来的文件的排版格式。文档，并且保持原来的文件的排版格式。 转换后的文件也可以直接插入到网页中，在网页中可以转换后的文件也可以直接插入到网页中，在网页中可以直接阅读、搜索或打印。直接阅读、搜索或打印。 总结：总结：Flash格式虽多，但在网页中用得较多的还是格式虽多，但在网页中用得较多的还是.swf格式。格式。3.各种格式各种格式flash的插入和属性设置的插入和属性设置（1）插入和编辑）插入和编辑flash动画、动画、 flash影片和影片和 flash模板。模板。 方法有菜单法或按钮法：方法有菜单法或按钮法：

37、插入插入媒体媒体flash设置设置参数（参数（autoplay、loop、volume） 参数设置：参数设置：Flash动画控制参数的设计稍微有点难度，动画控制参数的设计稍微有点难度，不能在不能在【属性属性】面板中直接设置，需要打开面板中直接设置，需要打开【参数参数】对话框进行设置。对话框进行设置。设置参数为设置参数为menu，值为，值为false，作用是让浏览器不，作用是让浏览器不显示显示flash的控制菜单。的控制菜单。使使Flash的背景变为透明。的背景变为透明。 单击属性面板中的单击属性面板中的“参数参数”按钮，打开按钮，打开“参数参数”对话框，对话框，设置参数为设置参数为wmode，

38、 为为transparent，这样在任何背景下，这样在任何背景下，Flash动画都能实现透明背景的显示；动画都能实现透明背景的显示； 若其值为若其值为 Window用来在网页上用影片自己的矩形窗口来播放应用程序，表明用来在网页上用影片自己的矩形窗口来播放应用程序，表明flash应应用程序与用程序与html的层没有任何交互，并始终位于最顶层；的层没有任何交互，并始终位于最顶层； 若值为若值为opaque使应用程序隐藏页面上位于它后面的所有显示内容。使应用程序隐藏页面上位于它后面的所有显示内容。(2)使用使用flash按钮按钮（基于（基于flash 模板的可更新按钮）：插模板的可更新按钮）：插入入

39、媒体媒体flash按钮按钮 创建、插入、设置各选项创建、插入、设置各选项 修改修改 播放预览。播放预览。 在在“插入插入Flash按钮按钮”对话框中对话框中“样式样式”用来选择按钮的用来选择按钮的外观，外观，“按钮文本按钮文本”用来输入按钮上的文字，用来输入按钮上的文字，“字体字体”和和“大小大小”用于设置按钮上文字的字体和大小，字号用于设置按钮上文字的字体和大小，字号变大，按钮并不会跟着改变。变大，按钮并不会跟着改变。 注意：确认注意：确认flash 按钮和按钮和html文件放在同一个文件夹下，文件放在同一个文件夹下，浏览器可以辨认文档相对连接，保存在同一文件夹下可以浏览器可以辨认文档相对连

40、接，保存在同一文件夹下可以保证这些链接工作正常。因为浏览器不能在保证这些链接工作正常。因为浏览器不能在flash影片中影片中识别站点根目录相对路径。识别站点根目录相对路径。插入 Flash 按钮 Flash 按钮可根据鼠标指针位置和状态的不同，显示不同的图像，并且会在鼠标单击时执行超链接跳转的动作。 定位插入点，在“插入”栏的“媒体”面板中单击“Flash 按钮”按钮，打开“插入 Flash 按钮”对话框。 插入插入flash按钮按钮效果(3)使用使用flash文本文本 用用Flash文本制作导航栏目文本制作导航栏目 插入插入媒体媒体flash文本文本设置参（设置参（autoplay、loop

41、、volume） 确认确认flash文本和文本和html文件放在同一个文件夹下，浏览器文件放在同一个文件夹下，浏览器可以辨认文档相对连接，保存在同一文件夹下可以保证这可以辨认文档相对连接，保存在同一文件夹下可以保证这些链接工作正常。些链接工作正常。flash文本效果文本效果(4)插入插入flashpaper文件文件 在浏览器中打开包含在浏览器中打开包含FlashPaper文档的页面时，浏览者文档的页面时，浏览者能够浏览能够浏览FlashPaper文档中的所有页面，而无需加载新文档中的所有页面，而无需加载新的的Web页。也可以搜索、打印和缩放该文档。页。也可以搜索、打印和缩放该文档。 选择选择“

42、插入插入”“媒体媒体”“FlashPaper”。 在在“插入插入FlashPaper”对话框中，输入宽度和高度（以对话框中，输入宽度和高度（以像素为单位）指定像素为单位）指定FlashPaper对象在网页上的尺寸，对象在网页上的尺寸，FlashPaper将缩放文档以适合宽度。将缩放文档以适合宽度。单击单击“确定确定”在页面在页面中插入文档。中插入文档。 由于由于FlashPaper文档是文档是Flash对象，因此页面上将出现对象，因此页面上将出现一个一个Flash占位符。占位符。 如果需要，在属性检查器中设置其如果需要，在属性检查器中设置其他属性。他属性。 (5)使用使用flash元素（图像查

43、看器）元素（图像查看器）： 插入、编辑插入、编辑 可以用来查看图像，但图需要在可以用来查看图像，但图需要在flash元素属性的元素属性的imgURLS中设置各个图像路径。中设置各个图像路径。具体设置看下页。具体设置看下页。 通过该法可以用来制作电子相册(6)在网页中使用在网页中使用shockwave动画动画/影片影片 插入插入媒体媒体shockwave （选择（选择*.dcr 或或shockwave小游戏）小游戏） shockwave是专门的是专门的Flash动画升级插件，动画升级插件， shockwave动画是用动画是用Director制作，文件后制作，文件后缀名是缀名是dcr。 播放sho

44、ckwave动画需要安装shockwave player插件(7)使用使用flash视频（视频（ . Flv，仅，仅8.0 能实现）能实现） 在使用插入前，必须有一个经过编码生成的视频在使用插入前，必须有一个经过编码生成的视频（ . flv）文件。文件。 主要有以下主要有以下2种视频形式种视频形式 a累进式下载视频：先下载到浏览者的电脑上，再进行播累进式下载视频：先下载到浏览者的电脑上，再进行播放放 b流视频：经过很短的时间缓冲后在网页上播放。流视频：经过很短的时间缓冲后在网页上播放。 插入插入媒体媒体flash视频视频4.控制控制flash动画动画 在属性检查其中分别给插入到网页中的在属性检

45、查其中分别给插入到网页中的flash动画命名，如动画命名，如图命名为图命名为main。 在网页中添加文字在网页中添加文字“播放播放”和和“停止停止”或类似的按钮，分别或类似的按钮，分别加上加上空链接（空链接（#），然后添加行为，然后添加行为“控制控制shockwave或或flash”，在弹出的对话框中选择要进行控制的，在弹出的对话框中选择要进行控制的flash名即名即可实现。可实现。4.3.2在网页中使用音频在网页中使用音频添加音频能极好地吸引读者添加音频能极好地吸引读者,烘托良好的艺术氛围烘托良好的艺术氛围,但是添加但是添加音乐后音乐后,会让网页文件变大会让网页文件变大,增加网页下载的时间增

46、加网页下载的时间,所以在添所以在添加音乐时加音乐时,需要考虑声音文件的大小、声音品质和在不同浏需要考虑声音文件的大小、声音品质和在不同浏览器中的差异览器中的差异,适时适度的增加。适时适度的增加。1.在网页中添加音频文件的在网页中添加音频文件的2种方式：种方式：链接到音频文件：链接到音频文件：主要使用超级链接实现，提供音乐下载主要使用超级链接实现，提供音乐下载或在线播放，但在线打开播放时需要读者安装好相应的播或在线播放，但在线打开播放时需要读者安装好相应的播放器。放器。嵌入声音文件：嵌入声音文件：可以设置网页的背景音乐可以设置网页的背景音乐,也可以提供音乐也可以提供音乐在线播放。但在线播放时，需

47、要浏览器安装相应的插件，在线播放。但在线播放时，需要浏览器安装相应的插件，可以显示其外观及进行相应的播放、暂停和音量控制。可以显示其外观及进行相应的播放、暂停和音量控制。本本章着重讲解嵌入声音文件。章着重讲解嵌入声音文件。2.网页中添加背景音乐的文件格式有网页中添加背景音乐的文件格式有:mid、wmv、mp3、wav等。等。umid/midi格式：音质好、文件小、反应快、可重复格式：音质好、文件小、反应快、可重复播放、被多数浏览器支持，是网页中默认的背景音乐播放、被多数浏览器支持，是网页中默认的背景音乐格式，也是设计者的首选。但录制要求较高，且依赖格式，也是设计者的首选。但录制要求较高，且依赖

48、于声卡，多用于器乐。于声卡，多用于器乐。uMP3压缩率最高、音质最好。压缩率最高、音质最好。uWMV：uwav和和aif（aiff）文件：二者相似：音质好、被多数）文件：二者相似：音质好、被多数浏览器支持，录制。浏览器支持，录制。3.嵌入声音文件的几种方式和操作思路嵌入声音文件的几种方式和操作思路 方法方法1：插入：插入媒体媒体插件插件将鼠标定位到需要插入音频文件的位置，执行插入将鼠标定位到需要插入音频文件的位置，执行插入媒媒体体插件插件-选择一个音频文件选择一个音频文件设置（设置（hidden、loop、autostart等）参数。等）参数。 如果访问者安装有能播放相应格式如果访问者安装有能播放相应格式文件的插件（例如文件的插件（例如 RealMedia 或或 QuickTime 插件），插件），那么可以通过嵌入的方式将声音与视频直接插入页面中，那么可以通过嵌入的方式将声音与视频直接插入页面中，从而获得更多对媒体的控制（例如，可选择是否播放和从而获得更多对媒体的控制（例如，可选择是否播放和设置音量。设置音量。 插件的位置和播放效果如图所示：插件的位置和播放效果如图所示：方法方法2：下载安装：下载安装soun