cs6制作拼图游戏 dreamweaver_Dreamweaver拼图游戏的实现

龙源期刊网

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

浏览器测试浏览。