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

1、網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程 （dreamweaver dreamweaver cs3cs3） 電子教案電子教案 isbn7121028824 第第1212章使用章使用spryspry構(gòu)件構(gòu)件 本章重點(diǎn)：本章重點(diǎn)：spry折疊構(gòu)件、菜折疊構(gòu)件、菜 單欄構(gòu)件、驗(yàn)證文本域構(gòu)件、驗(yàn)證復(fù)單欄構(gòu)件、驗(yàn)證文本域構(gòu)件、驗(yàn)證復(fù) 選框構(gòu)件與重復(fù)區(qū)域構(gòu)件等多種構(gòu)件選框構(gòu)件與重復(fù)區(qū)域構(gòu)件等多種構(gòu)件 的使用方法的使用方法 。 第第1212章站點(diǎn)的整理維護(hù)與上傳章站點(diǎn)的整理維護(hù)與上傳 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)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程 12.1 使用使用“spry”構(gòu)件構(gòu)件-新功能展示新功能展示 12.1.1 12.1.1 案例綜述案例綜述 新增的新增的spryspry功能不僅增加了頁(yè)面的布局形式，簡(jiǎn)化并增強(qiáng)了功能不僅增加了頁(yè)面的布局形式，簡(jiǎn)化并增強(qiáng)了 表單的驗(yàn)證功能，還與表單的驗(yàn)證功能，還與xmlxml數(shù)據(jù)相結(jié)合，方便構(gòu)造動(dòng)態(tài)數(shù)據(jù)顯示。數(shù)據(jù)相結(jié)合，方便構(gòu)造動(dòng)態(tài)數(shù)據(jù)顯示。 本例就將這些新功能集合到一個(gè)網(wǎng)頁(yè)中，使讀者從中體會(huì)本例就將這些新功能集合到一個(gè)網(wǎng)頁(yè)中，使讀者從中體會(huì)spryspry的的 無(wú)窮

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

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

5、ryspry驗(yàn)證復(fù)選框驗(yàn)證復(fù)選框” （3 3）插入）插入“spryspry驗(yàn)證選擇驗(yàn)證選擇” （4 4）插入）插入“spryspry驗(yàn)證文本區(qū)域驗(yàn)證文本區(qū)域” 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程 12.1 使用使用“spry”構(gòu)件構(gòu)件-新功能展示新功能展示 12.1.3 12.1.3 實(shí)現(xiàn)步驟實(shí)現(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ù)在頁(yè)面數(shù)據(jù)在頁(yè)面 （3 3）插入）插入spryspry詳細(xì)區(qū)域詳細(xì)區(qū)域 網(wǎng)頁(yè)制作基礎(chǔ)教程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

21、向 html html 頁(yè)面中添加頁(yè)面中添加 spry spry 區(qū)域、區(qū)域、 表格或列表。表格或列表。 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(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ù)集”對(duì)話

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

23、源源：通過(guò)單擊：通過(guò)單擊“瀏覽瀏覽”按鈕獲得已準(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：顯示一個(gè)表達(dá)式，指示所選節(jié)點(diǎn)在顯示一個(gè)表達(dá)式，指示所選節(jié)點(diǎn)在xmlxml源文件中源文件中 的位置。的位置。 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) “spry xmlspry xml數(shù)據(jù)集數(shù)據(jù)集”對(duì)話框相關(guān)選項(xiàng)：對(duì)話框

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

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

