網(wǎng)頁制作基礎(chǔ)教程第12章使用Spry構(gòu)件

1、網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 （dreamweaver dreamweaver cs3cs3） 電子教案電子教案 isbn7121028824 第第1212章使用章使用spryspry構(gòu)件構(gòu)件 本章重點：本章重點：spry折疊構(gòu)件、菜折疊構(gòu)件、菜 單欄構(gòu)件、驗證文本域構(gòu)件、驗證復(fù)單欄構(gòu)件、驗證文本域構(gòu)件、驗證復(fù) 選框構(gòu)件與重復(fù)區(qū)域構(gòu)件等多種構(gòu)件選框構(gòu)件與重復(fù)區(qū)域構(gòu)件等多種構(gòu)件 的使用方法的使用方法 。 第第1212章站點的整理維護與上傳章站點的整理維護與上傳 12.1 12.1 使用使用spryspry構(gòu)件構(gòu)件新功能展示新功能展示 12.2 s12.2 sprypry構(gòu)件構(gòu)件 13.3 1

2、3.3 使用使用spryspry顯示數(shù)據(jù)顯示數(shù)據(jù) 13.4 spry13.4 spry效果效果 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.1 使用使用“spry”構(gòu)件構(gòu)件-新功能展示新功能展示 12.1.1 12.1.1 案例綜述案例綜述 新增的新增的spryspry功能不僅增加了頁面的布局形式，簡化并增強了功能不僅增加了頁面的布局形式，簡化并增強了 表單的驗證功能，還與表單的驗證功能，還與xmlxml數(shù)據(jù)相結(jié)合，方便構(gòu)造動態(tài)數(shù)據(jù)顯示。數(shù)據(jù)相結(jié)合，方便構(gòu)造動態(tài)數(shù)據(jù)顯示。 本例就將這些新功能集合到一個網(wǎng)頁中，使讀者從中體會本例就將這些新功能集合到一個網(wǎng)頁中，使讀者從中體會spryspry的的 無窮

3、魅力無窮魅力 。 12.1.2 12.1.2 案例分析案例分析 我們要做的工作是：我們要做的工作是： n申請網(wǎng)站空間申請網(wǎng)站空間 n檢查站點檢查站點 n上傳網(wǎng)站。上傳網(wǎng)站。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.1 使用使用“spry”構(gòu)件構(gòu)件-新功能展示新功能展示 12.1.2 12.1.2 案例分析案例分析 dreamweaver cs3中的中的spry功能由四個部分組成：功能由四個部分組成： spry構(gòu)件。構(gòu)件。 spry驗證表單。驗證表單。 spry xml數(shù)據(jù)顯示。數(shù)據(jù)顯示。 spry特效。特效。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.1 使用使用“spry”構(gòu)件構(gòu)件-新功能展示

4、新功能展示 12.1.3 12.1.3 實現(xiàn)步驟實現(xiàn)步驟 1. 用用spry構(gòu)件創(chuàng)建頁面構(gòu)件創(chuàng)建頁面 （1 1）插入）插入spryspry菜單欄菜單欄 （2 2）插入）插入“spryspry選項卡式面板選項卡式面板” （3 3）插入）插入“spryspry折疊式折疊式” （4 4）插入）插入“spryspry折疊面板折疊面板” 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.1 使用使用“spry”構(gòu)件構(gòu)件-新功能展示新功能展示 12.1.3 12.1.3 實現(xiàn)步驟實現(xiàn)步驟 2. 使用使用spry驗證表單域驗證表單域 （1 1）插入）插入spryspry驗證文本域驗證文本域 （2 2）插入）插入“sp

5、ryspry驗證復(fù)選框驗證復(fù)選框” （3 3）插入）插入“spryspry驗證選擇驗證選擇” （4 4）插入）插入“spryspry驗證文本區(qū)域驗證文本區(qū)域” 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.1 使用使用“spry”構(gòu)件構(gòu)件-新功能展示新功能展示 12.1.3 12.1.3 實現(xiàn)步驟實現(xiàn)步驟 3. 使用使用spry xml顯示數(shù)據(jù)顯示數(shù)據(jù) （1 1）綁定）綁定spry xml spry xml 數(shù)據(jù)集。數(shù)據(jù)集。 （2 2）插入）插入spryspry表，顯示表，顯示spry xmlspry xml數(shù)據(jù)在頁面數(shù)據(jù)在頁面 （3 3）插入）插入spryspry詳細區(qū)域詳細區(qū)域 網(wǎng)頁制作基礎(chǔ)教程

