网站开发工具第8章课件

第8章用Dreamweaver丰富网页的内容8.1在网页中使用图像8.2在网页中使用动画对象8.3在网页中插入视频8.4在网页中插入音频8.5在网页中使用层8.6时间轴特效第8章用Dreamweaver丰富网页的内容1本章知识技能要点：网页中图像的应用影像地图超链接的制作网页中插入Flash动画网页中插入视频和音频时间轴动画的制作本章知识技能要点：网页中图像的应用28.1在网页中使用图像网页中使用的图像文件的格式有以下三种：GIF格式（图形交换格式）JPEG格式（联合图像专家组格式）PNG格式（可移植网络图形格式）8.1在网页中使用图像网页中使用的图像文件的格式有以下三38.1.1插入图像插入图像操作可以选择以下任意一种方法：（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。（2）使用插入栏：单击插入栏“插入图像”按钮，选则在展开的菜单中单击“图像”按钮，弹出“选择图像源文件”对话框，其余操作同上。（3）使用面板组“资源”面板：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标直接拖动到工作区的合适位置。或者单击面板下方的“插入”按钮。8.1.1插入图像48.1.2设置图像属性可以在图像的属性检查器中设置图像的属性。当选择网页中的一幅图像时，在属性检查器上将反映该图像的属性。如图。8.1.2设置图像属性58.1.3图文混排在Dreamweaver中，插入的图像被视为一般字符。选择所需图像后，可在图像属性检查器中的“对齐”下拉列表框中选择要使用的对齐方式。使用缺省的对齐方式使用左对齐的对齐方式8.1.3图文混排使用缺省的对齐方式使用左对齐的对齐方式68.1.4编辑图像1、调整图像大小拖动图像右侧、下侧或顶角的选择控制柄，可以调整图像的宽度、高度或者宽度和高度同时调整。2、裁剪图像选择要裁剪的图像，并单击图像属性检查器中的“裁剪”按钮。8.1.4编辑图像73、调整图像亮度和对比度选择图像后，可单击图像属性检查器中的“亮度和对比度”按钮，弹出“亮度/对比度”对话框，拖动“亮度”和“对比度”滑块。便可改变图像的亮度和对比度。3、调整图像亮度和对比度84、给图像描边给图像描边能够增加图片的美观。其操作步骤是：选中一个图像，在属性面板的“边框”栏中填入一个数值，作为边框的粗细，例如“3”。这就给图像加了一个粗细为3像素的边框。5、设置图像边距如果图像是嵌入在表格中的（这样做更加有利于排版），设置图像边距的作用，可以使图像和表格边框产生一个边距，也会和相邻的文字或者其它图片产生一个边距。4、给图像描边9例：选中一个图片，在属性面板中，给垂直边距和水平边距输入相应的数值。例：108.1.5插入鼠标经过图像所谓“插入鼠标经过图像”就是当浏览者的鼠标滑过一个图像时，立即显示另一个图像。插入鼠标经过图像的步骤是：（1）选择“插入”→“图像对象”→“鼠标经过图像”命令。（2）弹出“插入鼠标经过图像”对话框，其中的：“原始图像”为页面上自然状态图像，点击其右侧的“浏览”按钮，选择一个图像。“鼠标经过图像”是当浏览者的鼠标划过这一图像时显示出的另一个图像，点击其右侧的“浏览”按钮。8.1.5插入鼠标经过图像11网站开发工具第8章课件128.1.6创建图像地图图像地图的作用就是当浏览者点击一个图像的某个不同部分，可以链接到另一个新的网页。也即指在一张图片上实现多个局部区域指向不同的网页链接。制作步骤如下：（1）首先插入图片。单击图片，属性面板上出现三个不同形状的热点工具。如图：8.1.6创建图像地图13（2）利用展开的属性面板上的热点工具在画面上绘制热区。图中高亮的区域就是绘制出的一个矩形热点区域。（2）利用展开的属性面板上的热点工具在画面上绘制热区。图中高14（4）保存页面。（3）属性面板改换为热点面板如图：链接输入框：填入相应的链接地址；替代框：填入提示文字说明；目标框：选择目标窗口打开方式。（4）保存页面。（3）属性面板改换为热点面板如图：15网页中经常使用的动画文件有：GIF动画和Flash动画。在网页中插入GIF动画的方法以及对GIF动画的处理如同对一般图象的方法完全相同。网页中通常使用的是Flash文件是SWF文件（.swf），又称为Flash电影文件。8.2在网页中使用动画对象网页中经常使用的动画文件有：GIF动画和Flash动画。168.2.1Flash按钮对象Flash按钮是指在网页中具有Flash动画效果的按钮元件，在Dreamweaver中预置了大量的Flash按钮。操作的步骤是：（1）选择“插入”菜单→“媒体”→“Flash按钮”，弹出“插入Flash按钮”对话框。（2）在图中的“样式”类表里选择需要的按钮样式，然后按照提示，设置其它选项，然后单击“确定”按钮。8.2.1Flash按钮对象178.2.2Flash文本对象

