DreamweaverCS4完全自學教程課件

第16章Spry在如今Web2.0盛行、Ajax流行的時代背景下，Adobe公司推出了其Ajax框架Spry，并集成到DreamweaverCS4中。AdobeSpry是一個為Web設計人員開發(fā)的Ajax框架，它使得在一個HTML頁面中創(chuàng)建豐富體驗成為了可能。本章將從什么是Ajax和Spry、在DreamweaverCS4中如何使用Spry組件、如何使用Spry顯示數(shù)據(jù)、添加Spry效果等幾個方面進行詳細介紹，使讀者對Spry有一個全面認識，并且能夠應用Spry設計簡單的交互網(wǎng)頁。第16章Spry在如今Web2.0盛行、Ajax流行的時16.1什么是Ajax和SpryAjax是Web2.0的核心之一。使用Ajax的最大優(yōu)點就是能在不刷新整個頁面的前提下維護數(shù)據(jù)。這使得Web應用程序可以更為迅速地響應用戶交互。16.1什么是Ajax和SpryAjax是Web2.0的16.1.1什么是AjaxAjax是AsynchronousJavaScriptandXML的縮寫。它并不是一門新的語言或技術，實際上是幾項技術按一定的方式組合在一起中發(fā)揮各自的作用，它包括：使用XHTML和CSS標準化呈現(xiàn)；使用文檔對象模型DOM實現(xiàn)動態(tài)顯示和交互；使用XML和XSLT進行數(shù)據(jù)交換與處理；使用XMLHttpRequest進行異步數(shù)據(jù)讀??；最后用JavaScript綁定和處理所有數(shù)據(jù)。目前Ajax已經(jīng)成為當前的熱門技術。Google作為Ajax技術的領跑者，早已經(jīng)走在其它同類網(wǎng)站的前列。基于Ajax的廣為大家熟悉的產(chǎn)品有GoogleMaps，GoogleGmail，GoogleIG等。16.1.1什么是AjaxAjax是Asynchrono16.1.2什么是SprySpry是實現(xiàn)Ajax的一種簡單方式，對HTML、CSS和JavaScript體驗據(jù)有入門級水平的設計人員應該能夠發(fā)現(xiàn)Spry是一種整合內容的簡單方法。使用適合于Ajax的Spry框架，以可視方式設計、開發(fā)和部署動態(tài)用戶界面，可以實現(xiàn)在HTML網(wǎng)頁中展現(xiàn)XML數(shù)據(jù)、建立諸如炫酷菜單的一些界面，還有其他的一些頁面特效。在減少頁面刷新的同時，增加交互性、速度和可用性。16.1.2什么是SprySpry是實現(xiàn)Ajax的一種簡16.2Spry組件DreamweaverCS4提供的Spry組件包括驗證文本域組件、驗證文本區(qū)域組件、驗證選擇組件、驗證復選框組件、Spry菜單欄、Spry選項卡式面板、Spry折疊式面板、Spry可折疊面板等八種類型。本節(jié)將對上述組件進行一一介紹。16.2Spry組件DreamweaverCS4提供的16.2.1驗證文本域組件驗證文本域組件可以對文本框中輸入的多種類型的信息進行實時驗證，如：電話號碼、郵政編碼、IP地址、日期、時間、貨幣等，若輸入的信息格式與指定信息不符或輸入的字符數(shù)與規(guī)定字符數(shù)不符，則會出現(xiàn)提示信息。具體操作步驟如下：16.2.1驗證文本域組件驗證文本域組件可以對文本框中輸16.2.2驗證文本區(qū)域組件除了17.2.1小節(jié)中提到的對文本框進行驗證，還可以對文本區(qū)域中輸入的信息進行驗證。具體操作步驟如下：16.2.2驗證文本區(qū)域組件除了17.2.1小節(jié)中提到的16.2.3驗證選擇組件驗證選擇組件可以對下拉列表中的選項進行驗證，具體操作步驟如下：16.2.3驗證選擇組件驗證選擇組件可以對下拉列表中的選16.2.4驗證復選框組件驗證復選框組件可以對一組復選框中的選項進行驗證，具體操作步驟如下：16.2.4驗證復選框組件驗證復選框組件可以對一組復選框16.2.5Spry菜單欄Spry框架中預設了一些網(wǎng)頁中常用的組件，菜單欄就是其中之一。Spry提供了兩種菜單欄布局樣式：水平與垂直。具體操作步驟如下：16.2.5Spry菜單欄Spry框架中預設了一些網(wǎng)頁中16.2.6Spry選項卡式面板Spry還提供了選項卡式面板，使用此組件可以輕松創(chuàng)建適合自己網(wǎng)頁的選項卡面板。具體操作步驟如下：16.2.6Spry選項卡式面板Spry還提供了選項卡式16.2.7Spry折疊式面板Spry還提供了折疊式面板，使用此組件可以輕松創(chuàng)建適合自己網(wǎng)頁的折疊式面板。具體操作步驟如下：16.2.7Spry折疊式面板Spry還提供了折疊式面板16.2.8Spry可折疊面板Spry還提供了可折疊面板，使用此組件可以輕松創(chuàng)建適合自己網(wǎng)頁的可折疊面板。具體操作步驟如下：16.2.8Spry可折疊面板Spry還提供了可折疊面板16.3使用Spry顯示數(shù)據(jù)本節(jié)將結合實例來學習如何使用Spry在網(wǎng)頁中顯示XML數(shù)據(jù)。主要內容包括定義XML數(shù)據(jù)集，創(chuàng)建Spry區(qū)域，創(chuàng)建Spry重復區(qū)域，創(chuàng)建Spry重復列表，創(chuàng)建Spry表格。16.3使用Spry顯示數(shù)據(jù)本節(jié)將結合實例來學習如何使用16.3.1定義XML數(shù)據(jù)集要使用Spry顯示XML數(shù)據(jù)，第一步需要定義XML數(shù)據(jù)集。具體操作步驟如下：16.3.1定義XML數(shù)據(jù)集要使用Spry顯示XML數(shù)據(jù)16.3.2創(chuàng)建Spry區(qū)域定義了XML數(shù)據(jù)集后，需要創(chuàng)建Spry區(qū)域來顯示數(shù)據(jù)。具體操作步驟如下：16.3.2創(chuàng)建Spry區(qū)域定義了XML數(shù)據(jù)集后，需要創(chuàng)16.3.3創(chuàng)建Spry重復區(qū)域16.3.2介紹了Spry區(qū)域，本小節(jié)來學習創(chuàng)建Spry重復區(qū)域，注意比較兩者的區(qū)別。具體操作步驟如下：16.3.3創(chuàng)建Spry重復區(qū)域16.3.2介紹了Spr16.3.4創(chuàng)建Spry重復列表除了上兩小節(jié)介紹的Spry區(qū)域以及Spry重復區(qū)域，還可以創(chuàng)建Spry重復列表來顯示數(shù)據(jù)集中的數(shù)據(jù)，具體操作步驟如下：16.3.4創(chuàng)建Spry重復列表除了上兩小節(jié)介紹的Spr16.3.5創(chuàng)建Spry表格還可以通過創(chuàng)建Spry表格，在表格中顯示數(shù)據(jù)集中的數(shù)據(jù)，具體操作步驟如下：16.3.5創(chuàng)建Spry表格還可以通過創(chuàng)建Spry表格，16.4Spry效果除了上述的組件和數(shù)據(jù)集以外，DreamweaverCS4還提供了Spry效果庫，可以輕松地向頁面中添加多種視覺效果，無需刷新即可顯示。Spry效果庫包括增大/收縮、擠壓、顯示/漸隱、晃動、滑動、遮簾、高亮顏色等七種效果。下面來一一介紹。16.4Spry效果除了上述的組件和數(shù)據(jù)集以外，Drea16.4.1增大/收縮增大/收縮效果適用于以下標簽：address、dd、div、dl、dt、form、p、ol、ul、applet、center、dir、img、menu或pre。下面以圖像標簽<img>為例。16.4.1增大/收縮增大/收縮效果適用于以下標簽：ad16.4.2擠壓擠壓效果適用于以下標簽：address、dd、div、dl、dt、form、img、p、ol、ul、applet、center、dir、menu或pre。下面以標簽<p>為例。具體操作步驟如下：16.4.2擠壓擠壓效果適用于以下標簽：address、16.4.3顯示/漸隱顯示/漸隱效果適用于除applet、body、iframe、object、tr、tbody或th以外的所有標簽。下面以圖像標簽<img>為例。具體操作步驟如下：16.4.3顯示/漸隱顯示/漸隱效果適用于除apple16.4.4晃動晃動效果適用于以下標簽：address、blockquote、dd、div、dl、dt、fieldset、form、h1、h2、h3、h4、h5、h6、iframe、img、object、p、ol、ul、li、applet、dir、hr、menu、pre或table。下面以圖像標簽<img>為例。具體操作步驟如下：16.4.4晃動晃動效果適用于以下標簽：address、第16章Spry在如今Web2.0盛行、Ajax流行的時代背景下，Adobe公司推出了其Ajax框架Spry，并集成到DreamweaverCS4中。AdobeSpry是一個為Web設計人員開發(fā)的Ajax框架，它使得在一個HTML頁面中創(chuàng)建豐富體驗成為了可能。本章將從什么是Ajax和Spry、在DreamweaverCS4中如何使用Spry組件、如何使用Spry顯示數(shù)據(jù)、添加Spry效果等幾個方面進行詳細介紹，使讀者對Spry有一個全面認識，并且能夠應用Spry設計簡單的交互網(wǎng)頁。第16章Spry在如今Web2.0盛行、Ajax流行的時16.1什么是Ajax和SpryAjax是Web2.0的核心之一。使用Ajax的最大優(yōu)點就是能在不刷新整個頁面的前提下維護數(shù)據(jù)。這使得Web應用程序可以更為迅速地響應用戶交互。16.1什么是Ajax和SpryAjax是Web2.0的16.1.1什么是AjaxAjax是AsynchronousJavaScriptandXML的縮寫。它并不是一門新的語言或技術，實際上是幾項技術按一定的方式組合在一起中發(fā)揮各自的作用，它包括：使用XHTML和CSS標準化呈現(xiàn)；使用文檔對象模型DOM實現(xiàn)動態(tài)顯示和交互；使用XML和XSLT進行數(shù)據(jù)交換與處理；使用XMLHttpRequest進行異步數(shù)據(jù)讀??；最后用JavaScript綁定和處理所有數(shù)據(jù)。目前Ajax已經(jīng)成為當前的熱門技術。Google作為Ajax技術的領跑者，早已經(jīng)走在其它同類網(wǎng)站的前列?；贏jax的廣為大家熟悉的產(chǎn)品有GoogleMaps，GoogleGmail，GoogleIG等。16.1.1什么是AjaxAjax是Asynchrono16.1.2什么是SprySpry是實現(xiàn)Ajax的一種簡單方式，對HTML、CSS和JavaScript體驗據(jù)有入門級水平的設計人員應該能夠發(fā)現(xiàn)Spry是一種整合內容的簡單方法。使用適合于Ajax的Spry框架，以可視方式設計、開發(fā)和部署動態(tài)用戶界面，可以實現(xiàn)在HTML網(wǎng)頁中展現(xiàn)XML數(shù)據(jù)、建立諸如炫酷菜單的一些界面，還有其他的一些頁面特效。在減少頁面刷新的同時，增加交互性、速度和可用性。16.1.2什么是SprySpry是實現(xiàn)Ajax的一種簡16.2Spry組件DreamweaverCS4提供的Spry組件包括驗證文本域組件、驗證文本區(qū)域組件、驗證選擇組件、驗證復選框組件、Spry菜單欄、Spry選項卡式面板、Spry折疊式面板、Spry可折疊面板等八種類型。本節(jié)將對上述組件進行一一介紹。16.2Spry組件DreamweaverCS4提供的16.2.1驗證文本域組件驗證文本域組件可以對文本框中輸入的多種類型的信息進行實時驗證，如：電話號碼、郵政編碼、IP地址、日期、時間、貨幣等，若輸入的信息格式與指定信息不符或輸入的字符數(shù)與規(guī)定字符數(shù)不符，則會出現(xiàn)提示信息。具體操作步驟如下：16.2.1驗證文本域組件驗證文本域組件可以對文本框中輸16.2.2驗證文本區(qū)域組件除了17.2.1小節(jié)中提到的對文本框進行驗證，還可以對文本區(qū)域中輸入的信息進行驗證。具體操作步驟如下：16.2.2驗證文本區(qū)域組件除了17.2.1小節(jié)中提到的16.2.3驗證選擇組件驗證選擇組件可以對下拉列表中的選項進行驗證，具體操作步驟如下：16.2.3驗證選擇組件驗證選擇組件可以對下拉列表中的選16.2.4驗證復選框組件驗證復選框組件可以對一組復選框中的選項進行驗證，具體操作步驟如下：16.2.4驗證復選框組件驗證復選框組件可以對一組復選框16.2.5Spry菜單欄Spry框架中預設了一些網(wǎng)頁中常用的組件，菜單欄就是其中之一。Spry提供了兩種菜單欄布局樣式：水平與垂直。具體操作步驟如下：16.2.5Spry菜單欄Spry框架中預設了一些網(wǎng)頁中16.2.6Spry選項卡式面板Spry還提供了選項卡式面板，使用此組件可以輕松創(chuàng)建適合自己網(wǎng)頁的選項卡面板。具體操作步驟如下：16.2.6Spry選項卡式面板Spry還提供了選項卡式16.2.7Spry折疊式面板Spry還提供了折疊式面板，使用此組件可以輕松創(chuàng)建適合自己網(wǎng)頁的折疊式面板。具體操作步驟如下：16.2.7Spry折疊式面板Spry還提供了折疊式面板16.2.8Spry可折疊面板Spry還提供了可折疊面板，使用此組件可以輕松創(chuàng)建適合自己網(wǎng)頁的可折疊面板。具體操作步驟如下：16.2.8Spry可折疊面板Spry還提供了可折疊面板16.3使用Spry顯示數(shù)據(jù)本節(jié)將結合實例來學習如何使用Spry在網(wǎng)頁中顯示XML數(shù)據(jù)。主要內容包括定義XML數(shù)據(jù)集，創(chuàng)建Spry區(qū)域，創(chuàng)建Spry重復區(qū)域，創(chuàng)建Spry重復列表，創(chuàng)建Spry表格。16.3使用Spry顯示數(shù)據(jù)本節(jié)將結合實例來學習如何使用16.3.1定義XML數(shù)據(jù)集要使用Spry顯示XML數(shù)據(jù)，第一步需要定義XML數(shù)據(jù)集。具體操作步驟如下：16.3.1定義XML數(shù)據(jù)集要使用Spry顯示XML數(shù)據(jù)16.3.2創(chuàng)建Spry區(qū)域定義了XML數(shù)據(jù)集后，需要創(chuàng)建Spry區(qū)域來顯示數(shù)據(jù)。具體操作步驟如下：16.3.2創(chuàng)建Spry區(qū)域定義了XML數(shù)據(jù)集后，需要創(chuàng)16.3.3創(chuàng)建Spry重復區(qū)域16.3.2介紹了Spry區(qū)域，本小節(jié)來學習創(chuàng)建Spry重復區(qū)域，注意比較兩者的區(qū)別。具體操作步驟如下：16.3.3創(chuàng)建Spry重復區(qū)域16.3.2介紹了Spr16.3.4創(chuàng)建Spry重復列表除了上兩小節(jié)介紹的Spry區(qū)域以及Spry重復區(qū)域，還可以創(chuàng)建Spry重復列表來顯示數(shù)據(jù)集中的數(shù)據(jù)，具體操作步驟如下：16.3.4創(chuàng)建Spry重復列表除了上兩小節(jié)介紹的Spr16.3.5創(chuàng)建Spry表格還可以通過創(chuàng)建Spry表格，在表格中顯示數(shù)據(jù)集中的數(shù)據(jù)，具體操作步驟如下：16.3.5創(chuàng)建Spry表格還可以通過創(chuàng)建Spry表格，16.4Spry效果除了上述的組件和數(shù)據(jù)集以外，DreamweaverCS4還提供了Spry效果庫，可以輕松地向頁面中添加多種視覺效果，無需刷新即可顯示。Spry效果庫包括增大/收縮、擠壓、顯示/漸隱、晃動、滑動