6、網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.1 12.2.1 spry菜單欄菜單欄 1插入插入spry菜單欄菜單欄 “ “插入插入”欄欄|“spry”|“spry”類型類型|“spry|“spry菜單欄菜單欄”按鈕按鈕 或或 菜單欄菜單欄“插入插入”|“|“布局對象布局對象”|“spry|“spry菜單欄菜單欄” 或或 “ “插入插入”|“spry”|“spry|“spry”|“spry菜單欄菜單欄”命令。命令。 在彈出的在彈出的“spryspry菜單欄菜單欄”對話框中選擇對話框中選擇“水平水平”或或“垂垂 直直”，然后單擊，然后單擊“確定確定”按鈕。按鈕。 網(wǎng)頁制

7、作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.1 12.2.1 spry菜單欄菜單欄 2編輯編輯spry菜單欄屬性菜單欄屬性 “菜單項菜單項”：單擊列表框中的具體菜單項，在單擊列表框中的具體菜單項，在“文本文本”文本框文本框 中編輯輸入文本即重新定義該列表項的內(nèi)容。中編輯輸入文本即重新定義該列表項的內(nèi)容。 “添加菜單項添加菜單項”按鈕按鈕：表示為該菜單項添加了：表示為該菜單項添加了“子菜單子菜單”。 “刪除菜單項刪除菜單項”按鈕按鈕：將該菜單項與：將該菜單項與“子菜單子菜單”同時刪除。同時刪除。 “上移項上移項”或或“下移項下移項”按鈕按鈕：進行菜單項的顯示

8、排序。：進行菜單項的顯示排序。 “鏈接鏈接”：輸入鏈接的目標(biāo)頁面地址，或者單擊輸入鏈接的目標(biāo)頁面地址，或者單擊“瀏覽瀏覽”按鈕按鈕 以瀏覽到相應(yīng)的文件。以瀏覽到相應(yīng)的文件。 “目標(biāo)目標(biāo)”：指定要在何處打開所鏈接的頁面。指定要在何處打開所鏈接的頁面。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.1 12.2.1 spry菜單欄菜單欄 3設(shè)置設(shè)置spry菜單欄樣式菜單欄樣式 設(shè)置方法：先選中要設(shè)置的菜單（單擊選中）。然后在設(shè)置方法：先選中要設(shè)置的菜單（單擊選中）。然后在“屬性屬性” 面板中選擇面板中選擇“樣式樣式”就可以進行設(shè)置就可以進行設(shè)置 網(wǎng)頁制作基

9、礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.1 12.2.1 spry菜單欄菜單欄 4 4保存含有保存含有“spryspry菜單欄菜單欄”的頁面的頁面 在保存含有“spry菜單欄” 的頁面文件時，會彈出 “復(fù)制相關(guān)文件”對話 框。表示軟件將自動復(fù) 制spry菜單欄所需要到 的css文件、 javascript文件和相關(guān) 圖像文件到站點目錄的 spryassets文件夾內(nèi)。 單擊“確定”按鈕進行 復(fù)制，否則將不能保證 “spry菜單欄”的正確 運行。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.2 spry12.2.2

10、 spry選項卡式面板選項卡式面板 1插入選項卡式面板插入選項卡式面板 “ “插入插入”欄欄|“spry”|“spry”類型類型|“spry|“spry選項卡面板選項卡面板 ” ”按鈕按鈕 或或 菜單欄菜單欄“插入插入”|“|“布局對象布局對象”|“spry|“spry選項卡面板選項卡面板 ” ” 或或 “ “插入插入”|“spry”|“spry|“spry”|“spry選項卡面板選項卡面板 ” ”命令。命令。 對于插入到網(wǎng)頁中的對于插入到網(wǎng)頁中的“spryspry選項卡式面板選項卡式面板”，單擊左上，單擊左上 角的藍色區(qū)域即表示選擇了該角的藍色區(qū)域即表示選擇了該“spryspry選項卡式面板

