《網(wǎng)頁制作基礎(chǔ)教程(Dreamweaver-CS4)》第13章-使用Spry構(gòu)件

《網(wǎng)頁制作基礎(chǔ)教程（DreamweaverCS4）》

電子教案第13章使用Spry構(gòu)件

本章重點(diǎn)：Spry折疊構(gòu)件、菜單欄構(gòu)件、驗(yàn)證文本域構(gòu)件、驗(yàn)證復(fù)選框構(gòu)件與重復(fù)區(qū)域構(gòu)件等多種構(gòu)件的使用方法

。第13章使用Spry構(gòu)件13.1使用Spry構(gòu)件——新功能展示13.2Spry構(gòu)件13.3使用Spry顯示數(shù)據(jù)13.4Spry效果13.1使用“Spry”構(gòu)件-----新功能展示13.1.1案例綜述

新增的Spry功能不僅增加了頁面的布局形式，簡化并增強(qiáng)了表單的驗(yàn)證功能，還與XML數(shù)據(jù)相結(jié)合，方便構(gòu)造動態(tài)數(shù)據(jù)顯示。本例就將這些新功能集合到一個(gè)網(wǎng)頁中，使讀者從中體會Spry的無窮魅力

。13.1.2案例分析

我們要做的工作是：申請網(wǎng)站空間檢查站點(diǎn)上傳網(wǎng)站。13.1使用“Spry”構(gòu)件-----新功能展示13.1.2案例分析

DreamweaverCS4中的Spry功能由四個(gè)部分組成：①Spry構(gòu)件。②Spry驗(yàn)證表單。③SpryXML數(shù)據(jù)顯示。④Spry特效。13.1使用“Spry”構(gòu)件-----新功能展示13.1.3實(shí)現(xiàn)步驟

用Spry構(gòu)件創(chuàng)建頁面（1）插入Spry菜單欄（2）插入“Spry選項(xiàng)卡式面板”（3）插入“Spry折疊式”（4）插入“Spry折疊面板”13.1使用“Spry”構(gòu)件-----新功能展示13.1.3實(shí)現(xiàn)步驟

使用Spry驗(yàn)證表單域（1）插入Spry驗(yàn)證文本域（2）插入“Spry驗(yàn)證復(fù)選框”（3）插入“Spry驗(yàn)證選擇”（4）插入“Spry驗(yàn)證文本區(qū)域”13.1使用“Spry”構(gòu)件-----新功能展示13.1.3實(shí)現(xiàn)步驟

使用SpryXML顯示數(shù)據(jù)（1）綁定SpryXML數(shù)據(jù)集。（2）插入Spry表，顯示SpryXML數(shù)據(jù)在頁面

（3）插入Spry詳細(xì)區(qū)域

13.2Spry構(gòu)件13.2.1Spry菜單欄

1．插入Spry菜單欄13.2Spry構(gòu)件13.2.1Spry菜單欄

1．插入Spry菜單欄①“插入”欄|“Spry”類型|“Spry菜單欄”按鈕或菜單欄“插入”|“布局對象”|“Spry菜單欄”或“插入”|“Spry”|“Spry菜單欄”命令。②在彈出的“Spry菜單欄”對話框中選擇“水平”或“垂直”，然后單擊“確定”按鈕。13.2Spry構(gòu)件13.2.1Spry菜單欄

2．編輯Spry菜單欄屬性“菜單項(xiàng)”：單擊列表框中的具體菜單項(xiàng)，在“文本”文本框中編輯輸入文本即重新定義該列表項(xiàng)的內(nèi)容?！疤砑硬藛雾?xiàng)”按鈕：表示為該菜單項(xiàng)添加了“子菜單”?！皠h除菜單項(xiàng)”按鈕：將該菜單項(xiàng)與“子菜單”同時(shí)刪除。“上移項(xiàng)”或“下移項(xiàng)”按鈕：進(jìn)行菜單項(xiàng)的顯示排序。

“鏈接”：輸入鏈接的目標(biāo)頁面地址，或者單擊“瀏覽”按鈕以瀏覽到相應(yīng)的文件?！澳繕?biāo)”：指定要在何處打開所鏈接的頁面。

13.2Spry構(gòu)件13.2.1Spry菜單欄

3．設(shè)置Spry菜單欄樣式設(shè)置方法：先選中要設(shè)置的菜單（單擊選中）。然后在“屬性”面板中選擇“樣式”就可以進(jìn)行設(shè)置13.2Spry構(gòu)件13.2.1Spry菜單欄

4．保存含有“Spry菜單欄”的頁面

