瞭解如何在 Adobe Muse 中組織、管理與變形各種物件。請閱讀如何針對 Adobe Muse 最佳化影像。

註解:

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

Adobe Muse 內的物件包含在內部建立或從外部來源讀入的設計元素。影像、文字、影像框等皆可新增至網頁,然後在 Adobe Muse 內使用各種工具操控。

從 Adobe PhotoShop 建立及讀入按鈕,是最常見的工作流程之一。Adobe Muse 本身可識別 Photoshop 內建立的圖層及圖層構圖。Adobe Muse 能讓您將這些圖層設定為網站內按鈕的「狀態」。

若為放在網頁畫布上的物件,您可以依照網站設計需求,新增變形。您還可以隔離物件,新增合適的間隔和間距屬性,以處理間距巢狀元素。

在 Adobe Muse 專案中使用影像

在 Adobe Muse 專案中置入影像框

只要按一下「影像框」工具,就可直接將影像框置入 Adobe Muse 專案。從「工具」面板,按一下「影像框」工具,然後前往專案中的所需位置。

  1. 從「工具」面板,按一下「矩形框工具」或「橢圓框工具」。

    Adobe Muse 中的影像框工具
    在Adobe Muse 中,拖放矩形影像框與橢圓影像框。

  2. 按一下影像框工具,加以拖移,將影像框置入專案。

    您可繼續用這種按一下並置入的方式,將數個影像框置入專案中。亦可視設計需求,對影像框調整大小及移動。

    您可以對影像框填色,或在框內置入影像。若要置入影像,請將影像拖放至框內。影像會調整大小,以符合影像框大小。

    矩形影像框與橢圓影像框
    矩形影像框與橢圓影像框

將單一影像置入頁面上

Muse 工作區的工作方式與 Illustrator 及 InDesign 類似,您都需要先載入置入的影像,然後再按一下您想要該影像顯示的頁面。若要直接將影像檔案置入頁面上來新增影像檔案,請執行下列操作:

  1. 選擇「檔案 > 置入」,或使用鍵盤捷徑 Command-D (Mac) 或 Ctrl-D (Windows) 來開啟「讀入」對話方塊。
  2. 瀏覽以選取樣本檔案檔案夾內名為 made-with-muse.png 的檔案。按一下「開啟」選擇該檔案,然後關閉「讀入」對話方塊。

按一下頁面底部附近的位置,來置入影像。在本例中,您是想要以完整大小置入影像,因此只需按一下即可。不過,如果您打算調整置入影像的大小,可以按一下並拖移來將影像縮放為特定大小。 

使用「選取工具」,將影像朝向並排顯示頁尾矩形的垂直中心拖移,並注意到紅色參考線及藍綠色測量方塊會短暫地顯示,以協助您將影像與中心對齊。

進行完這些變更之後,頁尾區段即接近完成。

在 Adobe Muse 中置入影像
頁尾是由包含並排之背景影像的單一矩形以及上方中心對齊的置入影像所組成。

當您發佈或轉存網站時,Muse 如何最佳化影像

您也可以將可供列印的影像置入 Adobe Muse,Adobe Muse 會將其轉換為適用於網頁的格式。但是,使影像適用於網頁通常意味著壓縮影像並犧牲一些影像品質。將不可供網頁使用的影像置入 Muse 會導致自動壓縮。如果您發佈或轉存網站,並對自動產生的結果不滿意,可以試著在 Photoshop 或 Adobe Fireworks® 軟體中手動建立及最佳化您自己適用於網頁的影像。刪除原始影像並將新的最佳化影像置入頁面中,然後再次發佈或轉存您的網站。

請注意,您在 Muse 中對影像進行的其他變更,例如裁切、調整大小,或新增斜角、陰影及光暈,會使 Muse 為您重新建立影像,並會自動進行壓縮。如果您想要更進一步地控制最佳化程序,可以使用 Photoshop 或 Fireworks 新增效果至影像、在影像編輯程式中最佳化檔案,然後將影像置入 Muse 來自行設定壓縮等級。您可以將 PSD 檔案從 Photoshop 直接置入 Muse,而非轉存 PNG、JPG 或 GIF 檔案,但是這樣也將導致 Muse 使用它自己的自動壓縮演算法,自動產生新影像檔案。

最佳化影像以在網頁上顯示

