瞭解如何在 Adobe Muse 中,使用「標籤」或「折疊式」面板顯示一系列相關的內容,並設定其樣式。

註解:

Adobe Muse 不再增加新功能,並將於 2020 年 3 月 26 日停止支援。如需詳細資訊和協助,請參閱 Adobe Muse 終止服務頁面

新增「標籤面板」Widget

  1. 開啟「Widget 資料庫」面板 (視窗 > Widget 資料庫)。展開面板,並選取「標籤面板」Widget。從「Widget 資料庫」將 Widget 拖移至您的「設計」面板。

    將「標籤面板」Widget 拖移至頁面時,其會以預設格式顯示。
    將「標籤面板」Widget 拖移至頁面時,其會以預設格式顯示。

  2. 按三次右側最頂端的索引標籤。按第一次時,會選取整個「標籤面板」,按第二次時,會選取「索引標籤容器」,按第三次時,則選取右側的「索引標籤」。

    請查看「選取指示器」,瞭解目前選取的是 Widget 的哪一個子元素。按下 Delete (Mac) 或 Backspace (Windows) 刪除第三個索引標籤。完成此變更後,即僅剩下兩個索引標籤。在頁面其他任何位置按一下。

  3. 再按一下 Widget,選取整個「標籤面板」。拖移控制點調整整個 Widget 的大小至寬 840 像素、高 645 像素。當您拖移控制點時,可參照出現的度量數值。

    您也可以查看「變形」面板中「W」(寬度) 與「H」(高度) 兩個欄位的數值。

    檢閱寬度及高度欄位,確認 Widget 調整後的尺寸。
    檢閱寬度及高度欄位,確認 Widget 調整後的尺寸。

  4. 使用「選取」工具將「標籤面板」Widget 移動至頁面頂端附近,垂直置中。

  5. 按一下「控制」面板中「固定」介面的頂端中央位置,將「標籤面板」Widget 固定於此。若要瞭解有關固定物件使其無法捲動的詳細資訊,請參閱此連結

  6. 在仍然選取「標籤面板」Widget 的情況下,按一下左側索引標籤以選取「索引標籤容器」(含有兩個頂層索引標籤的元素)。使用「選取」工具將中央控制點向下拖移,直到高度約為 98 像素。

    在「間距」面板中,如下方影像所示設定下列數值:

    • 左側:220
    • 右側:220
    • 下方:2
    • 間距高度:10
    在「間距」面板設定「標籤容器」的間距值。
    在「間距」面板設定「標籤容器」的間距值。

  7. 完成這些變更後,使用「選取」工具將整個「標籤面板」Widget 拖移至頁面最頂端,使「標籤面板」的頂部完全緊靠頁首矩形的底部,兩者之間不留垂直間距。

    若有需要,您也可以放大顯示,細看元素對齊狀況。完成後請將放大比例設回 100%。

設定「標籤面板」Widget 的樣式

