网站开发工具第8章节.ppt

第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）使用插入栏：单击插入栏“插入图像”按钮，选则在展开的菜单中单击“图像”按钮，弹出“选择图像源文件”对话框，其余操作同上。 （3）使用面板组“资源”面板：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标直接拖动到工作区的合适位置。或者单击面板下方的“插入”按钮。 8.1.2 设置图像属性 可以在图像的属性检查器中设置图像的属性。当选择网页中的一幅图像时，在属性检查器上将反映该图像的属性。如图。 8.1.3 图文混排 在Dreamweaver中，插入的图像被视为一般字符。选择所需图像后，可在图像属性检查器中的“对齐”下拉列表框中选择要使用的对齐方式。 8.1.4 编辑图像 1、调整图像大小 拖动图像右侧、下侧或顶角的选择控制柄，可以调整图像的宽度、高度或者宽度和高度同时调整。 2、裁剪图像 选择要裁剪的图像，并单击图像属性检查器中的“裁剪”按钮 。 3、调整图像亮度和对比度 选择图像后，可单击图像属性检查器中的“亮度和对比度”按钮，弹出“亮度/对比度”对话框，拖动“亮度”和“对比度”滑块。便可改变图像的亮度和对比度。 4、给图像描边 给图像描边能够增加图片的美观。其操作步骤是： 选中一个图像，在属性面板的“边框”栏中填入一个数值，作为边框的粗细，例如“3”。这就给图像加了一个粗细为3像素的边框。 5、设置图像边距 如果图像是嵌入在表格中的（这样做更加有利于排版），设置图像边距的作用，可以使图像和表格边框产生一个边距，也会和相邻的文字或者其它图片产生一个边距。 8.1.5 插入鼠标经过图像 所谓“插入鼠标经过图像”就是当浏览者的鼠标滑过一个图像时，立即显示另一个图像。插入鼠标经过图像的步骤是： （1）选择“插入”→“图像对象”→“鼠标经过图像”命令。 （2）弹出“插入鼠标经过图像”对话框，其中的： “原始图像”为页面上自然状态图像，点击其右侧的“浏览”按钮，选择一个图像。 “鼠标经过图像”是当浏览者的鼠标划过这一图像时显示出的另一个图像，点击其右侧的“浏览”按钮。 8.1.6 创建图像地图 图像地图的作用就是当浏览者点击一个图像的某个不同部分，可以链接到另一个新的网页。也即指在一张图片上实现多个局部区域指向不同的网页链接。 制作步骤如下： （1）首先插入图片。单击图片，属性面板上出现三个不同形状的热点工具。如图： （2）利用展开的属性面板上的热点工具在画面上绘制热区。图中高亮的区域就是绘制出的一个矩形热点区域。 （4）保存页面。 网页中经常使用的动画文件有：GIF动画和Flash动画。 在网页中插入GIF动画的方法以及对GIF动画的处理如同对一般图象的方法完全相同。 网页中通常使用的是Flash文件是SWF文件（.swf），又称为Flash电影文件。 8.2.1 Flash按钮对象 Flash按钮是指在网页中具有Flash动画效果的按钮元件，在Dreamweaver中预置了大量的Flash按钮。 操作的步骤是： （1）选择“插入”菜单→“媒体”→“Flash按钮”，弹出“插入Flash按钮”对话框。 （2）在图中的“样式”类表里选择需要的按钮样式，然后按照提示，设置其它选项，然后单击“确定”按钮。 8.2.2 Flash文本对象 Flash文本是指在网页中具有Flash动画效果的文字对象，当鼠标滑过该文本时，文字的颜色会发生变化。 操作的步骤是： （1）选择“插入”菜单→“媒体”→“Flash文本”命令，弹出“插入Flash文本”对话框。如下图。 （2）在“文本”文本框中输入所需文本；“颜色”中设置的颜色是该文本在自然状态下显示的颜色；“转滚颜色”中设置的颜色是该文本当鼠标滑过时显示的颜色。设置其它所需选项，然后单击“应用”或“确定”按钮。 8.2.3 插入Flash电影 单击“插入”工具