當連結檔案解析度非常高,且隨後又在頁面上縮至更小時,可能會發生轉存錯誤及較慢的轉存操作。這不是建議的工作流程。重複置入完整大小 (超過 2,000 像素) 影像,然後縮放影像以符合設計時,問題會變得更明顯。

如果您置入非常大的影像檔案,Muse 會自動限制大小並將影像寬度重新調整為 2048。如果您將滑鼠游標暫留在「資源」面板中的資源名稱上,工具提示便會顯示置入影像的原始大小與重新取樣後的影像大小 (縮放以符合最大大小限制) 的對比。

最佳作法是在將網頁圖形置入頁面之前,在影像編輯程式中針對網站調整網頁圖形大小並將其最佳化。以極大的尺寸置入影像可能導致 .muse 檔案的檔案大小變得比所需大小大很多。.muse 檔案必須處理與在網頁上顯示影像無關的額外像素資料。轉存與發佈網站時,這會導致產生較長的處理時間。在某些情況下,嘗試在轉存或發佈程序期間調整所有檔案大小並將其最佳化時,過大的 .muse 檔案可能會逾時。可能會發生逾時錯誤。

若要解決此問題,您可以在資源名稱上按一下滑鼠右鍵,並選擇「最佳化資源大小」來移除顯示縮放影像不需要的資料。

如果您縮放最佳化的影像以在設計中顯示得更大,您會看到「補強加強」資源錯誤。若要解決此問題,您可以選擇「讀入較大尺寸」來擷取合意地顯示縮放影像所需的額外影像資料。

繪製預留位置形狀

預留位置形狀可以是橢圓形、矩形、多角形,只要能填入影像、文字或色彩就行了。

  1. 從「工具」面板,選取「矩形工具」或「橢圓工具」。

    在 Adobe Muse 中繪製預留位置形狀
    從工具列選取「矩形工具」或「橢圓工具」

  2. 拖移矩形或橢圓形,置入 Adobe Muse 專案。

    • 若要建立方形,請按住 Shift 鍵,按一下「矩形工具」。
    • 若要建立圓形,請按住 Shift 鍵,按一下「橢圓工具」。

    您可以將圖形、文字或色彩填入形狀裡。

  3. 若要設定物件符合屬性,請選取矩形或橢圓形,按一下「物件 > 符合」。

    您可以選擇下列任一符合選項:

    • 等比例符合內容:調整內容大小,使其符合框架,同時保留其內容比例。框架的尺寸不會改變。如果內容與框架各有不同屬性,會造成一些空白空間。
    • 等比例符合框架:調整內容大小,使其符合整個框架,同時保留其內容比例。框架的尺寸不會改變。如果內容與框架的比例不同,可能會有部分內容被框架的邊界方框剪裁掉。
    針對 Adobe Muse 內的物件等比例符合內容
    在物件中等比例符合內容

    在物件中等比例符合框架 (Adobe Muse)
    在物件中等比例符合框架

將 Photoshop 檔案作為滑鼠指向效果按鈕置入

  1. 選擇「檔案 > 置入 Photoshop」按鈕。在顯示的「 Photoshop 讀入」對話方塊中,找到 PSD 檔案。按一下「選取」(Mac) 或「開啟」(Windows) 來選擇檔案。

  2. Photoshop 讀入選項」對話方塊即會出現。花一點時間來研究如何套用設定。您可以使用選單來指定 Photoshop 檔案中的哪個圖層將顯示為按鈕的「正常狀態」(頁面第一次載入時的按鈕顯示方式)、「滑鼠指向效果狀態」(訪客將游標暫留在按鈕上時的按鈕顯示方式) 與「滑鼠按下狀態」(訪客按一下按鈕時的按鈕顯示方式)。這三個狀態選單都會顯示 Photoshop 圖層的名稱,縮圖影像會顯示每個所選圖層的外觀。

  3. 針對此範例,已將 Photoshop 圖層正確排序來顯示按鈕狀態。無須變更選單設定。按一下「確定」來按預設排列的方式接受狀態。

    使用「Photoshop 讀入選項」對話方塊來將現有 Photoshop 圖層與所需按鈕狀態建立關聯。
    使用「Photoshop 讀入選項」對話方塊來將現有 Photoshop 圖層與所需按鈕狀態建立關聯。

  4. 在「A-主版」頁面頁首的右上方區域中按一下,將 Photoshop 檔案以原始大小置入。

  5. 按一下「預視」連結來使用以 WebKit 為基礎的呈現模擬器。檢閱「A-主版」頁面的顯示。第一次檢視頁面時,會顯示按鈕的「正常狀態」。如果您將游標暫留在按鈕上,按鈕外觀會稍有變更 (棕色水滴顏色會變淡),如果您按下按鈕,白色文字會在按住滑鼠按鈕期間變成淡棕色。

  6. 按一下「設計」,回到「設計」視圖中編輯「A-主版」頁面。

