DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 制作會移動的廣告條
制作會移動的廣告條
編輯:Dreamweaver相關     

在許多網頁中,當鼠標移到一張圖片上時,又彈出另一張圖片,做這種廣告條,要用到Macromedia DreamWeaver中的Layer(層)和Timeline(時間軸)功能,還得准備兩張大小基本相同的廣告圖片。我們已最新版本DreamWeaver4.0(英文版)為例,制作移動的廣告條。 

  一、用DreamWeaver打開任意一個網頁,空白頁也可。在菜單中選擇“插入Insert”-> “層Layer”,即看到網頁中多了一個空白Layer1,你也可以為他命名。再將光標點到空白Layer1內,選擇“插入Insert”-> “interactive Image”-> “rollover image”,在彈出的對話框中分別插入你的廣告條的圖片(請注意original image 表示第一張圖片,rollover image 表示當鼠標移到第一張圖片時,又出現的圖片,而且一定要把preload rollover image選中),調整層大小,使層盡可能與圖片大小相近。

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

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

  接下來,我們要進行一系列美化工作,因為這個簡單的直線運動效果並不美觀,而且廣告圖片也沒有產生變化。

  三、改變時間欄的屬性產生移動變化

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

  (2)產生曲線的運動。上面做的動畫只是簡單的直線運動,如果改變成曲線的運動,美觀程度就大大的加強了。曲線運動中最主要的就是關鍵幀的設置(只要學習過flash的,這點非常容易理解)。

  a.在“時間軸面板動畫欄”上添加一個關鍵幀: 選擇動畫欄的第一頻道中你想要添加關鍵幀處, 單擊鼠標右健,選擇“add keyframe”,即刻在插入點位置添加一個關鍵幀。

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

  另附:在使用Dreamweaver4(英文版)的過程中,一次想用layer作動態廣告,只要把 “view菜單下的table view --> layout view修改為standard view,就可以插入layer和table了

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved