项目五：复杂网页设计与制作项目五：复杂网页设计与制作

项目五：复杂网页设计与制作项目五：复杂网页设计与制作

任务一：滑动折叠菜单的制作

任务二：树型目录的制作

任务三：网页中框架的使用

任务一：滑动折叠菜单的制作

任务实施

在网页中经常会碰到弹出式菜单的动态效果，本任务主要是制作动态的折叠菜单，希望同学们能够灵活的运用。

任务一：滑动折叠菜单的制作制作的步骤 首先绘制图层 layer1 ，在其中插入单线表格，并在单

元格中输入折叠菜单的菜单项； 绘制图层 layer2 ，在其中插入单线表格，并在单元格

中输入子菜单项； 为子菜单项设置链接 选中 layer2 层，并将其添加到时间轴 1 的第一帧的位

置； 新建时间轴 2 ，同样添加 layer2 到第 1 帧的位置； 设置时间轴 1 上第 1 帧 layer2 的高度为 0 ，设置时间

轴 2 上第 15 帧 layer2 的高度为 0 ； 为 layer1 中的第一个菜单项添加行为。选中表格的第

一列，在行为面板中添加播放时间轴 1 ，事件为OnMouseOver;

任务一：滑动折叠菜单的制作按照同样方法依次添加行为如下：

选中 layer2, 添加行为如下表：

名称 行为 事件Layer1中的列

时间轴—停止时间轴—时间轴 1 OnMouseOut

时间轴—转到时间轴帧——时间轴 1、第1帧

OnMouseOut

时间轴—播放时间轴—时间轴 2 OnMouseOut

时间轴—转到时间轴帧—时间轴 2、第 1帧

OnMouseOut

名称 行为 事件Layer2 时间轴—转到时间轴帧——时间轴 2、第

1帧OnMouseOver

时间轴—停止所有时间轴 OnMouseOver

时间轴—播放时间轴—时间轴 2、第 1帧 OnMouseOut

时间轴—转到时间轴帧—时间轴 2、第 15帧

OnMouseOut

任务二：树型目录的制作 新建 CSS 样式表类名为 .tree ，背景为“ close.gif”,

不重复，方框分类设置如下图：

新建 CSS 规则类名为 .back ，设置方框分类左侧为18 像素；

新建 CSS 规则类名为 .file ，设置背景为“ file.gif”,不重复，方框分类左侧 18px;

任务二：树型目录的制作 添加一个 6 行 1 列单线表格 table1 ，在第 1

行、第 3 行、第 5 行中分别应用样式 .tree ； 在第 2 行、第 4 行、第 6 行中分别插入一个 3

行 1 列的单线表格 a1 ， a2 ， a3; 在 a1 的第 1 行中应用样式 .tree ，在第 2 行

中插入 2 行 1 列的单线表格 a11; 应用样式 .file 分别到表格 a11 的 2 个行； 在表格 a1 的第 3 行中应用样式 .file ； 表格 a2 、 a3 中的各行分别应用样式 .file ； 选择【窗口】 | 【代码片段】菜单，在其中

找到【 javascript 】 | 【可读取的 MM 函数】 | 【查找对象】；

任务二：树型目录的制作 切换到代码视图，拖动【查找对象】到 </

style> 和 </head> 之间； 单击空白处，为页面添加行为，具体如下：

将鼠标定位在 table1 的第 1 行，在行为面板中添加 onClick 事件，对应的代码为：“ with(findObj(‘a1’).style){display=display==‘’?‘none’:‘’}” ，

任务一：网页中行为的使用 再添加 onClick 事件，对应的代码

为：“ with(findObj(‘a1’).style){this.style.backgroundImage=display!=‘none’?‘url(open.gif)’:‘url(close.gif)’}” ；

为 a11,a2,a3 处均添加类似的代码； 保存文件，浏览效果。

任务一：网页中行为的使用 点击“确定”按钮。在两个关键帧之间单击鼠标右键，在弹出

的快捷菜单中选择“录制层路径”，如下图所示。

拖动层，随意的在设计窗口中移动，出现路径点。把层移动到需要的位置，释放鼠标，路径就会变成细线；

时间轴中用点来显示运动轨迹的关键点，将时间轴上的选中自动播放和循环选项；

保存文件，并按下 F12 键在浏览器中浏览效果。

任务二：插入多媒体对象任务实施 在网页中多媒体技术是经常应用的，

就目前而言，可以插入网页的多媒体元素包括 Flash 电影、 Java 小程序、音频或者视频对象等。插入这些对象可以实现更多的网页效果。

任务二：插入多媒体对象操作步骤插入 Flash 对象 插入 FLV 视频文件 插入音乐

