巧用DW制作拼图游戏.docVIP

巧用DW制作拼图游戏 字数：1727????字号:大 中 小 　　摘要：Dreamweaver是集网页制作和管理网站于一身的所见即所得的网页编辑器，利用Dreamweaver可轻而易举地制作出跨越平台限制和浏览器限制的充满动感的网页。本文就利用Dreamweaver这个经典利器来制作拼图游戏。 　　关键词：网页制作　层　拼图游戏 　　中图分类号：TP317.4　文献标识码：B　文章编号：1002-2422(2010)02-0104-02 　　 　　在浏览网页时，经常发现网页上的某些图片(或文字)可以用鼠标随意拖动，特别是一些拼图类简单游戏，更增添了网页无穷乐趣。下面就用DW来制作一个简单的拼图游戏，相信你跟着做完后，会发出这样的感叹：制作是如此简单啊。 　　 　　1　准备阶段 　　 　　准备图片若干张(能拼成一张大图)，如没有可用PS进行切片操作，操作步骤如下： 　　(1)启动PS，打开一张图片，如图1所示。选切片工具，右击图片，选“划分切片”命令，将水平、垂直各划分为三等分，如图2所示。 　　(2)单击“确定”按钮，如图3所示。再单击“文件一存储为WEB和设备所用格式”命令，如图4所示。弹出“文件一存储为WEB和设备所用格式”对话框，如图5所示。在对话框中，选择预设类型，如“JPG高”，再单击“存储”按钮，弹出“将优化结果存储为”对话框，如图6所示。选择保存类型“HTML和图像”，选择好存储位置并输入文件名，最后单击“保存”按钮，即可完成图片切片工作。 　　 　　2　制作阶段 　　 　　(1)启动DW，新建一网页文档，根据切片图片的大小和数量建立表格(本题为3行3列，单元格大小为117×96象素)，同时将一张切片图片插入到表格合适位置(本题为左上角，主要用于图片的定位)，如图7所示。为显示其他切片图片，需要再制作一表格，为便于布局，建议将两表格制作成一表格(本题表格为3行8列，大小为850×288象素，存放图片的单元格大小为117x96象素，单元格间距、边距、边框均为0)，如图8所示。 　　(2)制作活动图形。为便于说明，将用于显示活动图片 　　的位置编号，如图9所示(因使用拖动层命令，建议使用DW 8)。在单元格编号为“1”的位置插入层(名称“Lay-erl”，大小为117×96象素，位置与单元格重叠)，如图10所示。 　　(3)在该层中插入切片图片，如图11所示。依此类推，分别插入层2，……，层8，并在相应层中依次插入切片图片(注意：切片图片要排列成一副完整图像)，如图12所示。 　　(4)在表格外部单击，选择“窗口”中的“行为”命令，打开行为面板，再单击“+”按钮，弹出行为菜单，如图13所示。单击“拖动层”命令，弹出“拖动层”对话框，在“层”中选择“Layerl”，单击“获取目前位置”获取当前层的位置，靠齐距离为“50”象素，如图14所示，单击“确定”按钮，完成层“Layerl”的设置。 　　(5)依此类推，分别设置层“Layer2”，……，“Lay-er8”，并设置好相关参数，如图15所示；为创建游戏的可操作性和趣味性。将所有插入切片图片的层调整到右边表格中(注意打乱切片图片的顺序)，如图16所示。 　　(6)扫尾工作，将表格中的数字删去，同时在右边表格中加上适当的文字说明，最后保存成网页文档，即完成拼图游戏制作，最终效果如图17所示。