在保存含有“Spry菜單欄”的頁面文件時(shí)，會彈出“復(fù)制相關(guān)文件”對話框。表示軟件將自動復(fù)制Spry菜單欄所需要到的CSS文件、JavaScript文件和相關(guān)圖像文件到站點(diǎn)目錄的SpryAssets文件夾內(nèi)。單擊“確定”按鈕進(jìn)行復(fù)制，否則將不能保證“Spry菜單欄”的正確運(yùn)行。13.2Spry構(gòu)件13.2.2Spry選項(xiàng)卡式面板1．插入選項(xiàng)卡式面板13.2Spry構(gòu)件13.2.2Spry選項(xiàng)卡式面板1．插入選項(xiàng)卡式面板①“插入”欄|“Spry”類型|“Spry選項(xiàng)卡面板”按鈕或菜單欄“插入”|“布局對象”|“Spry選項(xiàng)卡面板”或“插入”|“Spry”|“Spry選項(xiàng)卡面板”命令。②對于插入到網(wǎng)頁中的“Spry選項(xiàng)卡式面板”，單擊左上角的藍(lán)色區(qū)域即表示選擇了該“Spry選項(xiàng)卡式面板”，進(jìn)行編輯操作。。13.2Spry構(gòu)件13.2.2Spry選項(xiàng)卡式面板2．添加與刪除選擇卡面板①在“文檔”窗口中單擊選項(xiàng)卡左上角的藍(lán)色區(qū)域選擇該“Spry選項(xiàng)卡式面板”。②在“屬性”面板中，單擊“添加面板”按鈕或“刪除面板”按鈕。13.2Spry構(gòu)件13.2.2Spry選項(xiàng)卡式面板3．設(shè)置默認(rèn)的打開面板①在“文檔”窗口中單擊選項(xiàng)卡左上角的藍(lán)色區(qū)域選擇該“Spry選項(xiàng)卡式面板”。②在“屬性”面板中，從“默認(rèn)面板”下拉列表中選擇默認(rèn)情況下要打開的面板。13.2Spry構(gòu)件13.2.2Spry選項(xiàng)卡式面板4．編輯面板①將鼠標(biāo)定位在選項(xiàng)卡標(biāo)題所在區(qū)域即可對該標(biāo)題進(jìn)行編輯操作。②對于插入到頁面中各“Spry選項(xiàng)卡式面板”所對應(yīng)的內(nèi)容，鼠標(biāo)移動到相應(yīng)的“Spry選項(xiàng)卡”標(biāo)題時(shí)，會顯示“單擊以顯示面板內(nèi)容”按鈕，單擊該按鈕即可顯示面板內(nèi)容。13.2Spry構(gòu)件13.2.2Spry選項(xiàng)卡式面板5．調(diào)整選項(xiàng)卡面板的順序在“屬性”面板中，通過“在列表中向上移動面板”按鈕和“在列表中向下移動面板”按鈕對頁面中的“Spry選擇卡”進(jìn)行左右排序。13.2Spry構(gòu)件13.2.3Spry折疊式1.插入“Spry折疊式”13.2Spry構(gòu)件13.2.3Spry折疊式1.插入“Spry折疊式”①選擇菜單欄的“插入”|“Spry”|“Spry折疊式”，或“插入”|“布局對象”|“Spry折疊式”命令，或在“插入”面板的“Spry”類別中單擊“Spry折疊式”按鈕。②對于插入到網(wǎng)頁中的“Spry折疊式”，單擊左上角的藍(lán)色區(qū)域即表示選擇了該“Spry折疊式”，進(jìn)行編輯操作。13.2Spry構(gòu)件13.2.3Spry折疊式2．添加與刪除選擇卡面板①在“文檔”窗口中選擇一個(gè)折疊構(gòu)件。②在“屬性”面板中單擊“面板”旁邊的加號(+)按鈕或減號（-）按鈕。③（可選）更改面板的名稱，方法是在“設(shè)計(jì)”視圖中選擇面板的文本并對其進(jìn)行修改。13.2Spry構(gòu)件13.2.3Spry折疊式3．更改面板的順序在“屬性”面板中，通過“在列表中向上移動面板”按鈕和“在列表中向下移動面板”按鈕對頁面中的面板進(jìn)行上下排序。13.2Spry構(gòu)件13.2.3Spry折疊式4．打開面板進(jìn)行編輯請執(zhí)行下列操作之一：將鼠標(biāo)指針移到要在“設(shè)計(jì)”視圖中打開的面板的選項(xiàng)卡上，然后單擊出現(xiàn)在該選項(xiàng)卡右側(cè)的眼睛圖標(biāo)。在“文檔”窗口中選擇一個(gè)折疊構(gòu)件，然后在“屬性”面板的“面板”菜單中選擇要進(jìn)行編輯的面板。13.2Spry構(gòu)件13.2.4Spry可折疊面板2．打開或關(guān)閉可折疊面板打開或關(guān)閉可折疊面板的方法：將鼠標(biāo)指針移到要在“設(shè)計(jì)”視圖中打開的面板的選項(xiàng)卡上，然后單擊出現(xiàn)在該選項(xiàng)卡右側(cè)的眼睛圖標(biāo)。在“文檔”窗口中選擇一個(gè)折疊構(gòu)件，然后在“屬性”面板中，從“顯示”下拉列表中選擇“打開”或“已關(guān)閉”。13.2Spry構(gòu)件13.2.4Spry可折疊面板3．設(shè)置可折疊面板的默認(rèn)狀態(tài)①在“文檔”窗口中選擇一個(gè)可折疊面板構(gòu)件。②在“屬性”面板中，從“默認(rèn)狀態(tài)”彈出菜單中選擇“打開”或“已關(guān)閉”。13.2Spry構(gòu)件13.2.4Spry可折疊面板4．啟用或禁用可折疊面板的動畫①在“文檔”窗口中選擇一個(gè)可折疊面板構(gòu)件。②在“屬性”面板中，勾選或撤選“啟用動畫”復(fù)選框即可。13.2Spry構(gòu)件13.2.5Spry工具提示構(gòu)件

