你上新浪網首頁會看見它頁面中有個飄來飄去的廣告條，鼠標移上去，還會變成另外的宣傳圖片。這個廣告條沒有占用頁面的空間，它獨立在頁面之上，的確是個發布廣告條的好方法。那么，這個會移動的廣告條到底是如何做成的呢？下面，請跟我一步步學做，看完教材，你也就會自己做了。

　　做這個廣告條，要用到Macromedia DreamWeaver中的Layer(層)和Timeline(時間軸)功能，還得準備兩張大小基本相同的廣告圖片。我們已最新版本DreamWeaver4.0為例，制作移動的廣告條。如果還沒有這個軟件，請到www.4u2v.com尋找。

一、用DreamWeaver打開任意一個網頁，空白頁也可。在菜單中選擇“插入Insert”->“層Layer”,即看到網頁中多了一個空白Layer1，你也可以為他命名。再將光標點到空白Layer1內，選擇“插入Insert”->“圖像Image”，插入你的廣告條的第一個圖片，調整層大小，使層盡可能與圖片大小相近，并設置圖片鏈接。然后把層移到動畫的起始位置。

二、在菜單欄選擇“修改Modify”->“時間軸Timeline”->“添加對象到時間軸Add object to Timeline”。點擊后，彈出對話框，告訴你只有圖象和層才能添加到時間軸。對話框按確定后，我們選中Layer（單擊層標記或層邊界，或用層面板選擇一層，當一個層被選中時，層邊界會顯示出調整大小手柄，按住鼠標左鍵不放，拖進時間軸動畫欄的第一頻道，即面板上豎寫1，2，3等等的“1”那行，時間軸里面馬上增加了一個默認的15幀動畫。如圖1所示：

　　然后，單擊動畫欄最后關鍵幀標記，再選中頁面中的層Layer1，將它拖動到動畫的結束點，或者在“層的屬性面板”改變層的“左L”屬性大小來確定結束幀層的位置。此時，頁面中顯示了從動畫起始位置到結束位置有一線條，這就是層的運動軌跡。要想讓頁面打開時候它就開始運動，就在“時間軸TimeLine”面板上的“自動播放Autoplay”前打勾，如圖2所示：按在時間軸上中部的“->”箭頭不放，就可以直接預覽這直線動畫了，或者按下F12鍵預覽。

　　接下來，我們要進行一系列美化工作，因為這個簡單的直線運動效果并不美觀，而且廣告圖片也沒有產生變化。三、改變時間欄的屬性產生移動變化

（1）在動畫移動距離不變的情況下，改名動畫移動速度。因為我們拉層進時間軸面板起始時候的幀數是默認的15幀，在上面預覽時候就感到速度有點快。要改變速度，我們就得改變動畫總共幀數。鼠標左擊選中“時間軸面板”中的“第一頻道”結束幀不放，向右拖動至你所想要的結束幀，例如75幀處，放開鼠標。此時，結束幀的空白小圓也移至到了第75幀處。按F12預覽一下，動畫的移動速度明顯變慢。但是要注意的是我們只是在保持動畫運動軌跡的長度不變的情況下，改變了動畫移動的速度，即時間軸上的幀數。如果在同時改變改變起始和結束幀層的位置，就會產生各種不同速度效果，讀者可以自己試著嘗試。

（2）產生曲線的運動。上面做的動畫只是簡單的直線運動，如果改變成曲線的運動，美觀程度就大大的加強了。曲線運動中最主要的就是關鍵幀的設置。

a.在“時間軸面板動畫欄”上添加一個關鍵幀: 選擇動畫欄的第一頻道中你想要添加關鍵幀處， 按住Control鍵單擊，即刻在插入點位置添加一個關鍵幀。或者鼠標右擊選擇動畫欄的第一頻道中你想要添加關鍵幀處，在彈出的快捷菜單里面選擇“添加關鍵幀Add Keyframe”，也可以加入關鍵幀。

b.在添加的關鍵幀處移動層：在保證選中了后來添加的關鍵幀下，選擇頁面中的層，移動層至你所想要的地方。此時直線變化成了曲線。你可以多添加幾個關鍵幀，再移動層，使產生的曲線移動更加光滑。按F12鍵預覽，曲線效果是不是比以前的直線效果好多了？

四、添加鼠標觸發屬性，產生廣告圖片的交替變化

　　鼠標觸發的各種屬性，能產生各種變化。這里我們要用到的是onMouSEOut和onMouseover兩個屬性。
打開菜單“窗口Windows” ->選擇“行為Behaviors”->彈出“行為”窗口->選中層中的廣告圖片->點擊“行為”窗口中的“+”->在彈出的菜單里面選擇“對調圖象”

　　在“對調圖象”對話框里面瀏覽選擇你的廣告圖片所在路徑->在“對調圖象”對話框里系統默認中有個“onMouseout復原圖象”前是打勾的->直接按“確定”按鈕

　　“行為”狀態窗中多了我們前面說到的onMouseout和onMouseover兩個鼠標觸發事件。按F12預覽，移動鼠標到圖片上，看看是不是圖片變化了？再移開鼠標，又恢復到原來的圖片。這樣簡單的圖片交替行為就完成了。

五、最后思考的細節

1. 關于路徑長度。假設動畫是從上之下的，網頁高度超過一屏，如果路徑沒有足夠長，那么網頁被快速瀏覽到下一屏的時候就看不到上面的層動畫。應該最好將路徑畫到網頁底部，然后設置時間軸動畫欄，使層能夠慢慢沿著下來的路徑往上動。
2. 如何設置循環播放。DreamWeaver4.0默認是不斷循環，而在DreamWeaver3.0中則可以在“時間軸”狀態欄中打勾選擇。如果只想循環若干次，則要編輯該行為的參數來設定循環的次數：雙擊行為頻道中的你想加入行為的幀，彈出行為窗口；在行為窗口中點擊“＋”，在彈出菜單中選擇“時間軸Timeline”，再選擇“前往時間軸幀Go To Timeline Frame”，彈出對話框；在“循環次數Loop times”輸入域中輸入想要的循環次數（默認留空表示不斷循環）。如果希望循環播放不是從第一幀開始，可以在“跳轉第幾幀Go to Frame”輸入域中輸入幀號（默認是第1幀）。

　　看到這里，你應該能夠制作出會移動的廣告條了吧。多加實踐，你還會找到更多有關時間軸、行為和層的精細之處。www.4u2v.com有更多的相關的文章，如果您有興趣，請繼續來逛逛。