Dreamweaver製作文字特效

　　我們常用的網頁製作工具Dreamweaver MX不僅可以製作網頁，而且利用其中的CSS濾鏡我們還可以對文字或圖片進行簡單的特效處理。下面我們就通過幾個例子來看一看在Dreamweaver中是如何製作特效文字的。

　　光暈字

　　首先啟動Dreamweaver，在新文檔中插入一個1×1的表格，邊框設定為0，然後在其中輸入需要修飾的文字。

　　單擊右面的浮動面板中的“設計→CSS樣式”開啟這一浮動面板。

　　面板右下角的四個按鈕分別是：添加、建立、編輯以及刪除CSS樣式。

　　注意：在Dreamweaver中，CSS濾鏡只能作用於有地區限制的對象，如表格、儲存格、圖片等，而不能直接用於文字，所以我們要把所需要增加特效的文字事先放在表格中，然後對錶格應用CSS樣式，從而使文字產生特殊效果。

　　圖1 建立CSS樣式

　　單擊建立CSS樣式按鈕，彈出如圖1的對話方塊。

　　“類型”項選擇“建立自訂樣式”，“定義在”選擇“僅對該文檔”，點確定後彈出CSS樣式定義對話方塊(如圖2)，在類型面板中我們可以定義字型、字型大小、顏色等內容，本例中我們選擇字型為隸書，大小50像素，顏色為白色。

　　圖2 定義CSS樣式

　　要產生文字特效，最重要的是在擴充面板(如圖3)中的設定，在“視覺效果下”的過濾器中列出的就是所有的CSS濾鏡，選擇Glow濾鏡，它可以使文字產生邊緣發光的效果。Glow濾鏡的文法格式為：Glow(Color=?, Strength=?)，裡面有兩個參數：Color決定光暈的顏色，可以用如ffffff的十六進位代碼，或者用Red、Yellow等單詞表示;Strength表示發光強度，範圍從0到255。本例中我們設定顏色為紅色(Red)，發光強度為8，然後確定。

　　圖3 設定好Glow濾鏡

　　下面我們將這個CSS樣式應用到表格中。把游標移到儲存格中，在文檔窗

　　口左下角點擊標籤選中儲存格，然後單擊剛才在CSS樣式面板中建立的樣式，這時標籤變為，表明已經對儲存格應用了CSS樣式。我們在文件視窗中看不出變化，按F12鍵在IE中預覽，效果就出來了(如圖4)。

　　圖4 光暈字效果

　　怎麼樣?不次於在Photoshop中的濾鏡效果吧。在網頁裡放上幾個這樣的特效字會讓網頁美觀不少，而且我們也可以用PrintScreen鍵抓屏，然後在畫圖程式中粘貼儲存使之成為單獨的圖片。

　　陰影字

　　有兩種CSS濾鏡能夠使文字產生陰影製作效果，分別是Drowshadow和Shadow，它們產生的效果略有所不同。

　　製作陰影字的操作步驟與製作光暈字的過程基本相同，只要在CSS樣式中重新選擇一種過濾器即可。

　　Drowshadow濾鏡的文法如下：DropShadow(Color=?, OffX=?, OffY=?, Positive=?) 。

　　其中，Color表示投射陰影的顏色，用十六進位數來表示;OffX、OffY分別代表陰影偏離文字位置的量，單位為像素;Positive為一個邏輯值，1代表為所有不透明元素建立陰影，0代表為所有透明元素建立可見陰影。

　　圖5 陰影字效果

　　例如把過濾器設定為DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1)，產生的效果如圖5。

　　遮罩字

　　CSS濾鏡中還為我們提供了遮罩的功能，可以把文字部分處理成遮罩，如果在背景中使用合適的圖片，就能產生漂亮的鏤空文字效果。

　　文件視窗中插入一個1×1的表格，單擊文件視窗左下角的標籤選中整個表格，在屬性偵測器(如圖6)的背景映像中選擇一張合適的圖片，然後在儲存格中輸入需要的文字。

　　圖6 在表格中插入一幅背景圖片

　　接下來我們為儲存格添加Mask濾鏡，步驟與前兩例類似。在過濾器中選擇Mask(Color=?)，這個參數決定遮罩的顏色，我們選擇用白色。

　　注意：本例中文字的顏色選擇並不重要，因為在最終效果中文字會被鏤空，顏色並不會顯示出來。

　　圖7 遮罩字效果

　　設定完成後將這個CSS樣式應用到儲存格，然後按下F12鍵就可以看到效果了(如圖7)。

　　注意：背景圖片是為整個表格添加的，對應

 

標籤，千萬不要搞錯。   　　動感字 　　製作動感字我們要用到Blur濾鏡，作用是產生模糊效果，它的文法格式為Blur(Add=?, Direction=?, Strength=?)。Add參數是一個布爾值，一般來說，當濾鏡用於圖片的時候取0，用於文字的時候取1;Direction代表模糊方向，單位是角度;Strength代表模糊移動值，單位為像素。比如我們定義Blur(Add=1, Direction=90, Strength=150)，在預覽中就可以看到如圖8的效果。 　　圖8 動感字效果 　　其實，CSS中很多濾鏡也能夠用於圖片的修飾，如Blur濾鏡就可以使圖片產生模糊效果。如果我們對這些濾鏡都能夠熟練應用，那麼有時在沒有專業影像處理軟體的情況下，也能夠製作出相當不錯的圖片效果來。

 

        注：更多精彩教程請關注三聯網頁設計教程 欄目，