現在您已新增「標籤面板」Widget,下一部分將要更新其樣式,完成兩個索引標籤的設計。

  1. 按三次左側索引標籤,以選取左側標籤。開啟「狀態」面板並選取「正常」狀態。使用「填色」選單設定填色顏色。將線條寬度設定為 0。

  2. 在「狀態」面板中選取「滑鼠指向效果」狀態。將索引標籤「滑鼠指向效果」狀態的填色顏色設為 571E00。請注意,當您設定「滑鼠指向效果」狀態的填色顏色時,「滑鼠按下」狀態亦將自動更新。

    選取「作用中」狀態,將索引標籤的「作用中」狀態套用相同的填色顏色。現在「正常」狀態會使用您在上一個步驟中選擇的顏色填色,其他三種狀態則是使用 571E00 填色。

  3. 再按一次左側索引標籤,以選取標籤。選取時,「選取指示器」會顯示「標籤」一詞。選取「狀態」面板中的「正常」狀態,然後使用「文字」面板設定下列屬性 (如下方影像所示):

    • 網頁字體:Kaushan Script (或任選其他 Script 字體)
    • 字體大小:26,顏色:#70909D (您可重新命名此顏色。例如「blue-menu」(藍色-菜單))
    • 行距:120%
    • 對齊方式:置中
    更新「文字」面板的設定,為標籤文字設定樣式。
    更新「文字」面板的設定,為標籤文字設定樣式。

  4. 在依然選取標籤的狀態下,按一下「段落樣式」面板底部的「新增樣式」按鈕。當您要重覆套用此格式時,只要按一下即可重新命名這個新的段落樣式。例如「標題-索引標籤」。

  5. 當您查看「狀態」面板時,在選取「正常」狀態時套用至標籤的格式,也會同時套用至「滑鼠指向效果」及「滑鼠按下」狀態。選取「作用中」狀態,並且再按一次「標題-索引標籤」段落樣式,以將此格式套用於「作用中」狀態。至此為止,兩個索引標籤中的所有狀態均已設定樣式。

    再選取一次「正常」狀態。

  6. 使用「文字」工具選取所有索引標籤中的標籤文字,然後輸入適當的標籤名稱。

  7. 若您選取左側索引標籤並查看「狀態」面板,會發現已套用於每一個索引標籤與標籤的最終格式。按一下右側索引標籤,注意到除了各索引標籤的文字內容外,各狀態看起來均相同。

    在 Adobe Muse 中的「狀態」面板檢閱每一個索引標籤的格式。
    在「狀態」面板檢閱每一個索引標籤的格式。

