在 Adobe Muse 中使用並排顯示文件視窗、固定及解除固定面板、建立面板群組來自訂工作區。

註解:

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

工作區域概觀

Adobe Muse 內的工作區包含各種元素,例如面板、工具列及視窗。這些元素的排列稱為工作區。Adobe Muse 可讓您自訂工作區以符合自己的設計需求。 您可以解除固定和重新組織面板,還能開啟多個「設計」視圖視窗來進行並排設計。您也可以在視窗或版面之間拖放設計元素。這在同時處理桌上型電腦和行動裝置版面時非常實用,可以在版面之間重複利用通用的內容。

Adobe Muse UI 已針對高解析度顯示器進行最佳化處理,能在支援高 DPI 的裝置上正常顯示。Adobe Muse 的高 DPI 外觀讓面板、工具及其他 UI 元素看起來更銳利和清晰。

雖然不同 Creative Cloud 產品的預設工作區版面各異其趣,但是您可以用幾乎相同的方式來操控所有這些產品中的元素。

Adobe Muse 工作區內的工具及其他元素會視目前選取的視圖而啟用。使用 Adobe Muse 時,必須切換不同的視圖。Adobe Muse 具有「規劃」、「設計」、「預視」、「發佈」及「管理」視圖,可促進不同階段的網站設計。

規劃視圖

Adobe Muse 會在建立網站或開啟現有網站時顯示「規劃」視圖。「規劃」視圖可讓您設定頁面的階層結構,以建置網站的「網站地圖」。您也可以使用「規劃」視圖將網站的個別頁面與「主版頁面」建立關聯。

Adobe Muse 的規劃視圖
Adobe Muse 的規劃視圖

A. 標籤文件視窗 B. 水平網站地圖顯示 C. 垂直網站地圖顯示 D. 工作區版面 E. 網站地圖 F. 主版頁面 G. 工具面板 
  • (A) 標籤文件視窗:「文件」視窗會顯示您正在處理的檔案。「文件」視窗可以索引標籤方式顯示,多個視窗可並排顯示,便於輕鬆使用並排設計。
  • (B) 水平網站地圖顯示:水平顯示網站地圖。這是 Adobe Muse 中的預設行為。
  • (C) 垂直網站地圖:垂直顯示網站地圖。特別適合用於頁面與子頁面繁多的複雜網站。
  • (D) 工作區版面:使用 Adobe Muse 時,在不同的工作區版面 (模式) 之間切換。
  • (E) 網站地圖:此區域可為網站建立網站地圖。新增或移除頁面,然後設定網站的階層。
  • (F) 主版頁面:使用此區域可建立網站的其他主版頁面,或更新現有主版頁面。
  • (G) 工具面板:「工具」面板可讓您選取並使用不同的工具。 「控制」面板會顯示目前所選工具的選項。

設計視圖

「設計」視圖是最重要的視圖,也是運用 Adobe Muse 作業時最核心的部分。「設計」視圖提供工具、Widget 和各種功能,讓您設計豐富而複雜的網站而不需要撰寫任何程式碼。

「設計」視圖包含網頁畫布,您可以在上面使用各種工具、Widget 及其他 Adobe Muse 提供的設計功能來設計頁面。網頁畫布包含「參考線」和「尺標」,可協助您發揮網頁可用空間的最大效用。

根據預設,面板排列在「設計」視圖的最右邊。Adobe Muse 可讓您鎖定和解除鎖定面板,並視便利性加以重新排列。

工具列可讓您選取許多設計頁面樣式的工具,例如「背景」、「瀏覽器填色」、「線條」及「效果」。視目前選取的面板而定,工具列也會載入其他工具。

應用程式列也包含許多可在 Adobe Muse 內控制視圖的選項。

Adobe Muse 的設計視圖
Adobe Muse 的設計視圖

A. 選取指示器 B. 下拉式選單 C. 控制面板 D. 工作區版面 E. 面板 F. 尺標 G. 參考線 H. 工具面板 
  • (A) 選取指示器:顯示網頁畫布上目前的選取項目。
  • (B) 下拉式選單:頂端的應用程式列包含模式切換器、選單及視圖控制項。
  • (C) 控制面板:包含許多可讓您設計網站樣式和修改網站外觀的工具,例如「線條」、「填色」及「效果」。
  • (D) 工作區版面:使用 Adobe Muse 時,在不同的工作區版面之間切換。
  • (E) 面板:讓您存取並使用 Adobe Muse 內的主要功能。
  • (F) 尺標:讓您將參考線設定到適當的位置。
  • (G) 參考線:指出網頁和瀏覽器的頂端和底部。您可以有效率地使用參考線來定義網站的頁首和頁尾區域。
  • (H) 工具面板:可讓您存取並使用不同工具,例如「選取」、「矩形」、「手形」工具等等。

預視模式

您可以使用「預視」模式來測試網站。「預視」模式中的網站外觀與任何最新瀏覽器上的外觀極為相似。「預視」模式會以文件視窗顯示,可以在 Adobe Muse 工作區中浮動或並排顯示。您可以重新整理預視以檢視對網站所做的修改。

Adobe Muse 的預視模式
Adobe Muse 的預視模式

A. 重新整理 B. 工作區版面 C. 網頁預視 
  • (A) 工作區版面:使用 Adobe Muse 時,在不同的工作區版面 (模式) 之間切換。
  • (B) 重新整理:按一下「重新整理」按鈕以重新載入網站的預視。
  • (C) 預視:預視區域會顯示網站的上次更新版本。

發佈視圖

「發佈」模式可讓您將網站發佈至 Business Catalyst。選取「發佈」模式會顯示「發佈」對話框。在「發佈設定」對話框上,指定下列項目:

  • 網站名稱:為網站提供有意義的名稱。Adobe Muse 會根據「網站名稱」為您的網站建議網域名稱。不過,您可以選擇覆寫這項建議。
  • 發佈至:您可以從「發佈至」下拉式清單中選取現有網站。這會讓您發佈至 Business Catalyst 上的現有網站。
  • URL:指定網站的唯一 URL。
  • 資料中心:Adobe Muse 會偵測您電腦的目前位置,並自動選取最近的「資料中心」代管網站檔案。 但是,如果您的客戶位於其他國家/地區,您可以選擇離客戶所在位置最近的「資料中心」。
發佈您的 Adobe Muse 網站
在「發佈視圖」發佈您的 Adobe Muse 網站

共用選單

Adobe Muse 中的「共用」選單可讓您輕鬆分享新近發佈網站的 URL。您可以使用「共用」選單,分享即時網站或 In-Browser Editing 的 URL。

在發佈網站後,按一下「共用」。隨後便會出現一個對話框,內含即時網站與 In-Browser Editing 的連結。

共用您發佈網站的 URL
共用您發佈網站的 URL

每個網站都會產生兩個不同的 URL,一個用於即時網站,另一個用於 In-Browser Editing。

請根據您要分享的 URL,按一下適當的「複製連結」選項。URL 隨即會複製到您的剪貼簿。然後,您可以透過電子郵件或其他管道傳送這些 URL,與相關人員分享。

管理視圖

「管理」模式可讓您將管理並更新 Business Catalyst 上的網站。如果您使用 Adobe Business Catalyst 作為主機服務供應商,則可以使用「管理」模式。選取「管理」模式後,Adobe Muse 會將您重新導向至 http://businesscatalyst.com/。使用您的 Creative Cloud 認證登入以開始編輯網站。如需詳細資訊,請參閱 Business Catalyst 說明

管理標籤文件視窗

當您處理多個網頁和網站時,Adobe Muse 會為所有開啟的視窗建立索引標籤。只要選取視窗即可存取任何一個頁面。

  • 若要重新排列標籤「文件」視窗的順序,請將視窗的索引標籤拖移至群組中的新位置。
  • 若要將「文件」視窗從視窗群組中解除鎖定 (浮動或取消以索引標籤顯示),請將該視窗的索引標籤拖移出群組之外,或以滑鼠右鍵按一下該索引標籤,然後選取「在視窗中浮動」。
  • 若要並排顯示文件視窗以進行並排設計,請選取「視窗 > 排列 > 並排」。
  • 若要將某個「文件」視窗鎖定至個別的「文件」視窗群組,請將該視窗拖移至該群組中。
  • 若要建立堆疊或並排顯示文件的群組,請將視窗拖移至另一個視窗頂端、底部或兩側的其中一個放置區。
  • 若要在拖移選取項目時切換至標籤群組中的其他文件,請將選取項目拖移至該文件索引標籤的上方並停留一段時間。

並排顯示文件視窗

Adobe Muse 可讓您在工作區內並排顯示文件視窗,以便加以重新排列。並排顯示文件視窗可以輕鬆處理多個版面,以便進行比較和並排設計。您也可以在並排顯示的文件視窗之間拷貝頁面內容。在處理多個版面時,並排顯示文件視窗會特別實用。您只要設計一次,就能直接將內容拷貝到各個版面。

若要並排顯示文件視窗,請選取「視窗 > 排列 > 並排顯示」。

使用「並排顯示」選項來重新排列文件視窗。
在 Adobe Muse 中並排顯示文件視窗

若要將文件視窗重設為預設檢視,請選取「視窗 > 排列 > 依網站全部合併」。

在標籤視窗之間拖放通用的內容

Adobe Muse 能讓您輕鬆在多個頁面和版面之間重複利用通用的內容。使用 Adobe Muse 時,設計師經常會「並排」或「浮動」顯示標籤文件視窗。在網站設計實務上,設計師也經常在網頁和版面之間重複利用設計元素,保持網站外觀的一致性。Adobe Muse 能讓您在頁面和版面之間拖移通用的設計元素,例如標誌、文字、頁首、背景影像等等。

  1. 在 Adobe Muse 中,您可以採用對您最便利的方式重新排列標籤文件視窗,在頁面和版面之間移動內容。如需詳細資訊,請參閱管理標籤文件視窗

    在標籤視窗之間拖放內容
    在標籤視窗之間拖放內容

  2. 拖放您的選取項目至其他版面或頁面。

    拖移您的選取項目至其他頁面或版面。
    拖移您的選取項目至其他頁面或版面。

  3. 將選取項目放到其他頁面之後,請選取「視窗 > 排列 > 依網站全部合併」。

    選取「依網站全部合併」,以選取和放置頁面之間的通用內容。
    選取「依網站全部合併」,以選取和放置頁面之間的通用內容。

鎖定及解除鎖定面板

停駐面板區是一組面板或面板群組的集合,以垂直方向顯示所有面板。您可以將面板移入和移出停駐面板區,以鎖定和解除鎖定面板。

  • 若要鎖定面板,請將面板的索引標籤拖移至停駐面板區的頂端、底部或其他面板之間。

  • 若要鎖定面板群組,請將面板群組的標題列 (索引標籤上方的實色空白列) 拖移至停駐面板區。

  • 若要移除面板或面板群組,請將面板或面板群組的索引標籤或標題列拖移出停駐面板區。您可以將面板拖移至其他停駐面板區或使其自由浮動。

註解:

您可以防止面板填滿停駐面板區中的所有空間。請將停駐面板區的底部邊緣往上拖移,使其不再與工作區的邊緣接合。

移動面板

移動面板時,會看到以藍色醒目顯示的放置區,指出可以移動面板的區域。例如,您可以在停駐面板區中將面板拖移至其他面板上方或下方的狹長藍色放置區中,以上下移動面板。如果您將面板拖移至非放置區的區域,則面板會在工作區中自由浮動。

註解:

滑鼠的位置 (而非面板的位置) 會啟動放置區,因此如果您看不到放置區,請嘗試將滑鼠拖移至應該出現放置區的地方。

  • 若要移動面板,請拖移面板的索引標籤。

  • 若要移動面板群組,請拖移標題列。

註解:

移動面板時按下 Ctrl (Windows) 或 Command (Mac OS),可防止面板鎖定。移動面板時按下 Esc,可取消操作。

新增和移除面板

如果您移除停駐面板區中的所有面板,停駐面板區便會消失。若要建立停駐面板,請將面板移至工作區的右側邊緣直到放置區出現為止。

  • 若要移除面板,請以滑鼠右鍵按一下 (Windows) 或按住 Control 的同時按一下 (Mac) 其索引標籤,然後選取「關閉」,或從「視窗」選單中取消選取面板。

  • 若要新增面板,請從「視窗」選單中選取面板,然後將其鎖定在所要的位置上。

操控面板群組

  • 若要將面板移入群組,請將面板的索引標籤拖移至群組中醒目顯示的放置區。

  • 若要重新排列群組中的面板,請將面板的索引標籤拖移至群組中的新位置。
  • 若要從群組中移除面板以使其自由浮動,請將面板的索引標籤拖移至群組外面。
  • 若要移動群組,請拖移標題列 (索引標籤上方的區域)。
  • 若要關閉面板群組,請以滑鼠右鍵按一下面板群組的標題列,然後選取「關閉標籤群組」。

堆疊浮動面板

將面板拖移出其停駐面板區,且不拖移至放置區時,面板就會自由浮動。浮動的面板可放置在工作區的任一處。您可以堆疊浮動面板或面板群組,如此一來,拖移最上方的標題列時,其就能以一個單位的形式移動。

  • 若要堆疊浮動面板,請將面板的索引標籤拖移至其他面板底部的放置區。

  • 若要變更堆疊順序,請將面板的索引標籤往上或往下拖移。

註解:

請務必將索引標籤置於面板之間的狹長放置區,而非置於標題列的寬廣放置區中。

  • 若要將面板或面板群組從堆疊中移除,使其可以自行浮動,請將其索引標籤或標題列拖移出去。

