閱讀本文以瞭解如何在 Adobe Muse 中套用「瀏覽器填色」和「背景填色」選項。

註解:

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

Adobe Muse 中的瀏覽器填色與背景影像

當您為自己的網站規劃網頁設計時,背景填色是設計中很重要的一環。Adobe Muse 中的「背景填色」可讓您為網站新增背景顏色或影像。您可以使用背景影像來營造出某項產品或服務的品牌價值。同樣地,您可以使用「背景填色」來增添設計感或呼應您網站的顏色主題。

當您在瀏覽器中新增背景填色和檢視網站時,選取的影像或顏色在瀏覽器視窗中會顯示為背景。為使設計統一和一致,請將背景填色套用至主版頁面。

閱讀下文以瞭解如何在 Adobe Muse 中套用背景填色。您可以執行下列一項作業:

使用背景顏色為瀏覽器填色

  1. 在「規劃」視圖中,按兩下「A-主版」頁面縮圖來在「設計」視圖中將其開啟。

    「A-主版」頁面會在它自己的索引標籤中沿工作區頂部開啟。

    注意,選取指示器位於「控制」面板的左上角。未選取頁面元素時,選取指示器會顯示「頁面」一詞。如果您選取頁面上的物件,例如影像,則選取指示器中會顯示「影像框」一詞。

    使用選取指示器,即可確認選取的是您想控制的元素。如果您選取任一其他頁面項目,可以按一下頁面外的灰色區域,以重新選取頁面。

    選取頁面時,您可以使用「控制」列中的選單來更新填色顏色與線條設定。

  2. 在「控制」面板中,按一下「瀏覽器填色」。從顏色欄位選取所需的顏色。您可以執行下列其中一項作業,以選擇背景填色顏色:

    • 使用檢色器選擇顏色。
    • 輸入 RGB 值。
    • 在「16 進位數」欄位中輸入 16 進位碼。
    • 從已儲存的色票中按一下以選取一個顏色。
    設定一個顏色作為背景填色
    設定一個顏色作為背景填色
  3. 如果要套用實色或漸層填色顏色,在「瀏覽器填色」面板中,選取「實色」或「漸層」。使用圓鈕,在實色和漸層填色顏色之間選擇。

  4. 如果要套用漸層,請將「填色類型」設定為「漸層」。設定顏色色票以設定第一個和最後一個色標。

    設定「漸層填色」選項
    設定「漸層填色」選項
  5. 將「方向」設定為「水平」或「垂直」來設定漸層的方向。

  6. 在「控制」面板中,按一下「填色」。確定頁面的填色顏色設定為「」。「填色」選單會顯示包含紅色對角線的白色色票。

    在 Adobe Muse 中將「填色」設定為「無」
    將「填色」設定為「無」

使用影像為背景填色

網頁設計中經常使用影像作為背景填色。Adobe Muse 可讓您以重複的影像或單一影像為背景填色。您還可進一步選取背景影像的位置和捲動屬性。

