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

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

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

在 Adobe Muse 專案中置入影像框

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

將單一影像置入頁面上

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

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

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

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

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

當您發佈或轉存網站時，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 檔案可能會逾時。可能會發生逾時錯誤。

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

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

繪製預留位置形狀

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

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

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

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

將物件固定至瀏覽器視窗

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

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

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

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

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

1. 在「A-主版」頁面於「設計」視圖中開啟的情況下，使用「選取工具」選取 Facebook 圖示。
2. 在「控制」面板內的「固定」介面中，按一下右上角的固定位置。此設定會將元素「釘」在其目前位置的右上角。

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

請繼續閱讀在 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 檔案已設為較低不透明度，因此半透明的花朵設計可讓並排的背景影像穿透顯示出來。

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

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

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

6. 在「文字」面板中，套用下列設定以格式化文字：
   • 字體：Droid Serif (或任何 serif 字體)
   • 字體大小：14
   • 字體顏色：#222222 (您在第 5 部分已將此顏色重新命名為「凱蒂黑」)
   • 字體對齊方式：置中
   • 行距：120%

7. 接下來，選取最後兩行 (起頭為英文的星期)，再將字體顏色設為紅色 (#A6342A)。
8. 使用「選取工具」選取文字框。按住 Option (Mac) 或 Alt (Windows) 複製文字框，再立即將其拖移至右側花瓣的湯匙影像上方。再次重複此動作，複製中央的文字框，並將複製的複本拖移至左側的花瓣。使用「選取工具」放置 3 個文字框，讓它們在 3 個湯匙的上方對齊，如下圖所示。

9. 切換至「文字」工具。選取左方地址，將其變更為：

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

10. 使用「文字」工具選取右方的地址，將其變更為：

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

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

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

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

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

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

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

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

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

使用間距面板

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

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

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

2. 指定上、下、左和右間隔屬性的值。如果您要輸入不同的值，請取消選取  按鈕。

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

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

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

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

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

1. 在 Adobe Muse 中，選取「視窗 > 變形」。

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