Flash文本是指在网页中具有Flash动画效果的文字对象，当鼠标滑过该文本时，文字的颜色会发生变化。操作的步骤是：（1）选择“插入”菜单→“媒体”→“Flash文本”命令，弹出“插入Flash文本”对话框。如下图。（2）在“文本”文本框中输入所需文本；“颜色”中设置的颜色是该文本在自然状态下显示的颜色；“转滚颜色”中设置的颜色是该文本当鼠标滑过时显示的颜色。设置其它所需选项，然后单击“应用”或“确定”按钮。8.2.2Flash文本对象188.2.3插入Flash电影单击“插入”工具栏中“常用”类别的“媒体”按钮右侧的箭头，从中选择“Flash”命令，在弹出的“选择文件”对话框中选择所需的Flash影片文件（其扩展名应为.swf）,单击“确定”按钮，即可在文档窗口中出现一个Flash影片占位符，如图:单击属性检查器中的“播放”按钮，即可在文档窗口中播放此影片，如图。8.2.3插入Flash电影单击属性检查器中的“播198.3在网页中插入视频在网页中使用视频的方法通常有以下两种：方法一：将视频剪辑放入站点文件夹，然后，在页面上输入链接文本，并选择该文本，再在属性检查器中单击“链接”文本框右边的文件夹图标，选择并打开该剪辑，使其显示在“链接”文本框中，如图：8.3在网页中插入视频在网页中使用视频的方法通常有以下20方法二：

选择“插入”菜单→“媒体”→插件”，弹出“选择文件”对话框，选择视频剪辑文件，单击“确定”。在文档窗口中出现一个插件占位符，如图：

（这个占位符的大小即为浏览器播放该视频的窗口大小，一般需要在属性面板上修改它的大小尺寸。）方法二：218.4在网页中插入音频1、链接到声音文件首先要选择要用于指向音频文件的链接的文本或图像，然后在属性检查器中单击“链接”选项中的文件夹图标，在弹出对话框中选择该音频文件。2、嵌入声音文件单击“插入”工具栏“常用”类别中的”媒体”按钮右侧的箭头，在弹出菜单中选择”插件”命令，在弹出的“选择文件”对话框中选择所需的声音文件，单击“确定”按钮，即可在文档中插入一个插件占位符。8.4在网页中插入音频1、链接到声音文件223、插入背景音乐打开“行为”面板，选择“+”“播放声音”，在弹出的对话框中选择所需的声音文件，即插入了一个插件占位符。在页面中选择该插件图标，打开属性面板中的“参数”，修改“AutoStart”和“Loop”后面的“Value”值为“true”，这样就达到打开页面背景音乐就响起的效果。

3、插入背景音乐238.5在网页中使用层层（Layer）是一种HTML页面元素，利用层可以将网页元素定位在页面上的任意位置。层可以包含文本、图像或其它HTML文档。下图是一个含有两个层的页面文档编辑状态，按住“选择柄”，可以将层拖拽到任意位置；通过“调整柄”可以调整层的大小。8.5在网页中使用层层（Layer）是一种HTM248.5.1在网页中插入层方法一：由“插入”菜单“布局对象”“层”，在文档的插入点处就会插入一个空的层。方法二：通过点击“插入”栏中“布局”类里的“绘制层”按钮，也可以在文档中插入一个空的层。8.5.1在网页中插入层258.5.2层的属性设置在层中可以插入其他任何元素，包括图片、文字、链接、表格等等。一个页面中可以有很多的层，这些层可以布置在页面上的任何位置，不仅可以平铺，还可以相互重叠。下图显示的是一个空的绘制层。8.5.2层的属性设置26在网页中设置的所有的层都会列在层面板中。层的属性：层有隐藏和显示的属性。单击层面板列表的左边，可以打开关闭眼睛。眼睛睁开和关闭表示层的显示和隐藏。层还有一个概念就是叠放的顺序数，在面板中用“Z”值表示。层面板上面还有一个参数就是防止层重叠。在网页中设置的所有的层都会列在层面板中。278.5.3层和表格之间转换

