第四讲网页设计与制作 DreamweaveCs5.ppt

1、第四讲 多媒体、层,应用多媒体元素,在网页中应用多媒体效果当前十分普遍，例如大量使用Flash动画、视频、声音、Java Applet等使网页动感十足，变化多端。本节内容包括插入Flash元素、插入背景音乐、插入视频、插入图像查看器等内容。重点是插入Flash元素，难点是插入图像查看器。,4.1多媒体基础,4.1.1什么是Flash Flash 是由macromedia公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。并且它是矢量的，所以即使放大也不会出现变形和模糊。这种动画文件体积小，效果华丽，还具有极强地的互动效

2、果，甚至有人利用这种技术制作功能非常强大的游戏。Flash的源文件扩展名为“.fla”，生成的用于网络上传输的Flash格式为“.swf”。 4.1.2视频格式 视频格式有很多种，但是在网络上应用的视频格式多为：avi、wmv、asf、 mpeg、rm、rmvb、mov、Flv等。 4.1.3音频格式 在网络上应用的音频格式多为：wav、mp3、aif、midi、ra、ram、rpm等。,4.1.4插入多媒体 要在网页中添加以上多媒体文件，可以执行【插入】-【媒体】下的子菜单命令如图4-1所示或在“插入”工具栏的“常用”类别中，选择“媒体”，然后单击所需的媒体图标按钮如图4-2所示。,图 4-

3、1【媒体】子菜单,图4-2 插入媒体,4.2多媒体网页效果,4.2.1插入Flash动画 目前flash动画备受世人瞩目，flash动画被大量地用于网页。这种动画文件体积小，效果华丽，还具有极强地的互动效果，甚至有人制作功能非常强大的游戏。 新建网页文档“dmt.htm”。,插入Flash动画步骤如下： （1）先定位光标在应插入的位置。执行【插入】-【媒体】-【Flash】命令或在“插入”工具栏的“常用”类别中，选择“媒体”，然后单击“插入 Flash”图标按扭。显示“选择文件”对话框，如图4-5所示。 （2）选择Flash文件（本例为本章目录下的“banner.swf”文件）。,图4-5 “

4、选择文件”对话框,（3）单击“确定”按钮，显示“对象标签辅助功能属性”对话框，如图4-6所示。各个属性如下： 标题：媒体对象的标题。 快捷键：输入等效的键盘键（一个字母）。例如，您输入A作为快捷键，则使用“Ctrl+A”键在浏览器中选择该对象。 Tab键索引：输入一个数字以指定该对象的Tab键顺序。 设置各个选项如图。,图4-6 “对象标签辅助功能属性”对话框,（4）单击“确定”按钮，文档中效果如图4-7所示。,图4-7 文档中Flash效果,（5）选择该动画，单击Flash属性面板中的播放按钮。Flash动画就可以在文档中直接播放了，如图4-8所示。,图4-8 在文档中播放Flash,4.2

5、.2设置Flash动画的属性 选择Flash动画后，显示Flash属性面板，如图4-9所示。在这里读者可以设置Flash动画的属性。,图4-9设置Flash动画属性,名称：标识影片的名称，比如命名为“banner”。 宽：以像素为单位指定影片的宽度。 高：以像素为单位指定影片的高度。 文件： Flash文件的路径。单击文件夹图标可以选择一个文件，或者直接键入文件路径。 源文件：指定 Flash 源文档（后缀名为.FLA）的路径。 编辑：启动 Flash软件以编辑FLA文件。 重设大小：重新设置选定影片的大小。,循环：若选中该选项时影片将连续播放；若没有选中该选项，则影片在播放一次后即停止播放。

6、 自动播放：若选中该选项，则在加载页面时自动播放影片，一般要选中此项。 垂直边距：指定影片上、下空白的像素数。 水平边距：指定影片左、右空白的像素数。 品质：设置影片播放期间的质量。设置越高，影片的观看效果就越好，但速度慢。设置越低，速度快但影片的观看效果就越差，“高品质”选项是注重外观而非速度。“自动低品质”选项是首先注重速度，然后才是外观。“自动高品质”选项是首先注重品质，然后才是速度。 比例：影片如何适合在宽度和高度文本框中设置的尺寸。默认值设置显示整个影片。有“无边框”和“严格匹配”两选项。 对齐：设置影片在页面上的对齐方式。 背景颜色：设置影片的背景颜色。 参数：影片的附加参数。单击