Share」(分享) 按鈕正以預期的狀態顯示。在下一節,您將學習如何將「Share」(分享) 按鈕與網站導覽右側的滴水影像對齊。

在下一部分中,您將學習如何定義主版頁面的頁首與頁尾區域。

將物件固定至瀏覽器視窗

當您放置影像或使用其他方法在網頁中新增圖稿時,您可使用「選取工具」和方向鍵來調整其位置。當您移動影像時,該影像會相對於頁面中現存的其他元素 (影像、文字及媒體) 移動。您也可以移動其他元素,但整個頁面的形式就像手冊或海報,頁面中的項目是在單一平面上。如果頁面很長 (包含很多直式內容),訪客往下捲動時將無法看到頁面頂端的影像。

您可能在檢視網站時看過固定的物件;它們是「永恆的」項目,永遠在同一個位置顯示。它們看起來就像浮在其餘頁面內容之上。

當您使用「固定」工具時,您實際上是從頁面串流中移除影像。您是將影像設定在相對於瀏覽器的特定位置,而不是將它與其他相對的頁面元素一起配置。固定的影像看起來有「黏性」,無論其他頁面元素如何捲動,它永遠停留在同一個位置 (像是右上角或靠近底部的地方)。如果訪客重新調整瀏覽器的大小,固定的影像還是會永遠停留在相對於瀏覽器視窗的固定位置。

您可將固定想成是從頁面設計中「剝離影像」,再將影像貼回瀏覽器,就像把便條紙釘在軟木板上。如果訪客重新調整瀏覽器的大小,固定的元素會移動,以維持其相對於瀏覽器的固定位置。如果訪客只是水平或垂直捲動頁面內容,固定的元素就不會移動。

請依照下列步驟使用「固定」工具:

  1. 在「A-主版」頁面於「設計」視圖中開啟的情況下,使用「選取工具」選取 Facebook 圖示。
  2. 在「控制」面板內的「固定」介面中,按一下右上角的固定位置。此設定會將元素「釘」在其目前位置的右上角。
  1. 重複步驟 1 和 2,將 Google+ 和 Twitter 圖示按鈕固定在它們的右上角位置,使它們不會隨著頁面其他元素的捲動而在瀏覽器視窗中移動。
  2. 按一下「規劃」檢視頁面縮圖。請注意,現在所有頁面都包含了 3 個社交媒體圖示,因為您已將它們加入主版頁面。
  3. 在「規劃」視圖中,按兩下「food」頁面,以在「設計」視圖將其開啟。如果頁面已經開啟,請按一下「food」頁面的索引標籤,使其成為作用中的頁面。選擇「檔案 > 在瀏覽器中預視網頁」,即可在瀏覽器中檢視頁面。
  4. 按一下「Dessert」(甜點) 菜單項目,跳至長頁面下方的「Dessert」(甜點) 菜單區段。請注意,當其餘的頁面元素捲動時,3 個社交媒體圖示仍會停留在網頁右側的原始位置,因為它們已經固定。
將物件固定至 Adobe Muse 網站的瀏覽器視窗
將物件固定至瀏覽器視窗

請繼續閱讀在 Muse 建置您的第一個網站的第 6 章,瞭解如何將多組物件組成群組,使它們如單一元素般運作。您將新增嵌入式 Google 地圖,讓訪客看到 Katie's Cafe 的位置,完成「visit」頁面。完成網站後,您會瞭解到將網站上傳至主控伺服器 (由 Business Catalyst 提供) 來線上發佈,是件多麼容易的事,接下來您就可以與客戶和同事一起分享進行中的工作。

用 Muse 建置您的第一個網站的第 4 章,您已學會如何新增錨點標籤,並將它們連結至手動「水平選單」Widget 中的選單項目。您也學會如何將元素固定在頁面中,防止它們捲動。此外,您也瞭解了如何新增檔案連結,讓訪客能下載檔案。

