admin管理员组文章数量:1530893
2023年12月19日发(作者:)
巧用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所示。
版权声明:本文标题:巧用DW制作拼图游戏 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1702932789a30972.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论