請繼續閱讀,以瞭解如何在 Adobe Muse 中使用影像作為背景填色。

  1. 開啟您 .muse 檔案的「主版頁面」。

    您可以為特定的頁面新增背景影像。但是,如果您希望背景影像顯示在設計中的每個頁面,請移至「主版頁面」。

  2. 從「控制」面板按一下「瀏覽器填色」。確認已將「填色類型」設定為「實色」。

    設定顯示於瀏覽器視窗的背景影像。
    設定顯示於瀏覽器視窗的背景影像。

    註解:

    如果您將「填色類型」設定為「漸層」,即無法將影像設定為背景填色。

  3. 如果要選取作為背景填色的影像,請按一下「新增影像」連結。從本機電腦瀏覽並選取所需的影像檔案。按一下「開啟」來設定背景影像。

  4. 設定背景影像的「符合」選項。您可以設定以下任一選項:

    • 縮放以填滿:背景影像會縮放大小。影像會依據您指定的設定縮放,以符合大小與位置。
    • 縮放以符合:影像會縮放以符合大小。
    • 原始大小:影像會以原始大小套用為背景填色。
    • 並排:影像會重複排列於整個背景。並排顯示選項可讓您建立較小的影像,該影像在跨越瀏覽器視窗時會重複出現,無論訪客的螢幕大小為何。
    • 水平並排:影像會以水平方向重複並排。
    • 垂直並排:影像會以垂直方向重複並排。

    在網頁設計中,經常會使用並排背景影像。當您發佈網站時,您設定為並排背景填色的原始小影像只會在瀏覽器中載入一次。並排顯示的背景影像可覆蓋頁面的大型區域,而不會影響網站的下載速度或效能。

  5. 如果要設定背景影像的位置,請從 9 格點位置中選取所需的位置。例如,如果您按一下中心的正方形,影像會顯示在瀏覽器視窗的中心。

    註解:

    如果要移除背景填色,請按一下資料夾圖示旁的垃圾桶圖示。

  6. 按一下「瀏覽器填色」面板外部的任何位置,將其關閉。

  7. 如果要檢視背景影像,請在 Adobe Muse 或瀏覽器中預視網站。

針對頁面元素,套用 100% 的寬度

設定為 100% 寬度的項目將會為瀏覽器水平填色,無論訪客的瀏覽器視窗調整為多寬。如果您將頁面元素設定為與瀏覽器視窗的頂部和底部邊緣對齊,填入實色的物件或並排顯示的資源也會展開,以符合可用空間。

  1. 開啟頁面元素要設定 100% 寬度的頁面。選取必要的頁面元素。例如,在頁面底部附近選取一個寬度與頁面寬度相同,高度約為 250 像素的矩形。

  2. 選取此矩形,將「線條寬度」設定為 0。若已選取矩形,右上角的「選取指示器」會顯示「矩形」一詞。

    使用「線條」欄位來將所選矩形的線條設定為 0。
    使用「線條」欄位來將所選矩形的線條設定為 0。
  3. 在「控制」面板中,按一下「填色」。確定「填色」選單設定為「無」。您會看到包含紅色對角線的白色色票。

    使用「填色」選單選取矩形填色
    使用「填色」選單選取矩形填色
  4. 按一下「填色」面板中的「新增影像」連結。瀏覽至所需的影像,選取影像,然後按一下「開啟」。

  5. 從「符合」下拉式清單中,選取「水平並排」。此選項會使影像跨 X 軸從左到右並排顯示。

    設定影像是 100% 寬度的矩形
    設定影像是 100% 寬度的矩形
  6. 拖移矩形的轉換控制點,將其置於可見區域的最下方。調整寬度以與頁面的左右兩側以及下方對齊。

    畫面會暫時顯示紅色邊框,指出矩形已設定為 100% 寬度模式。

修改背景填色的不透明度和透明度

除了新增影像作為網站背景,Adobe Muse 還可讓您修改填色的不透明度。您可以調整頁面的填色顏色,使其部分透明。依照預設,Adobe Muse 會針對主版頁面使用白色填色。您可以控制頁面的顏色與透明度。

  1. 在「控制」面板中,按一下「瀏覽器填色」以展開選單。如果要選取您想新增為背景填色的影像,請按一下「新增影像」連結。

  2. 在「控制」面板中,按一下「填色」以展開「填色」選單。

  3. 將「不透明度」設定為 80%。此設定表示它大部分仍然是不透明的,只有 20% 的透明度。您可以繼續編輯頁面以新增邊框或套用其他圖形效果。

    設定背景填色的「不透明度」
    設定背景填色的「不透明度」

背景填色與捲動效果

Adobe Muse 可讓您為套用為背景填色的影像新增捲動動作。如果要瞭解如何為背景影像設定捲動屬性,請參閱套用捲動動作至背景影像

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

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