7、“参数”按钮，显示“参数”对话框，如图4-10所示。在对话框中可以设置多种“参数值”。,图4-10 “参数”对话框,4.2.3插入Flash文本 在Dreamweaver中可以直接制作并插入Flash文本。Flash文本是动态效果的文本。插入Flash文本的步骤如下： （1）在上面制作的表格中第一个单元格内定位鼠标光标。 （2）在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash文本”图标 按扭，或执行【插入】-【媒体】-【Flash文本】命令。 （3）显示“插入 Flash 文本”对话框，对话框中各项属性设置如图4-11所示。,图4-11 “插入 Flash 文本”对话框,（4）

8、单击“确定”按钮，显示“对象标签辅助功能属性”对话框，对话框中各项属性设置如图4-12所示。,图4-12 “对象标签辅助功能属性”对话框,（5）单击“确定”按钮。单击属性面板中的“播放”按钮，播放效果如图4-13所示，当鼠标移动到该Flash文本上时，效果如图4-14所示。,图4-13 文档中播放效果,图4-14 鼠标移动到文本效果,4.2.4插入Flash按钮 Dreamweaver可以快速创建动态Flash按钮，步骤如下： （1）在文档中定位光标，如图4-15所示。,图4-15创建表格并定位光标,（2）在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash 按钮”图标或执行【插入

9、】-【媒体】-【Flash 按钮】命令。 显示“插入 Flash 按钮”对话框，如图4-16所示。,图4-16“插入 Flash 按钮”对话框,（3）设置完成后，单击确定按钮。文档中效果如图4-17所示。 （4）然后再连续插入几个按钮，按快捷键【F12】预览如图4-18所示。,图4-17 文档中Flash,图4-18预览Flash 按钮,4.2.5插入Flash Video Flash Video现在在网站上非常流行。Flash 视频文件后缀名为“.FLV”。插入Flash视频是Dreamweaver 8版本新增加的功能。插入Flash 视频步骤如下。 （1）在文档“dmt.htm” 内定位鼠

10、标。 （2）在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash video”图标或执行【插入】-【媒体】-【Flash视频】命令，显示“插入Flash视频”对话框。 （3）在“插入Flash视频”对话框中，从“视频类型”弹出式菜单中选择“累进式下载视频”或“流视频”。若选择“累进式下载视频”；将 Flash 视频文件下载到站点访问者的硬盘上，然后播放。若选择“流视频”；对Flash视频内容进行流式处理，边缓冲边播放该内容。 （4）比如“视频类型”选择“累进式下载视频”选项： URL：指定FLV文件的路径。 外观：指定Flash视频组件的外观。 宽度：以像素为单位指定FLV文件的宽

11、度。 高度：以像素为单位指定FLV文件的高度。 自动播放：当网页打开时是否播放视频。 自动重新播放：指定播放控件在视频播放完之后是否返回起始位置。,（5）如果必要，提示用户下载 Flash Player：在页面中插入代码，该代码将检测查看Flash视频所需的Flash Player版本，并在用户没有所需的版本时提示它们下载Flash Player的最新版本，设置各个选项如图4-19所示。,图4-19 “插入Flash 视频”对话框,（6）单击“确定”按钮，插入Flash 视频操作完成，如图4-20所示。,图4-20 文档中Flash Video效果,插入Shockwave影片 插入Active

12、X控件 插入Java小程序 插入插件,4.3 插入其他媒体对象,插入Shockwave影片,Shockwave也是网络上比较流行的压缩多媒体格式，这种格式的影片是用Macromedia Director创建的,1 在页面中插入Shockwave影片,“插入”“媒体”“Shockwave” or单击插入面板媒体分类的 Shockwave图标按钮,“选择文件”对话框中选取影片文件,插入Shockwave影片,2 设置Shockwave影片属性,打开Shockwave影片属性面板,在文档窗口中播放 Shockwave影片,在文档窗口中播放Shockwave影片,1 在页面中插入ActiveX控件,选

