以往我们多采用flash或者java等在网页上实现图片的探照灯效果，做起来相对复杂。现在我们使用功能强大的Dreamweaver可以简化很多制作过程。先看看下面作成后的效果：

　　下面给各位介绍制作过程：

　　第一步：准备图片

　　我们需要两张图片，一张是背景图，选择一张你喜爱的图片；另一张是用来做探照灯用的，你可以用fireworks等作图工具绘一圆形的图案。如下所示：

　
背景图（girl.jpg 尺寸255x190）　　　　圆形图（r.gif 尺寸：60x60）

　　第二步：建两个层

　　用Dreamweaver建两个层layer1和layer2。

　　 层layer1用来放置背景图片，所以层的大小和图片一致，即255x190，然后将图片girl.jpg插入层，或者将图片设置为背景均可；接着给层设置clip属性，clip可以使超出该层的部分被剪切掉，clip也设置成图片大小，即左上角坐标取（0，0），右下角坐标取（255，190）。设置clip属性这一步很关键。层layer1的位置任意。

　　层layer2是用来放探照灯的，它必须是layer1的子层。所谓子层，也就是代码是嵌套的：

　　<div id="layer1"...><div id="layer2"...>...</div></div>

　　由于层layer2将被设置为可以拖动的，为了保证层在被拖动过程中始终能覆盖住层layer1，必须将层layer2的大小至少设置为layer1的两倍大，即设置为510x380；现在你明白设置层layer1的clip属性的重要性了吧：层layer2比层layer1大，用clip将层layer2出界的部分剪掉，这样才能达到预定效果。接着把r.gif插入到层layer2中，注意要插到层的中心处。然后设置层layer2的位置，由于层layer2是层layer1的子层，所以起点坐标采用相对坐标，即（-255，-190）。

　　全部完成后效果如下：

　　（其中外框为层layer2，内框为层layer1。）