DW MX 2004 CSS 屬性詳解

導讀:
  現代網頁製作離不開 CSS樣式表技術,採用CSS技術,可以有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。 用CSS不僅可以做出美觀工整令瀏覽者賞心悅目的網頁,還能給網頁添加許多神奇的效果。
  創建CSS樣式表的過程,就是對各種CSS屬性的設置過程,所以瞭解和掌握屬性設置非常重要。在DW MX 2004的CSS樣式裏包含了W3C規範定義的所有CSS1的屬性,把這些屬性分爲:類型、背景、區塊、方框、邊框、列表、定位、擴展等八個部分,如下圖:
  yp636_1.gif
  
  DW MX 2004 實現CSS屬性設置功能是完全可視化的,無需編寫代碼。下面我們分別詳細講解。 爲了便於理解,從開始創建新的 CSS 樣式表說起:
  注:您需對 DW MX 2004 程序初步瞭解,並打開它對照本教程進行學習。如果您對 DW MX 2004 尚不熟悉,請瀏覽【 DW MX 2004 簡體中文版入門教程】。
  【創建新的 CSS 樣式】
  將插入點放在文檔中,然後執行以下操作之一打開“新建 CSS 樣式”對話框:
  在“CSS 樣式”面板(“窗口”>“CSS 樣式”)中,單擊面板右下角區域中的“新建 CSS 樣式”按鈕,如下圖:
  yp636_2.gif
  
  在文本屬性檢查器中,從“樣式”彈出式菜單中選擇“管理樣式”,然後在出現的對話框中單擊“新建”。
  在“相關 CSS”選項卡(選擇“窗口”>“標籤檢查器”,然後單擊“相關 CSS”選項卡)中右鍵單擊,然後從上下文菜單中選擇“新建規則”。
  
  選擇“文本”菜單>“CSS 樣式”>“新建(N)…”。
  “新建 CSS 樣式”對話框隨即出現,如下圖:
  yp636_3.gif
  
  定義您要創建的 CSS 樣式的類型:
  若要創建可作爲 class 屬性應用於文本範圍或文本塊的自定義樣式,請選擇“創建自定義樣式 (Class)”,然後在“名稱”文本框中輸入樣式名稱。
  注意:類名稱必須以句點開頭,並且可以包含任何字母和數字組合(例如,.mycss)。如果您沒有輸入開頭的句點,DW MX 2004將自動爲您輸入。
  若要重定義特定 HTML 標籤的默認格式,請選擇“重定義標籤”,然後在“標籤”字段中輸入一個 HTML 標籤,或從彈出式菜單中選擇一個標籤。
  若要爲具體某個標籤組合或所有包含特定 Id 屬性的標籤定義格式,請選擇“使用 CSS 選擇器”,然後在“選擇器”文本框中輸入一個或多個 HTML 標籤,或從彈出式菜單中選擇一個標籤。彈出式菜單中提供的選擇器(稱作僞類選擇器)包括 a:active、a:hover、a:link 和 a:visited。
  選擇定義樣式的位置:
  若要創建外部樣式表,請選擇“新建樣式表文件”。
  
  若要在當前文檔中嵌入樣式,請選擇“僅對該文檔”。
  
  單擊“確定”。
  類 型 屬 性
  【定義 CSS 類型屬性】使用“CSS 樣式定義”對話框中的“類型”類別可以定義 CSS 樣式的基本字體和類型設置。
  定義 CSS 樣式的類型設置:
  在“CSS 樣式定義”對話框中,選擇“類型”(如下圖),然後設置所需的樣式屬性。
  yp636_1.gif
  
  請注意:下列任意屬性如果您認爲不重要可以保留爲空。
  字體:爲樣式設置字體。DW MX 2004內置6個系列的英文字體(如下圖)。
  yp636_4.gif
  
  一般英文字體常常用“Arial, Helvetica, sans-serif”這個系列比較美觀,如果不用這些字體系列,你您可以通過下拉列表最下面的“編輯字體列表”來創建新的字體系列。中文網頁默認字體是宋體,一般留空即可。瀏覽器首選用戶系統第一種字體顯示文本。兩種瀏覽器都支持字體屬性。
  大小:定義文本大小。可以通過選擇數字和度量單位選擇特定的大小,也可以選擇相對大小。以像素爲單位可以有效地防止瀏覽器變形文本。
  提示:CSS中長度的單位分絕對長度單位和相對長度單位:
  yp636_5.gif
  
  絕對
  長度 px:(象素)根據顯示器的分辨率來確定長度。
  pt:(字號)根據windows系統定義的字號大小來確定長度。
  in、cn、mm:(英寸、釐米、毫米)根據顯示的實際尺寸來確定長度。此類單位不隨顯示器的分辨率改變而改變。 相對
  長度
  em:當前文本的尺寸。例如:{ font-size:2em}是指文字大小爲原來的2倍。
  ex:當前字母“x”的高度,一般爲字體尺寸的一半。
  %:是以當前文本的百分比定義尺寸。例如:{ font-size:300%}是指文字大小爲原來的3倍。
  兩種瀏覽器都支持大小屬性。
  樣式:將“正常”、“斜體”或“偏斜體”指定爲字體樣式。默認設置是“正常”。兩種瀏覽器都支持樣式屬性。
  行高:設置文本所在行的高度。選擇“正常”自動計算字體大小的行高,或輸入一個確切的值並選擇一種度量單位。比較直觀的寫法用百分比,例如180%是指行高等於文字大小的1.8倍。相對應的CSS屬性是”line-height”。 兩種瀏覽器都支持行高屬性。
  修飾:向文本中添加下劃線、上劃線或刪除線,或使文本閃爍。
  正常文本的默認設置是“無”。鏈接的默認設置是“下劃線”。將鏈接設置設爲無時,可以通過定義一個特殊的類刪除鏈接中的下劃線。這些效果可以同時存在,將效果前的複選框選定即可。相對應的CSS屬性是”text-decoration”。 兩種瀏覽器都支持修飾屬性。
  粗細:對字體應用特定或相對的粗體量。“正常”等於 400;“粗體”等於 700。相對應的CSS屬性是”font-weight”。兩種瀏覽器都支持粗細屬性。
  變量:設置文本的小型大寫字母變量。DW MX 2004不在“文檔”窗口中顯示該屬性。Internet Explorer 支持變量屬性,但 Netscape Navigator 不支持。
  大小寫:將選定內容中的每個單詞的首字母大寫或將文本設置爲全部大寫或小寫。兩種瀏覽器都支持大小寫屬性。
  顏色:設置文本顏色。兩種瀏覽器都支持顏色屬性。
  
  設置完這些選項後,在面板左側選擇另一個 CSS 類別以設置其它的樣式屬性,或單擊“確定”。
  背 景 屬 性
  【定義 CSS 樣式背景屬性】使用“CSS 樣式定義”對話框的“背景”類別可以定義 CSS 樣式的背景設置。可以對網頁中的任何元素應用背景屬性。例如,創建一個樣式,將背景顏色或背景圖像添加到任何頁面元素中,比如在文本、表格、頁面等的後面。還可以設置背景圖像的位置。
  提示:本頁背景圖片固定,是【定義 CSS 樣式背景屬性】的效果。
  定義背景設置:
  在“CSS 樣式定義”對話框中,選擇“背景”(如下圖),然後設置所需的樣式屬性。
  yp636_6.gif
  
  請注意:下列任意屬性如果您認爲不重要可以保留爲空。
  背景顏色:設置元素的背景顏色。兩種瀏覽器都支持背景顏色屬性。
  背景圖像:設置元素的背景圖像。兩種瀏覽器都支持背景圖像屬性。
  重複:定義是否重複以及如何重複背景圖像。兩種瀏覽器都支持重複屬性。
  “不重複”在元素開始處顯示一次圖像。
  “重複”在元素的後面水平和垂直平鋪圖像。
  “橫向重複”和“縱向重複”分別顯示圖像水平帶區和垂直帶區。圖像被剪輯以適合元素的邊界。
  附件:確定背景圖像是固定在它的原始位置還是隨內容一起滾動。注意,某些瀏覽器可能將“固定”選項視爲“滾動”。Internet Explorer 支持該選項,但 Netscape Navigator 不支持。
  水平位置:和垂直位置指定背景圖像相對於元素的初始位置。這可以用於將背景圖像與頁面中心垂直和水平對齊。如果附件屬性爲“固定”,則位置相對於“文檔”窗口而不是元素。Internet Explorer支持該屬性,但 Netscape Navigator 不支持。
  設置完這些選項後,在面板左側選擇另一個 CSS 類別以設置其它的樣式屬性,或單擊“確定”。
  區 塊 屬 性
  【定義 CSS 樣式區塊屬性】使用“CSS 樣式定義”對話框的“區塊”類別可以定義標籤和屬性的間距和對齊設置。下列兩組表格爲文本定義區塊屬性前後對比:
  原文本未定義區塊屬性 【定義CSS樣式區塊屬性】
  定義區塊屬性後效果 【定義CSS樣式區塊屬性】
  原文本未定義區塊 使用“樣式定義”對話框的“區塊”類別可以定義標籤和屬性的間距和對齊設置。此爲區塊定義演示。字間的空格可不是用鍵盤敲出來的。
  定義區塊後效果(參數見下圖) 使用“樣式定義”對話框的“區塊”類別可以定義標籤和屬性的間距和對齊設置。此爲區塊定義演示。字間的空格可不是用鍵盤敲出來的。
  定義區塊設置:在“CSS樣式定義”對話框中,選擇“區塊”(如下圖),然後設置所需的樣式屬性。
  yp636_7.gif
  
  請注意:下列任意屬性如果您認爲不重要可以保留爲空。
  單詞間距:設置單詞的間距。若要設置特定的值,請在彈出式菜單中選擇“值”,然後輸入一個數值。在第二個彈出式菜單中,選擇度量單位。
  注意:可以指定負值,但顯示取決於瀏覽器。Dreamweaver 不在“文檔”窗口中顯示該屬性。
  字母間距:增加或減小字母或字符的間距。若要減少字符間距,請指定一個負值(例如 -4)。字母間距設置覆蓋對齊的文本設置。Internet Explorer 4 和更高版本以及 Netscape Navigator 6 支持“字母間距”屬性。
  垂直對齊:指定應用它的元素的垂直對齊方式。僅當應用於 標籤時,Dreamweaver 纔在“文檔”窗口中顯示該屬性。
  文本對齊:設置元素中的文本對齊方式。兩種瀏覽器都支持“文本對齊”屬性。
  文本縮進:指定第一行文本縮進的程度。可以使用負值創建凸出,但顯示取決於瀏覽器。僅當標籤應用於塊級元素時,Dreamweaver 纔在“文檔”窗口中顯示該屬性。兩種瀏覽器都支持“文本縮進”屬性。
  空格:確定如何處理元素中的空白。從下面三個選項中選擇:“正常”收縮空白;“保留”的處理方式即保留所有空白,包括空格、製表符和回車;“不換行”指定僅當遇到 br 標籤時文本才換行。Dreamweaver 不在“文檔”窗口中顯示該屬性。Netscape Navigator 和 Internet Explorer 5.5 支持“空格”屬性。
  顯示:指定是否顯示以及如何顯示元素。“無”關閉它被指定給的元素的顯示。
  設置完這些選項後,在面板左側選擇另一個 CSS 類別以設置其它的樣式屬性,或單擊“確定”。
  方 框 屬 性
  【定義 CSS 樣式方框屬性】使用“CSS 樣式定義”對話框的方框(又稱盒子)類別可以爲控制元素在頁面上的放置方式的標籤和屬性定義設置。可以在應用填充和邊距設置時將設置應用於元素的各個邊,也可以使用“全部相同”設置將相同的設置應用於元素的所有邊。
  定義元素在頁面上的放置方式:在“CSS 樣式定義”對話框中,選擇“方框”(如下圖),然後設置所需的樣式屬性。
  yp636_8.gif
  
  請注意:下列任意屬性如果您認爲不重要可以保留爲空。
  寬和高:設置元素的寬度和高度。寬和高定義的對象多爲圖片,表格,層等。
  浮動:設置元素浮動方式(如文本、層、表格等)。其它元素按通常的方式環繞在浮動元素的周圍。 兩種瀏覽器都支持浮動屬性。
  這是設置浮動效果的演示。定義表格浮動(左對齊),文本自動排列在該表格的右側。
  清除:不允許元素的浮動。左對齊:表示不允許左邊有浮動對象。右對齊:表示不允許右邊有浮動對象。兩者:表示允許兩邊都可以有浮動對象。無:不允許有浮動對象。兩種瀏覽器都支持“清除”屬性。
  填充:指定元素內容與元素邊框(如果沒有邊框,則爲邊距)之間的間距。取消選擇“全部相同”選項可設置元素各個邊的填充。
  全部相同:將相同的填充屬性設置爲它應用於的元素的“上”、“右”、“下”和“左”側。
  邊界:指定一個元素的邊框(如果沒有邊框,則爲填充)與另一個元素之間的間距。僅當應用於塊級元素(段落、標題、列表等)時,DW MX 2004纔在“文檔”窗口中顯示該屬性。取消選擇“全部相同”可設置元素各個邊的邊距。
  全部相同:將相同的邊距屬性設置爲它應用於的元素的“上”、“右”、“下”和“左”側。
  設置完這些選項後,在面板左側選擇另一個 CSS 類別以設置其它的樣式屬性,或單擊“確定”。
  邊 框 屬 性
  【定義 CSS 樣式邊框屬性】使用“CSS 樣式定義”對話框的“邊框”類別可以定義元素周圍的邊框的設置(如寬度、顏色和樣式)。
  提示:本頁爲邊框進行了設置 (樣式:點劃線 寬度:2px 顏色:#FF0000)
  設置邊框樣式:
  在“CSS 樣式定義”對話框中,選擇“邊框”(如下圖),然後設置所需的樣式屬性。
  yp636_9.gif
  
  請注意:下列任意屬性如果您認爲不重要可以保留爲空。
  樣式:設置邊框的樣式外觀。樣式的顯示方式取決於瀏覽器。DW MX 2004在“文檔”窗口中將所有樣式呈現爲實線。兩種瀏覽器都支持樣式屬性。取消選擇“全部相同”可設置元素各個邊的邊框樣式。
  全部相同:將相同的邊框樣式屬性設置應用於的元素的“上”、“右”、“下”和“左”側。
  寬度:設置元素邊框的粗細。兩種瀏覽器都支持“寬度”屬性。取消選擇“全部相同”可設置元素各個邊的邊框寬度。
  全部相同:將相同的邊框寬度設置應用於的元素的“上”、“右”、“下”和“左”側。
  顏色:設置邊框的顏色。可以分別設置每個邊的顏色,但顯示取決於瀏覽器。取消選擇“全部相同”可設置元素各個邊的邊框顏色。全部相同:將相同的邊框顏色設置應用於的元素的“上”、“右”、“下”和“左”側。
  設置完這些選項後,在面板左側選擇另一個 CSS 類別以設置其它的樣式屬性,或單擊“確定”。
  列 表 屬 性
  【定義 CSS 樣式列表屬性】 “CSS 樣式定義”對話框的“列表”類別爲列表標籤定義列表設置(如項目符號大小和類型)。
  定義列表樣式:
  在“CSS 樣式定義”對話框中,選擇“列表”(如下圖),然後選擇所需的樣式屬性。
  yp636_10.gif
  
  請注意:下列任意屬性如果您認爲不重要可以保留爲空。
  類型:設置項目符號或編號的外觀。兩種瀏覽器都支持“類型”。
  項目符號圖像:可以爲項目符號指定自定義圖像。單擊“瀏覽”選擇圖像或鍵入圖像的路徑。
  位置:設置列表項文本是否換行和縮進以及文本是否換行到左邊距。
  列表屬性設置應用舉例如下:
  圓點符號 數字編號 圖像符號
  CSS樣式表屬性分爲:
  類型;
  背景;
  區塊;
  方框;
  邊框;
  列表;
  定位;
  擴展;
  
  CSS樣式表屬性分爲:
  類型;
  背景;
  區塊;
  方框;
  邊框;
  列表;
  定位;
  擴展;
  CSS樣式表屬性分爲:
  類型;
  背景;
  區塊;
  方框;
  邊框;
  列表;
  定位;
  擴展;
  設置完這些選項後,在面板左側選擇另一個 CSS 類別以設置其它的樣式屬性,或單擊“確定”。
  定 位 屬 性
  【定義 CSS 樣式定位屬性】 “定位”樣式屬性使用“層”首選參數中定義層的默認標籤,將標籤或所選文本塊更改爲新層。
  設置層定位屬性:
  在“CSS 樣式定義”對話框中,選擇“定位”(如下圖),然後設置所需的樣式屬性。
  yp636_11.gif
  
  請注意:下列任意屬性如果您認爲不重要可以保留爲空。
  類型:確定瀏覽器應如何來定位層。
  絕對:使用“定位”框中輸入的座標(相對於頁面左上角)來放置層。
  相對:使用“定位”框中輸入的座標(相對於對象在文檔的文本中的位置)來放置層。該選項不顯示在“文檔”窗口中。
  靜態:將層放在它在文本中的位置。
  顯示:確定層的初始顯示條件。如果不指定可見性屬性,則默認情況下大多數瀏覽器都繼承父級的值。選擇以下可見性選項之一:
  繼承:繼承層父級的可見性屬性。如果層沒有父級,則它將是可見的。
  可見:顯示該層的內容,而不管父級的值是什麼。
  隱藏:隱藏這些層的內容,而不管父級的值是什麼。
  Z 軸:確定層的堆疊順序。編號較高的層顯示在編號較低的層的上面。值可以爲正,也可以爲負。(注:使用“層”面板更改層的堆疊順序更容易。)
  溢出(僅限於 CSS 層):確定在層的內容超出它的大小時將發生的情況。這些屬性控制如何處理此擴展,如下所示:
  可見:增加層的大小,使它的所有內容均可見。層向右下方擴展。
  隱藏:保持層的大小並剪輯任何超出的內容。不提供任何滾動條。
  滾動:在層中添加滾動條,不論內容是否超出層的大小。專門提供滾動條可避免滾動條在動態環境中出現和消失所引起的混亂。該選項不顯示在“文檔”窗口中,並且僅適用於支持滾動條的瀏覽器。Internet Explorer 和 Netscape Navigator 6 支持此屬性。
  自動:使滾動條僅在層的內容超出它的邊界時纔出現。該選項不顯示在“文檔”窗口中。
  定位:指定層的位置和大小。瀏覽器如何解釋位置取決於“類型”設置。如果層的內容超出指定的大小,則大小值被覆蓋。
  位置和大小的默認單位是像素。對於 CSS 層,還可以指定下列單位:pc(十二點活字)、pt(點)、in(英寸)、mm(毫米)、cm(釐米)、(ems)、(exs) 或 %(父級值的百分比)。縮寫必須緊跟在值之後,中間不留空格:例如,3mm。
  剪輯:定義層的可見部分。如果指定了剪輯區域,可以通過腳本語言(如 JavaScript)訪問它,並操作屬性以創建像擦除這樣的特殊效果。通過使用“改變屬性”行爲可以設置這些擦除效果。
  設置完這些選項後,在面板左側選擇另一個 CSS 類別以設置其它的樣式屬性,或單擊“確定”。
  擴 展 屬 性
  【定義 CSS 樣式擴展屬性】“擴展”樣式屬性包括過濾器、分頁和光標選項,它們中的大部分效果僅受 Internet Explorer 4.0 和更高版本的支持。
  指定擴展屬性:
  在“CSS 樣式定義”對話框中,選擇“擴展”(如下圖),然後設置所需的樣式屬性。
  yp636_12.gif
  
  請注意:下列任意屬性如果您認爲不重要可以保留爲空。
  分頁:在打印期間在樣式所控制的對象之前或者之後強行分頁。選擇要在彈出式菜單中設置的選項。此選項不受任何 4.0 版本瀏覽器的支持,但可能受未來的瀏覽器的支持。
  屬 性 說 明 hand 手形 crosshair 精確定位“+”字 text 文本“I”形 wait 等待 default 默認光標 help 幫助 e-resize 箭頭朝右方 ne-resize 箭頭朝右上方 n-resize 箭頭朝上方 nw-resize 箭頭朝左上方 w-resize 箭頭朝左方 sw-resize 箭頭朝左下方 s-resize 箭頭朝下方 se-resize 箭頭朝右下方 auto 自動 按照默認狀態改變
  
  yp636_13.gif
  
  光標:位於“視覺效果”下的“光標”選項,是光標顯示屬性設置。當指針位於樣式所控制的對象上時改變指針圖像。選擇彈出式菜單(右圖)進行設置。 (左圖)是它的詳細列表和相關說明。
  過濾器:又稱 CSS濾鏡, 對樣式所控制的對象應用特殊效果。它把我們帶入絢麗多姿的世界。正是有了濾鏡屬性,頁面才變得更加漂亮。 從“過濾器”彈出式菜單中選擇一種效果並視具體要求加以設置。各種 CSS 濾鏡屬性的詳細介紹請從導航條選擇“濾鏡屬性”按鈕瀏覽。
  濾 鏡 概 述
  過濾器:又稱 CSS濾鏡, 對樣式所控制的對象應用特殊效果。它把我們帶入絢麗多姿的世界。正是有了濾鏡屬性,頁面才變得更加漂亮。DW MX 2004 擴展類過濾器嵌入16項樣式屬性(如下圖),您可以根據您的需要從“過濾器”彈出式菜單中選擇並加以設置。
  yp636_14.gif
  
  濾 鏡
  說 明
  Alpha
  透明的漸進效果
  BlendTrans
  淡入淡出效果
  Blur
  風吹模糊的效果
  Chroma
  指定顏色透明
  DropShadow
  陰影效果
  FlipH
  水平翻轉
  FlipV
  垂直翻轉
  Glow
  邊緣光暈效果
  Gray
  彩色圖片變灰度圖
  Invert
  底片的效果
  Light
  模擬光源效果
  Mask
  矩形遮罩效果
  RevealTrans
  動態效果
  Shadow
  輪廓陰影效果
  Wave
  波浪扭曲變形效果
  Xray
  X光照片效果
  左表列出16項濾鏡及說明,現在再進一步介紹一下:
  “Alpha”濾鏡:這個名字,在Flash和Photoshop經常見到。它們的作用基本類似,就是把一個目標元素與背景混合。你可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。
  BlendTrans濾鏡:它的功能也比較單一,就是產生一種精細的淡入淡出的效果。
  Blur濾鏡:把它加載到文字上,產生風吹模糊的效果,類似立體字,這將爲你在網頁上製作立體字標題帶來了方便。也可以把Blur濾鏡加載到圖片上,能達到用圖象處理軟件製作的效果。
  “DropShadow”顧名思義就是添加對象的陰影效果。它的實際效果看上去就象是原來的對象離開了頁面,然後在頁面上顯示出該對象的投影。
  CSS的無參數濾鏡共有六個(FlipH、FlipV、Invert、Xray、Gray和Light),雖然它們沒有參數,相對來講,靈活性要差點,但它們用起來更方便,效果也相當明顯。用它們可以使文字或圖片翻轉、獲得圖片的“底片”效果,甚至可以製作圖片的“X光片”效果。
  glow濾鏡:使對象的邊緣就產生類似發光的效果,glow”濾鏡製作這種效果操作非常簡便。
  Mask濾鏡:可以爲網頁上的元件對象作出一個矩形遮罩效果。
  wave濾鏡:它的作用是把對象按照垂直的波形樣式扭曲的特殊效果。
  Light濾鏡:能產生一個模擬光源的效果,配合使用一些簡單的Javascrpt,使對象產生奇特光照的效果。
  RevealTrans動態濾鏡:是一個神奇的濾鏡,它能產生23種動態效果,還能在23種動態效果中隨機抽用其中的一種。用它來進行網頁之間的動態切換,非常方便。
  ALPHA 屬性
  【Alpha濾鏡屬性】這個名字,在Flash和Photoshop經常見到。它們的作用基本類似,就是把一個目標元素與背景混合。你可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定座標,可以指定點、線、面的透明度。由於“Alpha”濾鏡的參數多,我們先來看一下下邊的表格:
  參數名
  效 果 說 明
  取值說明
  Opacity
  不透明的程度,百分比。 取值0~100
  FinishOpacity
  可以製作出透明漸變的效果。 取值0~100
  Style
  指定漸變的顯示形狀。 0:沒有漸變;1:線性漸變;
  2:圓形漸變;3:矩形輻射。
  StartX
  漸變開始的 X 座標值  
  StartY
  漸變開始的 Y 座標值  
  FinishX
  漸變結束的 X 座標值  
  FinishY
  漸變結束的 Y 座標值  
  “opacity”:代表透明度程度。範圍是從0~100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。
  “finishopacity”:是一個可選參數,如果想要設置漸變的透明效果,就可以使用他們來指定結束時的透明度。範圍也是0 到 100。
  “style”:指定了透明區域的形狀特徵。其中0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。
  “StartX”和“StartY”:代表漸變透明效果的開始X和Y座標。
  “FinishX”和“FinishY”:代表漸變透明效果結束X和Y座標。
  請看下面的演示:
  Alpha 屬性值:  
  Alpha(Opacity=50, FinishOpacity=100, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100)
  Alpha(Opacity=10, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)
  Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)
  Alpha(Opacity=10, FinishOpacity=100, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100)
  Style 加載在單元格上顯示效果如下圖:
  原圖 style=0 style=1 style=2 style=3
  Style加載在圖片上顯示效果如下圖: 
  原圖
  style=0
  style=1
  style=2
  style=3
  yp636_15.gif
  
  yp636_15.gif
  
  yp636_15.gif
  
  yp636_15.gif
  
  yp636_15.gif
  
  Style加載在文字上顯示效果如下圖:
  Alpha(Opacity=30,Style=0) 這是文字透明效果演示
  BLENDTRANS 屬性
  【BlendTrans屬性】淡入淡出的效果濾鏡,能產生極精細的圖片轉換效果。
  yp636_16.jpg
  
  製作說明:
  BlendTrans濾鏡功能也比較單一,只有一個參數:Duration(變換時間)。需要藉助於Javascript來調用它的方法來實現轉換功能。使用BlendTrans濾鏡,首先您要準備幾張寬高尺寸相同的圖片,並分別命名,保存在圖像目錄下,如:images/*.jpg。如果用4幅的話,分別取名爲:blen1.jpg; blen2.jpg; blen3.jpg;blen4.jpg。(用其它名稱也可以,但下邊的javascript設置要相應調整。)
  製作方法:
  1、製作一個BlendTrans濾鏡,取名爲“myblen",Duration設置爲“3"(即轉換時間爲3秒),濾鏡設置好後,在網頁源代碼的< head >與< /head >之間將有下面這樣一段代碼:
  
  

  2、插入第一張圖片(本例圖片爲570X150像素),在圖片的屬性面板上給圖片加個名稱:myimg

  3、把BlendTrans濾鏡加載到圖片上,這時圖片的“img"標記的代碼是這樣的:DW

  4、在網頁的源代碼與之間插入下面這段Javascript程序:

  
  5、在網頁源代碼的< body >加入這樣的一句代碼:οnlοad="play()"。
  設置完成,點F12預覽效果。

本文轉自
http://ylts0313.blog.sohu.com/44613622.html
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章