在 Dreamweaver 中套用 Spry 效果

註解:

在 Dreamweaver CC 和更新版本中,Spry Widget 已由 jQuery Widget 所取代。雖然您仍可修改頁面上現有的 Spry Widget,但無法加入新的 Spry Widget。

Spry 效果總覽

「Spry 效果」為視覺增強功能,可以套用至使用 JavaScript 的 HTML 網頁上幾乎任何元素。 這些效果通常用來反白標示資訊、建立動畫轉換,或是在指定時間變更頁面元素的視覺效果。您不需要額外的自訂標籤,就能將效果套用至 HTML 元素。

註解:

若要將效果套用至元素,此效果目前必須是選取狀態,否則就必須具有 ID。例如,假設您要套用反白標示到目前並未選取的 div 標籤,此 div 必須具備有效的 ID 值。如果元素尚無有效的 ID 值,則必須新增一個至 HTML 程式碼。

效果可以變更元素的不透明度、縮放、位置和樣式屬性,如背景顏色等。您可以組合兩種或以上的屬性,以建立有趣的視覺效果。

由於這些效果都是以 Spry 為基礎,當使用者以某種效果在元素上按一下時,只有該元素會動態更新,不會重新整理整個 HTML 頁面。

Spry 包含下列效果:

出現/淡出

使元素出現或淡出。

標示

變更元素的背景顏色。

百葉窗

模擬拉上或拉下百葉窗的動作,以隱藏或顯示元素。

滑動

將元素向上或向下移動。

放大/縮小

放大或縮小元素尺寸。

震動

模擬從左到右震動元素的動作。

擠壓

使元素從頁面左上角消失。

註解:

當您使用效果時,可以在「程式碼」檢視中,看到檔案新增了多行程式碼。其中有一行用以識別 SpryEffects.js 檔案,這是納入效果時的必要檔案。請勿將此行自程式碼移除,否則效果將失去作用。

如需 Spry 架構中可用 Spry 效果的完整總覽,請造訪 www.adobe.com/go/learn_dw_spryeffects_tw

套用出現/淡出效果

註解:

您可以搭配 appletbodyiframeobjecttrtbodyth 以外的任何 HTML 元素使用這個效果。

  1. (選擇性) 選取您要套用效果的內容或版面元素。
  2. 在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從選單中選取「效果 > 出現/淡出」。
  3. 從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。
  4. 在「作用期間」方塊中,定義效果出現時所花費的時間 (以毫秒為單位)。
  5. 選取您要套用的效果:「淡出」或「出現」。
  6. 在「淡出自」方塊中,定義效果出現時的不透明度百分比。
  7. 在「淡出至」方塊中,定義您要淡出至何種不透明度百分比。
  8. 如果您希望效果是可以回復的,請選取「切換效果」,只要連續按下滑鼠就能從淡出到出現,再從出現到淡出。

套用百葉窗效果

註解:

您只可以搭配下列這些 HTML 元素使用這個效果:address、dd、div、dl、dt、form、h1、h2、h3、h4、h5、h6、p、ol、ul、li、applet、center、dir、menu 或 pre。

  1. (選擇性) 選取您要套用效果的內容或版面元素。
  2. 在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從選單中選取「效果 > 百葉窗」。
  3. 從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。
  4. 在「作用期間」方塊中,定義效果出現時所花費的時間 (以毫秒為單位)。
  5. 選取您要套用的效果:「拉上百葉窗」或「拉下百葉窗」。
  6. 在「拉上百葉窗自/拉下百葉窗自」方塊中,以百分比或像素數目定義百葉窗捲動的起始點。這些值都是從元素上方計算而得。
  7. 在「拉上百葉窗至/拉下百葉窗至」欄位中,以百分比或像素數目定義百葉窗捲動的結束點。這些值都是從元素上方計算而得。
  8. 如果您希望效果是可以回復的,只要連續按下滑鼠就能向上和向下捲動,請選取「切換效果」。

套用放大/縮小效果

註解:

