作者：理想轉(zhuǎn)貼自：理想帝國
以往我們多采用flash或者java等在網(wǎng)頁上實現(xiàn)圖片的探照燈效果，做起來相對復(fù)雜�，F(xiàn)在我們使用功能強大的Dreamweaver可以簡化很多制作過程。先看看下面作成后的效果：
下面給各位介紹制作過程：
步：準備圖片
我們需要兩張圖片，一張是背景圖，選擇一張你喜愛的圖片；另一張是用來做探照燈用的，你可以用fireworks等作圖工具繪一圓形的圖案。如下所示：
背景圖（girl.jpg 尺寸255x190） 圓形圖（r.gif 尺寸：60x60）
第二步：建兩個層
用Dreamweaver建兩個層layer1和layer2。
層layer1用來放置背景圖片，所以層的大小和圖片一致，即255x190，然后將圖片girl.jpg插入層，或者將圖片設(shè)置為背景均可；接著給層設(shè)置clip屬性，clip可以使超出該層的部分被剪切掉，clip也設(shè)置成圖片大小，即左上角坐標取（0，0），右下角坐標�。�255，190）。設(shè)置clip屬性這一步很關(guān)鍵。層layer1的位置任意。
層layer2是用來放探照燈的，它必須是layer1的子層。所謂子層，也是代碼是嵌套的：
...
由于層layer2將被設(shè)置為可以拖動的，為了保證層在被拖動過程中始終能覆蓋住層layer1，必須將層layer2的大小至少設(shè)置為layer1的兩倍大，即設(shè)置為510x380；現(xiàn)在你明白設(shè)置層layer1的clip屬性的重要性了吧：層layer2比層layer1大，用clip將層layer2出界的部分剪掉，這樣才能達到預(yù)定效果。接著把r.gif插入到層layer2中，注意要插到層的中心處。然后設(shè)置層layer2的位置，由于層layer2是層layer1的子層，所以起點坐標采用相對坐標，即（-255，-190）。
全部完成后效果如下：
（其中外框為層layer2，內(nèi)框為層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)
全部完成后的代碼如下：
第四步：添加動畫和行為
添加的動畫是讓探照燈來回移動，我想大家都會，這里不在多解釋了，不過要注意動畫的移動范圍，并使其循環(huán)播放。
所要添加的行為有三個： 1.鼠標移上時動畫停止播放； 2.鼠標移開時動畫繼續(xù)播放； 3.使層layer2可以被拖動。注意設(shè)置可以被拖動的范圍，不要太大了，以防止出界。
可以再加點說明文字，全部完成后的代碼是：
您想添加的文字
我們再看看下面的效果：
這是鮮花！
這是陰陽圖！
這是磁盤！
這是世界地圖！
這是什么玩意？！別奇怪，這是圖形字體，你只要將這些圖形字體取代r.gif可以了！
webdings字體和wingdings字體是常見的兩種圖形字體，輸入這些字體時可以先輸入&#，然后再其后面加上數(shù)字編號。如：
|
這是鮮花的圖案。當然你還可以選擇很多你喜愛的圖案，任意組合�！ ∧闳绻�有什么不明白的地方可以從這里下載實例，再慢慢研究。
上一篇：
使用DW用ASP+ACCESS編寫目錄樹
下一篇：
DW MX 的快鍵一覽表