层的应用例－拼图游戏

1　说明

　　本文讲解一个利用层来制作拼图游戏的实例。故请先打开拼图游戏实例，供参考！
　　首先，利用Photoshoop或者Fireworks等，将所需的图像制作好。
　　为便于游戏者拼图，图像的尺寸，不宜过大。本例使用一幅300×225像素的图像。
　　整幅图像等分成9小块（3×3），每块100×75像素。

2　拼图游戏制作步骤

　　⑴先制作网页刊头、网页标题（拼图游戏）等。
　　⑵插入一个用于控制网页元素位置的表格，1行、3列。表格属性：设置间距为“0”、边框为“0”；左右两侧单元格的宽度均为300像素。
　　⑶左侧单元格中，插入一个3行、3列的拼图表格。单元格的宽度均为100像素、高度均为75像素、间距为“0”、边框为“1”、边框颜色为“＃00FF00”；右侧单元格中，插入整幅的图像（为拼图者提供参考）；中间单元格中，插入文字（拼图方法　直接用鼠标将小图拖至适当位置即可）。
　　⑷插入9个层（单击“插入”·“布局对象”·“层”），层的属性：高75像素、宽100像素、Z轴分别为1－9。
　　⑸在9个层中，分别插入事先准备好的小块图像，然后将它们排列在上述表格的下方。
　　提示：排列层时，应该打乱图像的次序。
　　⑹单击“行为”面板上“＋”按钮，然后单击“拖动”。
　　⑺在“拖动层”对话框上，“层”框中，选定需添加动作的层名，然后单击“确定”。
　　⑻重复上一步，8次，分别给9个层添加动作脚本。
　　至此，拼图游戏网页就制作完成了。怎么样？很容易吧！你也试试。

3　注意事项

　　第一点，如果需要给游戏者提示，即限制层的摆放位置，则应该先将9个层摆放到拼图表格中，组成完整的图像，然后再进行第⑹－⑻。而且，须在“拖动层”对话框上，单击“确定”按钮前，先单击“取得目前位置”按钮。
　　为层添加动作脚本后，将它们乱序地摆放到表格下方。
　　第二点，低版本浏览器不支持拖动层的行为，而Dream weaver MX 2004版默认显示的低版本浏览器支持的行为。因此，需要先单击“行为”面板上“＋”按钮，然后单击“显示事件”·“IE6.0”。
　　第三点，添加“拖动层”行为时，不要选中“层”。

主页　　　　　　　　　　　　　　　　　　 　　　　　　　　｛网页三剑客｝