《最新多媒体教学电子课件制作培训教程》第5章：使用Dreamweaver制作多媒体教学课件

第5章 使用Dreamweaver制作多媒体教学课件,（时间：3次课，6学时）,第5章 使用Dreamweaver制作多媒体教学课件,教学提示：了解网页中多种多媒体元素，学习网页课件的制作方法，熟悉Dreamweaver 8的工作环境 教学目标：本章介绍使用Dreamweaver 8制作网页课件时需要经常接触的有关多媒体网页的一些基本概念，在了解Dreamweaver 8的工作窗口和制作网页的基本元素后，更加熟练地应用Dreamweaver 8这一方便易学的网页制作编辑工具，制作出生动的网页课件。,第5章 使用Dreamweaver制作多媒体教学课件,5.1 多媒体课件的网络应用 5.2 认识Dreamweaver 8 5.3 制作网页的基本元素 5.4 上机实战使用Dreamweaver制作语文课件荷塘月色,5.1 多媒体课件的网络应用,5.1.1 课件在网络上运行的机制 5.1.2 网络运行时对课件素材的要求,5.1 多媒体课件的网络应用,随着Internet及校园网的普及，给课件的运行提出了新的要求，课件要在网络平台上较好地运行，以适应远程教学和学生自学的要求。通过Internet或校园网，能够很快地发布课件或直接地运行课件，这对教育的普及和提高课件的开发效率都有很重要的作用。,5.1.1 课件在网络上运行的机制,在Internet或校园网上进行远程教学，主要通过两种方式进行：一种是同步远程教学，另一种方式是异步远程教学。同步远程教学是利用网络的优势，模拟课堂教学的实时性和交互性，这个任务主要由网络课件来担任。这是本章所要实现的内容，利用HTML标识符及动态网页技术，实现课件的主要功能，和用户进行双向交互。此时，用户在浏览课件时，是由用户的电脑(客户机)向存放课件的电脑(服务器)发出一个请求，服务器在收到请求后，将用户所查询的内容发送给客户机，如图5.1所示。这种运行方式要求课件能在网络平台上顺利进行，并能处理人机交互。 异步远程教学是采用基于网络技术的多媒体教学平台，将教学课件存放在服务器中，用户通过网络进入教学网络，以点播的方式将课件下载到本机中自行学习。这种学习方式对课件的实时性要求不高，课件的内容也可以较为庞大。前面几章中所介绍的课件大多为这种方式。其运行机制如图5.2所示。,5.1.1 课件在网络上运行的机制,5.1.1 课件在网络上运行的机制,5.1.2 网络运行时对课件素材的要求,课件在网络上运行不同于在本机上运行，演示时需要的所有数据都要通过网络介质的传播才能在终端上显示，因此多媒体课件在网上传播时会占用大量带宽，给网络的运行造成较大的压力。虽然目前校园网使用的大多是以太网，但多媒体课件中使用的素材大多为视频文件和图像文件，对演示时的实时性有较高的要求，所占用的网络带宽有较严格的要求，如果多媒体课件使用了大量的视频或音频素材，将引起多媒体课件播放的不连续甚至停顿，使课件的作用全部或部分丧失。 因此网络运行时对课件引用的素材有着以下一些方面的要求： 对于图像素材，在不改变图像质量的前提下，尽量减小图像的大小。如对透明度没有要求，可采用JPEG格式，该格式的图像文件大小仅占同样的BMP文件的10%50%，并且图像质量可调。如所用的图像文件要求是背景透明，则需要采用GIF、PNG这两种文件格式。 对于视频文件，也有上述要求。一般来说，未经压缩的AVI文件虽然质量较高，但其过于庞大的体积明显不适于网络传输，要经过一定的压缩。目前较好的压缩方式是DivX-MPEG4的压缩方式，目前最新为5.02版。另外，对于网络播放的视频文件来说，最好是流媒体，即一边下载一边播放，RM及ASF格式的流文件符合这个要求。 对于声音文件，应经过压缩，目前通常采用MP3格式来存储声音文件，一分钟的立体声背景音乐也只占用1MB的空间，符合网络传输的条件。,5.2 认识Dreamweaver 8,5.2.1 熟悉Dreamweaver 8的工作环境 5.2.2 控制浮动面板,5.2 认识Dreamweaver 8,Dreamweaver提供了强大的设计工具，在不用书写任何代码的情况下，就能够快速创建各种极具动态HTML特性的网页，如动画和分层等；利用目标浏览器检查特性，可以创建兼容性极好的网页，以适用于各种平台和各种浏览器；利用Roundtrip HTML技术，可以精确控制Dreamweaver生产的网页源代码。例如，在可视编辑器中进行编辑时，可以在HTML查看器中同步看到Dreamweaver生成的源代码，从而杜绝了“盲人摸象”的弊病。在编辑由其他网页创作工具生成的网页时，Dreamweaver会尊重其他工具所生成的源代码，不会任意修改它，当然，如果需要，它仍然可以帮助用户“净化”其他工具所生成的垃圾代码。Dreamweaver是完全可以定制的，用户可以创建自己的对象和命令，修改菜单和快捷键，甚至可以通过自己书写JavaScript代码来为Dreamweaver创建新的行为和属性面板，以增强其本身的能力。,5.2.1 熟悉Dreamweaver 8的工作环境,在安装Dreamweaver 8后，它会自动在Windows的【开始】菜单中创建程序组，单击【开始】|【所有程序】 | Macromedia | Macromedia Dreamweaver 8命令，即可启动Dreamweaver 8。 另一个更常用的方法是在Windows窗口或资源管理器中直接启动Dreamweaver 8并载入要编辑的HTML文档。首先选中要编辑的HTML文件图标，然后右击它，打开快捷菜单，在其中单击Edit with Dreamweaver(用Dreamweaver编辑)命令，即可启动Dreamweaver 8，并载入要编辑的HTML文档。 第一次运行 Dreamweaver 8时，将会出现如图5.3所示的【工作区设置】对话框。在其中选中【设计者】单选按钮，会出现如图5.4所示的程序窗口，其上浮动有Dreamweaver 8新创的开始屏幕。 通过【文件】|【新建】命令创建一个新的文档，这时会出现如图5.5所示的【新建文档】对话框。在对话框中选择所需样式，然后单击【创建】按钮。,5.2.1 熟悉Dreamweaver 8的工作环境,5.2.1 熟悉Dreamweaver 8的工作环境,图5.5 【新建文档】对话框,5.2.1 熟悉Dreamweaver 8的工作环境,这时会打开如图5.6所示的新建文档的编辑窗口和浮动面板。Dreamweaver 8的外观与其强大的功能特性是紧密相连的，对于任何一个用户，当熟悉了这些面板后，可以显著提高工作效率。 一般来说，一个典型的Dreamweaver 8应用程序的操作环境包括以下几个部分： 工作窗口显示当前所创建和编辑的HTML文档内容。 标题栏上显示当前正在编辑文档的标题和名称，它首先显示文档的标题，然后显示文档的文件名称。 1. 菜单栏 菜单栏中提供了许多菜单，所有的工作几乎都可以通过菜单来完成。尽管利用浮动面板可以加快操作速度，但有时为了节省屏幕空间，用户会将浮动面板关闭，这时利用菜单就显得尤为重要。 2. 状态栏 文档窗口的右下角是状态栏，从左至右分别显示了页面设置区、页面容量和传送时间，以及默认的导航条。其中，单击页面设置区可以打开屏幕分辨率设置列表，用户可以从中进行选择分辨率大小。,5.2.1 熟悉Dreamweaver 8的工作环境,5.2.1 熟悉Dreamweaver 8的工作环境,3. 代码窗口 代码窗口显示与当前网页对应的HTML代码。 4. 【插入】面板 【插入】面板的图标分别对应页面中的各种元素，如图片、表格、链接和媒体等。在默认情况下，【插入】面板中显示的是【常用】按钮。单击【插入】面板中的【常用】按钮，可以切换【插入】面板。例如，可以切换到【布局】、【表单】、【文本】和【布局】等面板。 5. 【属性】面板 【属性】面板是页面编辑中比较重要的面板。它主要用于设置页面元素的属性，如文字的大小、图片的高宽、表格的对齐方式和链接地址等。对于不同的元素，面板中的参数是不同的。此外，单击【属性】面板右下角的按钮，可以展开【属性】面板，单击【页面属性】按钮，打开【页面属性】对话框，从而可以查看和设置更多参数。,5.2.2 控制浮动面板,熟悉微软公司出品的系列应用程序的用户往往对Dreamweaver 8的浮动面板感觉很不习惯，实际上，Dreamweaver 8的浮动面板非常灵活，同时也更便于使用。 1. 使用【插入】面板 【插入】面板上有许多按钮，在网页编辑过程中，通过单击这些按钮，可以在网页中添加相应的对象，如图像、表格、框架和各种其他媒体等。 【插入】面板的空间是有限的，为了能够充分利用有限的面板空间，【插入】面板采用了多层结构，将不同类型的对象按钮放在不同的浮动面板层中。 单击【插入】面板上的不同选项，将会显示【插入】面板所包含对象的类型，默认状态下显示【常用】类型。如果选择其他类型，则在【插入】面板上会显示相应类型的按钮，图5.7显示的是选择【文本】的【插入】面板。,5.2.2 控制浮动面板,图5.7 选择不同类型的【插入】面板,5.2.2 控制浮动面板,2. 使用【属性】面板 【属性】面板主要用于显示文档窗口中选中元素的属性，并允许用户在【属性】面板中对元素属性直接进行修改。根据选中元素的不同，【属性】面板上的内容也有所不同。例如，在文档窗口中选择文本时，【属性】面板如图5.8所示；在文档窗口中选择图像时，【属性】面板如图5.9所示。 在【属性】面板中不仅可以设置文本的字体、格式、大小、颜色、对齐方式以及图片的大小、对齐方式，还可以设置各种网页元素的链接、目标以及设置热点、制作简单翻转图片、设置图片的边框和边距等，甚至还可以对表格、框架、层以及各种插件命名和设置相应的属性。 正确快捷地操作【属性】面板，将帮助用户在制作编辑网页时更得心应手，设计制作出风格独特的网页。,5.2.2 控制浮动面板,5.2.2 控制浮动面板,图5.9 设置图像属性时的【属性】面板,5.3 制作网页的基本元素,5.3.1 制作文本特效 5.3.2 绚丽缤纷的图像效果 5.3.3 添加Flash动画 5.3.4 映射图的应用 5.3.5 导航条的使用 5.3.6 创建与管理链接 5.3.7 利用表格布局,5.3 制作网页的基本元素,5.3.1 制作文本特效,文本是网页中最基本的元素。好的文本格式，能够充分体现文档要表述的意图，激发读者的阅读兴趣。在网页中设置丰富的字体、多种的段落格式以及赏心悦目的文本效果，对于一个专业的网站来说，是必不可少的要求之一。在本节中将讲述如何创建一个文档，并在文档中添加各种各样的文字。 1. 创建文档 在Dreamweaver中，用户可以从一个空白的HTML页面创建新文档，也可以从模板创建，还可以打开并修改其他应用程序创建的HTML文档。 背景图像和颜色、文本和链接颜色等元素定义了特定页面，将平常文本和超文本区分开来。允许用户为页面指定左边和上面的边距大小等边距属性。 1) 创建新文档 启动Dreamweaver 8后，就可直接创建一个空文档。如果已经启动Dreamweaver 8，要创建空白文档，可以在主菜单中选择【文件】|【新建】命令，则会出现如图5.10所示的【新建文档】对话框。,5.3.1 制作文本特效,图 5.10 【新建文档】对话框,5.3.1 制作文本特效,该对话框中默认显示的是【常规】选项卡，可以在其中选择不同的文档格式。在【类别】列表框中选择【框架集】选项，在【框架集】列表框中选择【上方固定，左侧嵌套】选项，在右边的【预览】框中可以预览新建文档的结构。 单击并打开该对话框的【模板】选项卡，对话框如图5.11所示。可以在其中选择不同的模板作为新建文档的结构，在右边的【预览】框中可以预览新建文档的结构。 图5.12所示为新建的一个框架结构类型的空文档，其中包含3个框架，分别为：上框架、左框架和主框架。 在创建一个新文档后，如果打开HTML代码视图，可以看出实际上Dreamweaver已经为用户打开了一个名为“Default.htm”的模板，每次开始新建网页时，Dreamweaver都会将它打开。单击快速选项板上的【代码】按钮查看如图5.13所示的源代码。 在这段源代码中设置了网页的一些基本属性如页名、标题、正文和页面背景色等。 2) 保存文档 当创建一个新的文档后，就要保存该文档。由于目的不同，保存文档的方法也不相同。 要保存文档可以单击【文件】|【保存】命令，或是按下Ctrl+S组合键。如果文档尚未被保存，则会出现如图5.14所示的【另存为】对话框。选择路径并输入文件名，单击【保存】按钮，即可保存文档。如果文档已经被保存，则会直接保存文档，不会出现该对话框。,5.3.1 制作文本特效,图 5.11 选择新建文档的模板,5.3.1 制作文本特效,图 5.12 新建文档,5.3.1 制作文本特效,图 5.13 查看新建文档的源代码,5.3.1 制作文本特效,图5.14 【另存为】对话框,5.3.1 制作文本特效,3) 设置文档的页面属性 文档的页面属性包括文档的标题、文档的文字解码方式以及文档正文中各个元素的颜色等。正确设置文档属性是成功编写网页的必要前提。要设置文档的页面属性，其具体操作如下： (1) 单击【修改】|【页面属性】命令，或在文档窗口中右击，然后从快捷菜单中选择【页面属性】命令。这时会打开如图5.15所示的对话框，设置文档页面的外观属性。 (2) 利用【文本颜色】文本框可以设置文档中文字的前景颜色。在Dreamweaver中选择颜色的方法很简单，单击【文本颜色】文本框旁边的色样块，会弹出一个调色板，如图5.16所示，在理想的颜色上单击就可以选定这种颜色。 (3) 利用【背景颜色】文本框可以为文档页面指定背景颜色。在【背景图像】文本框中，输入希望用作HTML文档背景图像的路径和文件名，单击【浏览】按钮，从本地文件夹中选择图像文件。 (4) 设置完页面的外观属性后，选择【分类】列表框中的【链接】选项，设置如图5.18所示的链接属性。利用【链接颜色】文本框可以设置文档页面中尚未访问过的超链接的文字颜色。,5.3.1 制作文本特效,(5) 利用【已访问链接】文本框可以设置文档页面中已经访问过的超链接的文字颜色。 (6) 利用【下划线样式】文本框可以设置文档页面中超链接的文字是否有下划线等。 (7) 设置完页面的链接属性后，选择【分类】列表框中的【标题/编码】选项，在如图5.19所示的对话框中设置标题/编码属性。在【标题】文本框中，输入文档的页面标题。在浏览页面时，它会显示在浏览器的标题栏上。这里输入“物理篇不知道的世界”。 (8) 设置完毕后，单击【确定】按钮。 2. 添加文本 Dreamweaver是一种“所见即所得”的网页创作工具，插入文本非常方便，可以直接在文档窗口中输入，也可以把其他应用程序(如Word、IE等)中的文本粘贴到文档窗口。 1) 在文档窗口直接输入文本 在文档窗口中直接输入文本时，其操作和Word中的操作类似，只需正常输入文本即可，如图5.20所示。,5.3.1 制作文本特效,图5.15 设置页面的外观属性,5.3.1 制作文本特效,5.3.1 制作文本特效,图5.18 设置页面的链接属性,5.3.1 制作文本特效,图5.19 设置页面的标题/编码属性,5.3.1 制作文本特效,图5.20 在文档窗口中直接输入文本,5.3.1 制作文本特效,2) 从其他文本编辑软件中粘贴文本 从其他应用程序中复制文本，切换到 Dreamweaver，将插入点定位在【文档】窗口的【设计】视图中，然后选择【编辑】|【粘贴】或【编辑】|【选择性粘贴】，如图5.21所示。 当选择【编辑】|【选择性粘贴】时，将出现如图5.22所示的对话框为您提供几个粘贴格式设置选项。 选择【仅文本】选项，则原文档所有格式清除，结果如图5.23所示。当选择【带结构的文本(段落、列表、表格等)】，则原文档相应的格式都保留。 3. 设置文本格式 Dreamweaver是一种“所见即所得”的网页创作工具，这意味着对文本格式进行设置时可以直接从屏幕上看到设置结果。Dreamweaver提供了强大的文本格式化功能，用户可以随意地对文档进行各种格式化操作。 在Dreamweaver 8中，文本的格式化操作是非常简单的。Dreamweaver像是一个普通的文字处理程序，就像Word，用户可以很容易就完成对文本的格式化操作。 1) 设置段落格式 在HTML中，段落主要由标记和定义，在Dreamweaver的文档窗口中，每按一次Enter键，都会自动为上面键入的段落包围和标记。 要设置段落格式，只需将插入点置于段落中的任意位置即可，即只要确保插入点位于该段落的和之间即可。,5.3.1 制作文本特效,使用HTML标记格式化文本，这是最为“正统”的格式化方式。利用HTML标记，可以对段落和字符进行丰富的格式化设置。用户可以按照如下方法进行操作： (1) 在文档中，将插入点置于要设置标题的段落中，通常该段落是一行文字。如果希望将多个段落设置为标题，也可以选中多个段落。 (2) 单击【文本】|【段落格式】命令，再选择相应的标题选项，如图5.24所示。可选的标题格式包括【标题1】到【标题6】。 2) 对齐段落 段落的对齐方式，指的是段落相对文档窗口(或浏览器窗口)在水平位置的对齐方式。对齐的方式有三种：左对齐、居中和右对齐。对齐段落的具体步骤如下： (1) 将插入点放在要设置对齐方式的文档中，如果要设置多个文档段落的对齐方式，可以选中这些段落。 (2) 单击【文本】|【对齐】命令，再选择如图5.26所示的对齐方式。【左对齐】选项设置段落相对文档窗口左对齐；【居中对齐】选项设置段落相对文档窗口居中对齐；【右对齐】选项设置段落相对文档窗口右对齐；【两端对齐】选项设置段落相对文档窗口两端对齐。,5.3.1 制作文本特效,4. 设置字符格式 如果说段落格式能够从整体上把握文档的结构，使文档便于阅读理解，那么合适的字符格式则能够为文档带来美感，进一步突出文档要表达的中心思想。在Dreamweaver中，用户可以对字符的字体、字号、颜色和样式等进行深入的设置。如果希望设置文本的字符格式，则需要选中这些文字，使这些文字高亮显示。 1) 设置字符的字体 要为字符设置字体，首先得选中要设置字体的文字，然后选择【文本】|【字体】命令，再选择如图5.28所示的相应的字体。 如果在【字体】菜单中没有用户需要的字体，编辑字体列表的具体操作如下： (1) 如图5.28或图5.29所示选择菜单中的【编辑字体列表】选项。这时会打开如图5.30所示的【编辑字体列表】对话框，在这里用户可以对字体列表进行设置。 (2) 要在【字体】列表框中添加新字体，可以单击对话框左上角的“”按钮，然后从【可用字体】列表框中选择需要的字体，再单击“ ”按钮，被添加的字体就会出现在【选择的字体】列表框中。图5.30为添加【方正姚体】字体。 (3) 设置完毕，单击【确定】按钮。,5.3.1 制作文本特效,2) 设置字符的字号 字号指的是字符的大小，简单地说就是字的号码。 要在Dreamweaver中设置字符的字号，其具体操作如下： (1) 选中要设置字号的文本。 (2) 单击【文本】|【大小】命令，然后在如图5.31所示的子菜单中选择需要的字号，字号从1到7共有7级。如果希望使用默认的字体大小，可以选择【默认】选项，这样就从源代码中除去了相应的字体大小的设置代码。 (3) 如果希望以默认字符大小为基准，设置字符相对默认字符大小的增减量，可以单击【文本】|【改变大小】命令，然后在如图5.32所示的子菜单中选择要增减的级别。 3) 设置字符的颜色 丰富的字符颜色能够极大地增强文档的表现力，在Dreamweaver 中，要设置字符颜色，并希望利用Web安全色来设置字符色，应该使用【属性】面板上的调色板，具体操作如下： (1) 选中要设置字符颜色的文字。 (2) 在【属性】面板上，单击【大小】文本框右边的【文本颜色】按钮，打开如图5.34所示的调色板，然后选择需要的颜色；也可以在该按钮右方的文本框中，输入颜色的十六进制数值。,5.3.1 制作文本特效,4) 设置字符的样式 字符的样式，也称作字符的风格，指的是字符的外观显示方式，如字符的加粗、倾斜和下划线等。利用Dreamweaver，可以很容易地设置多种字符样式，具体操作如下： (1) 选中要设置样式的字符。 (2) 单击【文本】|【样式】命令，打开如图5.35所示的子菜单。 (3) 从子菜单中选择需要的样式，即可为选中的字符设置相应的样式，被选中的选项左边会带有选中标记。,5.3.1 制作文本特效,图5.21 选择【编辑】|【粘贴】,5.3.1 制作文本特效,图5.22 选择【编辑】|【选择性粘贴】,5.3.1 制作文本特效,图5.23 选择性粘贴结果,5.3.1 制作文本特效,图 5.24 设置段落格式为标题,5.3.1 制作文本特效,图 5.25 利用【属性】面板设置段落格式,5.3.1 制作文本特效,图 5.26 设置段落对齐方式,5.3.1 制作文本特效,5.3.1 制作文本特效,图 5.28 设置字符的字体,5.3.1 制作文本特效,图5.29 利用【属性】面板为字符设置字体,5.3.1 制作文本特效,图 5.30 【编辑字体列表】对话框,5.3.1 制作文本特效,5.3.1 制作文本特效,图 5.33 选择字号,5.3.1 制作文本特效,图 5.34 设置文本颜色,5.3.1 制作文本特效,图 5.35 选择字符样式,5.3.2 绚丽缤纷的图像效果,为了增如网页的吸引力，几乎所有的主页上都或多或少地带有一些图像。在页面中恰当地使用图像，能够极大地吸引浏览者的注意。Dreamweaver提供了强大的页面图像控制能力，能够帮助用户创建专业的图文并茂的页面。本节将介绍如何利用Dreamweaver在文档中控制图像。 1. 插入图像 要在Dreamweaver的文档窗口中插入图像，其具体操作如下： (1) 在文档中确定需要插入图像的位置。 (2) 如图5.36所示，单击【插入】|【图像】命令，或是单击【插入】面板上的【图像】按钮，从菜单中选择【图像】选项。这时会出现如图5.37所示的对话框，用户可以从文件夹中选择图像文件。 (3) 选中需要的文件后，在对话框的URL文本框中会显示当前文件的URL地址。,5.3.2 绚丽缤纷的图像效果,5.3.2 绚丽缤纷的图像效果,图 5.37 在文件夹中选择插入的图像,5.3.3 添加Flash动画,Dreamweaver 8在网站页面中可以添加各种媒体对象，如Java小程序、Shockwave动画、Flash动画或对象、ActiveX控件或其他声音和视频对象等。添加其他媒体对象的方法与添加Flash对象的操作步骤基本相同，这里不再赘述。下面介绍如何添加Flash对象。 1. 插入Flash对象 要插入Flash对象，其操作如下： (1) 在文档窗口的设计视图中需要插入Flash对象的地方放置插入点。 (2) 单击【插入】|【媒体】| Flash命令，或如图5.45所示，选择【插入】面板上的【常用】选项，然后单击上面的Flash按钮，这时会出现一个如图5.46所示的【选择文件】对话框。 (3) 在出现的对话框中，选取一个Flash对象文件(.swf)。单击【确定】按钮插入Flash对象，这时文档窗口中将出现一个如图5.47所示的Flash占位符(与Flash按钮和文本对象不同)。,5.3.3 添加Flash动画,图5.45 插入Flash对象,5.3.3 添加Flash动画,图5.46 【选择文件】对话框,5.3.3 添加Flash动画,图5.47 在文档中插入Flash对象,5.3.3 添加Flash动画,2. 设置Flash对象的属性 在Flash对象的【属性】面板中设置各种Flash对象的属性，具体操作如下： (1) 选中Flash对象，这时Flash对象的【属性】面板如图5.48所示。 (2) 在Flash文本框中，为Flash对象脚本程序指定动画的名称为“Flash1”。在【宽】和【高】文本框中，为Flash对象指定动画的宽度和高度分别为530像素和105像素。 (3) 在【文件】文本框中，可以指定Flash对象文件的路径为“piantou1.swf”。可以单击文件夹图标来浏览选择文件，或者直接输入路径。 (4) 在【对齐】下拉列表中，选择Flash对象在页面上的对齐方式为【居中】。利用【背景颜色】颜色框可以为Flash对象指定背景颜色。该颜色在动画没有放映时(加载或放映后)也会出现。 (5) 在【垂直边距】和【水平边距】两个文本框中，指定Flash对象与四周的间隔分别为60像素和2像素。 (6) 在【品质】下拉列表中，可以设置动画的播放质量；在高的设置下看起来会好些，但要求一个更快的CPU在屏幕上进行显示。选择【高品质】选项，确定一个较高的播放品质。 (7) 选中【自动播放】复选框，将使页面加载时自动播放动画。选择【循环】复选框，将使动画无限制循环下去。单击【播放】按钮，可以在文档窗口的设计视图中预览动画。单击【停止】按钮将终止动画播放并返回到Flash占位符。也可以按F12键在浏览器中预览Flash对象。 设置好Flash对象的各种属性后，上面这个文档中的Flash对象变化后在播放预览状态下的情况如图5.49所示。,5.3.3 添加Flash动画,图5.48 Flash对象的【属性】面板,5.3.3 添加Flash动画,图5.49 设置属性后播放的Flash对象,5.3.4 映射图的应用,1. 创建图像热点 利用文字作为超级链接的触发点，是网页上创建链接的主要方式。然而，千篇一律地使用文字来创建超级链接，未免有些单调。Dreamweaver 8允许使用图像或图像中的某些区域来创建超级链接，确实为网页设计增色不少。如果不把整个图像设为链接，只是当鼠标移到图像的某些区域，能显示一些提示信息或对图的注释，那么效果一定也不错。为了实现这一目标，就需要在目标图像上创建热点。 要在图像上创建热点，其具体操作如下： (1) 单击目标图像，【属性】面板下方出现如图5.50所示的热点工具，可以创建矩形、圆形或多边形热点。 (2) 在图像选定位置插入选定的热点形状，方法如下： 选择【圆形】工具，并将鼠标指针拖至图像上，创建一个圆形热点。 选择【矩形】工具，并将鼠标指针拖至图像上，创建一个矩形热点。 选择【多边形】工具，在各个顶点上单击一下，定义一个不规则形状的热点。然后单击箭头工具封闭此形状。 图5.51是插入矩形热点后的结果。 (3) 热点区域创建完成后，选中热区，打开属性检查器，各部分意思如下： 【链接】：在该【链接】文本框中可输入一个被链接的文件名或页面，也可单击文件夹选择一个文件名或页面。这个页面是单击热区时所要链接的去向。 【目标】：要使被链接的文档显示在其他地方而不是在当前窗口或框架，可在【目标】下拉列表框中输入窗口名或选择一个框架名。 【替换】：在该下拉列表框中输入所定义的热区的代替文本。该文本在浏览器中，当用户的鼠标移到该热点区域中将显示该文本。可以对于不同部位的热区输入不同的文本。,5.3.4 映射图的应用,2. 创建客户端映射图 1) 图像“映射”、“映射图”与“客户端映射图” “超级链接”是网页浏览中常用到的一个操作，用鼠标单击文字链接、图像链接，浏览器就可以指定到某个目标地址进行链接。对于图像链接，还有一种更灵活的方法，就是当你用鼠标指向页面中一幅较大图像中的不同部分时，鼠标所点的每一个部分都连接着一个页面，而且不同的部分其链接目标也不同，这项技术我们称之为“热点映射”或者简称为“映射”。它就是利用我们前面介绍的图像热点来进行的“链接”。 “映射图”是指被分为多个区域(或称“热点”)的图像；当用户单击某个热点时，会发生某种操作(例如，打开一个新文件)。 “映射图”又分为服务器端和客户端两种类型，其不同之处在于对鼠标在图像内单击后的处理方法。“客户端映射图”将超文本链接信息存储在 HTML 文档中，而不是像“服务器端映射图”那样，存储在单独的地图文件中。“客户端映射图”不需要与Web服务器交互，因为图像的坐标与其链接的网页已经传送到浏览器中，当单击图像的“热点”区域时，浏览器只是简单地查询与坐标对应的链接网址，这样就能减轻服务器处理“图像映射”的负担，并与服务器的类型无关。Netscape Navigator 2.0 及后续版本、NCSA Mosaic 2.1 和 3.0 以及 Internet Explorer 的所有版本都支持“客户端映射图”。 Dreamweaver 支持在同一文档中同时使用“客户端映射图”和“服务器端映射图”。不过，同时支持这两种图像“映射”类型的浏览器赋予“客户端映射图”以优先权。若要在文档中包含“服务器端映射图”，必须编写相应的 HTML 代码。由于编写“服务器端映射图”的代码比较复杂，并且利用Dreamweaver 8提供的“客户端映射图”已经能够很好地实现“图像映射”，本书只介绍如何在Dreamweaver 8中创建“客户端映射图”。,5.3.4 映射图的应用,2) 创建“客户端映射图” 在最初用HTML语言来设计网页时，实现图像“映射”比较麻烦，它需要设计者能准确提供图像中需要实现“映射”功能的区域的位置信息，以便使用map标签命令对指定位置的区域建立超级链接。现在，我们可以使用Dreamweaver 8轻松实现“客户端映射图”的制作。 “客户端映射图”的制作步骤如下： (1) 单击目标图像，【属性】面板下方出现如图5.50所示的热点工具，可以创建矩形、圆形或多边形热点。 (2) 在【地图】文本框中为该“映射图”输入惟一的名称，如图5.52所示。,5.3.4 映射图的应用,5.3.4 映射图的应用,图 5.51 插入矩形热点,5.3.4 映射图的应用,图 5.52 “映射图”名称,5.3.5 导航条的使用,导航条，也称导航栏，是图像超链接在HTML文档中的又一种应用。导航条实际上是一系列显示为按钮的图像，每个图像按钮链接到站点中不同的文档上，通过单击图像按钮，就可以实现在站点中的浏览。同时，也可以为这些图像实现翻转效果，或为图像添加更多的动感特性，使网页更生动，如弹起状态和按下状态等。 1. 插入导航条 导航条是由一幅图像(或一组图像)组成的，这些图像将根据用户的操作而改变显示。导航条是在站点页面和文件中移动的最简单方式。 在使用【插入导航条】命令前，首先应该创建每个导航元素显示状态所对应的一组图像(将导航元素看作是按钮将比较有助于理解，因为它们被选中时也将把用户带到另外一个页面)。 一个导航元素可以有4种状态： Up(一般)：该图像在用户尚未单击该导航元素或者未和该导航元素进行任何交互时显示。,5.3.5 导航条的使用,Over(经过)：当鼠标指针从Up(一般)图像经过时，该图像出现。导航元素的外观也随之改变(例如，变得更亮)以让用户知道可以和它进行交互。 Down(按下图像)：该图像在导航元素被单击后出现。例如，当用户单击一个导航元素时，新页面加载并且同时仍然显示导航条，只是被单击的导航元素变暗以表明它已经被选取。 Over While Down(按下时经过)：导航元素被单击后将显示Down图像，如果此时鼠标指针经过Down图像上方，则显示该图像。例如，元素可能会变灰暗。用户可以使用这个状态告诉浏览者该元素已经不能再单击，因为正处在站点中了。 用户不需要在导航条图像中包含这4种状态，例如，用户可能只需要Up(一般)和Down(按下图像)两种状态。,5.3.5 导航条的使用,用户可以创建导航条，然后将它复制到站点的其他页面中，将它和框架一起使用，或者编辑页面行为以便在页面被访问时显示不同状态。 如果希望利用导航条实现在页面之间的顺序浏览，可以创建一个最简单的包含3项链接的导航条，一个链接指向上一页，一个链接指向下一页，另一个链接指向首页。导航条中的每个按钮形状的图像，都需要包含4种状态，弹起状态(也即正常显示状态)、翻转状态、按下状态和按下翻转状态。在一个包含3个按钮图像的导航条中，共有12个按钮图像，需要对这些图像进行命名。 要在文档中插入导航条，其操作如下： (1) 如图5.54所示，单击【插入】|【图像对象】|【导航条】命令，或是单击【插入】面板上的【导航条】按钮，这时会打开如图5.55所示的对话框。 (2) 在【项目名称】文本框中，为导航条第一项设置名称。例如，可以输入“main”。 (3) 在【状态图像】文本框中，输入导航按钮图像弹起状态(即正常显示状态)图像文件的URL。单击【浏览】按钮，打开如图5.56所示的对话框，从本地文件夹中选择图像文件。 (4) 同样地，在【鼠标经过图像】、【按下图像】和【按下时鼠标经过图像】文本框中，分别输入导航按钮图像翻转状态时、导航按钮图像按下状态时和导航按钮图像按下状态鼠标经过时图像文件的URL。单击【浏览】按钮，可以从本地文件夹中选择图像文件。 (5) 在【按下时，前往的URL】文本框中，输入单击该导航按钮图像时跳转的URL地址。单击【浏览】按钮，可以从本地文件夹中选择目标端点的文档。在【按下时，前往的URL】文本框右边的下拉列表中，可以选择文档被打开的目标窗口。选择【主窗口】选项，则表明在同一窗口中打开目标端点的文档。如果当前使用了框架，还可以从其中选择目标框架的名称。如果选择的框架尚未命名，则需要先命名，然后再在这里进行选择。,5.3.5 导航条的使用,5.3.5 导航条的使用,图 5.55 【插入导航条】对话框,5.3.5 导航条的使用,图5.56 【选择图像源文件】对话框,5.3.6 创建与管理链接,利用超链接可以实现在文档间或文档中的跳转。超链接由两个端点(也称锚)和一个方向构成。通常将开始位置的端点称作源端点(或源锚)，而将目标位置的端点称作目标端点(或目标锚)，链接就是由源端点指向目标端点的一种跳转。目标端点可以是任意网络资源，例如，它可以是一个页面、一幅图像、一段声音或一段程序，甚至也可以是页面中的某个位置。 1. 创建各种链接 根据链接源端点的不同，可以将链接分为两种：超文本和超链接。 超文本就是利用文本构建的超链接。在这种链接中，链接的源端点是文本。在浏览器中，超文本一般显示为下方带有下划线的文本，默认显示为蓝色。 超链接是利用除了文本之外的其他对象构建的链接。在这种链接中，源端点是除了文本之外的其他对象，如一幅图像或一个表单等。为了充分美化网页，利用图像构建超链接成为最常见的手段之一。 为了明确链接路径，并能正确使用路径，下面简单介绍一下路径的概念和种类。 每个页面都有一个惟一的地址，称为“统一资源定位器”(URL)。一般情况下，当用户创建本地链接时(链接所在文档和目标文档位于同一站点内)时，用户不需要指定链接目标文档的完整URL。作为代替，用户可以指定一个相对于当前文档或站点根目录的相对路径。下面是3种类型的链接路径：,5.3.6 创建与管理链接,(1) 绝对路径 如果在链接中使用完整的URL地址，这种链接路径就称作绝对路径。绝对路径的特点是，路径同链接的源端点无关。 假设在站点中要创建指向如图5.61所示science目录中的computer.htm文档的链接，则可以使用如下的绝对路径：http:/www.NetB /index.htm。 (2) 相对路径 为了避免绝对路径的缺陷，对于在本站点之中的链接来说，使用相对路径是一个很好的方法。相对路径可以表述源端点同目标端点之间的相互位置，它同源端点的位置密切相关。 如果链接中源端点和目标端点位于一个目录下，则在链接路径中只需要指明目标端点的文档名就可以了。例如，在站点中，如果希望在如图5.61所示science目录的computer.htm文档中创建指向computer目录中math.htm文档的链接，可以使用如下的相对路径：math.htm。 如果在链接中源端点和目标端点不位于同一个目录下，则只需要将目录的相对关系表达出来就可以了。如果链接指向的文档位于当前目录的子级目录中，可以直接输入目录名和文档名。例如，如果希望在index.htm文档中创建指向位于图5.61所示science目录中的math.htm文档的链接，可以使用如下的相对路径：science/math.htm。 如果链接指向的文档没有位于当前目录的子级目录中，则可以利用“”符号来表示当前位置的父级目录，利用多个“”符号可以表示更高的父级目录，从而构建出目录的相对位置。例如，如果希望在science目录中的math.htm文档中创建指向位于网站根目录中的index.htm文档的链接，可以使用如下的相对路径：/ index.htm。,5.3.6 创建与管理链接,(3) 基于根目录的路径 基于根目录的路径可以看作是绝对路径和相对路径之间的一种折衷表示方式。在这种路径表达方式中，所有的路径都是从站点的根目录开始的，它同源端点的位置无关。通常用一个斜线“/”表示根目录，所有基于根目录的路径都从该斜线开始。 假设在站点中要创建指向如图5.61所示science目录中的computer.htm文档的链接，则可以使用如下的基于根目录的路径：/science/computer.htm。如果希望在文档中链接主页，则必须指定主页的名称，如下所示：/index.html。 1) 链接到文档 最常见的链接是创建于文档之间的链接，利用这种链接，可以从一个文档跳转到另一个文档，如图5.62所示。 使用Dreamweaver可以有几种方式创建本地链接(在同一站点的文档间)。用户可以使用站点地图查看、创建、更改或删除链接或在文档窗口中使用【修改】菜单中的【创建链接】命令，选择链接指向的文件；也可以使用【属性】面板来链接文件，单击【浏览文件】图标选择文件，也可以使用【指向文件】图标选择文件，或者直接输入文件路径。,5.3.6 创建与管理链接,使用【属性】面板可以方便地为文本或图像添加链接。为这些元素创建链接的具体操作如下： (1) 选中要作为链接的文本或图像等网页元素。 (2) 在【属性】面板的【链接】文本框中，输入链接的路径，即目标端点的URL。在这里我们为导航条“首页”输入相对路径：/index.html。 (3) 在【属性】面板的【目标】下拉列表框中，可以指定链接文档打开的框架，如图5.63所示，其含义如下： _blank：在一个新的未命名的浏览器窗口中加载链接文件。 _parent：在父框架页或包含该链接的框架所在窗口中加载文件。如果包含该链接的框架是嵌套的，链接文件将在浏览器窗口中打开。 _self：将链接文件加载到与链接相同的框架或窗口中，该目标是默认值，所以通常用户不需要指定它。 _top：将在整个浏览器窗口中加载链接文件，同时移除所有框架。 如果超链接指向的文档不是一个HTML文档，而是其他类型的文档，那么单击链接之后出现的结果也不相同。如果链接的文档是诸如GIF、JPG或PNG之类的图像，则仍然会在浏览器的窗口中载入它们。如果链接的文档是浏览器不能识别的文档，例如一个带有.zip扩展名的压缩文件，或带有.exe扩展名的执行文件，则通常浏览器会打开类似图5.64所示的对话框，询问用户是否要下载该文件。在Internet中经常利用这种方式为用户提供文件下载功能。,5.3.6 创建与管理链接,对于超文本类型的链接来说，链接文本有以下几种颜色状态： 未访问链接的文本颜色。 已访问链接的文本颜色。 正在访问的链接的文本颜色。 在默认状态下，颜色的类型由浏览器决定。例如，在大多数情况下，多数浏览器将未访问链接的文本颜色显示为蓝色。也可以利用设置文档的【页面属性】或设置选择器【CSS样式】的方式在文档中控制链接的颜色。 2) 链接到命名锚记 用户可以使用【属性】面板链接到文档的指定段中，但首先要创建命名锚记。命名锚记使用户可以在文档中设置标签，通常锚记被放置在指定主题或文档的顶部。然后用户就可以创建指向这些命名锚记的链接，它将把用户的来访者迅速带到指定位置。 创建指向命名锚记的链接分两个步骤进行。首先要创建命名锚记，然后再创建指向该命名锚记的链接。 创建命名锚记的操作，有时候被称作“抛锚”。要在文档中创建命名锚记，其具体操作如下： (1) 将插入点放在要命名锚记的地方，或选中要为指定命名锚记的文本。 (2) 如图5.65(a)所示，单击【插入】|【命名锚记】命令，或如图5.65(b)所示，在【插入】面板上单击【命名锚记】按钮。,5.3.6 创建与管理链接,3) 创建电子邮件链接 建设好的站点需要不断地自我完善和提高，因此从浏览者那里及时获取意见和建议是非常重要的。在很多情况下，需要将网站操作员的E-mail地址保留在网页上，以便于及时获取外界反馈信息，这时可以在网页中创建E-mail链接。 E-mail链接是一种特殊的链接，单击这种链接，不是跳转到相应的网页上，也不是下载相应的文件，而是会启动用户计算机中相应的E-mail发送程序，打开电子邮件模板书写邮件，并发往指定的地址。要创建E-mail链接，其具体操作如下： (1) 选中要作为超链接的文本或图像。 (2) 如图5.66(a)所示，单击【插入】|【电子邮件链接】命令，或如图5.67(b)所示在【插入】面板上单击【电子邮件链接】按钮。这时会出现如图5.68所示的对话框，提示用户输入创建电子邮件链接的一些必要信息。 (3) 如果已经选中了要作为链接的文本，则在该对话框的【文本】文本框中会出现选中的文本，也可以在这里修改作为链接的文本。 (4) 在E-Mail文本框中，输入电子邮件地址：“NetBook”。 (5) 设置完毕，单击【确定】按钮，这时文档中就出现了一个链接。单击该链接，可以打开相应的电子邮件程序来书写邮件。 用户也可以直接在【属性】面板中为文本或图像创建电子邮件链接：首先选中要作为超链接的文本或图像；然后在【属性】面板的【链接】文本框中输入“mailto:”，其后紧接电子邮件地址，如“mailto: NetBook”，如图5.68所示。,5.3.6 创建与管理链接,假设用户的电子邮件程序是Foxmail，则单击上述代码对应的链接后，会启动Foxmail，同时相应的邮件地址信息“NetBook”会出现在【收件人】文本框中，如图5.69所示。 4) 创建空链接和脚本链接 链接到文档和链接到命名锚记，是超链接最主要的两种形式。然而事实上还存在一些特殊的链接类型，如空链接和脚本链接，利用这些链接可以完成一些很特别的功能。 所谓空链接，就是没有经过指派目标端点的链接。利用空链接，可以激活文档中链接对应的对象或文本。一旦对象或文本被激活，则可以为之添加一个行为，以实现当鼠标移动到链接上时进行切换图像或显示分层等动作。 要创建空链接，首先在文档窗口中选中要设置链接的文本、图像或其他对象，然后在【属性】面板的【链接】文本框中，只输入一个“#”号，如图5.70所示。,5.3.6 创建与管理链接,图5.61 网上书库中science目录中的computer.htm,5.3.6 创建与管理链接,图 5.62 文档之间的链接,5.3.6 创建与管理链接,图