11、選項卡式面板”， 進行編輯操作。進行編輯操作。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.2 spry12.2.2 spry選項卡式面板選項卡式面板 2添加與刪除選擇卡面板添加與刪除選擇卡面板 在在“文檔文檔”窗口中單擊選項卡左上角的藍色區(qū)窗口中單擊選項卡左上角的藍色區(qū) 域選擇該域選擇該“spryspry選項卡式面板選項卡式面板”。 在在“屬性屬性”面板中，單擊面板中，單擊“添加面板添加面板”按鈕或按鈕或 “刪除面板刪除面板”按鈕。按鈕。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.2 spry12.2.

12、2 spry選項卡式面板選項卡式面板 3設(shè)置默認的打開面板設(shè)置默認的打開面板 在在“文檔文檔”窗口中單擊選項卡左上角的藍色區(qū)窗口中單擊選項卡左上角的藍色區(qū) 域選擇該域選擇該“spryspry選項卡式面板選項卡式面板”。 在在“屬性屬性”面板中，從面板中，從“默認面板默認面板”下拉列表下拉列表 中選擇默認情況下要打開的面板。中選擇默認情況下要打開的面板。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.2 spry12.2.2 spry選項卡式面板選項卡式面板 4編輯面板編輯面板 將鼠標(biāo)定位在選項卡標(biāo)題所在區(qū)域即可對該標(biāo)將鼠標(biāo)定位在選項卡標(biāo)題所在區(qū)域即可對

13、該標(biāo) 題進行編輯操作。題進行編輯操作。 對于插入到頁面中各對于插入到頁面中各“spryspry選項卡式面板選項卡式面板”所所 對應(yīng)的內(nèi)容，鼠標(biāo)移動到相應(yīng)的對應(yīng)的內(nèi)容，鼠標(biāo)移動到相應(yīng)的“spryspry選項卡選項卡” 標(biāo)題時，會顯示標(biāo)題時，會顯示“單擊以顯示面板內(nèi)容單擊以顯示面板內(nèi)容”按鈕，按鈕， 單擊該按鈕即可顯示面板內(nèi)容。單擊該按鈕即可顯示面板內(nèi)容。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.2 spry12.2.2 spry選項卡式面板選項卡式面板 5調(diào)整選項卡面板的順序調(diào)整選項卡面板的順序 在在“屬性屬性”面板中，通過面板中，通過“在列表中向

14、上移動面板在列表中向上移動面板” 按鈕和按鈕和“在列表中向下移動面板在列表中向下移動面板”按鈕對頁面中的按鈕對頁面中的 “spryspry選擇卡選擇卡”進行左右排序。進行左右排序。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.3 spry12.2.3 spry折疊式折疊式 1.插入插入“spry折疊式折疊式” 選擇菜單欄的選擇菜單欄的“插入插入”|“spry”|“spry|“spry”|“spry折疊折疊 式式”，或，或“插入插入”|“|“布局對象布局對象”|“spry|“spry折疊折疊 式式”命令，或在命令，或在“插入插入”面板的面板的“spry

15、”spry”類別類別 中單擊中單擊“spryspry折疊式折疊式”按鈕。按鈕。 對于插入到網(wǎng)頁中的對于插入到網(wǎng)頁中的“spryspry折疊式折疊式”，單擊左，單擊左 上角的藍色區(qū)域即表示選擇了該上角的藍色區(qū)域即表示選擇了該“spryspry折疊折疊 式式”，進行編輯操作。，進行編輯操作。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.3 spry12.2.3 spry折疊式折疊式 2添加與刪除選擇卡面板添加與刪除選擇卡面板 在在“文檔文檔”窗口中選擇一個折疊構(gòu)件。窗口中選擇一個折疊構(gòu)件。 在在“屬性屬性”面板中單擊面板中單擊“面板面板”旁邊的加號旁邊的

