註解:

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

關於 Spry Widget

Spry Widget 是一種頁面元素,可透過使用者互動功能,提供更豐富的使用者經驗。Spry Widget 包含下列部分:

Widget 結構

HTML 程式碼區塊,用來定義 Widget 的結構成份。

Widget 行為

JavaScript,用來控制 Widget 要以何種方式回應由使用者起始的事件。

Widget 樣式

CSS,用來指定 Widget 的外觀。

Spry 架構支援以標準 HTML、CSS 和 JavaScript 所撰寫的一組可重複使用的 Widget。您可以輕鬆地插入這些 Widget (即最簡潔的 HTML 和 CSS 程式碼),然後再設計 Widget 的樣式。架構中的行為包含多項功能,可以讓使用者顯示或隱藏頁面內容、變更頁面外觀 (如顏色) 以及與選單項目互動等等。

Spry 架構中的每個 Widget 都與唯一的 CSS 和 JavaScript 檔案相關聯。CSS 檔案含有設計 Widget 樣式的一切必要項目,而 JavaScript 檔案則為 Widget 提供功能。當您使用 Dreamweaver 介面插入 Widget 時,Dreamweaver 會自動將這些檔案連結至您的頁面,使您的 Widget 同時具有功能與樣式。

與特定 Widget 相關聯的 CSS 和 JavaScript 檔案是根據 Widget 而命名,所以您可以清楚知道哪些檔案與哪些 Widget 相對應 (例如,與折疊式 Widget 相關聯的檔案為 SpryAccordion.css 和 SpryAccordion.js)。如果您在儲存的頁面中插入 Widget,Dreamweaver 就會在您的網站中建立 SpryAssets 目錄,並將相對應的 JavaScript 和 CSS 檔案儲存到這個目錄。

Spry Widget 資源和教學課程

下列線上資源會提供更多有關自訂 Spry Widget 的資訊。

Spry Widget 範本

自訂 Dreamweaver 中的 Spry 選單列

Spry 驗證 Widget (教學課程影片)

插入 Spry Widget

  1. 選取「插入>Spry」,再選取要插入的 Widget。

當您插入 Widget 時,Dreamweaver 會在您儲存頁面時,自動將必要的 Spry JavaScript 和 CSS 檔案納入網站中。

註解:

您也可以使用「插入」面板中的「Spry」類別來插入 Spry Widget。

選取 Spry Widget

  1. 將滑鼠指標放在 Widget 上方,直到 Widget 的藍色標籤外框出現為止。
  2. 按一下 Widget 左上角的索引標籤。

編輯 Spry Widget

  1. 選取您要編輯的 Widget,並在「屬性」檢視窗 (「視窗 > 屬性」) 中進行變更。

如需變更特定 Widget 的詳細資訊,請參閱各個 Widget 適用的章節。

設計 Spry Widget 的樣式

  1. 在網站的 SpryAssets 資料夾中找出 Widget 的正確 CSS 檔案,並依據您的偏好設定編輯 CSS。

如需設計特定 Widget 樣式的詳細資訊,請參閱各個 Widget 適用的自訂化章節。

註解:

您也可以在 CSS 面板中編輯 Spry Widget 的樣式,就如同為頁面其他元素編輯樣式一樣。

取得更多 Widget

除了隨同 Dreamweaver 安裝的 Spry Widget 之外,還有許多可用的網頁 Widget。Adobe Exchange 也提供由其他創意專業人員開發的網頁 Widget。

  1. 從「應用程式」列中的「擴充 Dreamweaver」選單 選擇「瀏覽網站 Widget」。

如需有關 Dreamweaver 工程小組針對使用網頁 Widget 所提供的總覽影片,請參閱 www.adobe.com/go/dw10widgets_tw

變更預設的 Spry 資源資料夾

如果您在儲存的頁面中插入 Widget、資料集或效果,Dreamweaver 就會在您的網站中建立 SpryAssets 目錄,並將相對應的 JavaScript 和 CSS 檔案儲存在這個位置。如果您想要將 Spry 資源儲存在別的地方,也可以變更 Dreamweaver 儲存這些資源的預設位置。

  1. 選取「網站 > 管理網站」。
  2. 在「管理網站」對話框中選取需要的網站,然後按一下「編輯」。
  3. 在「網站設定」對話框中,展開「進階設定」並選取「Spry」類別。
  4. 輸入要用來儲存 Spry 資源之資料夾的路徑,然後按一下「確定」。您也可以按一下資料夾圖示,以瀏覽到某個位置。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策