在 Adobe Muse 中建立網站骨架

搜尋

上次更新時間

瞭解如何在 Adobe Muse 中建立網站原型或骨架。

註解：

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

Adobe Muse 除了操作直覺化外，也能夠協助您快速建立網站專案原型，供您線上檢視。能夠建立試行網站，就代表能夠提供連結給未來客戶，讓他們使用最終網站成品所用的同一套瀏覽器，檢閱網站的原型設計。如此可幫助客戶瞭解網站成品的實際外觀。

請續讀閱讀以瞭解如何針對網站設計骨架、建置結構化規劃視圖，以及建立預留位置元素。當您的內容定稿之後，便可使用實際的頁面元素來置換預留位置元素。

使用骨架

骨架標示出網站的頁面排版，讓您試按連結，查看網站的動線。嘗試與骨架互動之後，請造訪成品網站，將骨架與成品版本相比較。注意到骨架中的預留位置元素在成品版網站均改以圖形取代。

如果想要知道骨架版面的建構過程，請下載樣本檔案 (ZIP，4.5 MB)。將 ZIP 檔案解壓縮後，開啟檔案夾，並找到 KevinsKoffeeKartWire.muse 檔案。連按兩下以在 Adobe Muse 中開啟骨架。用「規劃」視圖瞭解各頁面如何分等為不同層級，建構整個網站地圖。按兩下個別頁面，即能以「設計」視圖開啟頁面並細看其設計手法。

Adobe Muse 提供許多協助您建立骨架的功能：

「設計」視圖含有選用的欄格線，能協助您對齊版面元素。
彈性的繪圖工具可輕易建立圖形的預留位置形狀。
「資源」面板提供協助您更新預留位置影像的功能。
Adobe Muse 在您發佈或轉存網站時，會將所有影像檔案最佳化、切割並轉存。
文字標題與段落樣式可協助您建立結構化的頁面，並可輕易變更文字格式。
「置入」命令可讓您從瀏覽器直接儲存客戶的標誌，然後將其置於 Adobe Muse 檔案中。

設計骨架供客戶審核

與客戶首次會談後，可以設計網站骨架，描繪各項頁面元素的位置與功能，而不使用成品的圖形和文字格式。骨架的目的是在於重現每一頁面最基本功能，模擬呈現整個網站而不受色彩或視覺效果干擾。原本應有影像的地方改由矩形圖案預留位置，頁面含有文字內容處則改以手寫或一般性的字型顯示。

骨架具有以下優點：

讓客戶聚焦於網站的結構，並瞭解頁面的版面。
提供互動式的線上體驗，協助客戶檢閱並審核網站。
扮演溝通工具的角色，使網站的設計與功能更明確。

Adobe Muse 不僅僅是網站設計工具，也非常適合用於開發專案原型。您可以迅速建立線上試用 URL 並以電子郵件訊息傳送給客戶，簡化審核過程。不過使用 Adobe Muse 製作骨架的優點不止於此。

Adobe Muse 的骨架功能與其他設計工具不同，能使生產力更上一層樓，因為它擁有全面的影像編輯功能及可編輯的段落樣式，讓網頁設計師能迅速更新 .muse 檔案，並將核准的骨架轉換為最終線上版本。客戶接受設計後，您再也不必將骨架捨棄，從零開始建置專案；而能夠立即開始更新客戶核准的骨架，加入實際網頁內容，建構成品版本。而在製作過程中，您還能發佈不限次數的試行版，既可記錄修訂歷程，也能與客戶分享網站設計的演進過程。

使用骨架建置網站的基本工作流程為：

您建置骨架並發佈免費試用版。
客戶實際點擊各連結進入頁面，在線上檢閱網站。
客戶提出要求變更或澄清設計疑問。
進行任何所需的修訂後，客戶簽署接受骨架。
您更新骨架網站，以加入圖形元素與顏色。
您更新段落樣式設定現有文字內容格式。
客戶檢閱更新版本的網站並要求進行其他變更。
您執行所要求的變更。
客戶核准完成版本。
您升級網站、建置網域，並發佈成品網站。