16、加號 (+) (+) 按鈕或減號（按鈕或減號（- -）按鈕。）按鈕。 （可選）更改面板的名稱，方法是在（可選）更改面板的名稱，方法是在“設(shè)計設(shè)計” 視圖中選擇面板的文本并對其進行修改。視圖中選擇面板的文本并對其進行修改。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.3 spry12.2.3 spry折疊式折疊式 3更改面板的順序更改面板的順序 n在在“屬性屬性”面板中，通過面板中，通過“在列表中向上移動在列表中向上移動 面板面板”按鈕和按鈕和“在列表中向下移動面板在列表中向下移動面板”按鈕按鈕 對頁面中的面板進行上下排序。對頁面中的面板進行上下排序。

17、 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.3 spry12.2.3 spry折疊式折疊式 4打開面板進行編輯打開面板進行編輯 請執(zhí)行下列操作之一：請執(zhí)行下列操作之一： n將鼠標(biāo)指針移到要在將鼠標(biāo)指針移到要在“設(shè)計設(shè)計”視圖中打開的面視圖中打開的面 板的選項卡上，然后單擊出現(xiàn)在該選項卡右側(cè)板的選項卡上，然后單擊出現(xiàn)在該選項卡右側(cè) 的眼睛圖標(biāo)。的眼睛圖標(biāo)。 n在在“文檔文檔”窗口中選擇一個折疊構(gòu)件，然后在窗口中選擇一個折疊構(gòu)件，然后在 “屬性屬性”面板的面板的“面板面板”菜單中選擇要進行編菜單中選擇要進行編 輯的面板。輯的面板。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁

18、制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.4 spry12.2.4 spry可折疊面板可折疊面板 2打開或關(guān)閉可折疊面板打開或關(guān)閉可折疊面板 打開或關(guān)閉可折疊面板的方法：打開或關(guān)閉可折疊面板的方法： n將鼠標(biāo)指針移到要在將鼠標(biāo)指針移到要在“設(shè)計設(shè)計”視圖中打開的面視圖中打開的面 板的選項卡上，然后單擊出現(xiàn)在該選項卡右側(cè)板的選項卡上，然后單擊出現(xiàn)在該選項卡右側(cè) 的眼睛圖標(biāo)。的眼睛圖標(biāo)。 n在在“文檔文檔”窗口中選擇一個折疊構(gòu)件，然后在窗口中選擇一個折疊構(gòu)件，然后在 “屬性屬性”面板中，從面板中，從“顯示顯示”下拉列表中選擇下拉列表中選擇 “打開打開”或或“已關(guān)閉已關(guān)閉”

19、。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.4 spry12.2.4 spry可折疊面板可折疊面板 3設(shè)置可折疊面板的默認狀態(tài)設(shè)置可折疊面板的默認狀態(tài) 在在“文檔文檔”窗口中選擇一個可折疊面板構(gòu)件。窗口中選擇一個可折疊面板構(gòu)件。 在在“屬性屬性”面板中，從面板中，從“默認狀態(tài)默認狀態(tài)”彈出菜單彈出菜單 中選擇中選擇“打開打開”或或“已關(guān)閉已關(guān)閉”。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.212.2 spryspry構(gòu)件構(gòu)件 12.2.4 spry12.2.4 spry可折疊面板可折疊面板 4啟用或禁用可折疊面板的動畫啟用或禁用可折疊面板的動畫

20、在在“文檔文檔”窗口中選擇一個可折疊面板構(gòu)件。窗口中選擇一個可折疊面板構(gòu)件。 在在“屬性屬性”面板中，勾選或撤選面板中，勾選或撤選“啟用動畫啟用動畫” 復(fù)選框即可。復(fù)選框即可。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.1 12.3.1 定義定義 spry xml 數(shù)據(jù)集數(shù)據(jù)集 要在要在webweb頁上顯示頁上顯示xmlxml數(shù)據(jù)，首先需要在數(shù)據(jù)，首先需要在dreamweaverdreamweaver 中建立一個中建立一個xmlxml數(shù)據(jù)集，表示當(dāng)前網(wǎng)頁與數(shù)據(jù)集，表示當(dāng)前網(wǎng)頁與xmlxml文件之間文件之間 建立了關(guān)系，才能向建立了關(guān)系，才能

