网站开发工具第8章

1、第8章 用Dreamweaver丰富网页的内容 8.1 在网页中使用图像 8.2 在网页中使用动画对象 8.3 在网页中插入视频 8.4 在网页中插入音频 8.5 在网页中使用层 8.6 时间轴特效本章知识技能要点：网页中图像的应用影像地图超链接的制作网页中插入Flash动画网页中插入视频和音频时间轴动画的制作8.1 在网页中使用图像 网页中使用的图像文件的格式有以下三种：GIF格式（图形交换格式）JPEG格式（联合图像专家组格式）PNG格式（可移植网络图形格式）8.1.1 插入图像 插入图像操作可以选择以下任意一种方法：（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话

2、框，选中该图像文件，单击确定。（2）使用插入栏：单击插入栏“插入图像”按钮，选则在展开的菜单中单击“图像”按钮，弹出“选择图像源文件”对话框，其余操作同上。（3）使用面板组“资源”面板：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标直接拖动到工作区的合适位置。或者单击面板下方的“插入”按钮。8.1.2 设置图像属性 可以在图像的属性检查器中设置图像的属性。当选择网页中的一幅图像时，在属性检查器上将反映该图像的属性。如图。8.1.3 图文混排 在Dreamweaver中，插入的图像被视为一般字符。选择所需图像后，可在图像属性检查器中的“对齐”下拉列表框中选择要使用的对齐方式。使用缺省的对齐方

3、式使用左对齐的对齐方式8.1.4 编辑图像1、调整图像大小 拖动图像右侧、下侧或顶角的选择控制柄，可以调整图像的宽度、高度或者宽度和高度同时调整。2、裁剪图像 选择要裁剪的图像，并单击图像属性检查器中的“裁剪”按钮 。 3、调整图像亮度和对比度 选择图像后，可单击图像属性检查器中的“亮度和对比度”按钮，弹出“亮度/对比度”对话框，拖动“亮度”和“对比度”滑块。便可改变图像的亮度和对比度。4、给图像描边 给图像描边能够增加图片的美观。其操作步骤是： 选中一个图像，在属性面板的“边框”栏中填入一个数值，作为边框的粗细，例如“3”。这就给图像加了一个粗细为3像素的边框。5、设置图像边距 如果图像是嵌

4、入在表格中的（这样做更加有利于排版），设置图像边距的作用，可以使图像和表格边框产生一个边距，也会和相邻的文字或者其它图片产生一个边距。例：选中一个图片，在属性面板中，给垂直边距和水平边距输入相应的数值。8.1.5 插入鼠标经过图像 所谓“插入鼠标经过图像”就是当浏览者的鼠标滑过一个图像时，立即显示另一个图像。插入鼠标经过图像的步骤是： （1）选择“插入”“图像对象”“鼠标经过图像”命令。 （2）弹出“插入鼠标经过图像”对话框，其中的：“原始图像”为页面上自然状态图像，点击其右侧的“浏览”按钮，选择一个图像。“鼠标经过图像”是当浏览者的鼠标划过这一图像时显示出的另一个图像，点击其右侧的“浏览”按

5、钮。8.1.6 创建图像地图 图像地图的作用就是当浏览者点击一个图像的某个不同部分，可以链接到另一个新的网页。也即指在一张图片上实现多个局部区域指向不同的网页链接。 制作步骤如下： （1）首先插入图片。单击图片，属性面板上出现三个不同形状的热点工具。如图： （2）利用展开的属性面板上的热点工具在画面上绘制热区。图中高亮的区域就是绘制出的一个矩形热点区域。 （4）保存页面。（3）属性面板改换为热点面板如图： 链接输入框：填入相应的链接地址； 替代框：填入提示文字说明； 目标框：选择目标窗口打开方式。 网页中经常使用的动画文件有：GIF动画和Flash动画。 在网页中插入GIF动画的方法以及对GI

6、F动画的处理如同对一般图象的方法完全相同。 网页中通常使用的是Flash文件是SWF文件（.swf），又称为Flash电影文件。8.2 在网页中使用动画对象8.2.1 Flash按钮对象 Flash按钮是指在网页中具有Flash动画效果的按钮元件，在Dreamweaver中预置了大量的Flash按钮。 操作的步骤是： （1）选择“插入”菜单“媒体”“Flash按钮”，弹出“插入Flash按钮”对话框。 （2）在图中的“样式”类表里选择需要的按钮样式，然后按照提示，设置其它选项，然后单击“确定”按钮。8.2.2 Flash文本对象 Flash文本是指在网页中具有Flash动画效果的文字对象，当鼠

7、标滑过该文本时，文字的颜色会发生变化。 操作的步骤是： （1）选择“插入”菜单“媒体”“Flash文本”命令，弹出“插入Flash文本”对话框。如下图。 （2）在“文本”文本框中输入所需文本；“颜色”中设置的颜色是该文本在自然状态下显示的颜色；“转滚颜色”中设置的颜色是该文本当鼠标滑过时显示的颜色。设置其它所需选项，然后单击“应用”或“确定”按钮。8.2.3 插入Flash电影 单击“插入”工具栏中“常用”类别的“媒体”按钮右侧的箭头，从中选择“Flash”命令，在弹出的“选择文件”对话框中选择所需的Flash影片文件（其扩展名应为.swf）, 单击“确定”按钮，即可在文档窗口中出现一个Fla

