以往我们多采用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的子层。所谓子层，也就是代码是嵌套的：
1<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。）
第三步：添加css滤镜
先给层layer2添加mask滤镜，mask顾名思义就是给layer2戴个面具，语法是：
filter:mask(color=black)
这样layer2就只剩下中间那个透明的圆了。如果你觉得太黑了，可以对层layer2再加个alpha滤镜，使其微微透明，语法是：
filter:alpha(opacity=80)
最后，为了使探照灯具有层次感，再给图片r.gif加个alpha滤镜,style取值2，即圆形。代码是：
filter:alpha(opacity=100,style=2)
全部完成后的代码如下：
1<div #000000\"="" );="" 0);="" 190="" 1px="" 255="" background-image:="" border:="" clip:="" girl.jpg="" height:190px;="" id='\"Layer1\"' layer-background-image:="" left:0px;="" none="" rect(0="" style='\"position:absolute;' top:0px;="" url(="" width:255px;="" z-index:1;="">
2<div -100px\"="" -255px;="" alpha(opacity="80);position:absolute;" height:380px;="" id='\"Layer2\"' left:="" style='\"filter:mask(color=black)' top:="" width:510px;="" z-index:2;="">
3<p align='\"center\"'> <br/><br/><br/><br/><br/>
4<img \"="" filter:alpha(opacity='100,style=2)\"' height='\"60\"' r.gif="" src='\"' style='\"' width='\"60\"'/></p>
5</div>
6</div>
第四步：添加动画和行为
添加的动画是让探照灯来回移动，我想大家都会，这里不在多解释了，不过要注意动画的移动范围，并使其循环播放。
所要添加的行为有三个：
1.鼠标移上时动画停止播放；
2.鼠标移开时动画继续播放；
3.使层layer2可以被拖动。注意设置可以被拖动的范围，不要太大了，以防止出界。
最后可以再加点说明文字，全部完成后的代码是：
1<div #000000\"="" 0);="" 190="" 1px="" 255="" background-image:="" border:="" clip:="" height:190px;="" id='\"Layer1\"' layer-background-image:="" left:0px;="" none="" onmouseout='\"MM_timelinePlay(Timeline1)\"' onmouseover='\"MM_timelineStop()\"' rect(0="" style='\"cursor:crosshair;position:absolute;' top:0px;="" url(girl.jpg);="" width:255px;="" z-index:1;="">
2<marquee behavior="scroll" direction="right" height="120" scrollamount="1" scrolldelay="0" width="50"><font color="red" face='\"楷体_GB2312\"' style='\"margin-top:50;writing-mode:tb-rl;font-size:9pt\"'>您想添加的文字<br/> <br/>
3</font>
4</marquee>
5<div -100px\"="" -255px;="" alpha(opacity="80);position:absolute;" height:380px;="" id='\"Layer2\"' left:="" style='\"filter:mask(color=black)' top:="" width:510px;="" z-index:2;="">
6<p align='\"center\"'> <br/><br/><br/><br/><br/>
7<img filter:alpha(opacity='100,style=2)\"' height='\"150\"' src='\"r.gif\"' style='\"' width='\"150\"'/></p>
8</div>
9</div>
我们再看看下面的效果：
这是鲜花！
这是阴阳图！
这是磁盘！
这是世界地图！
这是什么玩意？！别奇怪，这是图形字体，你只要将这些图形字体取代r.gif就可以了！
webdings字体和wingdings字体是常见的两种图形字体，输入这些字体时可以先输入&#，然后再其后面加上数字编号。如：
1<font style='\"font:150px' wingdings\"="">|</font>
这是鲜花的图案。当然你还可以选择很多你喜爱的图案，任意组合。
你如果还有什么不明白的地方可以从这里 下载实例 ，再慢慢研究。