cs6制作拼图游戏 dreamweaver_Dreamweaver制作拼图步骤

1

、处理图片

①打开

Photoshop

软件

②打开图片

kdc.jpg

，选择切片工具。

③对图片进行“划分切片”

，水平划分为

2

，垂直划分为

2

。

④保存为“存储为

Web

所用格式”

。

⑤将

kdc.jpg

的背景图层双击变成图层

0

，设置图层不透明度为

34%

，另存为

jpg

格

式图片，命名为

bg.jpg

。

2

、制作拼图

①打开

Dreamweaver

软件，创建站点。

②在站点中新建

HTML

页面

③插入

1

个

AP

元素，命名为

AP0

，定位在左

500

，上

100

处。在

AP0

中插入一个

2

行

2

列的表格，表格宽度为

400

，高度为

300

，边框为

1

，表格背景图像为

bg.jpg

。

④插入一个

AP

元素，命名为

AP1

，插入图片

kdc_01.gif

；同理插入另外

3

个

AP

元

素。

命名

AP2

，

插入

kdc_02.gif

；

命名

AP3

插入

kdc_03.gif

；

命名

AP4

插入

kdc_04.gif

。

⑤单击状态栏

，添加

“拖动

AP

元素”行为。设置

AP

元素

divAP1

，目标位

置左

500

，上

100

，靠齐目标

50

。

同理单击状态栏

，添加

“拖动

AP

元素”行为，设置

AP

元素

divAP2

，目

标位置左

700

，上

100

，靠齐目标

50

。

同理单击状态栏

，添加

“拖动

AP

元素”行为，

AP

元素

divAP3

，目标位

置左

500

，上

250

，靠齐目标

50

。

同理单击状态栏

，添加

“拖动

AP

元素”行为，

AP

元素

divAP4

，目标位

置左

700

，上

250

，靠齐目标

50

。

3

、保存网页，进行预览

注意：

1.

添加行为时必须先单击“

”标签，设置的事件全部是“

onload

”

。

2.

定位目标时数值要准确无误。