8、sh影片占位符，如图: 单击属性检查器中的“播放”按钮，即可在文档窗口中播放此影片，如图。8.3 在网页中插入视频 在网页中使用视频的方法通常有以下两种： 方法一： 将视频剪辑放入站点文件夹，然后，在页面上输入链接文本，并选择该文本，再在属性检查器中单击“链接”文本框右边的文件夹图标，选择并打开该剪辑，使其显示在“链接”文本框中，如图：方法二： 选择“插入”菜单“媒体”插件”，弹出“选择文件”对话框，选择视频剪辑文件，单击“确定”。在文档窗口中出现一个插件占位符，如图： （这个占位符的大小即为浏览器播放该视频的窗口大小，一般需要在属性面板上修改它的大小尺寸。）8.4 在网页中插入音频1、链接到

9、声音文件 首先要选择要用于指向音频文件的链接的文本或图像，然后在属性检查器中单击“链接”选项中的文件夹图标，在弹出对话框中选择该音频文件。2、嵌入声音文件 单击“插入”工具栏“常用”类别中的”媒体”按钮右侧的箭头，在弹出菜单中选择”插件”命令，在弹出的“选择文件”对话框中选择所需的声音文件，单击“确定”按钮，即可在文档中插入一个插件占位符。3、插入背景音乐 打开“行为”面板，选择“+”“播放声音”，在弹出的对话框中选择所需的声音文件，即插入了一个插件占位符。 在页面中选择该插件图标，打开属性面板中的“参数”，修改“AutoStart”和“Loop”后面的“Value”值为“true”，这样就达

10、到打开页面背景音乐就响起的效果。8.5 在网页中使用层 层（Layer）是一种 HTML 页面元素，利用层可以将网页元素定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。下图是一个含有两个层的页面文档编辑状态，按住“选择柄”，可以将层拖拽到任意位置；通过“调整柄”可以调整层的大小。8.5.1 在网页中插入层方法一： 由“插入”菜单“布局对象”“层”，在文档的插入点处就会插入一个空的层。方法二： 通过点击“插入”栏中“布局”类里的“绘制层”按钮，也可以在文档中插入一个空的层。 8.5.2 层的属性设置 在层中可以插入其他任何元素，包括图片、文字、链接、表格等等。 一个页面中可以

11、有很多的层，这些层可以布置在页面上的任何位置，不仅可以平铺，还可以相互重叠。下图显示的是一个空的绘制层。 在网页中设置的所有的层都会列在层面板中。 层的属性：层有隐藏和显示的属性。单击层面板列表的左边，可以打开关闭眼睛。眼睛睁开和关闭表示层的显示和隐藏。层还有一个概念就是叠放的顺序数，在面板中用“Z”值表示。层面板上面还有一个参数就是防止层重叠。8.5.3层和表格之间转换 Dreamweaver可以使用层来创建自己的布局，然后将它们转换为表格。 在转换为表格之前，首先应确保层没有重叠。然后执行以下操作： 选择“修改”菜单“转换”“层到表格”，打开“转换层为表格”对话框。如图: 选择所需的选项。

12、单击“确定”。 若要将表转换为层，则选择“修改”菜单“转换”“表格到层”，打开“转换表格为层”对话框。如图： 选择所需的选项，然后单击“确定”。8.6 时间轴特效 时间轴可以通过在不同的时间改变层的位置、大小、可见性和叠放顺序等来创建动画。其原理是将画面连起来播放，产生运动的效果。 时间轴动画的基本单位是一个画面，也叫做帧，而其中起关键性作用的、可以影响整个动画的帧叫做关键帧。8.6.1 时间轴面板 时间轴面板能够显示层和图像随时间变化的属性。 选择“窗口”“时间轴”命令，即可显示时间轴面板。如图所示。8.6.2 创建时间轴动画 时间轴动画是在浏览器浏览网页时让一个层随时间的变化而不断的改变它

13、的位置。创建步骤如下：（1）添加对象到时间轴 先在页面上插入一个层，并在层中插入要移动的元素，再把层移到动画的起始位置，然后选择要制作动画的层，再选择“修改”“时间轴”“增加对象到时间轴命令”，如图：（2）记录层路径 选择所需的层后，将该层移动到动画的起始处，并保持该层被选择状态，选择“修改”“时间轴”“录制层路径”命令，然后在页面上拖动层，即可创建想要的运动路径。 此时，若勾选时间轴面板上的“自动播放”选项，打开网页时就会直接自动播放该动画。若勾选时间轴面板上的“循环”选项，该动画的播放就会循环往复进行。8.6.4 控制时间轴的行为 例如想要网页运行时，浏览者鼠标单击漂移的层就让其停止移动，制作的步骤