龙源期刊网
http://www.qikan.com.cn
Dreamweaver
拼图游戏的实现
作者:罗月红
来源:《读与写
·
教育教学版》
2015
年第
08
期
摘要:随着计算机的迅猛发展,网络游戏兴盛,拼图游戏成为了学生喜欢的一款经典益智
页游。本文是中职生在学习
Dreamweaver
的
“
在页面中添加动态效果
”
以后的一个课程设计,弥
补了书本案例的枯燥难懂,巧妙地使用
Dreamweaver
制作拼图游戏,使大家在浓厚的学习兴趣
中巩固表格、图层、
CSS
、行为、
Javascript
的用法,也能帮助学生建立起
Dreamweaver
游戏开
发的思想与方法并获得成就感。
关键词:
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
浏览器测试浏览。