spry菜單欄使用教程
關於 Spry 框架
Spry 框架是一個 JavaScript 庫，Web 設計人員使用它可以構建能夠向站點訪問者提供更豐富體驗的 Web 頁。有了 Spry，就可以使用 HTML、CSS 和極少量的 JavaScript 將 XML 數據合並到 HTML 文檔中，創建構件（如折疊構件和菜單欄），向各種頁面元素中添加不同種類的效果。在設計上，Spry 框架的標記非常簡單且便於那些具有 HTML、CSS 和 JavaScript 基礎知識的用戶使用。
Spry 框架主要面向專業 Web 設計人員或高級非專業 Web 設計人員。它不應當用作企業級 Web 開發的完整 Web 應用框架（盡管它可以與其它企業級頁面一起使用）。
關於 Spry 框架
Spry 框架是一個 JavaScript 庫，Web 設計人員使用它可以構建能夠向站點訪問者提供更豐富體驗的 Web 頁。有了 Spry，就可以使用 HTML、CSS 和極少量的 JavaScript 將 XML 數據合並到 HTML 文檔中，創建構件（如折疊構件和菜單欄），向各種頁面元素中添加不同種類的效果。在設計上，Spry 框架的標記非常簡單且便於那些具有 HTML、CSS 和 JavaScript 基礎知識的用戶使用。
Spry 框架主要面向專業 Web 設計人員或高級非專業 Web 設計人員。它不應當用作企業級 Web 開發的完整 Web 應用框架（盡管它可以與其它企業級頁面一起使用）。
A.
折疊式面板選項卡
B.
折疊式面板內容
C.
折疊式面板（打開）
折疊構件的默認 HTML 中包含一個含有所有面板的外部div標簽以及各面板對應的div標簽，各面板的標簽中還有一個標題div和內容div。折疊構件可以包含任意數量的單獨面板。在折疊構件的 HTML 中，在文檔頭中和折疊構件的 HTML 標記之后還包括script標簽。
自定義折疊構件
盡管使用屬性檢查器可以簡化對折疊構件的編輯，但是屬性檢查器並不支持自定義的樣式設置任務。您可以修改折疊構件的 CSS 規則，並創建根據自己的喜好設置樣式的折疊構件。有關樣式任務的更高級列表，請訪問 www.adobe.com/go/learn_dw_spryaccordion_custom_cn。
下列主題中的所有 CSS 規則都是指 SpryAccordion.css 文件中的默認規則。每當您創建 Spry 折疊構件時，Dreamweaver 都會將 SpryAccordion.css 文件保存到您的站點的 SpryAssets 文件夾中。此文件還包含有關適用於該構件的各種樣式的注釋信息，因此，您可能會發現參考該文件也會有所幫助。
盡管可以直接在 CSS 文件中方便地編輯折疊構件的規則，但您也可以使用“CSS 樣式”面板來編輯折疊構件的 CSS。“CSS 樣式”面板對於查找分配給構件不同部分的 CSS 類非常有用，在使用面板的“當前”模式時尤其如此。
設置折疊構件文本的樣式
以通過設置整個折疊構件容器的屬性，或分別設置構件的各組件的屬性來設置折疊構件的文本樣式。
要更改折疊構件的文本樣式，請使用下表來查找相應的 CSS 規則，然后添加自己的文本樣式屬性和值：
| 要更改的文本 |
相關 CSS 規則 |
要添加的屬性和值的示例 |
| 整個折疊構件（包括選項卡和內容面板）中的文本 |
.Accordion 或 .AccordionPanel |
font: Arial; font-size:medium; |
| 僅限折疊式面板選項卡中的文本 |
.AccordionPanelTab |
font: Arial; font-size:medium; |
| 僅限折疊式內容面板中的文本 |
.AccordionPanelContent |
font: Arial; font-size:medium; |
更改折疊構件的背景顏色
要更改折疊構件不同部分的背景顏色，請使用下表來查找相應的 CSS 規則，然后添加或更改背景顏色的屬性和值：
| 要更改的構件部分 |
相關 CSS 規則 |
要添加或更改的屬性和值的示例 |
| 折疊式面板選項卡的背景顏色 |
.AccordionPanelTab |
background-color: #CCCCCC;（這是默認值。） |
| 折疊式內容面板的背景顏色 |
.AccordionPanelContent |
background-color: #CCCCCC; |
| 已打開的折疊式面板的背景顏色 |
.AccordionPanelOpen .AccordionPanelTab |
background-color: #EEEEEE;（這是默認值。） |
| 鼠標懸停在其上的面板選項卡的背景顏色 |
.AccordionPanelTabHover |
color: #555555;（這是默認值。） |
| 鼠標懸停在其上的已打開面板選項卡的背景顏色 |
.AccordionPanelOpen .AccordionPanelTabHover |
color: #555555;（這是默認值。） |
限制折疊的寬度
默認情況下，折疊構件會展開以填充可用空間。但是，您可以通過設置折疊式容器的 width 屬性來限制折疊構件的寬度。
- 打開 SpryAccordion.css 文件來查找 .Accordion CSS 規則。此規則可用來定義折疊構件的主容器元素的屬性。
查找規則的另一種方法是：選擇折疊構件，然后在“CSS 樣式”面板（“窗口”>“CSS”）中進行查找。請確保該面板設置為“當前”模式。
- 向該規則中添加一個 width 屬性和值，例如width: 300px;。
關於菜單欄構件
菜單欄構件是一組可導航的菜單按鈕，當站點訪問者將鼠標懸停在其中的某個按鈕上時，將顯示相應的子菜單。使用菜單欄可在緊湊的空間中顯示大量可導航信息，並使站點訪問者無需深入瀏覽站點即可了解站點上提供的內容。
Dreamweaver 允許您插入兩種菜單欄構件：垂直構件和水平構件。下例顯示一個水平菜單欄構件，其中的第三個菜單項處於展開狀態：
查看完全大小圖形
菜單欄構件（由 <ul>、<li> 和 <a> 標簽組成）
A.
菜單項具有子菜單
B.
子菜單項具有子菜單
菜單欄構件的 HTML 中包含一個外部ul標簽，該標簽中對於每個頂級菜單項都包含一個li標簽， 而頂級菜單項（li標簽）又包含用來為每個菜單項定義子菜單的ul和li標簽，子菜單中同樣可以包含子菜單。頂級菜單和子菜單可以包含任意多個子菜單項。
添加或刪除菜單和子菜單
使用屬性檢查器（“窗口”>“屬性”），向菜單欄構件中添加菜單項或從中刪除菜單項。
添加主菜單項
- 在“文檔”窗口中選擇一個菜單欄構件。
- 在屬性檢查器中，單擊第一列上方的加號按鈕。
- （可選）重命名新菜單項，方法是更改“文檔”窗口或屬性檢查器“文本”框中的默認文本。
- 在“文檔”窗口中選擇一個菜單欄構件。
- 在屬性檢查器中，選擇要向其中添加子菜單的主菜單項的名稱。
- 單擊第二列上方的加號按鈕。
- （可選）重命名新的子菜單項，方法是更改“文檔”窗口或屬性檢查器“文本”框中的默認文本。
添加子菜單項
要向子菜單中添加子菜單，請選擇要向其中添加另一個子菜單項的子菜單項的名稱，然后在屬性檢查器中單擊第三列上方的加號按鈕。
注： Dreamweaver 在“設計”視圖中僅支持兩級子菜單，但是在“代碼”視圖中可以添加任意多個子菜單。
刪除主菜單項或子菜單項
- 在“文檔”窗口中選擇一個菜單欄構件。
2. 在屬性檢查器中，選擇要刪除的主菜單項或子菜單項的名稱，然后單擊減號按鈕。
指定菜單項的目標屬性
目標屬性指定要在何處打開所鏈接的頁面。例如，可以為菜單項分配一個目標屬性，以便在站點訪問者單擊鏈接時，在新瀏覽器窗口中打開所鏈接的頁面。如果您使用的是框架集，則還可以指定要在其中打開所鏈接頁面的框架的名稱。
- 在“文檔”窗口中選擇一個菜單欄構件。
- 在屬性檢查器（“窗口”>“屬性”）中，選擇要分配目標屬性的菜單項的名稱。
- 在“目標”框中輸入以下四個屬性之一：
_blank
在新瀏覽器窗口中打開所鏈接的頁面。
_self
在同一個瀏覽器窗口中加載所鏈接的頁面。這是默認選項。如果頁面位於框架或框架集中，該頁面將在該框架中加載。
_parent
在文檔的直接父框架集中加載所鏈接的文檔。
_top
在框架集的頂層窗口中加載所鏈接的頁面。
關閉樣式
您可以禁用菜單欄構件的樣式，以便可以在“設計”視圖中更清楚地查看構件的 HTML 結構。例如，當您禁用樣式時，菜單欄項以項目符號列表形式顯示在頁面上，而不是顯示為菜單欄中帶樣式的菜單項。
- 在“文檔”窗口中選擇一個菜單欄構件。
2. 在屬性檢查器（“窗口”>“屬性”）中單擊“禁用樣式”按鈕。
更改菜單欄構件的方向
可以將菜單欄構件的方向從水平更改為垂直或者從垂直更改為水平。您只需修改菜單欄的 HTML 代碼並確保 SpryAssets 文件夾中有正確的 CSS 文件。
下例將水平菜單欄構件更改為垂直菜單欄構件。
- 在 Dreamweaver 中，打開包含水平菜單欄構件的頁。
- 插入垂直菜單欄構件（“插入”>“Spry”>“Spry 菜單欄”）並保存頁面。此步驟可確保在站點中包含與垂直菜單欄相對應的正確的 CSS 文件。
注： 如果站點中的其它位置中已有垂直菜單欄構件，則不必插入新的垂直菜單欄構件， 只需將 SpryMenuBarVertical.css 文件附加到該頁面，方法是在“CSS 樣式”面板（“窗口”>“CSS 樣式”）中單擊“附加樣式表”按鈕。
- 刪除垂直菜單欄。
- 在“代碼”視圖（“視圖”>“代碼”）中，找到 MenuBarHorizontal 類，將其更改為 MenuBarVertical。MenuBarHorizontal 類是在菜單欄 (<ul id="MenuBar1">) 的容器ul標簽中定義的。
- 在菜單欄的代碼后面，查找菜單欄構造函數：
- 從構造函數中刪除imgDown預先加載選項（和逗號）:
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
注： 如果將垂直菜單欄轉換為水平菜單欄，則添加imgDown預先加載選項和逗號。
- （可選）如果頁面中不再包含任何其它水平菜單欄構件，請從文檔頭中刪除指向先前 MenuBarHorizontal.css 類的鏈接。
- 保存該頁面
自定義菜單欄構件
盡管使用屬性檢查器可以簡化對菜單欄構件的編輯，但是屬性檢查器並不支持自定義的樣式設置任務。您可以修改菜單欄構件的 CSS 規則，並創建根據自己的喜好設置樣式的菜單欄構件。有關樣式任務的更高級列表，請訪問 www.adobe.com/go/learn_dw_sprymenubar_custom_cn。
下列主題中的所有 CSS 規則都是指 SpryMenuBarHorizontal.css 或 SpryMenuBarVertical.css 文件（具體情況取決於您進行的選擇）中的默認規則。每當您創建 Spry 菜單欄構件時，Dreamweaver 都會將這些 CSS 文件保存到您的站點的 SpryAssets 文件夾中。這些文件中還包括有關適用於該構件的各種樣式的有用的注釋信息。
盡管可以直接在相關聯的 CSS 文件中方便地編輯菜單欄構件的規則，您還可以使用“CSS 樣式”面板來編輯菜單欄的 CSS。“CSS 樣式”面板對於查找分配給構件不同部分的 CSS 類非常有用，在使用面板的“當前”模式時尤其如此。
更改菜單項的文本樣式
附加到 <a> 標簽的 CSS 中包含有關文本樣式的信息。還可以向與不同菜單狀態有關的 <a> 標簽附加多個相關的文本樣式類值。
要更改菜單項的文本樣式，請使用下表來查找相應的 CSS 規則，然后更改默認值：
| 要更改的樣式 |
垂直或水平菜單欄的 CSS 規則 |
相關屬性和默認值 |
| 默認文本 |
ul.MenuBarVertical a、ul.MenuBarHorizontal a |
color: #333; text-decoration: none; |
| 當鼠標指針移過文本上方時，文本的顏色 |
ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover |
color: #FFF; |
| 具有焦點的文本的顏色 |
ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus |
color: #FFF; |
| 當鼠標指針移過菜單欄項上方時，菜單欄項的顏色 |
ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover |
color: #FFF; |
| 當鼠標指針移過子菜單項上方時，子菜單項的顏色 |
ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover |
color: #FFF; |
更改菜單項的背景顏色
附加到 <a> 標簽的 CSS 中包含與菜單項的背景顏色有關的信息。還可以向與不同菜單狀態有關的 <a> 標簽附加多個相關的背景顏色類值。
要更改菜單項的背景顏色，請使用下表來查找相應的 CSS 規則，然后更改默認值：
| 要更改的顏色 |
垂直或水平菜單欄的 CSS 規則 |
相關屬性和默認值 |
| 默認背景 |
ul.MenuBarVertical a、ul.MenuBarHorizontal a |
background-color: #EEE; |
| 當鼠標指針移過背景上方時，背景的顏色 |
ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover |
background-color: #33C; |
| 具有焦點的背景的顏色 |
ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus |
background-color: #33C; |
| 當鼠標指針移過菜單欄項上方時，菜單欄項的顏色 |
ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover |
background-color: #33C; |
| 當鼠標指針移過子菜單項上方時，子菜單項的顏色 |
ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover |
background-color: #33C; |
更改菜單項的尺寸
可以通過更改菜單項的li和ul標簽的 width 屬性來更改菜單項尺寸。
- 找到ul.MenuBarVertical li或ul.MenuBarHorizontal li規則。
- 將 width 屬性更改為所需的寬度（或者將該屬性更改為auto以刪除固定寬度，然后向該規則中添加white-space: nowrap;屬性和值）。
- 找到ul.MenuBarVertical ul或ul.MenuBarHorizontal ul規則。
- 將 width 屬性更改為所需的寬度（或者將該屬性更改為auto以刪除固定寬度）。
- 找到ul.MenuBarVertical ul li或ul.MenuBarHorizontal ul li規則：
- 向該規則中添加下列屬性：float: none;和background-color: transparent;。
- 刪除width: 8.2em;屬性和值。
定位子菜單
Spry 菜單欄子菜單的位置由子菜單ul標簽的 margin 屬性控制。
- 找到ul.MenuBarVertical ul或ul.MenuBarHorizontal ul規則。
- 將默認值margin: -5% 0 0 95%;更改為所需的值
關於可折疊面板構件
可折疊面板構件是一個面板，可將內容存儲到緊湊的空間中。用戶單擊構件的選項卡即可隱藏或顯示存儲在可折疊面板中的內容。下例顯示一個處於展開和折疊狀態的可折疊面板構件：
A. 已展開 B.已折疊
可折疊面板構件的 HTML 中包含一個外部div標簽，其中包含內容div標簽和選項卡容器div標簽。在可折疊面板構件的 HTML 中，在文檔頭中和可折疊面板的 HTML 標記之后還包括腳本標簽。
自定義可折疊面板構件
盡管使用屬性檢查器可以簡化對可折疊面板構件的編輯，但是屬性檢查器並不支持自定義的樣式設置任務。您可以修改可折疊面板構件的 CSS，並創建根據自己的喜好設置樣式的可折疊面板。有關樣式任務的更高級列表，請訪問 www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_cn。
下列主題中的所有 CSS 規則都是指 SpryCollapsiblePanel.css 文件中的默認規則。每當您創建 Spry 可折疊面板構件時，Dreamweaver 都會將 SpryCollapsiblePanel.css 文件保存到您的站點的 SpryAssets 文件夾中。此文件中還包括有關適用於該構件的各種樣式的有用的注釋信息。
盡管可以直接在相關聯的 CSS 文件中方便地編輯可折疊面板構件的規則，您還可以使用“CSS 樣式”面板來編輯可折疊面板的 CSS。“CSS 樣式”面板對於查找分配給構件不同部分的 CSS 類非常有用，在使用面板的“當前”模式時尤其如此。
設置可折疊面板構件文本的樣式
通過設置整個可折疊面板構件容器的屬性或分別設置構件的各個組件的屬性，可以設置可折疊面板構件的文本樣式。
若要更改可折疊面板構件的文本格式，請使用下表來查找相應的 CSS 規則，然后添加自己的文本樣式屬性和值：
| 要更改的樣式 |
相關 CSS 規則 |
要添加或更改的屬性和值的示例 |
| 整個可折疊面板中的文本 |
.CollapsiblePanel |
font: Arial; font-size:medium; |
| 僅限面板選項卡中的文本 |
.CollapsiblePanelTab |
font: bold 0.7em sans-serif;（這是默認值。） |
| 僅限內容面板中的文本 |
.CollapsiblePanelContent |
font: Arial; font-size:medium; |
更改可折疊面板構件的背景顏色
要更改可折疊面板構件不同部分的背景顏色，請使用下表來查找相應的 CSS 規則，然后根據自己的喜好添加或更改背景顏色的屬性和值：
| 要更改的顏色 |
相關 CSS 規則 |
要添加或更改的屬性和值的示例 |
| 面板選項卡的背景顏色 |
.CollapsiblePanelTab |
background-color: #DDD;（這是默認值。） |
| 內容面板的背景顏色 |
.CollapsiblePanelContent |
background-color: #DDD; |
| 在面板處於打開狀態時，選項卡的背景顏色 |
.CollapsiblePanelOpen .CollapsiblePanelTab |
background-color: #EEE;（這是默認值。） |
| 當鼠標指針移過已打開面板選項卡上方時，選項卡的背景顏色 |
.CollapsiblePanelTabHover、.CollapsiblePanelOpen .CollapsiblePanelTabHover |
background-color: #CCC;（這是默認值。） |
限制可折疊面板的寬度
默認情況下，可折疊面板構件會展開以填充可用空間。但是，您可以通過為可折疊面板容器設置 width 屬性來限制可折疊面板構件的寬度。
- 打開 SpryCollapsible Panel.css 文件來查找 .CollapsiblePanel CSS 規則。此規則為可折疊面板構件的主容器元素定義屬性。
查找規則的另一種方法是：選擇可折疊面板構件，然后在“CSS 樣式”面板（“窗口”>“CSS 樣式”）中進行查找。請確保該面板設置為“當前”模式。
2. 向該規則中添加一個 width 屬性和值，例如width: 300px;。
關於選項卡式面板構件
選項卡式面板構件是一組面板，用來將內容存儲到緊湊空間中。站點訪問者可通過單擊他們要訪問的面板上的選項卡來隱藏或顯示存儲在選項卡式面板中的內 容。當訪問者單擊不同的選項卡時，構件的面板會相應地打開。在給定時間內，選項卡式面板構件中只有一個內容面板處於打開狀態。下例顯示一個選項卡式面板構 件，第三個面板處於打開狀態：
A.Tab B. 內容 C. 選項卡式面板構件 D. 選項卡式面板
選項卡式面板構件的 HTML 代碼中包含一個含有所有面板的外部div標簽、一個標簽列表、一個用來包含內容面板的div和以及各面板對應的div。在選項卡式面板構件的 HTML 中，在文檔頭中和選項卡式面板構件的 HTML 標記之后還包括腳本標簽.