21、向 html html 頁面中添加頁面中添加 spry spry 區(qū)域、區(qū)域、 表格或列表。表格或列表。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.1 12.3.1 定義定義 spry xml spry xml 數(shù)據(jù)集數(shù)據(jù)集 步驟：步驟： 選擇選擇“插入插入spry”|“spry xml spry”|“spry xml 數(shù)據(jù)集數(shù)據(jù)集”?；??；?在在“插入插入”欄中的欄中的“spry”spry”類別中單擊類別中單擊“spry spry xml xml 數(shù)據(jù)集數(shù)據(jù)集”按鈕。按鈕。 彈出的彈出的“spry xmlspry xml數(shù)據(jù)集數(shù)據(jù)集”對話

22、框，進行相關(guān)對話框，進行相關(guān) 設(shè)置。設(shè)置。 設(shè)置完成后單擊設(shè)置完成后單擊“確定確定”按鈕。按鈕。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.1 12.3.1 定義定義 spry xml 數(shù)據(jù)集數(shù)據(jù)集 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) “spry xmlspry xml數(shù)據(jù)集數(shù)據(jù)集”對話框相關(guān)選項對話框相關(guān)選項： n數(shù)據(jù)集名稱數(shù)據(jù)集名稱：接受默認的：接受默認的 spry spry 數(shù)據(jù)集名稱數(shù)據(jù)集名稱“ds1”ds1”，也，也 可以輸入更有意義的名稱。可以輸入更有意義的名稱。 nxmlxml

23、源源：通過單擊：通過單擊“瀏覽瀏覽”按鈕獲得已準(zhǔn)備好的按鈕獲得已準(zhǔn)備好的xmlxml數(shù)據(jù)數(shù)據(jù) 文件。文件。 n獲取架構(gòu)按鈕獲取架構(gòu)按鈕：在確定要使用的數(shù)據(jù)集之后，單擊此按：在確定要使用的數(shù)據(jù)集之后，單擊此按 鈕，則該數(shù)據(jù)集中的數(shù)據(jù)將顯示在鈕，則該數(shù)據(jù)集中的數(shù)據(jù)將顯示在“行元素行元素”的列表框的列表框 中。中。 nxpathxpath：顯示一個表達式，指示所選節(jié)點在顯示一個表達式，指示所選節(jié)點在xmlxml源文件中源文件中 的位置。的位置。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) “spry xmlspry xml數(shù)據(jù)集數(shù)據(jù)集”對話框相關(guān)選項：對話框

24、相關(guān)選項： 預(yù)覽預(yù)覽：單擊該按鈕可以查看數(shù)據(jù)在瀏覽器中的顯示情況。：單擊該按鈕可以查看數(shù)據(jù)在瀏覽器中的顯示情況。 數(shù)據(jù)類型數(shù)據(jù)類型：指定當(dāng)前在：指定當(dāng)前在“數(shù)據(jù)集列數(shù)據(jù)集列”中選定的數(shù)據(jù)列的類中選定的數(shù)據(jù)列的類 型。型。 排序排序：如果要在頁面加載數(shù)據(jù)時自動排序數(shù)據(jù)，則從：如果要在頁面加載數(shù)據(jù)時自動排序數(shù)據(jù)，則從“排排 序序”下拉列表中選擇一個用于排序的列值。下拉列表中選擇一個用于排序的列值。 方向方向：確定排序的方式，包括：確定排序的方式，包括“升序升序”和和“降序降序”兩種方兩種方 式。式。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) “spry

25、xmlspry xml數(shù)據(jù)集數(shù)據(jù)集”對話框相關(guān)選項：對話框相關(guān)選項： n加載時不同加載時不同：勾選此項以確保沒有重復(fù)列。：勾選此項以確保沒有重復(fù)列。 n禁用禁用xmlxml緩存緩存：要直接從服務(wù)器中加載數(shù)據(jù)時，則選擇：要直接從服務(wù)器中加載數(shù)據(jù)時，則選擇 “禁用禁用xmlxml緩存緩存”選項。選項。 n自動刷新數(shù)據(jù)自動刷新數(shù)據(jù)：選擇：選擇“自動刷新數(shù)據(jù)自動刷新數(shù)據(jù)”選項并輸入一個選項并輸入一個 毫秒值毫秒值 。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.2 12.3.2 創(chuàng)建創(chuàng)建 spry spry 區(qū)域區(qū)域 n對于綁定了對于綁定了“spry

