日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

DW里CSS的詳細介紹

 Ethan的博客 2011-03-13
創(chuàng)建CSS樣式表的過程,就是對各種CSS屬性的配置過程,所以了解和掌控屬性配置很重要。在DW MX 2004的CSS樣式里包含了W3C規(guī)范定義的任何CSS1的屬性,把這些屬性分為:類型、背景、區(qū)塊、方框、邊框、列表、定位、擴展等八個部分,如下圖:

DW MX 2004 實現(xiàn)CSS屬性配置功能是完全可視化的,無需編寫代碼。下面我們分別周詳講解。為了便于理解,從開始創(chuàng)建新的 CSS 樣式表說起:

注:您需對 DW MX 2004 程式初步了解,并打開他對照本教程進行學習。假如您對 DW MX 2004 尚不熟悉,請瀏覽 DW MX 2004 簡體中文版入門教程。

    【創(chuàng)建新的 CSS 樣式】
    將插入點放在文檔中,然后執(zhí)行以下操作之一打開“新建 CSS 樣式”對話框:

  • 在“CSS 樣式”面板(“窗口”>“CSS 樣式”)中,單擊面板右下角區(qū)域中的“新建 CSS 樣式”按鈕,如下圖:

  • 在文本屬性檢查器中,從“樣式”彈出式菜單中選擇“管理樣式”,然后在出現(xiàn)的對話框中單擊“新建”。
  • 在“相關(guān) CSS”選項卡(選擇“窗口”>“標簽檢查器”,然后單擊“相關(guān) CSS”選項卡)中右鍵單擊,然后從上下文菜單中選擇“新建規(guī)則”。
       
  • 選擇“文本”菜單>“CSS 樣式”>“新建(N)…”。
       “新建 CSS 樣式”對話框隨即出現(xiàn),如下圖:

定義您要創(chuàng)建的 CSS 樣式的類型:

    若要創(chuàng)建可作為 class 屬性應用于文本范圍或文本塊的自定義樣式,請選擇“創(chuàng)建自定義樣式 (Class)”,然后在“名稱”文本框中輸入樣式名稱。
    注意:類名稱必須以句點開頭,并且能夠包含任何字母和數(shù)字組合(例如,.mycss)。假如您沒有輸入開頭的句點,DW MX 2004將自動為您輸入。

  • 若要重定義特定 HTML 標簽的默認格式,請選擇“重定義標簽”,然后在“標簽”字段中輸入一個 HTML 標簽,或從彈出式菜單中選擇一個標簽。
  • 若要為具體某個標簽組合或任何包含特定 Id 屬性的標簽定義格式,請選擇“使用 CSS 選擇器”,然后在“選擇器”文本框中輸入一個或多個 HTML 標簽,或從彈出式菜單中選擇一個標簽。彈出式菜單中提供的選擇器(稱作偽類選擇器)包括 a:active、a:hover、a:link 和 a:visited。
        選擇定義樣式的位置:
  • 若要創(chuàng)建外部樣式表,請選擇“新建樣式表文檔”。
       
  • 若要在當前文檔中嵌入樣式,請選擇“僅對該文檔”。
       
  • 單擊“確定”。
    類 型 屬 性

    【定義 CSS 類型屬性】使用“CSS 樣式定義”對話框中的“類型”類別能夠定義 CSS 樣式的基本字體和類型配置。

    定義 CSS 樣式的類型配置:
        在“CSS 樣式定義”對話框中,選擇“類型”(如下圖),然后配置所需的樣式屬性。


        請注意:下列任意屬性假如您認為不重要能夠保留為空。

    字體:為樣式配置字體。DW MX 2004內(nèi)置6個系列的英文字體(如下圖)。

    一般英文字體常常用“Arial, Helvetica, sans-serif”這個系列比較美觀,假如不用這些字體系列,您您能夠通過下拉列表最下面的“編輯字體列表”來創(chuàng)建新的字體系列。中文網(wǎng)頁默認字體是宋體,一般留空即可。瀏覽器最好選擇用戶系統(tǒng)第一種字體顯示文本。兩種瀏覽器都支持字體屬性。
        大?。憾x文本大小。能夠通過選擇數(shù)字和度量單位選擇特定的大小,也能夠選擇相對大小。以像素為單位能夠有效地防止瀏覽器變形文本。

    提示:CSS中長度的單位分絕對長度單位和相對長度單位:

    [轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~
    絕對
    長度
    px:(象素)根據(jù)顯示器的分辨率來確定長度。
    pt:(字號)根據(jù)windows系統(tǒng)定義的字號大小來確定長度。
    in、cn、mm:(英寸、厘米、毫米)根據(jù)顯示的實際尺寸來確定長度。此類單位不隨顯示器的分辨率改變而改變。
    相對
    長度

    em:當前文本的尺寸。例如:{ font-size:2em}是指文字大小為原來的2倍。
    ex:當前字母“x”的高度,一般為字體尺寸的一半。
    %:是以當前文本的百分比定義尺寸。例如:{ font-size:300%}是指文字大小為原來的3倍。

    兩種瀏覽器都支持大小屬性。

    • 樣式:將“正常”、“斜體”或“偏斜體”指定為字體樣式。默認配置是“正常”。兩種瀏覽器都支持樣式屬性。
    • 行高:配置文本所在行的高度。選擇“正常”自動計算字體大小的行高,或輸入一個確切的值并選擇一種度量單位。比較直觀的寫法用百分比,例如180%是指行高等于文字大小的1.8倍。相對應的CSS屬性是”line-height”。兩種瀏覽器都支持行高屬性。
    • 修飾:向文本中添加下劃線、上劃線或刪除線,或使文本閃爍。正常文本的默認配置是“無”。鏈接的默認配置是“下劃線”。將鏈接配置設(shè)為無時,能夠通過定義一個特別的類刪除鏈接中的下劃線。這些效果能夠同時存在,將效果前的復選框選定即可。相對應的CSS屬性是”text-decoration”。兩種瀏覽器都支持修飾屬性。
    • 粗細:對字體應用特定或相對的粗體量。“正常”等于 400;“粗體”等于 700。相對應的CSS屬性是”font-weight”。兩種瀏覽器都支持粗細屬性。
    • 變量:配置文本的小型大寫字母變量。DW MX 2004不在“文檔”窗口中顯示該屬性。Internet Explorer 支持變量屬性,但 Netscape Navigator 不支持。
    • 大小寫:將選定內(nèi)容中的每個單詞的首字母大寫或?qū)⑽谋九渲脼槿看髮懟蛐憽煞N瀏覽器都支持大小寫屬性。
    • 顏色:配置文本顏色。兩種瀏覽器都支持顏色屬性。

    配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。

    背 景 屬 性

    【定義 CSS 樣式背景屬性】使用“CSS 樣式定義”對話框的“背景”類別能夠定義 CSS 樣式的背景配置。能夠?qū)W(wǎng)頁中的任何元素應用背景屬性。例如,創(chuàng)建一個樣式,將背景顏色或背景圖像添加到任何頁面元素中,比如在文本、表格、頁面等的后面。還能夠配置背景圖像的位置。

    提示:本頁背景圖片固定,是【定義 CSS 樣式背景屬性】的效果。

    定義背景配置:
        在“CSS 樣式定義”對話框中,選擇“背景”(如下圖),然后配置所需的樣式屬性。

     

    請注意:下列任意屬性假如您認為不重要能夠保留為空。

    背景顏色:配置元素的背景顏色。兩種瀏覽器都支持背景顏色屬性。

    背景圖像:配置元素的背景圖像。兩種瀏覽器都支持背景圖像屬性。

    重復:定義是否重復連同怎樣重復背景圖像。兩種瀏覽器都支持重復屬性。

    • “不重復”在元素開始處顯示一次圖像。
    • “重復”在元素的后面水平和垂直平鋪圖像。
    • “橫向重復”和“縱向重復”分別顯示圖像水平帶區(qū)和垂直帶區(qū)。圖像被剪輯以適合元素的邊界。

    附件:確定背景圖像是固定在他的原始位置還是隨內(nèi)容一起滾動。注意,某些瀏覽器可能將“固定”選項視為“滾動”。Internet Explorer 支持該選項,但 Netscape Navigator 不支持。

    水平位置:和垂直位置指定背景圖像相對于元素的初始位置。這能夠用于將背景圖像和頁面中央垂直和水平對齊。假如附件屬性為“固定”,則位置相對于“文檔”窗口而不是元素。Internet Explorer支持該屬性,但 Netscape Navigator 不支持。

    配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。

    區(qū) 塊 屬 性

    【定義 CSS 樣式區(qū)塊屬性】使用“CSS 樣式定義”對話框的“區(qū)塊”類別能夠定義標簽和屬性的間距和對齊配置。下列兩組表格為文本定義區(qū)塊屬性前后對比:

    原文本未定義區(qū)塊屬性
    【定義CSS樣式區(qū)塊屬性】

    定義區(qū)塊屬性后效果
    【定義CSS樣式區(qū)塊屬性】

    原文本未定義區(qū)塊
    使用“樣式定義”對話框的“區(qū)塊”類別能夠定義標簽和屬性的間距和對齊配置。此為區(qū)塊定義演示。字間的空格可不是用鍵盤敲出來的。

    定義區(qū)塊后效果(參數(shù)見下圖)
    使用“樣式定義”對話框的“區(qū)塊”類別能夠定義標簽和屬性的間距和對齊配置。此為區(qū)塊定義演示。字間的空格可不是用鍵盤敲出來的。

    定義區(qū)塊配置:在“CSS樣式定義”對話框中,選擇“區(qū)塊”(如下圖),然后配置所需的樣式屬性。

    請注意:下列任意屬性假如您認為不重要能夠保留為空。

    單詞間距:配置單詞的間距。若要配置特定的值,請在彈出式菜單中選擇“值”,然后輸入一個數(shù)值。在第二個彈出式菜單中,選擇度量單位。

    注意:能夠指定負值,但顯示取決于瀏覽器。Dreamweaver 不在“文檔”窗口中顯示該屬性。

    字母間距:增加或減小字母或字符的間距。若要減少字符間距,請指定一個負值(例如 -4)。字母間距配置覆蓋對齊的文本配置。Internet Explorer 4 和更高版本連同 Netscape Navigator 6 支持“字母間距”屬性。

    垂直對齊:指定應用他的元素的垂直對齊方式。僅當應用于 <img> 標簽時,Dreamweaver 才在“文檔”窗口中顯示該屬性。

    文本對齊:配置元素中的文本對齊方式。兩種瀏覽器都支持“文本對齊”屬性。

    文本縮進:指定第一行文本縮進的程度。能夠使用負值創(chuàng)建凸出,但顯示取決于瀏覽器。僅當標簽應用于塊級元素時,Dreamweaver 才在“文檔”窗口中顯示該屬性。兩種瀏覽器都支持“文本縮進”屬性。

    空格:確定怎樣處理元素中的空白。從下面三個選項中選擇:“正常”收縮空白;“保留”的處理方式即保留任何空白,包括空格、制表符和回車;“不換行”指定僅當碰到 br 標簽時文本才換行。Dreamweaver 不在“文檔”窗口中顯示該屬性。Netscape Navigator 和 Internet Explorer 5.5 支持“空格”屬性。

    顯示:指定是否顯示連同怎樣顯示元素。“無”關(guān)閉他被指定給的元素的顯示。

    配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。

    方 框 屬 性

    【定義 CSS 樣式方框?qū)傩浴渴褂?#8220;CSS 樣式定義”對話框的方框(又稱盒子)類別能夠為控制元素在頁面上的放置方式的標簽和屬性定義配置。能夠在應用填充和邊距配置時將配置應用于元素的各個邊,也能夠使用“全部相同”配置將相同的配置應用于元素的任何邊。

    定義元素在頁面上的放置方式:在“CSS 樣式定義”對話框中,選擇“方框”(如下圖),然后配置所需的樣式屬性。

    請注意:下列任意屬性假如您認為不重要能夠保留為空。

        寬和高:配置元素的寬度和高度。寬和高定義的對象多為圖片,表格,層等。

    浮動:配置元素浮動方式(如文本、層、表格等)。其他元素按通常的方式環(huán)繞在浮動元素的周圍。  兩種瀏覽器都支持浮動屬性。
        這是配置浮動效果的演示。定義表格浮動(左對齊),文本自動排列在該表格的右側(cè)。

    清除:不允許元素的浮動。左對齊:表示不允許左邊有浮動對象。右對齊:表示不允許右邊有浮動對象。兩者:表示允許兩邊都能夠有浮動對象。無:不允許有浮動對象。兩種瀏覽器都支持“清除”屬性。
       填充:指定元素內(nèi)容和元素邊框(假如沒有邊框,則為邊距)之間的間距。取消選擇“全部相同”選項可配置元素各個邊的填充。

    全部相同:將相同的填充屬性配置為他應用于的元素的“上”、“右”、“下”和“左”側(cè)。

    邊界:指定一個元素的邊框(假如沒有邊框,則為填充)和另一個元素之間的間距。僅當應用于塊級元素(段落、標題、列表等)時,DW MX 2004才在“文檔”窗口中顯示該屬性。取消選擇“全部相同”可配置元素各個邊的邊距。

    全部相同:將相同的邊距屬性配置為他應用于的元素的“上”、“右”、“下”和“左”側(cè)。

    配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。

    邊 框 屬 性

    【定義 CSS 樣式邊框?qū)傩浴渴褂?#8220;CSS 樣式定義”對話框的“邊框”類別能夠定義元素周圍的邊框的配置(如寬度、顏色和樣式)。

    提示:本頁為邊框進行了配置 樣式:點劃線  寬度:2px  顏色#FF0000

    配置邊框樣式:
        在“CSS 樣式定義”對話框中,選擇“邊框”(如下圖),然后配置所需的樣式屬性。

    請注意:下列任意屬性假如您認為不重要能夠保留為空。

       樣式:配置邊框的樣式外觀。樣式的顯示方式取決于瀏覽器。DW MX 2004在“文檔”窗口中將任何樣式呈現(xiàn)為實線。兩種瀏覽器都支持樣式屬性。取消選擇“全部相同”可配置元素各個邊的邊框樣式。
        全部相同:將相同的邊框樣式屬性配置應用于的元素的“上”、“右”、“下”和“左”側(cè)。

       寬度:配置元素邊框的粗細。兩種瀏覽器都支持“寬度”屬性。取消選擇“全部相同”可配置元素各個邊的邊框?qū)挾取?br>    全部相同:將相同的邊框?qū)挾扰渲脩糜诘脑氐?#8220;上”、“右”、“下”和“左”側(cè)。

       顏色:配置邊框的顏色。能夠分別配置每個邊的顏色,但顯示取決于瀏覽器。取消選擇“全部相同”可配置元素各個邊的邊框顏色。全部相同:將相同的邊框顏色配置應用于的元素的“上”、“右”、“下”和“左”側(cè)。

       配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。

    列 表 屬 性

    【定義 CSS 樣式列表屬性】 “CSS 樣式定義”對話框的“列表”類別為列表標簽定義列表配置(如項目符號大小和類型)。

    定義列表樣式:
        在“CSS 樣式定義”對話框中,選擇“列表”(如下圖),然后選擇所需的樣式屬性。

        請注意:下列任意屬性假如您認為不重要能夠保留為空。

    •  類型:配置項目符號或編號的外觀。兩種瀏覽器都支持“類型”。
    •  項目符號圖像:能夠為項目符號指定自定義圖像。單擊“瀏覽”選擇圖像或鍵入圖像的路徑。
    •  位置:配置列表項文本是否換行和縮進連同文本是否換行到左邊距。


      列表屬性配置應用舉例如下:

      圓點符號
      數(shù)字編號
      圖像符號

      CSS樣式表屬性分為:

      • 類型;
      • 背景;
      • 區(qū)塊;
      • 方框;
      • 邊框;
      • 列表;
      • 定位;
      • 擴展;
      CSS樣式表屬性分為:
      1. 類型;
      2. 背景;
      3. 區(qū)塊;
      4. 方框;
      5. 邊框;
      6. 列表;
      7. 定位;
      8. 擴展;
      CSS樣式表屬性分為:
      • 類型;
      • 背景;
      • 區(qū)塊;
      • 方框;
      • 邊框;
      • 列表;
      • 定位;
      • 擴展;

      配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。

      定 位 屬 性

       

      【定義 CSS 樣式定位屬性】 “定位”樣式屬性使用“層”最好選擇參數(shù)中定義層的默認標簽,將標簽或所選文本塊更改為新層。

      配置層定位屬性:
          在“CSS 樣式定義”對話框中,選擇“定位”(如下圖),然后配置所需的樣式屬性。


          請注意:下列任意屬性假如您認為不重要能夠保留為空。

      類型:確定瀏覽器應怎樣來定位層。

      絕對:使用“定位”框中輸入的坐標(相對于頁面左上角)來放置層。

      相對:使用“定位”框中輸入的坐標(相對于對象在文檔的文本中的位置)來放置層。該選項不顯示在“文檔”窗口中。

      靜態(tài):將層放在他在文本中的位置。

      顯示:確定層的初始顯示條件。假如不指定可見性屬性,則默認情況下大多數(shù)瀏覽器都繼承父級的值。選擇以下可見性選項之一:

      繼承:繼承層父級的可見性屬性。假如層沒有父級,則他將是可見的。

      可見:顯示該層的內(nèi)容,而不管父級的值是什么。

      隱藏:隱藏這些層的內(nèi)容,而不管父級的值是什么。

      Z 軸:確定層的堆疊順序。編號較高的層顯示在編號較低的層的上面。值能夠為正,也能夠為負。(注:使用“層”面板更改層的堆疊順序更容易。)

      溢出(僅限于 CSS 層):確定在層的內(nèi)容超出他的大小時將發(fā)生的情況。這些屬性控制怎樣處理此擴展,如下所示:

      可見:增加層的大小,使他的任何內(nèi)容均可見。層向右下方擴展。

      隱藏:保持層的大小并剪輯任何超出的內(nèi)容。不提供任何滾動條。

      滾動:在層中添加滾動條,不論內(nèi)容是否超出層的大小。專門提供滾動條可避免滾動條在動態(tài)環(huán)境中出現(xiàn)和消失所引起的混亂。該選項不顯示在“文檔”窗口中,并且僅適用于支持滾動條的瀏覽器。Internet Explorer 和 Netscape Navigator 6 支持此屬性。

      自動:使?jié)L動條僅在層的內(nèi)容超出他的邊界時才出現(xiàn)。該選項不顯示在“文檔”窗口中。

      定位:指定層的位置和大小。瀏覽器怎樣解釋位置取決于“類型”配置。假如層的內(nèi)容超出指定的大小,則大小值被覆蓋。

      位置和大小的默認單位是像素。對于 CSS 層,還能夠指定下列單位:pc(十二點活字)、pt(點)、in(英寸)、mm(毫米)、cm(厘米)、(ems)、(exs) 或 %(父級值的百分比)??s寫必須緊跟在值之后,中間不留空格:例如,3mm。

      剪輯:定義層的可見部分。假如指定了剪輯區(qū)域,能夠通過腳本語言(如 javascript)訪問他,并操作屬性以創(chuàng)建像擦除這樣的特別效果。通過使用“改變屬性”行為能夠配置這些擦除效果。

      配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。

      擴 展 屬 性

      【定義 CSS 樣式擴展屬性】“擴展”樣式屬性包括過濾器、分頁和光標選項,他們中的大部分效果僅受 Internet Explorer 4.0 和更高版本的支持。

      指定擴展屬性:
          在“CSS 樣式定義”對話框中,選擇“擴展”(如下圖),然后配置所需的樣式屬性。

      請注意:下列任意屬性假如您認為不重要能夠保留為空。

       

      分頁:在打印期間在樣式所控制的對象之前或之后強行分頁。選擇要在彈出式菜單中配置的選項。此選項不受任何 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
      自動 按照默認狀態(tài)改變

       

       

      光標:位于“視覺效果”下的“光標”選項,是光標顯示屬性配置。當指針位于樣式所控制的對象上時改變指針圖像。選擇彈出式菜單(右圖)進行配置。(左圖)是他的周詳列表和相關(guān)說明。

      過濾器:又稱 CSS濾鏡,對樣式所控制的對象應用特別效果。他把我們帶入絢麗多姿的世界。正是有了濾鏡屬性,頁面才變得更加漂亮。從“過濾器”彈出式菜單中選擇一種效果并視具體需要加以配置。各種 CSS 濾鏡屬性的周詳介紹從導航條選擇“濾鏡屬性”按鈕瀏覽。

       

      濾鏡 概 述

      過濾器:又稱 CSS濾鏡,對樣式所控制的對象應用特別效果。他把我們帶入絢麗多姿的世界。正是有了濾鏡屬性,頁面才變得更加漂亮。DW MX 2004 擴展類過濾器嵌入16項樣式屬性(如下圖),您能夠根據(jù)您的需要從“過濾器”彈出式菜單中選擇并加以配置。

      濾 鏡

      說 

      Alpha

      透明的漸進效果

      BlendTrans

      淡入淡出效果

      Blur

      風吹模糊的效果

      Chroma

      指定顏色透明

      DropShadow

      陰影效果

      FlipH

      水平翻轉(zhuǎn)

      FlipV

      垂直翻轉(zhuǎn)

      Glow

      邊緣光暈效果

      Gray

      彩色圖片變灰度圖

      Invert

      底片的效果

      Light

      模擬光源效果

      Mask

      矩形遮罩效果

      RevealTrans

      動態(tài)效果

      Shadow

      輪廓陰影效果

      Wave

      波浪扭曲變形效果

      Xray

      X光照片效果

      左表列出16項濾鏡及說明,現(xiàn)在再進一步介紹一下:

      “Alpha”濾鏡:這個名字,在Flash和Photoshop經(jīng)常見到。他們的作用基本類似,就是把一個目標元素和背景混合。您能夠指定數(shù)值來控制混合的程度。這種“和背景混合”通俗地說就是個元素的透明度。

      BlendTrans濾鏡:他的功能也比較單一,就是產(chǎn)生一種精細的淡入淡出的效果。

      Blur濾鏡:把他加載到文字上,產(chǎn)生風吹模糊的效果,類似立體字,這將為您在網(wǎng)頁上制作立體字標題帶來了方便。也能夠把Blur濾鏡加載到圖片上,能達到用圖象處理軟件制作的效果。

      “DropShadow”顧名思義就是添加對象的陰影效果。他的實際效果看上去就象是原來的對象離開了頁面,然后在頁面上顯示出該對象的投影。

      CSS的無參數(shù)濾鏡共有六個(FlipH、FlipV、Invert、Xray、Gray和Light),雖然他們沒有參數(shù),相對來講,靈活性要差點,但他們用起來更方便,效果也相當明顯。用他們能夠使文字或圖片翻轉(zhuǎn)、獲得圖片的“底片”效果,甚至能夠制作圖片的“X光片”效果。

      glow濾鏡:使對象的邊緣就產(chǎn)生類似發(fā)光的效果,glow”濾鏡制作這種效果操作很簡便。

      Mask濾鏡:能夠為網(wǎng)頁上的元件對象作出一個矩形遮罩效果。

      wave濾鏡:他的作用是把對象按照垂直的波形樣式扭曲的特別效果。

      Light濾鏡:能產(chǎn)生一個模擬光源的效果,配合使用一些簡單的Javascrpt,使對象產(chǎn)生奇特光照的效果。

      RevealTrans動態(tài)濾鏡:是個神奇的濾鏡,他能產(chǎn)生23種動態(tài)效果,還能在23種動態(tài)效果中隨機抽用其中的一種。用他來進行網(wǎng)頁之間的動態(tài)轉(zhuǎn)換,很方便。

      ALPHA 屬性

      【Alpha濾鏡屬性】這個名字,在Flash和Photoshop經(jīng)常見到。他們的作用基本類似,就是把一個目標元素和背景混合。您能夠指定數(shù)值來控制混合的程度。這種“和背景混合”通俗地說就是個元素的透明度。通過指定坐標,能夠指定點、線、面的透明度。由于“Alpha”濾鏡的參數(shù)多,我們先來看一下下邊的表格:

      參數(shù)名

      效 果 說 明

      取值說明

      Opacity

      不透明的程度,百分比。 取值0~100

      FinishOpacity

      能夠制作出透明漸變的效果。 取值0~100

      Style

      指定漸變的顯示形狀。 0:沒有漸變;1:線性漸變;
      2:圓形漸變;3:矩形輻射。

      StartX

      漸變開始的 X 坐標值  

      StartY

      漸變開始的 Y 坐標值  

      FinishX

      漸變結(jié)束的 X 坐標值  

      FinishY

      漸變結(jié)束的 Y 坐標值  

      “opacity”:代表透明度程度。范圍是從0~100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。
      “finishopacity”:是個可選參數(shù),假如想要配置漸變的透明效果,就能夠使用他們來指定結(jié)束時的透明度。范圍也是0 到 100。
      “style”:指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長方形。
      “StartX”和“StartY”:代表漸變透明效果的開始X和Y坐標。
      “FinishX”和“FinishY”:代表漸變透明效果結(jié)束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 加載在單元格<td>上顯示效果如下圖:

       

      原圖
      style=0
      style=1
      style=2
      style=3

      Style加載在圖片上顯示效果如下圖: 

      原圖

      style=0

      style=1

      style=2

      style=3


      Style加載在文字上顯示效果如下圖:

      Alpha(Opacity=30,Style=0)
      這是文字透明效果演示

       

      BLENDTRANS 屬性

      【BlendTrans屬性】淡入淡出的效果濾鏡,能產(chǎn)生極精細的圖片轉(zhuǎn)換效果。

      制作說明:
      BlendTrans濾鏡功能也比較單一,只有一個參數(shù):Duration(變換時間)。需要借助于javascript來調(diào)用他的方法來實現(xiàn)轉(zhuǎn)換功能。使用BlendTrans濾鏡,首先您要準備幾張寬高尺寸相同的圖片,并分別命名,保存在圖像目錄下,如:images/*.jpg。假如用4幅的話,分別取名為:blen1.jpg; blen2.jpg; blen3.jpg;blen4.jpg。(用其他名稱也能夠,但下邊的javascript配置要相應調(diào)整。)
         制作方法:
         1、制作一個BlendTrans濾鏡,取名為“myblen",Duration配置為“3"(即轉(zhuǎn)換時間為3秒),濾鏡配置好后,在網(wǎng)頁源代碼的< head >和< /head >之間將有下面這樣一段代碼:
        

      < style type="text/css" >
      < !--
      .myblen { filter:blendTrans(Duration=3)
      }
      -- >
      < /style >

       2、插入第一張圖片(本例圖片為570X150像素),在圖片的屬性面板上給圖片加個名稱:myimg
         3、把BlendTrans濾鏡加載到圖片上,這時圖片的“img"標記的代碼是這樣的:<img src="images/blen1.jpg" name="myimg" width="570" height="150" class="myblen" id="myimg">;
         4、在網(wǎng)頁的源代碼< head >和< /head >之間插入下面這段javascript程式:

      <script language="javascript" >
      <!--
      function img(len)
      {
      this.length=len;
      }
      imgname=new img(4);
      imgname[0]="images/blen1.jpg";
      imgname[1]="images/blen2.jpg";
      imgname[2]="images/blen3.jpg";
      imgname[3]="images/blen4.jpg";
      var i=1;
      function play()
      {
      if (i==3)
      { i=0 ;}
      else
      { i++; }
      myimg.filters[0].apply();
      myimg.src=imgname[i];
      myimg.filters[0].play();
      mytimeout=setTimeout("play()",6000);
      }
      -->
      </script >

      5、在網(wǎng)頁源代碼的< body >加入這樣的一句代碼:onload="play()"。

      配置完成,點F12預覽效果

    本站是提供個人知識管理的網(wǎng)絡存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多