使用 Adobe Muse 的「規劃」視圖查看網站結構

若要查看網站頁面的階層結構，同時也是導覽連結的上層與次級階層關係，請在 Adobe Muse 開啟骨架的 .muse 檔案進行分析。開啟專案時會看到「規劃」視圖，顯示網站所有頁面。

圖中有兩階：頂層與次級；而此結構即代表了網站地圖的階層關係。在網站開發或維護期間，您隨時可以拖移這些頁面，變更頁面在整個網頁結構中的位置。

若要建立新頁面：

請按一下現有頁面右方或下方的加號 (+)，再按一下頁面的名稱欄位輸入頁面名稱。

頁面名稱請盡量描述頁面內容。
在頁面縮圖上按一下滑鼠右鍵，使用顯示的選單選項來複製、刪除或重新命名頁面。

或者，您也可以將游標暫留在頁面上方，按一下右上角出現的 X 圖示即可刪除頁面。
若您按講解操作，可嘗試新增、移動、刪除頁面，以變更網站地圖。若要將骨架網站復原為最初狀態，請選擇「編輯 > 還原」。

「規劃」視圖介面直覺化而易用，而 Adobe Muse 也會記錄選單 Widget 中出現的所有頁面名稱，並維護選單 Widget 中出現的所有連結。您所做的任何變更均會自動更新，確保連結有效。

使用繪圖樣式建立共用屬性的預留位置元素

就像 Adobe Illustrator 與 Adobe Photoshop 軟體，Adobe Muse 也能協助您隨時建立繪圖樣式，以維持一致的風格，以及套用於整組元素。此功能於設計骨架 (及頁面) 時相當有用，因為僅需變更現有繪圖樣式即可快速更新所有其他使用相同樣式的頁面元素。您也可以複製現有樣式後，建立各種變化。

要在骨架網站中使用繪圖樣式套用屬性至各種形狀，並為影像檔案建立預留位置：

使用「矩形」工具，在「設計」視圖在頁面上繪製三個矩形。
選取一個矩形並加以編輯以設定其線條顏色、填色顏色以及不透明度設定，並加上陰影等圖形效果。
維持選取該矩形，按一下「繪圖樣式」面板底部的「建立新繪圖樣式」。此樣式是以選取的矩形格式為基礎。連按兩下新建的繪圖樣式，指定具有描述性的名稱。
選取其他的矩形之一，再按一下此樣式名稱，將相同繪圖樣式套用於此矩形。重複此步驟將樣式套用至第三個矩形，使所有矩形均使用相同樣式。
選擇一個矩形並編輯，稍微修改其樣式。注意到「繪圖樣式」面板中，編輯後的樣式名稱旁出現加號 (+)。
在「繪圖樣式」面板中以滑鼠右鍵按一下該樣式名稱，選擇「重新定義樣式」。另外兩個矩形即更新符合新樣式，加號 (+) 亦隨之消失。
使用繪圖樣式即可迅速格式化圖形，建立一致的骨架，並在客戶要求變更時，迅速更新整組網站資源。

建置結構化網頁並以段落樣式格式化文字

在建置骨架網站時，可以使用「文字」工具建立文字框，並添加稍後要替換的預留位置文字 (即填充文字)。或者若客戶已有現有網站，則可直接從瀏覽器複製文字，貼入文字框。建立文字元素後，可使用「文字」面板在文字套用格式。

您可以使用段落樣式來定義標題文字與段落標記，藉此指定頁面文字內容結構：

