层的应用练习二拼图游戏的制作.pptVIP

* * 层的应用练习二 拼图游戏的制作 准备工作： 选择一幅作为拼图的合适图片； 计算图的尺寸、切分块数及切分后每个图的尺寸； 如设定： 2行X3列，6块图；大图尺寸：300X100；每个小图的尺寸为100X50； 确定每个图右上角的位置（距离左边和上边的距离）。 使用拖动层创建“拼图游戏” 在Fireworks中打开图片，在工具箱中选择“切片工具”中的“矩形” 切片工具； 在图片左上角，按下鼠标左键，在切片区域的终点，松开鼠标左键；切割1块图片； 重复步骤2，将图片分割成大小相等的N块； 将图象碎片导出，方法：文件?导出，对话框进行如下设置： 使用Fireworks MX制作拼图块1 指定导出的HTML文件名为：拼图游戏 保存类型为：html and images 在Html 下拉菜单中选择：Export HTML Files 在Slices下拉菜单中选择：Export Slices 点击保存按纽，将1个HTML文件和分割的N个图片保存在指定的文件夹中。 使用Fireworks MX制作拼图块2 回到Dreamweaver中,按如下方法导入HTML文件 新建一个网页文件，名为：pingtu.htm。 将文档标题改为“拼图游戏”，输入文本“请将下面N幅图片拼成一个完整的图案”，保存； 插入拼图游戏切片 插入 ? 图象对象 ? Fireworks HTML。载入步骤2导出的用表格表示的图象。 将表格转换为层 修改 ? 变换 ? 表格到层，将表格中的图片转换到层中。 使用Fireworks MX制作拼图块3 分别调整层的大小为:200 X 100； 分别调整层中图片的大小为200 X 100； 使用Fireworks MX制作拼图块4 设置层的位置 层6 层5 层4 层3 层2 层1 使用Fireworks MX制作拼图块5 建立一个新的层（宽600，高100），层的起点位置在（500，500），层中插入一个2行3列、边框为1的表格(每个单元格宽200高100)，作为拼图的目的位置。 设置拖动层的目的位置 选择状态栏中的body标记，有菜单栏上的“窗口”中，打开行为面板，点击（+）按纽，在行为列表中选择 “拖动层”（Drag Layer）； 在对话框中设置： 拖动的层名称； 设置拖动层的目的位置； 设定吸附距离； 点击确定退出，隐含设定事件为Onload alert(‘您好！欢迎访问我的主页。’) 1 重复步骤16，设置其它层的拖动 设置拖动层的行为1 高级选项中设置弹出信息 alert(‘继续努力！’) 1 设置拖动层的行为2 设置状态栏文本行为 选择body，创建行为； “设置文本” “设置状态栏文本” 输入【消息】内容； 设置触发事件为：OnLoad 预览。 设置打开网页时的欢迎信息 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 * * * 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