Dreamweaver可以使用层来创建自己的布局，然后将它们转换为表格。在转换为表格之前，首先应确保层没有重叠。然后执行以下操作：选择“修改”菜单→“转换”→“层到表格”，打开“转换层为表格”对话框。如图:选择所需的选项。单击“确定”。8.5.3层和表格之间转换28

若要将表转换为层，则选择“修改”菜单→“转换”→“表格到层”，打开“转换表格为层”对话框。如图：选择所需的选项，然后单击“确定”。若要将表转换为层，则选择“修改”菜单→“转换”→“表格298.6时间轴特效时间轴可以通过在不同的时间改变层的位置、大小、可见性和叠放顺序等来创建动画。其原理是将画面连起来播放，产生运动的效果。时间轴动画的基本单位是一个画面，也叫做帧，而其中起关键性作用的、可以影响整个动画的帧叫做关键帧。8.6时间轴特效时间轴可以通过在不同的时间改变层308.6.1时间轴面板

时间轴面板能够显示层和图像随时间变化的属性。选择“窗口”→“时间轴”命令，即可显示时间轴面板。如图所示。8.6.1时间轴面板318.6.2创建时间轴动画时间轴动画是在浏览器浏览网页时让一个层随时间的变化而不断的改变它的位置。创建步骤如下：（1）添加对象到时间轴先在页面上插入一个层，并在层中插入要移动的元素，再把层移到动画的起始位置，然后选择要制作动画的层，再选择“修改”→“时间轴”→“增加对象到时间轴命令”，如图：8.6.2创建时间轴动画32（2）记录层路径选择所需的层后，将该层移动到动画的起始处，并保持该层被选择状态，选择“修改”→“时间轴”→“录制层路径”命令，然后在页面上拖动层，即可创建想要的运动路径。此时，若勾选时间轴面板上的“自动播放”选项，打开网页时就会直接自动播放该动画。若勾选时间轴面板上的“循环”选项，该动画的播放就会循环往复进行。（2）记录层路径338.6.4控制时间轴的行为例如想要网页运行时，浏览者鼠标单击漂移的层就让其停止移动，制作的步骤如下：（1）在时间轴面板的行为通道中单击，打开行为面板，单击“添加行为”按钮，在展开的下拉菜单中选择“时间轴”→“停止时间轴”。如图。8.6.4控制时间轴的行为34（2）在弹出的“停止时间轴”对话框中，选择要停止的时间轴“Timeline1”。点击“确定”。（3）在事件栏列表中选择触发该动作的事件，如“onMouseDown”（当鼠标单击时），如图。（4）完成后，在行为面板中出现该事件的设置，如图。预览时，鼠标单击该层就会停止层的漂移。（2）在弹出的“停止时间轴”对话框中，选择要停止的时间轴“T35第8章用Dreamweaver丰富网页的内容8.1在网页中使用图像8.2在网页中使用动画对象8.3在网页中插入视频8.4在网页中插入音频8.5在网页中使用层8.6时间轴特效第8章用Dreamweaver丰富网页的内容36本章知识技能要点：网页中图像的应用影像地图超链接的制作网页中插入Flash动画网页中插入视频和音频时间轴动画的制作本章知识技能要点：网页中图像的应用378.1在网页中使用图像网页中使用的图像文件的格式有以下三种：GIF格式（图形交换格式）JPEG格式（联合图像专家组格式）PNG格式（可移植网络图形格式）8.1在网页中使用图像网页中使用的图像文件的格式有以下三388.1.1插入图像插入图像操作可以选择以下任意一种方法：（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。（2）使用插入栏：单击插入栏“插入图像”按钮，选则在展开的菜单中单击“图像”按钮，弹出“选择图像源文件”对话框，其余操作同上。（3）使用面板组“资源”面板：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标直接拖动到工作区的合适位置。或者单击面板下方的“插入”按钮。8.1.1插入图像398.1.2设置图像属性可以在图像的属性检查器中设置图像的属性。当选择网页中的一幅图像时，在属性检查器上将反映该图像的属性。如图。8.1.2设置图像属性408.1.3图文混排在Dreamweaver中，插入的图像被视为一般字符。选择所需图像后，可在图像属性检查器中的“对齐”下拉列表框中选择要使用的对齐方式。使用缺省的对齐方式使用左对齐的对齐方式8.1.3图文混排使用缺省的对齐方式使用左对齐的对齐方式418.1.4编辑图像1、调整图像大小拖动图像右侧、下侧或顶角的选择控制柄，可以调整图像的宽度、高度或者宽度和高度同时调整。2、裁剪图像选择要裁剪的图像，并单击图像属性检查器中的“裁剪”按钮。8.1.4编辑图像423、调整图像亮度和对比度选择图像后，可单击图像属性检查器中的“亮度和对比度”按钮，弹出“亮度/对比度”对话框，拖动“亮度”和“对比度”滑块。便可改变图像的亮度和对比度。3、调整图像亮度和对比度434、给图像描边给图像描边能够增加图片的美观。其操作步骤是：选中一个图像，在属性面板的“边框”栏中填入一个数值，作为边框的粗细，例如“3”。这就给图像加了一个粗细为3像素的边框。5、设置图像边距如果图像是嵌入在表格中的（这样做更加有利于排版），设置图像边距的作用，可以使图像和表格边框产生一个边距，也会和相邻的文字或者其它图片产生一个边距。4、给图像描边44例：选中一个图片，在属性面板中，给垂直边距和水平边距输入相应的数值。例：458.1.5插入鼠标经过图像所谓“插入鼠标经过图像”就是当浏览者的鼠标滑过一个图像时，立即显示另一个图像。插入鼠标经过图像的步骤是：（1）选择“插入”→“图像对象”→“鼠标经过图像”命令。（2）弹出“插入鼠标经过图像”对话框，其中的：“原始图像”为页面上自然状态图像，点击其右侧的“浏览”按钮，选择一个图像。“鼠标经过图像”是当浏览者的鼠标划过这一图像时显示出的另一个图像，点击其右侧的“浏览”按钮。8.1.5插入鼠标经过图像46网站开发工具第8章课件478.1.6创建图像地图图像地图的作用就是当浏览者点击一个图像的某个不同部分，可以链接到另一个新的网页。也即指在一张图片上实现多个局部区域指向不同的网页链接。制作步骤如下：（1）首先插入图片。单击图片，属性面板上出现三个不同形状的热点工具。如图：8.1.6创建图像地图48（2）利用展开的属性面板上的热点工具在画面上绘制热区。图中高亮的区域就是绘制出的一个矩形热点区域。（2）利用展开的属性面板上的热点工具在画面上绘制热区。图中高49（4）保存页面。（3）属性面板改换为热点面板如图：链接输入框：填入相应的链接地址；替代框：填入提示文字说明；目标框：选择目标窗口打开方式。（4）保存页面。（3）属性面板改换为热点面板如图：50网页中经常使用的动画文件有：GIF动画和Flash动画。在网页中插入GIF动画的方法以及对GIF动画的处理如同对一般图象的方法完全相同。网页中通常使用的是Flash文件是SWF文件（.swf），又称为Flash电影文件。8.2在网页中使用动画对象网页中经常使用的动画文件有：GIF动画和Flash动画。518.2.1Flash按钮对象Flash按钮是指在网页中具有Flash动画效果的按钮元件，在Dreamweaver中预置了大量的Flash按钮。操作的步骤是：（1）选择“插入”菜单→“媒体”→“Flash按钮”，弹出“插入Flash按钮”对话框。（2）在图中的“样式”类表里选择需要的按钮样式，然后按照提示，设置其它选项，然后单击“确定”按钮。8.2.1Flash按钮对象528.2.2Flash文本对象

