從「工具」面板,按一下「矩形框工具」或「橢圓框工具」。
瞭解如何在 Adobe Muse 中組織、管理與變形各種物件。請閱讀如何針對 Adobe Muse 最佳化影像。
Adobe Muse 內的物件包含在內部建立或從外部來源讀入的設計元素。影像、文字、影像框等皆可新增至網頁,然後在 Adobe Muse 內使用各種工具操控。
從 Adobe PhotoShop 建立及讀入按鈕,是最常見的工作流程之一。Adobe Muse 本身可識別 Photoshop 內建立的圖層及圖層構圖。Adobe Muse 能讓您將這些圖層設定為網站內按鈕的「狀態」。
若為放在網頁畫布上的物件,您可以依照網站設計需求,新增變形。您還可以隔離物件,新增合適的間隔和間距屬性,以處理間距巢狀元素。
只要按一下「影像框」工具,就可直接將影像框置入 Adobe Muse 專案。從「工具」面板,按一下「影像框」工具,然後前往專案中的所需位置。
從「工具」面板,按一下「矩形框工具」或「橢圓框工具」。
按一下影像框工具,加以拖移,將影像框置入專案。
您可繼續用這種按一下並置入的方式,將數個影像框置入專案中。亦可視設計需求,對影像框調整大小及移動。
您可以對影像框填色,或在框內置入影像。若要置入影像,請將影像拖放至框內。影像會調整大小,以符合影像框大小。
Muse 工作區的工作方式與 Illustrator 及 InDesign 類似,您都需要先載入置入的影像,然後再按一下您想要該影像顯示的頁面。若要直接將影像檔案置入頁面上來新增影像檔案,請執行下列操作:
按一下頁面底部附近的位置,來置入影像。在本例中,您是想要以完整大小置入影像,因此只需按一下即可。不過,如果您打算調整置入影像的大小,可以按一下並拖移來將影像縮放為特定大小。
使用「選取工具」,將影像朝向並排顯示頁尾矩形的垂直中心拖移,並注意到紅色參考線及藍綠色測量方塊會短暫地顯示,以協助您將影像與中心對齊。
進行完這些變更之後,頁尾區段即接近完成。
您也可以將可供列印的影像置入 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 檔案可能會逾時。可能會發生逾時錯誤。
若要解決此問題,您可以在資源名稱上按一下滑鼠右鍵,並選擇「最佳化資源大小」來移除顯示縮放影像不需要的資料。
如果您縮放最佳化的影像以在設計中顯示得更大,您會看到「補強加強」資源錯誤。若要解決此問題,您可以選擇「讀入較大尺寸」來擷取合意地顯示縮放影像所需的額外影像資料。
預留位置形狀可以是橢圓形、矩形、多角形,只要能填入影像、文字或色彩就行了。
從「工具」面板,選取「矩形工具」或「橢圓工具」。
拖移矩形或橢圓形,置入 Adobe Muse 專案。
您可以將圖形、文字或色彩填入形狀裡。
若要設定物件符合屬性,請選取矩形或橢圓形,按一下「物件 > 符合」。
您可以選擇下列任一符合選項:
選擇「檔案 > 置入 Photoshop」按鈕。在顯示的「 Photoshop 讀入」對話方塊中,找到 PSD 檔案。按一下「選取」(Mac) 或「開啟」(Windows) 來選擇檔案。
「Photoshop 讀入選項」對話方塊即會出現。花一點時間來研究如何套用設定。您可以使用選單來指定 Photoshop 檔案中的哪個圖層將顯示為按鈕的「正常狀態」(頁面第一次載入時的按鈕顯示方式)、「滑鼠指向效果狀態」(訪客將游標暫留在按鈕上時的按鈕顯示方式) 與「滑鼠按下狀態」(訪客按一下按鈕時的按鈕顯示方式)。這三個狀態選單都會顯示 Photoshop 圖層的名稱,縮圖影像會顯示每個所選圖層的外觀。
針對此範例,已將 Photoshop 圖層正確排序來顯示按鈕狀態。無須變更選單設定。按一下「確定」來按預設排列的方式接受狀態。
在「A-主版」頁面頁首的右上方區域中按一下,將 Photoshop 檔案以原始大小置入。
按一下「預視」連結來使用以 WebKit 為基礎的呈現模擬器。檢閱「A-主版」頁面的顯示。第一次檢視頁面時,會顯示按鈕的「正常狀態」。如果您將游標暫留在按鈕上,按鈕外觀會稍有變更 (棕色水滴顏色會變淡),如果您按下按鈕,白色文字會在按住滑鼠按鈕期間變成淡棕色。
按一下「設計」,回到「設計」視圖中編輯「A-主版」頁面。
「Share」(分享) 按鈕正以預期的狀態顯示。在下一節,您將學習如何將「Share」(分享) 按鈕與網站導覽右側的滴水影像對齊。
在下一部分中,您將學習如何定義主版頁面的頁首與頁尾區域。
當您放置影像或使用其他方法在網頁中新增圖稿時,您可使用「選取工具」和方向鍵來調整其位置。當您移動影像時,該影像會相對於頁面中現存的其他元素 (影像、文字及媒體) 移動。您也可以移動其他元素,但整個頁面的形式就像手冊或海報,頁面中的項目是在單一平面上。如果頁面很長 (包含很多直式內容),訪客往下捲動時將無法看到頁面頂端的影像。
您可能在檢視網站時看過固定的物件;它們是「永恆的」項目,永遠在同一個位置顯示。它們看起來就像浮在其餘頁面內容之上。
當您使用「固定」工具時,您實際上是從頁面串流中移除影像。您是將影像設定在相對於瀏覽器的特定位置,而不是將它與其他相對的頁面元素一起配置。固定的影像看起來有「黏性」,無論其他頁面元素如何捲動,它永遠停留在同一個位置 (像是右上角或靠近底部的地方)。如果訪客重新調整瀏覽器的大小,固定的影像還是會永遠停留在相對於瀏覽器視窗的固定位置。
您可將固定想成是從頁面設計中「剝離影像」,再將影像貼回瀏覽器,就像把便條紙釘在軟木板上。如果訪客重新調整瀏覽器的大小,固定的元素會移動,以維持其相對於瀏覽器的固定位置。如果訪客只是水平或垂直捲動頁面內容,固定的元素就不會移動。
請依照下列步驟使用「固定」工具:
請繼續閱讀在 Muse 建置您的第一個網站的第 6 章,瞭解如何將多組物件組成群組,使它們如單一元素般運作。您將新增嵌入式 Google 地圖,讓訪客看到 Katie's Cafe 的位置,完成「visit」頁面。完成網站後,您會瞭解到將網站上傳至主控伺服器 (由 Business Catalyst 提供) 來線上發佈,是件多麼容易的事,接下來您就可以與客戶和同事一起分享進行中的工作。
在用 Muse 建置您的第一個網站的第 4 章,您已學會如何新增錨點標籤,並將它們連結至手動「水平選單」Widget 中的選單項目。您也學會如何將元素固定在頁面中,防止它們捲動。此外,您也瞭解了如何新增檔案連結,讓訪客能下載檔案。
您也將學習如何把物件組成群組及使用群組,以在頁面貼上內容集。您也將使用更多的嵌入式 HTML。這次,您要在「Visit」頁面中新增互動式 Google 地圖。最後,您將瞭解如何新增「網址列圖示」,完成網站的最終編修,並將試用版網站發佈至內附的主控伺服器。
就像使用 InDesign 和其他設計程式,您可將數個物件組成一個群組,使它們如單一的單元般運作。在本節中,您將建立數個元素 (置入的影像和文字框) 組成的設計,並瞭解如何將它們組成群組,使其如單一項目般容易放置或拷貝。請依照下列步驟操作:
PNG 檔案已設為較低不透明度,因此半透明的花朵設計可讓並排的背景影像穿透顯示出來。
Katie's Cafe
Noe Valley
123 Elizabeth Street
MON–FRI 6AM–10PM
SAT–SUN 7AM–10PM
Katie's Cafe
Laurel Heights
800 Spruce Street
MON–FRI 5AM–12AM
SAT–SUN 9AM–1AM
Katie's Cafe
Cole Valley
301 Carmel Street
MON–FRI 7AM–10PM
SAT–SUN 9AM–10PM
現在設計已完成,您將選取元素並將它們組成群組。
請注意,將一組物件組成群組後,「控制面板」左上角的「選取指示器」會顯示「群組」。
您可從此簡短範例中看出,當您完成一項設計並想將此設計當作單一元素使用時,群組非常有幫助,它可讓您將設計重新擺放在頁面上的其他位置,或將其拷貝並貼到不同的頁面。
除了群組,您可能也會發現當您將設計定稿後,「鎖定」功能也很有幫助。在群組或選取的一組元素上按一下滑鼠右鍵,從出現的環境選單中選擇「鎖定」來進行鎖定。(另一種方式是,選取「物件 > 鎖定」)。鎖定功能可確保您不會意外移動或刪除頁面中任何已定稿的元素,因為您無法選取它們。如果之後需要更新鎖定的元素,請選擇「物件 > 解除鎖定頁面全部內容」。
將花朵設計貼至「Visit」頁面底部後,就完成了部分網頁內容。下一節中,您將繼續編輯「Visit」頁面並新增互動式地圖介面,以協助客戶找出最近的咖啡館。
在「規劃」視圖中,按兩下 MasterFlash 縮圖來將其開啟,以在「設計」檢視畫面中進行編輯。請注意,因為您之前已複製「A-主版」頁面,所以靜態標誌影像仍在原處。使用靜態影像來對應動畫矩形的位置很有幫助,但是在嵌入多媒體元素之後,請不要忘記刪除靜態置入標誌。
選擇「檔案 > 置入」。在「讀入」對話方塊中,在 Kevins_Koffee_Kart 檔案夾內瀏覽,並選取名為 logo.swf 的檔案。
將 SWF 檔案置入左上角,使其與現有標誌影像檔案的位置相符。
將您剛剛置入的新 SWF 視窗與舊靜態標誌對齊之後,請選取靜態標誌並按下 Delete 鍵將其刪除。
若要檢閱「首頁」套用全新變更之後整個網站所顯示的樣子,請選擇「檔案 > 在瀏覽器中預視網站」來測試標誌在各頁面上的顯示。在未發佈網站的情況下,您可以在電腦上本機工作,然後在瀏覽器中預視網站,並按一下網站導覽中的各個頁面進行瀏覽。請注意,動畫 (SWF 檔案) 在「首頁」上顯示一次後就會停止。如果您按一下其他頁面,只會顯示靜態標誌。
如果您選擇「檔案 > 在瀏覽器中預視網頁」,新的瀏覽器視窗將更快速地載入顯示「首頁」,但此功能只可預視作用中 (首頁) 的頁面。如果您要檢查網站的一個頁面而不是整個網站,請選擇此選項。
「間距」面板能讓您善用 CSS 間隔和間距屬性。間隔會清除元素內容 (邊框內) 周圍的區域。間隔會受元素的背景顏色影響。
上、下、左和右間隔均可使用個別屬性加以變更。您也可以選擇以一致的方式編輯,讓所有間隔屬性相等
Adobe Muse 可讓您在物件上套用 2D 變形。您可以在 X 軸和 Y 軸上放置、縮放及旋轉物件。
「變形」面板的 100% 寬度切換開關可讓您將物件設為 100% 寬度。您也可以將可縮放物件設為橫跨瀏覽器寬度,而且符合電腦螢幕大小。
若要在所選物件上套用變形,請執行下列操作:
登入您的帳戶