1、第第13章章 使用使用Spry框架框架 Spry 構件是一個頁面元素，通過啟用用戶交互來提供更豐構件是一個頁面元素，通過啟用用戶交互來提供更豐富的用戶體驗。富的用戶體驗。Spry 構件由以下幾個部分組成：構件由以下幾個部分組成：構件結構構件結構 用來定義構件結構組成的用來定義構件結構組成的 HTML 代碼塊。代碼塊。構件行為構件行為 用來控制構件如何響應用戶啟動事件的用來控制構件如何響應用戶啟動事件的 JavaScript。構件樣式構件樣式 用來指定構件外觀的用來指定構件外觀的 CSS。 Spry 框架支持一組用標準框架支持一組用標準 HTML、CSS 和和 JavaScript 編編寫的可重

2、用構件。寫的可重用構件。Spry 框架中的每個構件都與唯一的框架中的每個構件都與唯一的 CSS 和和 JavaScript 文件相關聯(lián)。文件相關聯(lián)。CSS 文件中包含設置構件樣式文件中包含設置構件樣式所需的全部信息，而所需的全部信息，而 JavaScript 文件則賦予構件功能。當文件則賦予構件功能。當您使用您使用 Dreamweaver 界面插入構件時，界面插入構件時，Dreamweaver 會會自動將這些文件鏈接到您的頁面，以便構件中包含該頁面的自動將這些文件鏈接到您的頁面，以便構件中包含該頁面的功能和樣式。功能和樣式。13.1 Spry 構件概述構件概述13.2 插入插入Spry構件構件

3、 插入插入Spry菜單欄菜單欄 “插入插入”- “Spry”- “Spry菜單欄菜單欄”13.3 常用常用Spry構件介紹構件介紹 Spry菜單欄是一組可導航的菜單菜單欄是一組可導航的菜單按鈕按鈕,當站點訪問者將鼠標懸停在其當站點訪問者將鼠標懸停在其中的某個按鈕上時中的某個按鈕上時,將顯示相應的子將顯示相應的子菜單菜單.“菜單項菜單項”：單擊列表框中的具體菜單項，在單擊列表框中的具體菜單項，在“文本文本”文本框中編輯輸入文本即重新文本框中編輯輸入文本即重新定義該列表項的內容。定義該列表項的內容?！疤砑硬藛雾椞砑硬藛雾棥卑粹o按鈕：表示為該菜單項添加了：表示為該菜單項添加了“子菜單子菜單”。“刪除

4、菜單項刪除菜單項”按鈕按鈕：將該菜單項與：將該菜單項與“子菜單子菜單”同時刪除。同時刪除?！吧弦祈椛弦祈棥被蚧颉跋乱祈椣乱祈棥卑粹o按鈕：進行菜單項的顯示排序。：進行菜單項的顯示排序。 “鏈接鏈接”：輸入鏈接的目標頁面地址，或者單擊輸入鏈接的目標頁面地址，或者單擊“瀏覽瀏覽”按鈕以瀏覽到相應的文件。按鈕以瀏覽到相應的文件?！澳繕四繕恕保褐付ㄒ诤翁幋蜷_所鏈接的頁面。指定要在何處打開所鏈接的頁面。編輯編輯Spry菜單欄屬性菜單欄屬性設置設置Spry菜單欄樣式菜單欄樣式設置方法：先選中要設置的菜單設置方法：先選中要設置的菜單（單擊選中）。然后在（單擊選中）。然后在“CSS樣樣式式”面板中選擇相應規(guī)則

5、，在下面板中選擇相應規(guī)則，在下面的面的“屬性窗格屬性窗格”就可以進行設就可以進行設置置保存含有保存含有“Spry菜單欄菜單欄”的頁面的頁面在保存含有在保存含有“SprySpry菜單欄菜單欄”的頁面文件時，會彈的頁面文件時，會彈出出“復制相關文件復制相關文件”對話框。表示軟件將對話框。表示軟件將自動復制自動復制SprySpry菜單欄菜單欄所需要到的所需要到的CSSCSS文件、文件、JavaScriptJavaScript文件和相文件和相關圖像文件到站點目關圖像文件到站點目錄的錄的SpryAssetsSpryAssets文件文件夾內。單擊夾內。單擊“確定確定”按鈕進行復制，否則按鈕進行復制，否則將

6、不能保證將不能保證“SprySpry菜菜單欄單欄”的正確運行。的正確運行。 SprySpry選項卡式面板選項卡式面板13.3.3 插入插入SprySpry折疊式折疊式13.3.4 插入插入SprySpry可折疊面板可折疊面板13.4 Spry驗證表單控件 什么是什么是“表單驗證表單驗證”？ 為了保證表單采集信息為了保證表單采集信息的有效性而采取的驗證的有效性而采取的驗證措施措施 進行表單驗證的地點進行表單驗證的地點在客戶端上驗證（使在客戶端上驗證（使用用JavaScript語言）語言）在服務器上驗證（使在服務器上驗證（使用服務器腳本語言）用服務器腳本語言） 例：實現(xiàn)表單及其驗證例：實現(xiàn)表單及其

7、驗證 1)為自己的網站添加用戶為自己的網站添加用戶注冊的網頁，用戶需填入注冊的網頁，用戶需填入用戶名、密碼、電子郵件用戶名、密碼、電子郵件地址、個人簡介、性別、地址、個人簡介、性別、愛好、地域等信息；愛好、地域等信息； 2)在剛才用戶注冊的網頁在剛才用戶注冊的網頁上增加信息驗證的功能。上增加信息驗證的功能。13.5 Spry效果 “SprySpry效果效果”是視覺增強功能，可以放大是視覺增強功能，可以放大、收縮、漸隱和高亮顯示網頁元素；它可、收縮、漸隱和高亮顯示網頁元素；它可應用于使用應用于使用JavaScript JavaScript 的的 HTML HTML 頁面上幾頁面上幾乎所有的元素。

8、乎所有的元素。 要向某個元素應用效果，該元素當前必須要向某個元素應用效果，該元素當前必須處于選定狀態(tài)，或者它必須具有一個處于選定狀態(tài)，或者它必須具有一個 IDID。Spry效果包括：效果包括： 顯示顯示/漸隱漸隱 ：使元素顯示或漸隱。：使元素顯示或漸隱。 高亮顏色高亮顏色：更改元素的背景顏色。：更改元素的背景顏色。 遮簾遮簾 ：模擬百葉窗，向上或向下滾動百葉窗來隱藏或：模擬百葉窗，向上或向下滾動百葉窗來隱藏或顯示元素。顯示元素。 滑動滑動 ：上下移動元素。：上下移動元素。 增大增大/收縮收縮 ：使元素變大或變小。：使元素變大或變小。 晃動晃動 ：模擬從左向右晃動元素。：模擬從左向右晃動元素。 擠壓擠壓 ：使元素從頁面的左上角消失。：使元素從頁面的左上角消失。創(chuàng)建創(chuàng)建Spry效果的具體方效果的具體方法：法： 選中某個選中某個Spry對對象，在象，在“行為行為”面面板中單擊板中單擊“+”按鈕按鈕， 從菜單中選擇從菜單中選擇“效果效果”|各各Spry效果效果命令。命令。 在彈出的對話框在彈出的對話框中進行相應的屬性中進行相應的屬性設置。設