調整面板大小

  • 若要將面板、面板群組或面板堆疊最小化或最大化,請按兩下其索引標籤。您也可以按兩下其索引標籤區域 (索引標籤旁邊的空白空間)。

  • 若要調整面板大小,請拖移面板的任一側。部分面板 (例如 Photoshop 中的「顏色」面板) 無法透過拖移來調整大小。

收合和展開面板圖示

您可以將面板收合成圖示,使工作區不會太雜亂。在某些情況下,預設工作區中的面板會收合成圖示。

  • 若要收合或展開某欄中的所有面板圖示,請按一下停駐面板區頂端的雙箭頭。
  • 若要展開單一面板圖示,請按一下該圖示。
  • 若要調整面板圖示的大小,以便只看到圖示 (而非標籤),請調整停駐面板區的寬度,直到文字消失為止。若要再次顯示圖示文字,請增加停駐面板區的寬度。
  • 若要將展開的面板收合回圖示,請按一下其索引標籤、圖示或面板標題列中的雙箭頭。
  • 若要將浮動的面板或面板群組新增至圖示停駐面板區,請拖移面板的索引標籤或標題列。(將面板新增至圖示停駐面板區時,面板會自動收合為圖示)。

  • 若要移動面板圖示 (或面板圖示群組),請拖移圖示。您可以在停駐面板區中上下拖移面板圖示、將面板圖示拖移至其他停駐面板區 (面板圖示會以該停駐面板區的面板樣式顯示),或將面板圖示拖移至停駐面板區外 (面板圖示會以浮動圖示顯示)

深色使用者介面

Adobe Muse 能讓您設定工作區的顏色主題。您也可以在 Adobe Muse 提供的 4 種顏色主題當中選擇一種來使用。

由於深色使用者介面主題可在 UI 和網頁畫布之間產生對比,因此可讓您完全專注在設計上。

若要選擇顏色主題,請執行下列操作:

  1. 在 Adobe Muse 中,選取「編輯 > 偏好設定」。
  2. 在「偏好設定」對話框中,選取「顏色主題」。
選取 Adobe Muse 工作區的顏色主題。
選取 Adobe Muse 工作區的顏色主題。

  1. 按一下「確定」。

尋找和取代

Adobe Muse 讓您能在頁面或整個網站內尋找並取代文字。

在 Adobe Muse 中尋找與取代文字
在 Adobe Muse 中尋找與取代文字

A. 尋找 B. 取代 C. 取代/尋找 D. 全部取代 E. 全字 F. 向後 G. 大小寫相符 H. 搜尋 I. 取代文字 J. 尋找文字 

尋找文字

  1. 在 Adobe Muse 中,選取「編輯 > 尋找與取代」。
  2. 在「尋找與取代」對話框中,指定:
    • 尋找:輸入您要在頁面或網站內尋找的文字。
    • 取代:輸入您要用來替換的文字,取代「尋找」對話框中所輸入的文字。
    • 搜尋:選擇要在網頁或整個網站內搜尋。
    • 大小寫相符:若選取「大小寫相符」選項,Adobe Muse 會就「尋找」文字方塊中輸入的字詞或語句,僅搜尋符合大小寫的字詞。
    • 全字:若選取「全字」選項,Adobe Muse 會搜尋「尋找」文字方塊中輸入的完整字詞或語句。
    • 向後:若選取「向後」選項,Adobe Muse 會反轉搜尋的方向。
  3. 按一下「尋找」。

尋找並取代文字

  1. 在 Adobe Muse 中,選取「編輯 > 尋找與取代」。
  2. 在「尋找與取代」對話框中,指定:
    • 尋找:輸入您要在頁面或網站內尋找的文字。
    • 取代:輸入您要用來替換的文字,取代「尋找」對話框中所輸入的文字。
    • 搜尋:選擇要在網頁或整個網站內搜尋。
    • 大小寫相符:若選取「大小寫相符」選項,Adobe Muse 會就「尋找」文字方塊中輸入的字詞或語句,僅搜尋符合大小寫的字詞。
    • 全字:若選取「全字」選項,Adobe Muse 會搜尋「尋找」文字方塊中輸入的完整字詞或語句。
    • 向後:若選取「向後」選項,Adobe Muse 會反轉搜尋的方向。
  3. 按一下「取代」。按一下「取代/尋找」以取代找到的搜尋文字,並繼續搜尋。按一下「全部取代」以取代在頁面或整個網站中找到的所有搜尋文字。

警告面板

使用 Adobe Muse 時,若工作可能有錯誤或無法呈現預期的結果,就會產生警告。這些警告會列在「警告」面板中。設計網站時,最好開啟「警告」面板。

若要喚出「警告」面板,請選取「視窗 > 警告」。

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

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