本任务主要是制作动态的折叠菜单.PPT

* 将“重置按钮”层和切片层隐藏，选中时间轴上的“自动播放”选项，保存预览效果。 使用Dreamweaver添加行为 单击B通道的第10帧位置，使用“行为”面板设置“开始按钮”层为隐藏，“重置按钮”层为显示； 使用同样方法将所有切片层显示； 单击第1帧，选中开始按钮图像的层，使用行为面板添加“时间轴”|“播放时间轴”，设置事件为onclick； 在层面板中，单击重置按钮层，选中其中的图像，添加行为“时间轴”|“转到时间轴帧”，设置前往帧为“10”,设置事件为onclick ； 选中“自动播放”和“循环”选项； 保存和预览效果 用Dreamweaver制作可移动层 选中body标签，添加拖动层行为； 在层对话框中选中第一个切片层，设置如下图： 其他切片层的设置同第一个切片层； 保存并预览效果。 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 项目五：复杂网页设计与制作 项目五：复杂网页设计与制作 任务一：滑动折叠菜单的制作 任务二：树型目录的制作 任务三：网页中框架的使用 任务一：滑动折叠菜单的制作 任务实施 在网页中经常会碰到弹出式菜单的动态效果，本任务主要是制作动态的折叠菜单，希望同学们能够灵活的运用。 任务一：滑动折叠菜单的制作 制作的步骤 首先绘制图层layer1，在其中插入单线表格，并在单元格中输入折叠菜单的菜单项； 绘制图层layer2，在其中插入单线表格，并在单元格中输入子菜单项； 为子菜单项设置链接 选中layer2层，并将其添加到时间轴1的第一帧的位置； 新建时间轴2，同样添加layer2到第1帧的位置； 设置时间轴1上第1帧layer2的高度为0，设置时间轴2上第15帧layer2的高度为0； 为layer1中的第一个菜单项添加行为。选中表格的第一列，在行为面板中添加播放时间轴1，事件为OnMouseOver; 任务一：滑动折叠菜单的制作 按照同样方法依次添加行为如下： 选中layer2,添加行为如下表： OnMouseOut 时间轴—转到时间轴帧—时间轴2、第1帧 OnMouseOut 时间轴—播放时间轴—时间轴2 OnMouseOut 时间轴—转到时间轴帧——时间轴1、第1帧 OnMouseOut 时间轴—停止时间轴—时间轴1 Layer1中的列 事件 行为 名称 OnMouseOut 时间轴—转到时间轴帧—时间轴2、第15帧 OnMouseOut 时间轴—播放时间轴—时间轴2、第1帧 OnMouseOver 时间轴—停止所有时间轴 OnMouseOver 时间轴—转到时间轴帧——时间轴2、第1帧 Layer2 事件 行为 名称 任务二：树型目录的制作 新建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处均添加类似的代码； 保存文件，浏览效果。 任务一：网页中行为的使用 点击“确定”按钮。在两个关键帧之间单击鼠标右键，在弹出的快捷菜单中选择“录制层路径”，如下图所示。 拖动层，随意的在设计窗口中移动，出现路