Dreamweaver怎樣實現飄浮光球特效

來源:文萃谷 4.93K

大家都知道,Dreamweaver是一款專業的網頁設計工具,提供了許多方便、實用的功能,使得以前許多網頁效果的實現從繁瑣的代碼中解脱出來,只要輕點鼠標即可實現。其中為網頁圖像增添特效就是其具有特色的功能之一,利用它可以為圖像添加諸如陰影、運動、波浪、及淡入淡出等特效。這種特效不會增加圖像的大小,當然也不會影響其下載速度。其具體的實現方法如下:

Dreamweaver怎樣實現飄浮光球特效

1、在Dreamweaver編輯窗口中,點擊菜單命令“Window/Css Styles”打開樣式浮動面板,在浮動面板中點擊右鍵菜單中的“New Style”選項或者點擊右下角帶“+”的按鈕,打開新增樣式對話框(如圖1),在“Name”欄中輸入新增特效名稱,並選擇Type的第一個選項:“Make custom style”,然後點擊“OK”按鈕,並在出現的保存對話框中輸入文件名保存樣式文件。

[ 圖1 填上特效名稱 ]

2、在隨即出現的樣式定義設置對話框中,選擇Category列表框中的最後一項“Extensions”選項(如圖2),打開擴展窗口參數設置窗口,其中“Page Break”選項用於設置樣式應用前後的位置,可以不予設置,而“Visual Effect”下的“Cursor”則用於自定義鼠標指針形狀,“Filter”用於選擇效果的類型,共有16個選項。用户選擇好效果類型以後,將其中有問號的地方改成自己希望的參數,點擊“OK”即完成樣式的定義。

[ 圖2 選擇設置參數 ]

3、點擊菜單“Insert/Image”打開圖片,選擇對話框插入希望應用特效的圖像,然後在編輯窗口中選中該圖像,並點擊樣式浮動面板中剛才創建的樣式,按下“F12”鍵,在瀏覽器中即可看到特效顯示的最終效果。如圖3即為Filter類型為“Wave”,參數為:“Add=1,Freq=6,LightStrength=20,Phase=8,Strength=15”的樣式在圖片上應用以後的效果對比。

[ 圖3 最終效果 ]

4、如果用户應用後對效果不很滿意的話,可以在樣式浮動面板中點擊快捷菜單中“Edit”選項,重新打開樣式定義窗口進行參數設置,直到滿意為止。

  【拓展閲讀

  Dreamweaver時線的應用

時線面板負責改變層或圖片在整個時間上的屬性。如果要打開這個面板可以選Window菜單中的timelines命令。下面我們看這個面板的`具體內容。請看圖B一。面板上最上一欄是控制項。下面標有大寫B(Behavior)的欄是行為欄,中間是時間標尺,標尺上有一個紅色的小塊是監視塊,這個小方塊表明了當前的顯示狀況。最下面是各個項目,圖中有兩個項目,一個是層項目,一個是圖片項目。下面我來介紹時線面板的具體用法。

選擇欄中包含對時線名稱的選擇和修改,當我們建立多個時線時可以用這個選擇項快速地在各時線間穿插,在網頁比較複雜時建立多個時線可以更好的編輯或組織。圖中顯示的時線是“timeline1”。接下來的幾個按鈕是監視位置的選擇,最左邊一個是將監視塊調到最左邊。

倒退按鈕是將監視塊向左移動一小格,播放按鈕是將監視塊向右移動一小格,如果當前位置上沒有任何項目則使用播放按鈕監視塊不會向前滑動,而使用倒退按鈕則立即回到項目的尾端(最右端)。這幾個按鈕中間是監視塊所在的具體位置。可以通過這個框確定監視塊的詳細位置。“Fps”框允許作者指定動畫每秒的幀數,缺省值為15,這是一個平均數,每秒15幀在大多數情況下可以達到較好的顯示效果。

如果瀏覽者的機器更好的話我們還可以增加每秒的幀數,這樣顯示效果更加平滑。這一欄右面的“Autoplay”檢查框是設置動畫的播放方式。選中時會彈出對話框告訴用户這一項已選中,當網頁被開啟的時候會自動播放動畫。如果我們選中“Loop”檢查框,也會彈出對話框告訴用户這一項已選中,動畫會循環播放。一般情況下這些項都可以選中,除非我們為了使網頁更靈活而設定在瀏覽者執行某種動作時播放動畫。比如當傳輸速度十分有限時,我們可以先使用一幅靜止的圖片,當瀏覽者點擊這幅圖片時播放動畫。這樣既分散了等待的時間,使瀏覽者不至於因為長時間看不到網頁而放棄瀏覽,又兼顧了網頁的質量。我們可以隨時點擊帶有問號的按鈕來獲得幫助,就像其它浮動面板上的問號按鈕一樣。

時線面板中的行為欄功能不凡。我們可以在任意位置上增加相應的行為以增強對頁面的控制和對外界的適應。圖一中的時間欄中有兩個方塊,一個黑色,另一個是中間有黑色減號標誌的淡紫色方塊。黑色的一個在我們點中行為欄上某個區域後出現表明已選中這個區域,可以在這個時間上設置行為,選中的同時監視塊也滑到選中的時間上,這樣作者可以看到執行行為時頁面的狀態。

熱門標籤