Flash文本是指在网页中具有Flash动画效果的文字对象，当鼠标滑过该文本时，文字的颜色会发生变化。操作的步骤是：（1）选择“插入”菜单→“媒体”→“Flash文本”命令，弹出“插入Flash文本”对话框。如下图。（2）在“文本”文本框中输入所需文本；“颜色”中设置的颜色是该文本在自然状态下显示的颜色；“转滚颜色”中设置的颜色是该文本当鼠标滑过时显示的颜色。设置其它所需选项，然后单击“应用”或“确定”按钮。8.2.2Flash文本对象538.2.3插入Flash电影单击“插入”工具栏中“常用”类别的“媒体”按钮右侧的箭头，从中选择“Flash”命令，在弹出的“选择文件”对话框中选择所需的Flash影片文件（其扩展名应为.swf）,单击“确定”按钮，即可在文档窗口中出现一个Flash影片占位符，如图:单击属性检查器中的“播放”按钮，即可在文档窗口中播放此影片，如图。8.2.3插入Flash电影单击属性检查器中的“播548.3在网页中插入视频在网页中使用视频的方法通常有以下两种：方法一：将视频剪辑放入站点文件夹，然后，在页面上输入链接文本，并选择该文本，再在属性检查器中单击“链接”文本框右边的文件夹图标，选择并打开该剪辑，使其显示在“链接”文本框中，如图：8.3在网页中插入视频在网页中使用视频的方法通常有以下55方法二：

选择“插入”菜单→“媒体”→插件”，弹出“选择文件”对话框，选择视频剪辑文件，单击“确定”。在文档窗口中出现一个插件占位符，如图：

（这个占位符的大小即为浏览器播放该视频的窗口大小，一般需要在属性面板上修改它的大小尺寸。）方法二：568.4在网页中插入音频1、链接到声音文件首先要选择要用于指向音频文件的链接的文本或图像，然后在属性检查器中单击“链接”选项中的文件夹图标，在弹出对话框中选择该音频文件。2、嵌入声音文件单击“插入”工具栏“常用”类别中的”媒体”按钮右侧的箭头，在弹出菜单中选择”插件”命令，在弹出的“选择文件”对话框中选择所需的声音文件，单击“确定”按钮，即可在文档中插入一个插件占位符。8.4在网页中插入音频1、链接到声音文件573、插入背景音乐打开“行为”面板，选择“+”“播放声音”，在弹出的对话框中选择所需的声音文件，即插入了一个插件占位符。在页面中选择该插件图标，打开属性面板中的“参数”，修改“AutoStart”和“Loop”后面的“Value”值为“true”，这样就达到打开页面背景音乐就响起的效果。

3、插入背景音乐588.5在网页中使用层层（Layer）是一种HTML页面元素，利用层可以将网页元素定位在页面上的任意位置。层可以包含文本、图像或其它HTML文档。下图是一个含有两个层的页面文档编辑状态，按住“选择柄”，可以将层拖拽到任意位置；通过“调整柄”可以调整层的大小。8.5在网页中使用层层（Layer）是一种HTM598.5.1在网页中插入层方法一：由“插入”菜单“布局对象”“层”，在文档的插入点处就会插入一个空的层。方法二：通过点击“插入”栏中“布局”类里的“绘制层”按钮，也可以在文档中插入一个空的层。8.5.1在网页中插入层608.5.2层的属性设置在层中可以插入其他任何元素，包括图片、文字、链接、表格等等。一个页面中可以有很多的层，这些层可以布置在页面上的任何位置，不仅可以平铺，还可以相互重叠。下图显示的是一个空的绘制层。8.5.2层的属性设置61在网页中设置的所有的层都会列在层面板中。层的属性：层有隐藏和显示的属性。单击层面板列表的左边，可以打开关闭眼睛。眼睛睁开和关闭表示层的显示和隐藏。层还有一个概念就是叠放的顺序数，在面板中用“Z”值表示。层面板上面还有一个参数就是防止层重叠。在网页中设置的所有的层都会列在层面板中。628.5.3层和表格之间转换

Dreamweaver可以使用层来创建自己的布局，然后将它们转换为表格。在转换为表格之前，首先应确保层没有重叠。然后执行以下操作：选择“修改”菜单→“转换”→“层到表格”，打开“转换层为表格”对话框。如图:选择所需的选项。单击“确定”。8.5.