13、择“插入”“媒体”“ActiveX”命令 or单击插入面板媒体分类上的ActiveX按钮 or拖动ActiveX图标 到文档窗口中 or插入后，在文档窗口中出现ActiveX控件图标,2 设置ActiveX控件属性,设置ActiveX控件 的浏览器标识,选择该复选框,指定包含有ActiveX 控件的基址,输入ActiveX控件 的编号参数,如果用户的浏览器不支持 标签，则显示该图像,插入Java小程序,1 在页面中插入Java小程序,单击插入面板媒体分类上的Applet按钮,“选择文件”对话框中选择一个包含Java小程序的文件,页面中出现Java程序占位符,插入Java小程序,2 设置Java

14、小程序属性,Applet属性面板,指定包含Java小 程序代码的文件,指定包含选定 Java小程序的URL,4.3 层,层、行为、时间轴可以说是网页设计中革命性的技术。搭配使用层、行为、时间轴可以制作出活泼多样的动态页面以及效果惊人的互动网页。本节内容包括：建立层、编辑层、层与表格的相互转化等，行为、时间轴下一节讲。,4.3.1层 层是指一种用DIV和SPAN标记描述的HTML页面元素。层可以用来定位，可以包含文本、图像、动画等元素。层还可以嵌套层。 层源代码为：。 在默认情况下，Dreamweaver使用DIV标记创建层。选择层后，对应的属性面板如图4-21所示。,图 4-21 层属性面板,

15、在层属性面板中： 层编号：用于指定一个名称，用于识别不同的层。 左和上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 宽和高：指定层的宽度和高度。 Z 轴：确定层的z轴顺序（即堆叠顺序）。 可见性：指定该层最初是否是可见的，有4个选项： “默认”：不指定可见性属性，默认为“继承”。 “继承”：使用该层父级的可见性属性。 “可见”：显示这些层的内容。 “隐藏”：隐藏这些层的内容。 背景图像：指定层的背景图像。 背景颜色：指定层的背景颜色。 溢出：控制当层的内容超过层的指定大小时如何在浏览器中显示层。 “可见”：指示在层中显示额外的内容。 “隐藏”：指定不在浏览器中显示额外的内容。

16、 “滚动”：指定浏览器应在层上添加滚动条，而不管是否需要滚动条。 “自动”：使浏览器仅在需要时才显示层的滚动条。 剪辑：定义层的可见区域。指定左侧、顶部、右侧和底边坐标可在层的坐标空间中定义一个矩形。层经过“剪辑”后，只有指定的矩形区域才是可见的。,层面板 层面板是一个可视化管理层的工具。执行【窗口】-【层】命令打开层面板，如图4-22所示。在Dreamweaver中使用层面板使得对层的操作变得十分方便和简单。,图 4-22 层面板,创建层 可以使用插入、拖动等方法创建层或嵌套层。创建层步骤如下： （1）建立站点“ceng”，创建新文档index.html，在“插入”栏的“布局”类别中单击“绘

17、制层”按钮。 （2）在文档中拖动以绘制一个层。如要要绘制多个层，可以按住【Ctrl】键并拖动。只要不松开【Ctrl】键，就可以继续绘制新的层。 （3）定位光标后，执行【插入】-【布局对象】-【层】命令可以在光标位置插入一个层。 （4）插入层后，可以看到一个矩形框出现在文档中，如图4-29所示。,图 4-29 插入层,4.3.2选择层 要对层进行编辑，必须先选择层。可以选择一个或多个层进行操作或更改它们的属性。 步骤如下： （1）若要在“文档”窗口中选择一个层：移动鼠标到层的边框上，当鼠标变成 状时，同时层的边框变成红色，单击即可选择该层；或在层面板中单击需要选取的层名称，如图4-30所示。此时文档中层就处于选中状态。,图 4-30选择层,（2）若要在“文档”窗口中选择多个层：在