26、 xml spry xml 數(shù)據(jù)集數(shù)據(jù)集”的頁面來說，要在網(wǎng)的頁面來說，要在網(wǎng) 頁中顯示頁中顯示xmlxml數(shù)據(jù)，必須先建立數(shù)據(jù)，必須先建立“spryspry區(qū)域區(qū)域”。 nspryspry區(qū)域有兩種類型：區(qū)域有兩種類型： n圍繞數(shù)據(jù)對象（如表格和重復(fù)列表）的圍繞數(shù)據(jù)對象（如表格和重復(fù)列表）的 spry spry 區(qū)域；區(qū)域； n spry spry 詳細區(qū)域，該區(qū)域與主表格對象一起使用時，詳細區(qū)域，該區(qū)域與主表格對象一起使用時， 可允許對可允許對 dreamweaver dreamweaver 頁面上的數(shù)據(jù)進行動態(tài)更頁面上的數(shù)據(jù)進行動態(tài)更 新。新。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.3

27、12.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.2 12.3.2 創(chuàng)建創(chuàng)建 spry spry 區(qū)域區(qū)域 插入插入spry區(qū)域的步驟：區(qū)域的步驟： 選擇選擇“插入插入”|“spry”|“spry |“spry”|“spry 區(qū)域區(qū)域”?；蛟凇；蛟凇安迦氩迦搿?欄中欄中“spry”spry”類別中單擊類別中單擊“spry spry 區(qū)域區(qū)域”按鈕。按鈕。 彈出的彈出的“spry xmlspry xml數(shù)據(jù)集數(shù)據(jù)集”對話框，進行相關(guān)設(shè)置。對話框，進行相關(guān)設(shè)置。 單擊單擊“確定確定”時，時，dreamweaver dreamweaver 會在頁面中放置一個區(qū)會在頁面中放置一個區(qū) 域占位符，并顯

28、示文本域占位符，并顯示文本“此處為此處為 spry spry 區(qū)域的內(nèi)容區(qū)域的內(nèi)容”。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.3 12.3.3 創(chuàng)建創(chuàng)建 spry表格表格 spry表格有兩種類型：表格有兩種類型： n簡單表格簡單表格 n主動態(tài)表格，主動態(tài)表格與詳細區(qū)域綁定，以主動態(tài)表格，主動態(tài)表格與詳細區(qū)域綁定，以 允許動態(tài)更新允許動態(tài)更新dreamweaverdreamweaver頁面上的數(shù)據(jù)。頁面上的數(shù)據(jù)。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.3 12.3.3 創(chuàng)建創(chuàng)建 s

29、pry表格表格 步驟：步驟： 在前面插入的在前面插入的spryspry區(qū)域中刪除區(qū)域中刪除“此處為此處為 spry spry 區(qū)域的區(qū)域的 內(nèi)容內(nèi)容”文本，然后切換到文本，然后切換到 “ “插入插入”欄中的欄中的“spry”spry”類類 別中單擊相應(yīng)的別中單擊相應(yīng)的 “ “spry spry 表表”按鈕?；蜻x擇按鈕?；蜻x擇“插插 入入”|“spry”|“spry |“spry”|“spry 表格表格”。 彈出的彈出的“插入插入spry spry 表表”對話框?qū)υ捒?，進行相關(guān)設(shè)置。，進行相關(guān)設(shè)置。 單擊單擊“確定確定”，用戶會在，用戶會在“設(shè)計設(shè)計”視圖中看到一個表視圖中看到一個表 格，在該