您可以搭配下列這些 HTML 元素使用這個效果:address、dd、div、dl、dt、form、p、ol、ul、applet、center、dir、menu 或 pre。

  1. (選擇性) 選取您要套用效果的內容或版面元素。
  2. 在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從彈出式選單中選取「效果 > 放大/縮小」。
  3. 從目標彈出式元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。
  4. 在「作用期間」欄位中,定義效果出現時所花費的時間 (以毫秒為單位)。
  5. 選取您要套用的效果:「放大」或「縮小」。
  6. 在「放大/縮小自」方塊中,定義效果開始時的元素大小。這是大小百分比或像素值。
  7. 在「放大/縮小至」方塊中,定義效果結束時的元素大小。這是大小百分比或像素值。
  8. 如果您為「放大/縮小自」或「放大/縮小至」方塊選擇像素,則欄位寬/高就會顯現出來。元素會根據您所選取的選項依比例放大或縮小。
  9. 選取您是否要讓元素放大或縮小至頁面左上方或頁面中心。
  10. 如果您希望效果是可以回復的,只要連續按下滑鼠就能放大和縮小,請選取「切換效果」。

套用標示效果

註解:

您可以搭配 appletbodyframeframesetnoframes 以外的任何 HTML 元素使用這個效果。

  1. (選擇性) 選取您要套用效果的內容或版面元素。
  2. 在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從選單中選取「效果 > 標示」。
  3. 從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。
  4. 在「作用期間」方塊中,定義效果的持續時間 (以毫秒為單位)。
  5. 選取反白標示的起始顏色。
  6. 選取反白標示的結束顏色。這個顏色的持續時間就是您在「作用期間」所定義的時間。
  7. 選取反白標示結束後的元素顏色。
  8. 如果您希望效果是可以回復的,只要連續按下滑鼠就能循環顯示反白標示的顏色,請選取「切換效果」。

套用震動效果

註解:

您可以搭配下列這些 HTML 元素使用這個效果:addressblockquotedddivdldtfieldsetformh1h2h3h4h5h6iframeimgobjectpolulliappletdirhrmenupretable

  1. (選擇性) 選取您要套用效果的內容或版面元素。
  2. 在「行為」面板 (「視窗 > 行為」) 中,按一下「加號 (+)」按鈕,並從選單中選取「效果 > 震動」。
  3. 從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。

套用滑動效果

要讓滑動效果能夠正常運作,必須用具有唯一 ID 的容器標籤圍繞目標元素。用來圍繞目標元素的容器標籤必須是 blockquoteddformdivcenter 標籤。

目標元素標籤必須是下列其中一項:blockquotedddivformcentertablespaninputtextareaselectimage

  1. (選擇性) 選取您想要套用效果的內容的容器標籤。
  2. 在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從選單中選取「效果 > 滑動」。
  3. 從目標元素選單中選取容器標籤的 ID。如果您已選取容器,請選擇「<目前選取範圍>」。
  4. 在「作用期間」欄位中,定義效果出現時所花費的時間 (以毫秒為單位)。
  5. 選取您要套用的效果:「向上滑動」或「向下滑動」。
  6. 在「向上滑動自」方塊中,以百分比或像素數目定義滑動的起始點。
  7. 在「向上滑動至」方塊中,以百分比或正的像素數量定義滑動的結束點。
  8. 如果您希望效果是可以回復的,只要連續按下滑鼠就能向上和向下滑動,請選取「切換效果」。

套用擠壓效果

註解:

您只可以搭配下列這些 HTML 元素使用這個效果:addressdddivdldtformimgpolulappletcenterdirmenupre

  1. (選擇性) 選取您要套用效果的內容或版面元素。
  2. 在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從選單中選取「效果 > 擠壓」。
  3. 從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。

附加額外效果

您可以使多個效果行為與相同元素相關聯,以產生有趣的結果。

  1. (選擇性) 選取您要套用效果的內容或版面元素。
  2. 在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從「效果」選單中選取效果。
  3. 從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。

刪除效果

您可以移除元素的一個或多個效果行為。

  1. (選擇性) 選取您要套用效果的內容或版面元素。
  2. 在「行為」面板 (「視窗 > 行為」) 中,按一下您要自行為清單中刪除的效果。
  3. 請執行下列其中一項作業:
    • 在子面板標題列 (-) 中按一下「移除事件」按鈕。

    • 在行為上按一下右鍵 (Windows) 或 Control+按一下 (Macintosh),然後選取「刪除行為」。

更快、更輕鬆地獲得協助

新的使用者?