Dreamweave拼图游戏实现.docVIP

Dreamweaver拼图游戏的实现 　　摘要：随着计算机的迅猛发展，网络游戏兴盛，拼图游戏成为了学生喜欢的一款经典益智页游。本文是中职生在学习Dreamweaver的“在页面中添加动态效果”以后的一个课程设计，弥补了书本案例的枯燥难懂，巧妙地使用Dreamweaver制作拼图游戏，使大家在浓厚的学习兴趣中巩固表格、图层、CSS、行为、Javascript的用法，也能帮助学生建立起Dreamweaver游戏开发的思想与方法并获得成就感。 中国论文网 /9/viewhtm　　关键词：Dreamweaver层行为 拼图游戏 中职 　　中图分类号：G718 文献标识码：C 文章编号：1672-1578（2015）08-0278-01 　　 Dreamweaver是一款所见即所得的网页编辑器，中职生学习了“在页面中添加动态效果”一章后，可以制作出很多缤纷的效果丰富网站内容。“拖动AP元素”即是其中的一小节。为了让中职生在掌握基础知识后还能活学活用，笔者选用了自贡盐都?龊＞?的拼图游戏来做为课程设计实现，这样既增加了知识的趣味性也激进了学生热爱家乡的情感。 　　1 新知初探：拖动?龊＞?图片，弹出“位置正确”对话框 　　 拼图游戏制作中要用到的一个重要知识点，就是拖动AP元素。为了让中职生能简单掌握这个重点，笔者让学生先制作整张图片的拖动效果，并在已设置好的位置放下后弹出“位置正确”对话框。 　　 第一步：新建tuodong.html，插入AP层，层内插入?龊＞?图片。 　　 第二步：单击body，在“标签检查器”中，选择“拖动AP元素”行为，在对话框中AP元素处选择“apdiv1”。 　　 第三步：在对话框中，点击“取得目前位置”，靠齐距离处，写上50，表明靠近目标50像素时，apdiv1层被自动被吸附。 　　 第四步：在对话框的“高级”标签下，放下时呼叫javascript，写下alert（“位置正确”）; 　　 第五步：在“标签检查器”中，选择“onload事件”。 　　 第六步：把apdiv1随意拖放到页面的某一个初始位置。 　　 第七步：在IE浏览器测试浏览。 　　2 进阶掌握：拼图?龊＞?，并设计“重玩”按钮 　　 有了上一个环节的成功制作，学生们很期待去实现真正的拼图，个个都跃跃欲试要小试年刀了。 　　2.1拼图游戏准备 　　 第一步：启动Photoshop cs5，打开素材?龊＞?图片，宽600px，高348px。 　　 第二步：双击图片图层，使它可编辑。 　　 第三步：选择“切片工具”，右击图片，选择“划分切片”，水平划分为2个纵向切片均匀分隔，垂直划分为4个横向切片均匀分隔。 　　 第四步：保持切片选择状态，分别在切片上右击鼠标，从弹出的菜单中选择“编辑切片选项”，分别设置切片名称为pintu1至pintu8。 　　 第五步：在“文件”菜单选择“存储为Web及设备所用格式”，单击“存储”，类型选择“HTML和图像”，即可生成一个html格式的文件和一个包含8副?龊＞?切片图的images文件夹。 　　2.2拼图游戏实现 　　 第一步：新建pintu.html，“AP元素”标签中，取消“防止重叠”。 　　 第二步：在页面左右两边创建两个相同大小的表格。用CSS进行适当美化。右表格2行4列。左表格1行1列。在右表格中创建8个apdiv1-apdiv8，在这8个层里分别乱序插入准备好的8幅切片图。 　　 第三步：把apdiv1-apdiv8拖动到拼图应放置的正常位置，在body标签下，对它们制作拖动ap元素行为。依照任务二的第二、三、五步制作，8个层共做8次。 　　 第四步：将左侧表格中的apdiv1-apdiv8拖回到右侧表格中。 　　 第五步：在左侧表格的下方添加一行，并写上代码 　　lt;a href=javascript：location.reload（）;gt;重拼lt;/agt; 　　 第六步：在IE浏览器测试浏览。 　　3 拓展延伸：设计“确认”按钮 　　 现在的效果是每拖正确一张切片图，就提示“位置正确”，没有拖正确的时候则什么都不提示。试想，若你是玩家，这得玩得多烦躁无趣啊。若想修改成，8张切片图都拖过以后，点击“确认”按钮，当拼图正确，提示成功，若拼图错误，提示失败。这部份提供给学习能力较强的学生参考练习。 　　 第一步：在“重拼”按钮旁添加： 　　 lt;a href=javascript：toolsubmit（）;gt;确认拼好了吗？lt;/agt; 　　 第二步：在lt;headgt;lt;script type=text/javascriptgt;lt;/scriptgt;lt;/headgt;中添加： 　　 //这里预