您也將學習如何把物件組成群組及使用群組,以在頁面貼上內容集。您也將使用更多的嵌入式 HTML。這次,您要在「Visit」頁面中新增互動式 Google 地圖。最後,您將瞭解如何新增「網址列圖示」,完成網站的最終編修,並將試用版網站發佈至內附的主控伺服器。

把物件組成群組並且如單一的單元般貼上群組

就像使用 InDesign 和其他設計程式,您可將數個物件組成一個群組,使它們如單一的單元般運作。在本節中,您將建立數個元素 (置入的影像和文字框) 組成的設計,並瞭解如何將它們組成群組,使其如單一項目般容易放置或拷貝。請依照下列步驟操作:

  1. 在「規劃」視圖中,按兩下「home」(首頁) 頁面縮圖以在「設計」視圖中將其開啟。
  2. 選擇「檔案 > 置入」。瀏覽以選取範例檔案檔案夾內名為 panel-open-bottom.png 的檔案。按一下「開啟」,關閉「讀入」對話方塊,然後在靠近「home」頁面底部 (「影像預視燈箱排版」Widget 下方及頁尾上方) 的地方按一下,以放置全尺寸的圖形。

PNG 檔案已設為較低不透明度,因此半透明的花朵設計可讓並排的背景影像穿透顯示出來。

  1. 再次選擇「檔案 > 置入」。這次,瀏覽以選取名為 spoon-map.png 的影像。按一下「開啟」,然後在正上方的花瓣按一下以放置影像。
  2. 在選取湯匙影像的情況下,按住 Option (Mac) 或 Alt (Windows) 複製湯匙影像,再立即將其拖移至中央右側的花瓣。再次重複此動作,複製中央的湯匙影像,並將複製的複本拖移至左側的花瓣。使用「選取工具」將 3 個湯匙放在適當位置,如以下圖所示。