1．插入“Spry工具提示構(gòu)件”選擇菜單欄的“插入”|“Spry”|“Spry工具提示”，或在“插入”面板的“Spry”類別中單擊“Spry工具提示”按鈕。13.3使用Spry顯示數(shù)據(jù)13.3.1

Spry數(shù)據(jù)集

要在Web頁上顯示XML數(shù)據(jù)，首先需要在Dreamweaver中建立一個(gè)XML數(shù)據(jù)集，表示當(dāng)前網(wǎng)頁與XML文件之間建立了關(guān)系，才能向HTML頁面中添加Spry區(qū)域、表格或列表。

13.3使用Spry顯示數(shù)據(jù)13.3.1.1創(chuàng)建Spry數(shù)據(jù)集

步驟：①選擇“插入Spry”|“Spry

數(shù)據(jù)集”?；蛟凇安迦搿睓谥械摹癝pry”類別中單擊“Spry數(shù)據(jù)集”按鈕。②彈出的“Spry數(shù)據(jù)集”對話框，進(jìn)行相關(guān)設(shè)置。③設(shè)置完成后單擊“確定”按鈕。13.3使用Spry顯示數(shù)據(jù)13.3.1.1創(chuàng)建Spry數(shù)據(jù)集

13.3使用Spry顯示數(shù)據(jù)13.3.1.2定義Spry數(shù)據(jù)集

1.定義SpryHTML數(shù)據(jù)集

①為新數(shù)據(jù)集指定名稱。②在檢測選項(xiàng)中指定數(shù)據(jù)源中HTML元素。③在指定數(shù)據(jù)文件選項(xiàng)中指定包含HTML數(shù)據(jù)源的文件的路徑。④將在“數(shù)據(jù)選擇”窗口中呈現(xiàn)HTML數(shù)據(jù)源，并顯示可用作數(shù)據(jù)集容器的元素的可視標(biāo)記。13.3使用Spry顯示數(shù)據(jù)13.3.1.2定義Spry數(shù)據(jù)集

1.定義SpryHTML數(shù)據(jù)集

13.3使用Spry顯示數(shù)據(jù)13.3.1.2定義Spry數(shù)據(jù)集

2.定義SpryXML數(shù)據(jù)集

①為新數(shù)據(jù)集指定名稱。②在指定數(shù)據(jù)文件選項(xiàng)中包含XML數(shù)據(jù)源的文件的路徑。③選擇包含要顯示的數(shù)據(jù)的元素。為數(shù)據(jù)集選擇容器元素后，Dreamweaver

會在“數(shù)據(jù)預(yù)覽”窗口中顯示數(shù)據(jù)集預(yù)覽。XPath

文本框會顯示一個(gè)表達(dá)式，指明所選節(jié)點(diǎn)在XML源文件中位置。④完成“指定數(shù)據(jù)源”屏幕中的操作時(shí)，單擊“完成”可立即創(chuàng)建數(shù)據(jù)集，也可以單擊“下一步”，轉(zhuǎn)到“設(shè)置數(shù)據(jù)選項(xiàng)”屏幕。

13.3使用Spry顯示數(shù)據(jù)13.3.1.2定義Spry數(shù)據(jù)集

2.定義SpryXML數(shù)據(jù)集

