Chapter 14

Spry 工具集與資料集
的使用
認識 Spry
關於版面配置 Spry 工具集
Spry 選單列
Spry 標籤面板
Spry 可收合面板
Spry 折疊式
認識 Spry 資料集
Spry 資料集的應用
Dreamweaver CS4

14.1 認識 Spry
Ajax 的技術隨著 Web 2.0 時代的來臨而普及在許多網站之中。
Adobe 推出了 Spry 做為 Dreamweaver 開發 Ajax 網頁功能的主要
函式庫，不僅設定上簡單，效果更是強大。
網頁製作

Web 2.0 的時代來臨，網路應用的核心主角由資料交換回到人類主體的價值上。許多的

知識，經由來自四面八方不同的個體在網路平台上協同作業、討論互動下交織出更深入
的內容，激出更炫麗的火花。

而 Ajax (Asynchronous JavaScript and XML) 的技術在 Web 2.0 的應用上占了十分重要

的地位，也成為各網站跨入 Web 2.0 門檻時的重要指標。

一、 什麼是 Ajax ？
Ajax 是由 HTML、JavaScript、DHTML、DOM 與 XML ...等技術所組成，主要目的是
為了提高網頁介面的操作人性化，增強網頁程式應用的易用性。非同步的載入資料的應
用更是 Ajax 的技術核心，這個概念能夠免除網頁重新載入的動作，減少伺服器負擔，
也加快了操作上的速度。

Ajax 概念提出者 Jesse James Garrett 網站

http://www.adaptivepath.com/publications/essays/archives/000385.php

14-2
 加強篇
二、 什麼是 Spry framework？
Spry framework 是 Adobe 為了開發 Ajax 技術所研發的一套 JavaScript 函式庫，程式
設計師可以藉由 Spry framework，輕易的開發出更豐富、更有趣，並且更容易互動的
Ajax 網頁。

14

Spry
工具集與資料集的使用
Adobe Labs (http://labs.adobe.com/technologies/spry/)

三、 Dreamweaver 與 Spry 的關係

在 Dreamweaver 中為了讓使用者可以輕鬆開發 Ajax 的網頁，新增一系列 Spry 的工具
集與行為特效，以對話方塊的導引讓人在不知不覺中為設計的作品注入 Ajax 的應用。

在 Dreamweaver CS4 中所搭載的 Spry framework 為 1.4 版，但是在 Adboe Labs 中

對於 Spry 的研發不會停步，會一直釋出新的版本。在本章的作品中，我們會依據狀況
提出相關的建議。

備註

如何更新 Dreamweaver 中使用的 Spry 版本？

在 Adobe Exchange 的網頁中提供了 Spry Updater 擴充程式 (spry_p1-6-1_
cs4updater_101508.mxp)，您也可以從附書光碟中找到這個擴充程式。安裝後回到
Dreamweaver，可由功能表列的 網站 / Spry Updater 執行 Spry 版本的檢查與升級
動作，如此即可保持 Spry 的程式版本。

14-3
Dreamweaver CS4

14.2 關於 Spry 工具集

在 Dreamweaver 中使用 Spry 的功能，Spry 面板 的使用是非常重
要的。這裡先介紹 Spry 面板 的內容，並說明存放 Spry 功能相關
檔案的 Spry 資源資料夾。
網頁製作

一、 關於插入 \ Spry 面板
Spry 工具集 是一個結合了 HTML、CSS 和 JavaScript 技術讓使用者能輕易互動的網頁
元素。於 插入 面板切換至 Spry 項目，Spry 工具集 大致可以分為三類：

1 2 3
1 資料工具集：包含了 Spry 資料集、 Spry 區域、 Spry 重複、 Spry 重複清單。
2 表單檢驗工具集：包含了 Spry 驗證文字欄位、 Spry 驗證文字區域、 Spry 驗證核取
方塊、 Spry 驗證選取、 Spry 驗證密碼、 Spry 驗證確認 及 Spry 驗證選項按鈕群
組 工具。
3 版面配置工具集：包含了 Spry 選單列、 Spry 標籤面板、 Spry 折疊式、 Spry 可
收合面板 及 Spry 工具提示 工具。

註
在第十章的 10.4 中已經針對 Spry 表單驗證 工具集進行使用上的詳細說明，您可
以閱讀參考。

二、 Spry 相關檔案存放資料夾
每個 Spry 工具集 功能都擁有其所屬的 HTML 結構，並利用所屬的 JavaScript 控制它
的變化，配置所屬的 CSS 來設計顯示的外觀。所以在 Dreamweaver 中插入 Spry 工具
集 功能時，程式會自動檢查網站中是否已經加入相關的 JavaScript 與 CSS 檔，如果沒
有會自動將該檔存放在預設資料夾中。

在 Dreamweaver 中，Spry 相關檔案存放資料夾就是 Spry 資源資料夾，預設是放置在

定義網站根目錄之下的 <SpryAssets> 資料夾中。

14-4
 加強篇
備註

修改 Spry 資源資料夾
Spry 資源資料夾 是放置與 Spry 相關檔案的資料夾，預設是放置在定義網站根目錄
之下的 <SpryAssets> 資料夾中。
這個位置其實是可以指定的，請由功能表列選按 網站 \ 管理網站 進入對話方塊，選
14
取目前的網站再按 編輯 鈕進入對話方塊修改目前網站定義。

Spry
在 網站定義 對話方塊 進階 標籤中，請先選按 分類：Spry，右方會顯示預設資料夾
位置，即可進行修改。

工具集與資料集的使用

14-5