將 3 個湯匙影像放在設計頁面的 3 朵花瓣上。
將 3 個湯匙影像放在設計頁面的 3 朵花瓣上。

  1. 使用「文字」工具,在中央花瓣上畫一個文字框,然後輸入下列文字:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

  1. 在「文字」面板中,套用下列設定以格式化文字:
    • 字體:Droid Serif (或任何 serif 字體)
    • 字體大小:14
    • 字體顏色:#222222 (您在第 5 部分已將此顏色重新命名為「凱蒂黑」)
    • 字體對齊方式:置中
    • 行距:120%
  1. 接下來,選取最後兩行 (起頭為英文的星期),再將字體顏色設為紅色 (#A6342A)。
  2. 使用「選取工具」選取文字框。按住 Option (Mac) 或 Alt (Windows) 複製文字框,再立即將其拖移至右側花瓣的湯匙影像上方。再次重複此動作,複製中央的文字框,並將複製的複本拖移至左側的花瓣。使用「選取工具」放置 3 個文字框,讓它們在 3 個湯匙的上方對齊,如下圖所示。
將 Adobe Muse 中的物件分組
重新放置 3 個地址,使其顯示在設計頁面最上面 3 朵花瓣中 3 個湯匙的上方。

  1. 切換至「文字」工具。選取左方地址,將其變更為:

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

  1. 使用「文字」工具選取右方的地址,將其變更為:

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

現在設計已完成,您將選取元素並將它們組成群組。

  1. 使用「選取工具」按一下並拖移整個花朵設計,請務必同時選取置入的花朵影像、3 個湯匙影像及 3 個文字框。按一下滑鼠右鍵,並從出現的選單中選擇「群組」。如果需要,您也可以選擇「物件 > 群組」。

請注意,將一組物件組成群組後,「控制面板」左上角的「選取指示器」會顯示「群組」。

  1. 拷貝選取的群組。按一下「規劃」返回「規劃」視圖,再按兩下「Visit」頁面的縮圖,在「設計」視圖中將其開啟。選擇「編輯 > 就地貼上」,將整個元素群組放在相同位置。

您可從此簡短範例中看出,當您完成一項設計並想將此設計當作單一元素使用時,群組非常有幫助,它可讓您將設計重新擺放在頁面上的其他位置,或將其拷貝並貼到不同的頁面。

除了群組,您可能也會發現當您將設計定稿後,「鎖定」功能也很有幫助。在群組或選取的一組元素上按一下滑鼠右鍵,從出現的環境選單中選擇「鎖定」來進行鎖定。(另一種方式是,選取「物件 > 鎖定」)。鎖定功能可確保您不會意外移動或刪除頁面中任何已定稿的元素,因為您無法選取它們。如果之後需要更新鎖定的元素,請選擇「物件 > 解除鎖定頁面全部內容」。

將花朵設計貼至「Visit」頁面底部後,就完成了部分網頁內容。下一節中,您將繼續編輯「Visit」頁面並新增互動式地圖介面,以協助客戶找出最近的咖啡館。

嵌入多媒體內容以新增動畫

  1. 在「規劃」視圖中,按兩下 MasterFlash 縮圖來將其開啟,以在「設計」檢視畫面中進行編輯。請注意,因為您之前已複製「A-主版」頁面,所以靜態標誌影像仍在原處。使用靜態影像來對應動畫矩形的位置很有幫助,但是在嵌入多媒體元素之後,請不要忘記刪除靜態置入標誌。

  2. 選擇「檔案 > 置入」。在「讀入」對話方塊中,在 Kevins_Koffee_Kart 檔案夾內瀏覽,並選取名為 logo.swf 的檔案。

  3. 將 SWF 檔案置入左上角,使其與現有標誌影像檔案的位置相符。

  4. 將您剛剛置入的新 SWF 視窗與舊靜態標誌對齊之後,請選取靜態標誌並按下 Delete 鍵將其刪除。

  5. 若要檢閱「首頁」套用全新變更之後整個網站所顯示的樣子,請選擇「檔案 > 在瀏覽器中預視網站」來測試標誌在各頁面上的顯示。在未發佈網站的情況下,您可以在電腦上本機工作,然後在瀏覽器中預視網站,並按一下網站導覽中的各個頁面進行瀏覽。請注意,動畫 (SWF 檔案) 在「首頁」上顯示一次後就會停止。如果您按一下其他頁面,只會顯示靜態標誌。

    註解:

    如果您選擇「檔案 > 在瀏覽器中預視網頁」,新的瀏覽器視窗將更快速地載入顯示「首頁」,但此功能只可預視作用中 (首頁) 的頁面。如果您要檢查網站的一個頁面而不是整個網站,請選擇此選項。

使用間距面板

「間距」面板能讓您善用 CSS 間隔和間距屬性。間隔會清除元素內容 (邊框內) 周圍的區域。間隔會受元素的背景顏色影響。

上、下、左和右間隔均可使用個別屬性加以變更。您也可以選擇以一致的方式編輯,讓所有間隔屬性相等

  1. 在 Adobe Muse 中,選取「視窗 > 間距」即可顯示「間距」面板。
在 Adobe Muse 中開啟「間距」面板
在 Adobe Muse 中開啟「間距」面板

  1. 指定上、下、左和右間隔屬性的值。如果您要輸入不同的值,請取消選取  按鈕。
在「間距」面板中設定間隔和間距設定。
在「間距」面板中設定間隔和間距設定。

  1. 您也可以選擇指定「水平間距」與「垂直間距」屬性。

使用「變形」面板縮放及旋轉物件

Adobe Muse 可讓您在物件上套用 2D 變形。您可以在 X 軸和 Y 軸上放置、縮放及旋轉物件。

「變形」面板的 100% 寬度切換開關可讓您將物件設為 100% 寬度。您也可以將可縮放物件設為橫跨瀏覽器寬度,而且符合電腦螢幕大小。

若要在所選物件上套用變形,請執行下列操作:

  1. 在 Adobe Muse 中,選取「視窗 > 變形」。
在 Adobe Muse 中開啟「變形」面板。
在 Adobe Muse 中開啟「變形」面板。

  1. 選取物件後,套用下列任何變形:
    • 位置:輸入 X 和 Y 值,以將物件置於網頁上所需的位置。
    • 縮放:輸入物件的寬度和高度值。您也可以按一下  按鈕,選擇使用一致的寬度和高度縮放物件。
    • 旋轉 ():輸入要旋轉物件的角度。
    • 100% 寬度 ():您可以將物件設為 100% 寬度,使其縮放為符合瀏覽器的寬度。

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

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