13.3使用Spry顯示數(shù)據(jù)13.3.1.2定義Spry數(shù)據(jù)集

3.設(shè)置數(shù)據(jù)選項(xiàng)-----設(shè)置數(shù)據(jù)按某列排序

13.3使用Spry顯示數(shù)據(jù)13.3.1.2定義Spry數(shù)據(jù)集

4.為數(shù)據(jù)集選擇布局在“Spry數(shù)據(jù)集”的第三步“選擇插入選項(xiàng)”對話框中，用來選擇各種顯示選項(xiàng)，不同選項(xiàng)對應(yīng)數(shù)據(jù)集中的值在頁面上的不同顯示方式。13.3使用Spry顯示數(shù)據(jù)13.3.1.2定義Spry數(shù)據(jù)集

4.為數(shù)據(jù)集選擇布局13.3使用Spry顯示數(shù)據(jù)13.3.1.2定義Spry數(shù)據(jù)集

4.為數(shù)據(jù)集選擇布局動態(tài)表格布局主/詳細(xì)布局13.3使用Spry顯示數(shù)據(jù)13.3.1.2定義Spry數(shù)據(jù)集

4.為數(shù)據(jù)集選擇布局堆積容器布局帶有聚光燈區(qū)域的堆積容器布局13.3使用Spry顯示數(shù)據(jù)13.3.2創(chuàng)建Spry區(qū)域Spry區(qū)域有兩種類型：圍繞數(shù)據(jù)對象（如表格和重復(fù)列表）的Spry區(qū)域；

Spry詳細(xì)區(qū)域，該區(qū)域與主表格對象一起使用時(shí)，可允許對Dreamweaver

頁面上的數(shù)據(jù)進(jìn)行動態(tài)更新。13.3使用Spry顯示數(shù)據(jù)13.3.2創(chuàng)建Spry區(qū)域插入Spry區(qū)域的步驟：①選擇“插入”|“Spry”|“Spry

區(qū)域”。或在“插入”欄中“Spry”類別中單擊“Spry區(qū)域”按鈕。②彈出的“插入Spry區(qū)域”對話框，進(jìn)行相關(guān)設(shè)置。③單擊“確定”時(shí)，Dreamweaver

會在頁面中放置一個(gè)區(qū)域占位符，并顯示文本“此處為Spry區(qū)域的內(nèi)容”。13.3使用Spry顯示數(shù)據(jù)13.3.3

創(chuàng)建Spry重復(fù)項(xiàng)可以添加重復(fù)項(xiàng)來顯示數(shù)據(jù)。例如，有一組照片縮略圖，將它們逐個(gè)順序地放在頁面布局對象（如APdiv元素）中。13.3使用Spry顯示數(shù)據(jù)13.3.3創(chuàng)建Spry重復(fù)項(xiàng)

在“容器”中根據(jù)所需的標(biāo)簽類型選擇“<div>”或“<span>”選項(xiàng)。默認(rèn)值是使用<div>容器。在“類型”中選擇“重復(fù)”（默認(rèn)選項(xiàng)）或“重復(fù)子項(xiàng)”選項(xiàng)。在“Spry數(shù)據(jù)集”中選擇前面定義好的Spry數(shù)據(jù)集“ds1”。如果已經(jīng)選擇了文本或元素，即可環(huán)繞或替換它們。

13.3使用Spry顯示數(shù)據(jù)13.3.3創(chuàng)建Spry重復(fù)項(xiàng)步驟：①選擇“插入”|“Spry”|“Spry

重復(fù)項(xiàng)”，或在“插入””欄中的“Spry”類別中單擊“Spry重復(fù)項(xiàng)”按鈕。②彈出“插入Spry重復(fù)項(xiàng)”對話框，③在“容器”:“<div>”或“<span>”選項(xiàng)。④“類型”:“重復(fù)”或“重復(fù)子項(xiàng)”選項(xiàng)。⑤“Spry數(shù)據(jù)集”中選擇前面定義好的Spry數(shù)據(jù)集“ds1”。⑥如果已經(jīng)選擇了文本或元素，即可環(huán)繞或替換它們。13.3使用Spry顯示數(shù)據(jù)13.3.4

創(chuàng)建Spry重復(fù)列表可以添加重復(fù)列表，以便將數(shù)據(jù)顯示為經(jīng)過排序的列表、未經(jīng)排序的（項(xiàng)目符號）列表、定義列表或下拉列表。

①選擇“插入”|“Spry”|“Spry

重復(fù)列表”，或在“插入”面板中的“Spry”類別中單擊“Spry重復(fù)列表”按鈕。②彈出“插入Spry重復(fù)列表”對話框，

13.3使用Spry顯示數(shù)據(jù)13