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.
定位目标时数值要准确无误。