DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> Dreamweaver 圖像特效制作技法
Dreamweaver 圖像特效制作技法
編輯:Dreamweaver相關     
  利用Dreamweaver3.0你可以輕輕松松讓圖像呈現出陰影、模糊、運動、光暈、波浪、淡入淡出等眾多效果,你再也不用為了達到某種圖像效果而動用Photoshop這個龐然大物了。下面我們就來具體了解一下圖像特效的制作方法。

  在Dreamweaver3.0中為圖像制作特效,實際上就是利用樣式表(CSS)功能來定義圖像的各種參數,讓它呈現出各種特技效果,但是這些特效並不增大圖像文件的大小,所以不會影響頁面的下載速度,這對於我們有限的網絡帶寬來說是非常寶貴的。下面我們首先來看如何創建一個樣式表。
  1.單擊Window菜單下的CSS Styles命令,或按F7鍵,彈出樣式表編輯窗口。
  2.單擊樣式表編輯窗口中的New按鈕,彈出對話窗口,在該窗口中選擇“Make Custom Style”選項,然後單擊OK。
  3.在彈出的定義樣式表窗口中,單擊Category下的Extensions類型,然後在Filter項目中選擇一個圖像特效類型,定義它的各種參數。Dreamweaver內置有16種圖像特效類型。
  4.定義完畢,單擊OK,回到樣式表編輯窗口。
  5.選定頁面上的圖像,將生成的樣式表作用於該圖像。
  6.保存該網頁,然後在浏覽器中打開,就可以看到圖像的特效了。
  下面我們來學習16種特效類型和它的設置方法。

  1.Alpha:透明效果
  它可以使圖像呈現出透明效果,共有七種參數:
  opacity:不透明度,范圍是0~100,0表示完全透明,100表示完全不透明。
  finishopacity:結束時的不透明度,它用來設定圖像結束時的不透明度,利用它可以制作出透明漸進的效果,取值范圍同opacity。
  style:樣式,用來指定圖像漸變的類型,0表示沒有漸變,1表示直線漸變,2表示圓形漸變,3表示矩形漸變。
  startX和startY:表示漸變開始的X、Y坐標值。
  finishX和finishY:表示漸變結束的X、Y坐標值。
  2.BlendTrans:漸隱漸現效果
  它可以使圖像呈現出淡入淡出的特效,參數duration用來設定漸隱漸現的時間,以秒為單位。
  3.Blur:動感模糊效果
  讓圖像產生移動模糊的效果,有三種參數:
  add:是否在運動模糊中使用原有的目標,0表示“否”,1表示“是”。
  direction:模糊移動的角度,范圍是0~360度。
  strength:圖像模糊的力度,單位是像素,取自然數。
  4.Chroma:色度
  它用來把圖像中的某種顏色變成透明的。參數color用來指定產生透明的顏色,可設置為Hex格式(即#RRGGBB型)或通用的英文名稱,如red(紅色)。
  5.Dropshadow:下拉陰影效果
  它有四種參數:
  color:指定陰影的顏色,格式同上。
  offX:陰影在水平方向上的偏移值,正數表示陰影在圖像的右方,負數表示陰影在圖像的左方。
  offY:陰影在垂直方向上的偏移值,正數表示陰影在圖像的上方,負數表示陰影在圖像的下方。
  positive:陰影的透明度,0表示透明像素生成陰影,1表示不透明像素生成陰影。
  6.FlipH:水平翻轉
  使圖像在水平方向上產生翻轉。
  7.FlipV:垂直翻轉
  使圖像在垂直方向上產生翻轉。
  8.Glow:光暈效果
  使圖像周圍按選定的顏色產生光暈效果,有兩種參數:
  lcolor:產生光暈的顏色。
  lstrength:呈放射幅度,范圍是1~255,數字越大光暈效果越強烈。
  9.Gray:黑白效果
  將彩色圖像轉變為黑白圖像,圖像中的色彩以灰度級別顯示。
  10.Invert:反轉效果
  逆轉圖像顏色,也就是把圖像中的色彩和亮度反轉顯示。
  11.Light:燈光效果
  將圖像中的所有可見像素變成黑色。
  12.Mask:蒙版效果
  把圖像中的所有可見像素遮罩變成透明,而其它的部分以指定的顏色填充,它的參數color就是用來指定遮罩的顏色的。
  13.Shadow:陰影效果
  它產生的效果介於光暈和下拉陰影之間,有漸進效果,立體感很強,它的兩個參數是:
  color:指定陰影的顏色。
  direction:設置陰影的方向,范圍是0~360度。
  14.Wave:波浪效果
  讓圖像產生波浪一樣的變形效果,非常酷。以前只有Java小程序才能實現這樣的效果。它的各個參數的含義是:
  add:表示是否顯示原圖像,0表示不顯示,1表示顯示,也就是原圖像出現在最後的效果中。
  freq:波形扭曲的次數。 
  ightstrength:光照的強度,范圍是0~100,0表示最弱,100表示最強。
  phase:改變波形的形狀,范圍是0~360。
  strength:波形的振幅,取自然數。
  15.Xray:X光透視效果
  產生像我們平時拍照的X光片一樣的圖像效果,相當於先用灰度功能去掉色彩信息,然後再將其反轉。
  16.RevealTrans:圖像轉換顯示效果
  它包含了24種圖像效果,有兩個參數:
  duration:用來定義圖像轉換的時間,以秒為單位。
  ransition:指定圖像轉換的類型,共有24種,代號為023。

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