任务二：插入多媒体对象选择菜单【插入】 | 【媒体】 |

【 SWF 】，或者在【插入】工具栏上【常用】标签下的【媒体】按钮组中的 swf 按钮

按 F12 预览效果。注意： Flash 的原始文件扩展名

为 .fla ，将影片运用在网页之前，必须通过 Flash 软件将影片导出成 .swf 格式。

任务二：插入多媒体对象FLV 是一种新兴的网络视频格式，

这种视频文件体积小巧，清晰的FLV 视频是普通视频文件体积的1/3 。再加上 CPU 占有率低、视频质量良好等特点使其在网络上盛行。

在【插入】工具栏上【常用】标签下的【媒体】按钮组中点击 flw按钮 ;

按 F12 预览 .

任务二：插入多媒体对象比较 FLA 、 SWF 和 FLV 文件

此类型的文件只能在 Flash 中打开，而无法在 Dreamweaver 或浏览器中打开。可以在 Flash 中打开 FLA 文件，然后将它发布为 SWF 或 SWT 文件以在浏览器中使用。

FLA (.fla) 文件的编译版本，已进行优化，可以在 Web 上查看。但不能在 Flash 中编辑此文件。

FLV(.flv)流媒体格式是一种新的视频格式，全称为 Flash Video 。文件极小、加载速度极快，它的出现有效地解决了视频文件导入 Flash 后，使导出的 SWF 文件体积庞大，不能在网络上很好的使用等缺点。

任务二：插入多媒体对象比较 Director 与 Flash

Director 与 Flash 有许多相同的特性：流式音效、视频、支持矢量图形和位图，以及互动程序。 Director 中的程序语言称为Lingo 。 Director还具备操控 3D模型、控制视频和音效的功能，而且处理位图的能力也比 Flash优异，它甚至可以包含和控制 Flash 电影文件。

Flash 较容易学习，而且文件体积和跨平台能力比 Director还要好。由于 Flash 项目开发比较容易，而且几乎所有的个人电脑都有安装 Flash 播放程序（外挂元件），因此成了制作网页互动界面的不二选择 。

任务二：插入多媒体对象 使用 添加，插入的音乐可以与声音播放

器一同直接添加到网页中，浏览时直接看到的是播放器，按一下播放按钮就可以开始欣赏音乐。

注： 浏览器不同，处理声音文件的方式也会有很大差异和不一致的地方。您最好将声音文件添加到 SWF 文件中，然后嵌入该 SWF 文件以改善一致性。

在【插入】工具栏上【常用】标签下的【媒体】按钮组中 按钮

按 F12 预览

任务二：插入多媒体对象 在网上浏览的页面通常会听到一

些背景音乐，或者是在页面中链接一些音乐文件。网页添加的声音有多种不同类型和格式，例如 .wav 、 .midi 和 .mp3 。

注： 浏览器不同，处理声音文件的方式也会有很大差异和不一致的地方。您最好将声音文件添加到 SWF 文件中，然后嵌入该 SWF 文件以改善一致性。

任务二：插入多媒体对象 Web 页面中可以使用多种不同的方法添

加声音，我们使用 添加。插入的音乐可以与声音播放器一同直接添加到网页中，浏览时直接看到的是播放器，按一下【播放】按钮就可以开始欣赏音乐。

想一想：在页面中插入音频文件的方法，在页面中，我们可以看到播放器，那如果想插入背景音乐，隐藏播放器，该如何操作呢？

任务二：插入多媒体对象比较声音文件类型

MIDI 或 MID乐器声音的 MIDI 文件，能够被大多数浏览器所支持，不需要插件，但会受到用户声卡的影响

WAV 具有较高的声音质量，能够被大多数浏览器所支持，不需要插件。用户可以使用 CD 、磁带、麦克风来录制声音，但文件通常较大，会受到网页存储空间的限制。

AIF 具有较高质量，和 WAV声音相似

MP3一种压缩格式的声音，文件尺寸很小，且具有较高的质量。

播放 MP3 文件，观众必须安装相应的帮助程序或插件

任务二：插入多媒体对象 RA 、 RAM 、 RPM 、和 Real Audio

经过高度压缩后的声音文件，可以快速被下载，但质量却较低，因此需要使用新的播放器或编码器来提高质量。为了播放这些文件，用户必须下载和安装RealPlayer帮助程序或插件。

任务二：插入多媒体对象知识扩展如 applet 、 ActiveX 控件等其他多媒体控件的插入方法和上述多媒体对象的方法基本一致。

任务三：网页中框架的应用任务实施 以“奥运福娃”为主体制作一