在「標籤面板」Widget 的內容區域新增文字框

  1. 請花點時間,在兩個有不同標籤的不同索引標籤之間來回切換。兩個索引標籤的預留位置文字不同,所以當顯示其中一個容器時,另一個即會隱藏。

  2. 在您的 Widget 中按一下右側索引標籤。選取右側索引標籤時,相應的內容區域會顯示在索引標籤下方。此操作不論在「設計」視圖中編輯頁面時,或是在線上網站時,均是相同的。這就是「標籤面板」Widget 好用之處,因為您能夠非常有效率地在單一頁面顯示更多內容。

  3. 為您的索引標籤選取內容區域。選取時,「選取指示器」會顯示「內容區域」一詞。選取預留位置影像檔案,按下 Delete (Mac) 或 Backspace (Windows) 將其刪除。

  4. 使用「文字」工具,選取現有的預留位置文字頁首。選取粗體的頁首文字「Mauris sit amet」並將其刪除。

  5. 暫時從 Adobe Muse 切換至您的桌面。開啟樣本檔案檔案夾,找到名為 text-about-ourstory.txt 的檔案。按兩下檔案以在文字編輯器中開啟。拷貝頁面第一部分,直至「... crafted through years of baking for friends and family.」之處。

  6. 返回 Muse。使用「文字」工具,選取現有的預留位置文字。將您拷貝的文字內容貼入文字框。多留一行空行並返回文字框頂端。

  7. 在選取文字框的狀態下,使用「文字」面板選擇設定以格式化您的文字。例如,您可以選擇下列設定:

    • 字體:Droid Serif
    • 字體大小:14
    • 顏色:#222222
    • 對齊方式:靠左
    • 行距:120%
  8. 在依然選取文字的狀態下,按一下「段落樣式」面板底部的「新增樣式」按鈕。連按兩下新建的段落樣式並重新命名。例如「本文」。如此即可輕鬆為其他文字內容重新套用相同格式。

  9. 在「色票」面板中連按兩下顏色值 #222222 並重新命名此顏色。例如「katieblack」(凱蒂黑)。

  10. 在「控制」面板中,設定文字欄的線條顏色為 #222222 (katieblack (凱蒂黑)),並設定線條寬度為 5 像素。

  11. 使用「填色」選單將文字欄位的填色顏色設為淺米黃色 (#F8F3E2)。按一下「影像」區段旁的檔案夾,然後瀏覽以選取樣本檔案檔案夾中名為 bg-texture.png 的檔案。將「符合」選單設定為「並排」。

  12. 在「間距」面板中,設定左間距和右間距。例如,您可將左間距設定為 24、右間距設定為 15。

    設定間距值,在貼上的文字複本周圍建立視覺空間。
    設定間距值,在貼上的文字複本周圍建立視覺空間。

  13. 接下來,您將在對應各索引標籤的內容區域容器中新增內容。

    使用「選取」工具調整文字欄大小。將其拖移至容器左側,再使用控制點放大寬度至可用內容區域空間的一半左右 (大約寬 390 像素、高 381 像素)。

在「標籤面板」中複製文字框

接下來,您將複製現有的文字框來建立第二個文字框,填滿內容區域的右側。

  1. 使用「選取」工具,選取文字框。按住 Option (Mac) 或 Alt (Windows),同時將文字框複本拖移至內容區域右側 (見下方影像)。

    利用畫面顯示的對齊參考線,確保右側文字框已水平對齊左側文字框。

    複製現有的文字框以在右側建立第二欄文字框。
    複製現有的文字框以在右側建立第二欄文字框。

  2. 暫時從 Muse 切換至含有您「標籤面板」內容的文字編輯程式。拷貝您要貼至複製索引標籤內的內容。

  3. 切換回 Muse。刪除所有在複製的右側文字框中的現有文字。貼上您從剪貼簿拷貝的新文字內容。

  4. 視需要使用「選取」工具調整兩個文字框位置,使兩者對齊並置中於內容區域的正確位置。

  5. 在依然選取文字框的狀態下,按一下 Escape 以選取複製之索引標籤的內容區域。設定線條寬度為 0,並將填色顏色設定為「無」。

複製文字框已接近完成。最後部分就是新增一張小型影像,在左側文字框內使文字繞排在影像周圍。

使用「折疊式」面板

在您想將大量內容納入較小的螢幕實際可用空間時,「折疊式面板」Widget 非常實用。收合及展開行為可讓訪客按一下標籤面板,並看到對應的內容區域顯示。除了桌上型電腦版網站外,「折疊式面板」Widget 常用於顯示行動版面的內容。

在本節中,您將學習如何將內容新增至網站中的個別頁面。您會使用其他類型的 Widget,稱為「折疊式」Widget。「面板」Widget (「折疊式」與「標籤面板」Widget) 很實用,因為它們可讓您在較小的畫面實際可用空間內,在頁面上顯示更多的內容。

  1. 在「設計」檢視畫面中開啟您的專案,並開始進行編輯。

  2. 選擇「檔案 > 置入」。在「讀入」對話方塊中,瀏覽至您存放資源的檔案夾,然後選取您需要的影像檔案。按一下「選取」,然後在頁面頂端上按一下,將影像以原始大小作為頁首文字置入頁面。您將新增「折疊式」Widget 至此頁首下方。

新增「折疊式」至網頁

  1. 開啟「Widget 程式庫」。(選擇「視窗 > Widget 程式庫」將其開啟。若已開啟,請按一下頂部索引標籤,使「Widget 程式庫」在停駐的面板組中成為作用中的面板。)

  2. 按一下「面板」展開「面板」Widget 清單。選擇「折疊式」Widget。拖移「折疊式」Widget 至頁面,置於頁面內容區域的左上角

    在 Adobe Muse 頁面上拖移並放置「折疊式」Widget。
    在您的頁面上拖移並放置「折疊式」Widget。

  3. 使用「選取」工具,選取該 Widget 的各個元件。選取整個 Widget 時,「控制」面板左上角的「選取指示器」顯示「Widget」。再按一下,注意到「選取指示器」隨即更新,告知已選取容器或是文字框。「選取指示器」讓您知道目前選取的是 Widget 哪一部分。

    若要取消選取 Widget 的元素,請按一下 Esc 鍵從目前的選取項目退回上一層,或重複按下此鍵來退出嵌套元素。或者,您只要在 Widget 之外的地方按一下滑鼠,然後進入頁面的其他部分即可。

    依照預設,「折疊式」Widget 有兩個面板。上面板顯示預留位置索引標籤名稱「Lorem 1」,下面板則顯示預留位置索引標籤名稱「Ipsum 2」。

  4. 按一下圓形藍箭頭圖示以開啟「Widget 選項」對話方塊。確認已核取「一併編輯」選項。此選項可確保您對「折疊式」任一索引標籤名稱所做的變更均會套用至所有索引標籤。

    確認已核取「折疊式」Widget 的「選項」面板中的「一併編輯」。
    確認已核取「折疊式」Widget 的「選項」面板中的「一併編輯」。

  5. 使用「選取」工具按一下 Widget 將其選取,再拖移右控制點至右方,增加 Widget 寬度至足以覆蓋兩欄,如下方影像所示。

    拖移 Widget 的控制點,增加 Widget 寬度至兩個欄位寬。
    在選取 Widget 的狀態下,拖移右控制點,增加 Widget 寬度至足以覆蓋兩欄。

  6. 按一下 Widget 底部的「Ipsum 2」下方的加號 (+),加入第三個面板。第三個面板顯示的預留位置索引標籤名稱為「Ipsum 3」。

在下一節,您將學習如何在「折疊式」Widget 的面板置入文字內容。不過,您首先要更新「折疊式」Widget 第一個面板上方的頂部索引標籤名稱。

新增文字至「折疊式面板」

  1. 使用「選取」工具選取頂部索引標籤的文字框,目前名稱為「Lorem 1」。按一下「Lorem 1」以選取整個 Widget,再擴大頂部索引標籤的對應容器,然後在「Lorem 1」文字中按一下,選取此文字框。在選取文字框的狀態下,「選取指示器」會顯示「文字框」。

  2. 按兩下預留位置文字「Lorem 1」進行編輯,然後輸入您要的文字。

  3. 選取第一個索引標籤下的淺灰色容器。使用「文字」工具,在較大容器中拖移新開一個文字框。

  4. 在新的文字框中輸入您的標題文字。

以背景影像填滿「折疊式」頂部索引標籤

  1. 選取「折疊式」Widget 有顯示標題的頂部索引標籤。

  2. 按一下圓形藍色箭頭按鈕開啟「選項」選單。取消選取「一併編輯」選項。在「選項」選單以外位置按一下,將其關閉。

  3. 按兩次頂部索引標籤,直到「選取指示器」顯示「文字框」。在選取頂部索引標籤文字框的狀態下,按一下「控制」面板的「填色」連結,以開啟「填色」選單。按一下檢色器,設定背景填色顏色為「無」,而非預設的深灰色。

  4. 按一下「影像」區段的檔案夾圖示,開啟「讀入」對話方塊。瀏覽至您的資源檔案夾,然後選取您要新增的影像。

  5. 開啟「間距」面板。在「間隔: 左」區段按住向上箭頭不放,增加頁首前面的空間,讓文字置中於該索引標籤的背景影像。

    設定「折疊式」的間距Adobe Muse 中的 Widget
    使用「間距」面板增加左方間隔,並將折疊式文字置中。

折疊式」Widget 的第一個索引標籤已完成。

如果您在編輯第一個索引標籤時,已取消選取「一併編輯」設定,則您所做的變更不會顯示在其他索引標籤上。您必須為「折疊式」面板中的其他索引標籤分別調整樣式。

旋轉「折疊式」Widget

依預設,「折疊式面板」Widget 設定為以垂直方向將標籤面板顯示於上,而內容區域顯示於下。

依預設,Adobe Muse 中的「折疊式」Widget 為垂直顯示。
當您將「折疊式面板」Widget 新增到頁面時,其為垂直顯示。

若要使用「折疊式」Widget 建立水平方向的滑桿,請執行下列步驟:

  1. 在「設計」視圖中,開啟「Widget 程式庫」並展開「面板」區段。

  2. 從「面板」區段選取「折疊式」選項,然後將其拖移到頁面。

  3. 使用「選取」工具,按一下以選取整個 Widget。「控制」面板左上角的選取指示器會顯示「折疊式」一詞。

  4. 在旋轉時按住 Shift 鍵可強制等比例,讓您以 45 度的增量移動 Widget。當您旋轉 Widget 時,會出現工具提示顯示目前的旋轉值。

    依您選擇要旋轉折疊式內容的方向,將 Widget 旋轉至 -90° 或 +90°。
    依您選擇要旋轉折疊式內容的方向,將 Widget 旋轉至 -90° 或 +90°。

  5. 旋轉 Widget 後,按一下「預視」連結或在瀏覽器中預視頁面,以查看「折疊式」是否仍如常展開和收合面板。檢查標籤容器的執行指令是否為按一下時顯示對應的內容區域。

    現在,僅需將方向為「正面朝上」(而非橫躺顯示) 的內容填入標籤和內容區域容器即可。

    依照下列步驟操作,在內容區域內顯示文字內容。您將使用上述相同的技巧來旋轉內容區域容器中的文字欄位。

     

  6. 按兩下內容區域中的預設文字。第一下會選取整個「折疊式」Widget,第二下會選取內容區域容器。在選取內容區域的情況下,按一下並拖移內容區域的調整大小控制點,以使用「選取」工具擴大內容區域的大小。

  7. 在仍選取內容區域的情況下,再按一下以選取內容區域內的文字框。將游標指向文字框的其中一個角落附近,直到看見旋轉游標顯示為止。按住 Shift 鍵並旋轉文字框,使其旋轉至與外部 Widget 同方向的 90 度位置。

    如果您要在內容區域顯示文字,請旋轉現有的預留位置文字內容。
    如果您要在內容區域顯示文字,請旋轉現有的預留位置文字內容。

  8. 旋轉文字框後,使用「選取」工具將其重新放置在內容區域中。使用「文字」工具以您實際想顯示的文字取代預留位置文字,然後使用「控制」面板中的文字格式選項和「文字」面板,以設定文字樣式 (或套用段落樣式以更新外觀)。

  9. 置入影像、繪製矩形或嵌入 HTML,視需要填入內容區域容器。您不需要旋轉此內容,因為其會自動正向置入已旋轉的容器中。

更新標籤容器中的文字

若要更新標籤容器中的文字,您有數個選項。

如果標籤太短,而您想讓文字保持「橫躺」(例如,模擬書架上的書藉),您可以使用「文字」工具選取現有的預留位置文字,並輸入想要的標籤 (見下方影像)。

使用「文字」工具編輯「折疊式」Widget 的標籤文字。
使用「文字」工具編輯「折疊式」Widget 的標籤文字。

如果您不想使用文字標籤,則可以直接刪除標籤容器中現有的預留位置文字,然後使用「控制」面板或「填色」面板 (以及「狀態」面板) 的格式選項,為每個標籤套用不同的顏色 (見下方影像)。若要個別更新每個標籤容器的外觀,請按一下藍色箭頭按鈕,以存取「選項」選單,並停用「一併編輯」選項。

使用「填色」選單和文字格式選項為標籤容器和對應文字內容標上顏色。
使用「填色」選單和文字格式選項為標籤容器和對應文字內容標上顏色。

另一個選擇是使用影像編輯程式,建立插入標籤面板的影像。將影像置入頁面並剪下、使用「文字」工具選取標籤文字,然後將影像貼至標籤容器。如有需要,影像可以包括直行的文字 (見下方影像)。

在標籤容器中插入含直行文字的影像。
在標籤容器中插入含直行文字的影像。

在「折疊式」面板中新增錨點連結

您可以藉由在「摺疊式」面板中新增錨點連結,將任何頁面元素連結至「折疊式」Widget。請繼續閱讀,以瞭解如何新增錨點連結至「折疊式」Widget:

  1. 選取您要在其中新增錨點連結的「折疊式」Widget。按一下您要新增錨點連結的標籤。

  2. 按一下「錨點」工具以在「置入噴槍」中載入錨點連結。

    從「工具」面板中選取「錨點」工具。
    從「工具」面板中選取「錨點」工具。

  3. 將錨點連結放在「折疊式」Widget 中。

    系統隨即會顯示重新命名錨點的快顯方塊。為您的錨點輸入合適的名稱,然後按一下「確定」。

    將錨點連結放在「折疊式」Widget 中
    將錨點連結放在「折疊式」Widget 中

    您現在可將此錨點連結至您網站中,任何頁面上的任何頁面元素。

  4. 若要將頁面元素連結至此錨點,請選取您要連結的頁面元素。請從頂端的「超連結」下拉式選單選取您剛剛建立的錨點。

    在即時網站中,每次按一下頁面元素時,頁面就會顯示放置錨點連結的「折疊式」索引標籤。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策