26、 xml spry xml 數(shù)據(jù)集數(shù)據(jù)集”的頁(yè)面來(lái)說(shuō)，要在網(wǎng)的頁(yè)面來(lái)說(shuō)，要在網(wǎng) 頁(yè)中顯示頁(yè)中顯示xmlxml數(shù)據(jù)，必須先建立數(shù)據(jù)，必須先建立“spryspry區(qū)域區(qū)域”。 nspryspry區(qū)域有兩種類型：區(qū)域有兩種類型： n圍繞數(shù)據(jù)對(duì)象（如表格和重復(fù)列表）的圍繞數(shù)據(jù)對(duì)象（如表格和重復(fù)列表）的 spry spry 區(qū)域；區(qū)域； n spry spry 詳細(xì)區(qū)域，該區(qū)域與主表格對(duì)象一起使用時(shí)，詳細(xì)區(qū)域，該區(qū)域與主表格對(duì)象一起使用時(shí)， 可允許對(duì)可允許對(duì) dreamweaver dreamweaver 頁(yè)面上的數(shù)據(jù)進(jìn)行動(dòng)態(tài)更頁(yè)面上的數(shù)據(jù)進(jìn)行動(dòng)態(tài)更 新。新。 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(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ù)集”對(duì)話框，進(jìn)行相關(guān)設(shè)置。對(duì)話框，進(jìn)行相關(guān)設(shè)置。 單擊單擊“確定確定”時(shí)，時(shí)，dreamweaver dreamweaver 會(huì)在頁(yè)面中放置一個(gè)區(qū)會(huì)在頁(yè)面中放置一個(gè)區(qū) 域占位符，并顯

28、示文本域占位符，并顯示文本“此處為此處為 spry spry 區(qū)域的內(nèi)容區(qū)域的內(nèi)容”。 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(chǔ)教程 12.312.3 使用使用spry顯示數(shù)據(jù)顯示數(shù)據(jù) 12.3.3 12.3.3 創(chuàng)建創(chuàng)建 spry表格表格 spry表格有兩種類型：表格有兩種類型： n簡(jiǎn)單表格簡(jiǎn)單表格 n主動(dòng)態(tài)表格，主動(dòng)態(tài)表格與詳細(xì)區(qū)域綁定，以主動(dòng)態(tài)表格，主動(dòng)態(tài)表格與詳細(xì)區(qū)域綁定，以 允許動(dòng)態(tài)更新允許動(dòng)態(tài)更新dreamweaverdreamweaver頁(yè)面上的數(shù)據(jù)。頁(yè)面上的數(shù)據(jù)。 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(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 表表”對(duì)話框?qū)υ捒?，進(jìn)行相關(guān)設(shè)置。，進(jìn)行相關(guān)設(shè)置。 單擊單擊“確定確定”，用戶會(huì)在，用戶會(huì)在“設(shè)計(jì)設(shè)計(jì)”視圖中看到一個(gè)表視圖中看到一個(gè)表 格，在該

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

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

32、網(wǎng)頁(yè)制作基礎(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ù)項(xiàng)重復(fù)項(xiàng)”，或在，或在 “插入插入”欄中的欄中的“spry”spry”類別中單擊類別中單擊“spry spry 重復(fù)項(xiàng)重復(fù)項(xiàng)” 按鈕。按鈕。 彈出彈出“插入插入spryspry重復(fù)項(xiàng)重復(fù)項(xiàng)”對(duì)話框，進(jìn)行相關(guān)設(shè)置。對(duì)話框，進(jìn)行相關(guān)設(shè)置。 單擊單擊“確定確定”按鈕，按鈕，dreamweaver dreamweaver 會(huì)在頁(yè)面中插入一會(huì)在頁(yè)面中插入一 個(gè)區(qū)域占位

33、符，并顯示文本個(gè)區(qū)域占位符，并顯示文本“此處為此處為 spry spry 區(qū)域的內(nèi)區(qū)域的內(nèi) 容容”。 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(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)簽類型選擇 “”或或 “”選項(xiàng)。默選項(xiàng)。默 認(rèn)值是使用認(rèn)值是使用 容器。容器。 在在“類型類型”中選擇中選擇 “重復(fù)重復(fù)”（默認(rèn)選項(xiàng)）（默認(rèn)選項(xiàng)） 或或“重復(fù)子項(xiàng)重復(fù)子項(xiàng)”選項(xiàng)。選項(xiàng)。 在在“spryspry數(shù)據(jù)集數(shù)據(jù)集”中中 選擇前面定義好的選擇前面定義好的 spry spry 數(shù)據(jù)集數(shù)據(jù)集“ds1”ds1”。 如果已經(jīng)選擇了文本如果已經(jīng)選擇了文本 或元素，即可環(huán)繞或或元素，即可環(huán)繞或 替換它們。替換它們。 網(wǎng)頁(yè)制作基礎(chǔ)教程網(wǎng)頁(yè)制作基礎(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”類別中單擊類別中單擊