30、表格中，針對所包括的每個元素都有一行標(biāo)格，在該表格中，針對所包括的每個元素都有一行標(biāo) 題和一行數(shù)據(jù)引用，并用大括號題和一行數(shù)據(jù)引用，并用大括號 () () 括起來。括起來。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.3 12.3.3 創(chuàng)建創(chuàng)建 spry表格表格 在在“列列”面板中，單擊面板中，單擊 加號加號 (+)(+)可以添加將要可以添加將要 表格中的數(shù)據(jù)列，單擊表格中的數(shù)據(jù)列，單擊 減號減號 (-) (-) 可以減少列；可以減少列； 單擊向上箭頭或向下箭單擊向上箭頭或向下箭 頭可以移動數(shù)據(jù)列的排頭可以移動數(shù)據(jù)列的排 列次序。列次序。 如

31、果希望在單擊網(wǎng)頁中如果希望在單擊網(wǎng)頁中 數(shù)據(jù)列上標(biāo)題時自動排數(shù)據(jù)列上標(biāo)題時自動排 序，則可在序，則可在“列列”面板面板 中選擇它，然后選擇中選擇它，然后選擇 “單擊標(biāo)題時將對列排單擊標(biāo)題時將對列排 序序”。對于每個要作為。對于每個要作為 排序依據(jù)的列重復(fù)上述排序依據(jù)的列重復(fù)上述 操作。操作。 如果要創(chuàng)建簡單的如果要創(chuàng)建簡單的 spry spry 表格，則可取消選擇默表格，則可取消選擇默 認選項認選項“單擊行時將使單擊行時將使 用用更新更新詳細區(qū)域詳細區(qū)域”。 如果要創(chuàng)建如果要創(chuàng)建 spry spry 主動主動 態(tài)表格，請使該選項保態(tài)表格，請使該選項保 持選中狀態(tài)。持選中狀態(tài)。 網(wǎng)頁制作基礎(chǔ)教程

32、網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.4 12.3.4 創(chuàng)建創(chuàng)建 spry spry 重復(fù)區(qū)域重復(fù)區(qū)域 步驟：步驟： 選擇選擇“插入插入”|“spry”|“spry |“spry”|“spry 重復(fù)項重復(fù)項”，或在，或在 “插入插入”欄中的欄中的“spry”spry”類別中單擊類別中單擊“spry spry 重復(fù)項重復(fù)項” 按鈕。按鈕。 彈出彈出“插入插入spryspry重復(fù)項重復(fù)項”對話框，進行相關(guān)設(shè)置。對話框，進行相關(guān)設(shè)置。 單擊單擊“確定確定”按鈕，按鈕，dreamweaver dreamweaver 會在頁面中插入一會在頁面中插入一 個區(qū)域占位

33、符，并顯示文本個區(qū)域占位符，并顯示文本“此處為此處為 spry spry 區(qū)域的內(nèi)區(qū)域的內(nèi) 容容”。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.4 12.3.4 創(chuàng)建創(chuàng)建 spry spry 重復(fù)區(qū)域重復(fù)區(qū)域 在在“容器容器”中根據(jù)所中根據(jù)所 需的標(biāo)簽類型選擇需的標(biāo)簽類型選擇 “”或或 “”選項。默選項。默 認值是使用認值是使用 容器。容器。 在在“類型類型”中選擇中選擇 “重復(fù)重復(fù)”（默認選項）（默認選項） 或或“重復(fù)子項重復(fù)子項”選項。選項。 在在“spryspry數(shù)據(jù)集數(shù)據(jù)集”中中 選擇前面定義好的選擇前面定義好的 spry spry 數(shù)據(jù)集數(shù)據(jù)集“ds1”ds1”。 如果已經(jīng)選擇了文本如果已經(jīng)選擇了文本 或元素，即可環(huán)繞或或元素，即可環(huán)繞或 替換它們。替換它們。 網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.5 12.3.5 創(chuàng)建創(chuàng)建 spry 重復(fù)列表重復(fù)列表 步驟：步驟： 選擇選擇“插入插入”|“spry”|“spry|“spry”|“spry重復(fù)列表重復(fù)列表 ” ”，或在，或在 “插入插入”欄中的欄中的“spry”spry”類別中單擊類別中單擊