个主页，要求是【上方固定，左侧嵌套】的框架结构，在上方页面显示标题文本，左侧页面做导航链接，点击不同的链接文本，右侧显示对应的页面。

任务三：网页中框架的应用操作步骤 制作网页“ top.html”, 其中输入文字“奥运福娃”，并设置为粉红色，华文新魏字体， 48号，居中；

制作网页“ left.html”, 其中输入“ Flash” 、“ FLV 视频”、“音频”三组文字，并设置为粉红色，华文新魏字体， 24号，居中 ；

新建网页“ kjfw.htm”, 添加框架集为【上方固定，左侧嵌套】；

为三个框架重新命名分别为： top,left,main 。 将文件 top.htm 、 left.htm 和 fuwa.htm 分别

在三个框架中打开；

任务三：网页中框架的应用 为 left框架中的文字分别作链接，具体如下表；

保存框架及框架集，选择菜单中的【文件】 |【保存全部】命令 。

文本 flash flv music

链接文件 flash.htm flv.htm music.htm

任务三：网页中框架的应用

框架 是用来在浏览器窗口中装载多个 HTML 文件，每个 HTML 文件占据一个框架。多个框架可以同时显示在同一个浏览器窗口中，这时它们就组成了一个一个包含多个 HTML 文档的 HTML 文件也称为主文档。在一个浏览器窗口中显示不止一个 HTML 文档。这样的 HTML 文档被称为框架页面，它们是相互独立的。

框架的作用是拆分浏览器窗口画面，让同一个浏览器窗口能够呈现数个不同的网页画面。

任务三：网页中框架的应用

使用框架的优缺点 优点：浏览者的浏览器不必每次重新

加载每个页面浏览相关图片，可以节省等待画面的时间。

缺点：并非所有浏览器都可以完全地支持框架，它们可以造成部分浏览者无法浏览框架；

任务三：网页中框架的应用删除框架 只需选中框架边框，将框线拖拽到编辑区以外，框线若是消失，就代表删除完成 。

知识扩展拼图游戏制作 操作步骤：

使用 fireworks 制作网页素材使用 Fireworks 制作网页标题“拼图游戏”；

使用 Fireworks 制作拼图切片，借助于网格线；

使用 Fireworks 制作游戏背景，使图片透明化；

使用 Fireworks 制作游戏功能按钮，开始游戏和重置游戏按钮。

使用 Dreamweaver 制作网页主界面在 Dreamwear 中新建文件，插入层，并将标题图

片插入该层中；在 Dreamweaver 中插入 3 行 4 列的表格，表格大

小和背景图片大小一样；在表格内将切片依次插入表格中；选中表格，选择“修改” |“ 转换” |“ 表格到

层”命令，在弹出的对话框中，选中“防止层重叠”，取消“靠齐到网格”选项，将表格转换为层， ；

在层面板中，取消“防止重叠”选项，在空白处新建层，插入背景图片；

移动背景图片层到切片图像表格相同的位置；将背景图层置于最底层。

使用 Dreamweaver 制作动画效果选择“窗口” |“ 时间轴”，将原表格第 1 个单元

格中的层拖拽到时间轴的第 1 个通道的第 10 帧的位置；

单击时间轴第 1 个通道的 24 帧，将切片对象层移动到要飞离的位置；

选中第 2 个单元格中的图层拖拽到第 2 个通道的第 20 帧的位置，在第 34 帧的位置移动切片对象层到要飞离的位置；

使用同样的方法依次设置其他切片层；利用层插入“开始游戏” 按钮，移动该层到背景

图片中间的位置，拖拽该层到时间轴第 13 通道第1 帧位置，调整结束帧为第 9 帧；

单击结束帧，将按钮层移动到标题图像的右侧位置；利用层插入“重置按钮”，并将该层放置在“开始游戏”按钮的位置；

将“重置按钮”层和切片层隐藏，选中时间轴上的“自动播放”选项，保存预览效果。

使用 Dreamweaver 添加行为单击 B 通道的第 10 帧位置，使用“行为”面板设

置“开始按钮”层为隐藏，“重置按钮”层为显示；

使用同样方法将所有切片层显示；单击第 1 帧，选中开始按钮图像的层，使用行为

面板添加“时间轴” |“ 播放时间轴”，设置事件为 onclick ；

在层面板中，单击重置按钮层，选中其中的图像，添加行为“时间轴” |“ 转到时间轴帧”，设置前往帧为“ 10”, 设置事件为 onclick ；

选中“自动播放”和“循环”选项；保存和预览效果

用 Dreamweaver 制作可移动层选中 body 标签，添加拖动层行为；在层对话框中选中第一个切片层，设置如下图：

其他切片层的设置同第一个切片层；保存并预览效果。