網頁設計

當前位置 /首頁/設計製作/網頁設計/列表

Dreamweaver怎樣實現飄浮光球特效

大家都知道,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”檢查框,也會彈出對話方塊告訴使用者這一項已選中,動畫會迴圈播放。一般情況下這些項都可以選中,除非我們為了使網頁更靈活而設定在瀏覽者執行某種動作時播放動畫。比如當傳輸速度十分有限時,我們可以先使用一幅靜止的圖片,當瀏覽者點選這幅圖片時播放動畫。這樣既分散了等待的時間,使瀏覽者不至於因為長時間看不到網頁而放棄瀏覽,又兼顧了網頁的質量。我們可以隨時點選帶有問號的按鈕來獲得幫助,就像其它浮動面板上的問號按鈕一樣。

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