在「設計」視圖中，使用「文字」工具在頁面拖移建立文字框。在文字框輸入或貼上文字。
使用「文字」面板或「設計」視圖工作區頂端的「控制」面板設定格式選項，例如選擇字體、字體大小、字體顏色及其他屬性等。
按一下「段落樣式」面板底下的「建立新段落樣式」，建立新的段落樣式。連按兩下新樣式的名稱，為其指定具有描述性的名稱。
以滑鼠右鍵按一下樣式，選擇「樣式選項」。使用「段落標記」選單設定此段落樣式供特定 HTML 標記使用，例如 P、H1、H2 或 H3。

以滑鼠右鍵按一下「段落樣式」面板中的樣式名稱，再使用「樣式選項」對話方塊定義將該樣式定義為特定標題或段落標記。
建立數個文字框並添加文字。請注意，若在已選取文字框的情況下按一下任何段落樣式的名稱，即會套用該段落樣式至所選的文字框。其後若選擇已套用段落樣式的文字框並加以變更，則「段落樣式」面板中，該樣式名稱旁會出現加號 (+)。如此即代表樣式已變更，與繪圖樣式變更時相同。
若要自動更新所有使用相同樣式的文字框，請在「段落樣式」面板中以滑鼠右鍵按一下該樣式的名稱，再選擇「重新定義樣式」。

如此簡短範例所示，您可以建立不同的文字容器，設定使用特定樣式，創造一致的設計。其後當您要更新骨架為網站成品版時，僅需依照客戶要求輕鬆更新樣式即可。使用文字容器建立結構化網頁符合最佳準則，因為如此有助改善搜尋引擎最佳化排名。

註解：

當您設計的頁面使用實心背景顏色時，請設定文字框的背景填色為相同顏色。如此可幫助 Adobe Muse 更有效率地發佈文字內容。若背景填色不明，發佈之文字的邊緣看起來會較粗糙，這是因為 Adobe Muse 將文字框背景顏色設為透明。不過，若頁面背景顯示漸層或影像，則請保留文字框填色為「無」。

以網站完稿圖形更新預留位置影像

待客戶核准骨架後，即可迅速更新網站，使網站使用實際會使用的影像檔案。

選取頁面上的一個影像預留位置。
開啟「資源」面板，找出選取的頁面元素。
以滑鼠右鍵按一下該頁面元素。在出現的選單上，有兩個選擇可更新影像檔案，視您製作骨架網站的方法而定。

若您在 Adobe Photoshop 或 Adobe Fireworks 軟體建立檔案後將其置入頁面，則可選擇「編輯原稿」，在原先建立檔案所使用的產品中編輯原檔。當您儲存主版檔案並返回 Adobe Muse 時，網站中置入的檔案實例即會自動更新。

或者，若您在 Adobe Muse 中使用「矩形」工具建立影像檔案預留位置，請選擇「重新連結所有實例」，並瀏覽選取電腦上現有的檔案，即可將預留位置檔案替換為成品圖形影像。

以滑鼠右鍵按一下資源名稱，選擇「編輯原稿」，以在原先產生該檔案所使用的影像編輯程式中，開啟預留位置的主版檔案。
重複以上步驟將頁面所有預留位置影像換成實際要用的影像檔案。

註解：

當您以滑鼠右鍵按一下「資源」面板中的資源名稱時，也可以選擇「前往資源」。此選項會指示 Adobe Muse 開啟內含所選資產的頁面，以便您迅速更新。

存取 Adobe Muse 產生的最佳化影像檔案

除了將您建立的 Adobe Muse 網站發佈至主機伺服器，您也可將整個網站轉存，以取得內含已切割及轉存之影像檔案的檔案夾：

選擇「檔案 > 轉存為 HTML」。

畫面上顯示「轉存為 HTML」對話方塊。
選擇要將網站檔案轉存至電腦的位置後，按一下「確定」。

完成此操作後，Adobe Muse 便會轉存檔案，並將檔案儲存至您指定的本機檔案夾。瀏覽至該檔案夾，開啟影像檔案夾即可存取最佳化的影像檔案。您可以再利用這些影像檔案，建立電子報、手機應用程式、社交網路頁面與其他各種相關專案。

登入您的帳戶