選取「插入＞Spry＞Spry 標籤面板」。
上次更新時間
Apr 29, 2021 04:00:00 PM GMT
註解：
在 Dreamweaver CC 和更新版本中，Spry Widget 已由 jQuery Widget 所取代。雖然您仍可修改頁面上現有的 Spry Widget，但無法加入新的 Spry Widget。
關於標籤面板 Widget
標籤面板 Widget 是一組面板，可以將內容儲存在很小的空間中。網頁瀏覽者可以按一下他們要存取的面板標籤，隱藏或顯示標籤面板所儲存的內容。瀏覽者只要按下不同的標籤，就能開啟 Widget 的面板。標籤面板 Widget 同時間只能開啟一個內容面板。下列範例顯示標籤面板 Widget 及展開第三個面板的情形：
A. 索引標籤 B. 內容 C. 標籤面板 Widget D. 標籤面板
標籤面板 Widget 的 HTML 程式碼是由外部的 div 標籤所組成，而此標籤包含了所有面板、標籤清單、用來包含內容面板的 div，以及代表每個內容面板的 div。標籤面板 Widget 的 HTML 也包含位於文件頁首和標籤面板 Widget 之 HTML 標記後面的 Script 標籤。
如需標籤面板 Widget 運作方式的詳細說明，包括 Widget 程式碼的完整分析，請參閱 www.adobe.com/go/learn_dw_sprytabbedpanels_tw。
插入和編輯標籤面板 Widget
插入標籤面板 Widget
註解：
您也可以使用「插入」面板中的「Spry」類別來插入標籤面板 Widget。
新增面板至標籤面板 Widget
-
在「文件」視窗中選取標籤面板 Widget。
-
按一下「屬性」檢視窗 (「視窗 ＞ 屬性」) 中的面板加號按鈕。
-
(選擇性) 如果您要變更標籤名稱，請在「設計」檢視中選取標籤文字並加以變更。
從標籤面板 Widget 刪除面板
-
在「文件」視窗中選取標籤面板 Widget。
-
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 的「面板」選單中，選取要刪除的面板名稱，並按一下減號按鈕。
開啟面板以進行編輯
-
請執行下列其中一項作業：
將滑鼠指標移到要以「設計」檢視開啟的面板標籤上方，並按一下標籤右側的眼睛圖示。
在「文件」視窗中選取標籤面板 Widget，然後在「屬性」檢視窗 (「視窗 > 屬性」) 的「面板」選單中，按一下要編輯的面板名稱。
變更面板順序
-
在「文件」視窗中選取標籤面板 Widget。
-
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 的「面板」選單中，選取您要移動的面板名稱。
-
按一下向上或向下箭頭，將面板向上或向下移動。
設定預設開啟的面板
您可以設定當網頁在瀏覽器中開啟時，預設要開啟標籤面板 Widget 的哪個面板。
-
在「文件」視窗中選取標籤面板 Widget。
-
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 中，從「預設」面板彈出式選單中選取您要預設開啟的面板。
自訂標籤面板 Widget
「屬性」檢視窗可讓您對標籤面板 Widget 進行簡單的編輯，但不支援自訂的樣式設計工作。您可以更改標籤面板 Widget 的 CSS 規則，並依照您所喜愛的樣式建立 Widget。
如需更改標籤面板 Widget 顏色的快速參考資料，請參閱 David Powers 的 Spry 標籤面板、折疊式控制項和可收合面板樣式設計的快速指南。
如需樣式設計工作的進階清單，請參閱 www.adobe.com/go/learn_dw_sprytabbedpanels_custom_tw。
下列主題中的所有 CSS 規則都是指 SpryTabbedPanels.css 檔案中的預設規則。每當您建立 Spry 標籤面板 Widget 時，Dreamweaver 都會將 SpryTabbedPanels.css 檔案儲存在網站的 SpryAssets 資料夾中。這個檔案也包含 Widget 所適用各種樣式的實用註解資訊。
註解：
您可以輕鬆地在隨附的 CSS 檔案中直接編輯標籤面板 Widget 的規則，也可以使用「CSS 樣式」面板來編輯 Widget 的 CSS。「CSS 樣式」面板可以協助您尋找指定給 Widget 不同部分的 CSS 類別，在您使用面板的「目前」模式時，特別有用。
設計標籤面板 Widget 文字
您可以設定整個標籤面板 Widget 容器的屬性，或是個別設定 Widget 組件的屬性，藉此設計標籤面板 Widget 文字的樣式。
-
若要變更標籤面板 Widget 的文字樣式，請使用下表找出適合的 CSS 規則，然後新增您自己的文字樣式屬性和值：
要變更的文字
相關的 CSS 規則
要新增的屬性和值範例
整個 Widget 中的文字
.TabbedPanels font: Arial; font-size:medium;
僅面板標籤中的文字
.TabbedPanelsTabGroup 或 .TabbedPanelsTab font: Arial; font-size:medium;
僅內容面板中的文字
.TabbedPanelsContentGroup 或 .TabbedPanelsContent font: Arial; font-size:medium;
變更標籤面板 Widget 的背景顏色
-
若要變更標籤面板 Widget 不同部分的背景顏色，請使用下表找出適合的 CSS 規則，然後依照您的喜好新增或變更背景顏色的屬性和值：
要變更的顏色
相關的 CSS 規則
要新增或變更的屬性和值範例
面板標籤的背景顏色
.TabbedPanelsTabGroup 或 .TabbedPanelsTab background-color: #DDD; (這是預設值)
內容面板的背景顏色
.Tabbed PanelsContentGroup 或 .TabbedPanelsContent background-color: #EEE; (這是預設值)
所選標籤的背景顏色
.TabbedPanelsTabSelected background-color: #EEE; (這是預設值)
面板標籤在滑鼠指標滑過時的背景顏色
.TabbedPanelsTabHover background-color: #CCC; (這是預設值)
限制標籤面板寬度
根據預設，標籤面板 Widget 會展開至所有可用空間。不過，您只要設定折疊式容器的寬度屬性，就可以限制標籤面板 Widget 的寬度。
-
開啟 SpryTabbedPanels.css 檔案，找出 .TabbedPanels CSS 規則。這項規則定義了標籤面板 Widget 主要容器元素的屬性。註解：
您也可以選取標籤面板 Widget，然後在「CSS 樣式」面板 (「視窗 > CSS 樣式」) 中找出這項規則。請確認面板已設定為「目前」模式。
-
為規則新增寬度屬性和值，例如 width: 300px;。
更多類似項目
登入您的帳戶