Adobe Muse 快速入門。瞭解 .muse 檔案、設定頁面屬性的方式、新增網址列圖示等等。

註解:

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

Adobe Muse 快速入門

登入之後,Adobe Muse 工作區即會啟動。您會看見 Adobe Muse 歡迎畫面。請執行以下任一動作:

  • 按一下「新增」建立新網站。
  • 按一下「開啟」並瀏覽至您電腦中現有的 .muse 檔案。
Adobe Muse 歡迎畫面
使用「歡迎畫面」來建立新網站。

當您建立新網站時,「新增網站」對話方塊即會出現。選取「流動寬度」以啟用自適應版面,或選取「固定寬度」以選擇替代版面。對話方塊內亦包含可讓您設定最大頁面寬度、欄與「間距」值的欄位。

建立新網站的「新增網站」對話方塊。
選取「檔案 > 新增網站」以建立新網站。

按一下「進階設定」,為網站設定尺寸、邊界、欄與間隔值 (數值,以像素為單位)。您也可以在此視窗中選擇解析度和語言。

您稍後可以隨時選擇「檔案 > 網站屬性」來更新這些設定。

設定網站屬性的「網站屬性」對話方塊。
在「新增網站」對話方塊中設定網站屬性。

完成時,按一下「確定」關閉對話方塊。

依照預設,已建立好兩個項目的「規劃」視圖會開啟。左上方的首頁是當使用者造訪您的實際上線網站時將會先載入的頁面。以下的「A-主版」頁面就像是範本。將任何項目放置在您要顯示在所有網站頁面上的「A-主版」頁面上。如此一來,您便只需要在一個中央位置更新通用網站元素。

NewWebsite
Adobe Muse 會自動產生一個「Home」(首頁) 頁面與一個主版頁面。

在上方有四個連結指出了介面的不同區段:「規劃」、「設計」與「發佈」。

如需有關如何使用介面及用 Adobe Muse 設計網站的更多資訊,請參閱「Adobe Muse 快速入門」與「用 Adobe Muse 建置您的第一個網站」。

瞭解 .muse 檔案

當您在其他程式 (例如 Dreamweaver) 中設計網站時,您會建立一個檔案夾,其中含有內含您電腦上所有網站內容的子檔案夾與檔案。管理整組元素並確保網站中沒有任何損毀的連結有點困難。

當您在 Adobe Muse 中建立新網站時,選擇「檔案 > 儲存」,便可建立單一 .muse 檔案。這與在 Photoshop 中建立 PSD 檔案類似,其中包含任何數量的圖層、圖形與連結資產。這個單一 .muse 檔案是您設計網站將需要的唯一檔案,因為其中包含所有影像、連結、程式碼與網站檔案。如果您要在設計網站時與某人合作,您可以將您所建立的 .muse 檔案的拷貝傳送給同事,讓他們能夠將其開啟、進行變更,以及發佈他們所新增的變更。

通常,最好一次只允許一個人處理 .muse 檔案。當您完成將內容新增至網站之後,您可以進行發佈並將 .muse 檔案傳送給您的同事,讓他們能夠編輯它以新增更多內容。完成之後,他們可以將更新後的 .muse 檔案 (其中包含他們的變更) 傳回給您。如此一來,您便能夠確定不會覆寫彼此的工作。

或者,您可以建立 .muse 檔案並發佈暫時網站。然後,與您的同事共用 .muse 檔案。在瞭解他們將會發佈他們自己的新暫時網站的情況下,您的同事可以開啟檔案,選擇「檔案 > 另存新檔」,並對他們所擁有的拷貝進行變更,同時您還能繼續處理您的拷貝。但是,如果您使用此工作流程,網站的兩個版序將不會同步,您的 .muse 檔案的版本將不會更新以包含您的同事所新增的變更,反之亦然。

當您要對現有網站進行重大變更時,最好始終開啟 .muse 檔案並選擇「檔案 > 另存新檔」。以些微不同的檔案名稱建立新 .muse 檔案,然後將所有的 .muse 檔案保存在您電腦上的單一檔案夾中。如此一來,如果客戶想要網站的原始版本,您就可以開啟含有較舊設計的舊版 .muse 檔案並重新發佈,將網站回復為之前的樣子。

您最好也能夠時常儲存您的 .muse 檔案。如果 Adobe Muse 當機,通常會在您再次啟動 Adobe Muse 時顯示內含最近編輯內容的還原版本 .muse 檔案。如果發生此情形,請立即儲存還原版本的 .muse 檔案,然後再次開始處理檔案。請務必將您所建立的 .muse 檔案保存在安全的位置並予以備份,因為每個檔案都包含完整的網站。如果您遺失 .muse 檔案且沒有備份拷貝,您將無法透過下載在伺服器上代管的網站檔案來重建 .muse 檔案。

許多網頁設計師都喜歡用描述性的名稱儲存他們的 .muse 檔案,例如 my_site_v1.muse 與 my_site_v2.muse。您也可以將日期新增到 .muse 檔案名稱中,使您能夠輕鬆分辨哪一個版本比較舊,例如 my_site_2012-4-13.muse 與 my_site_2012-4-30.muse。不過,您也可以用您認為最有幫助的方式為檔案命名。

在 Adobe Muse 建立新網站的同時設定網站屬性

請如下操作建立新網站並定義網站屬性:

  1. 在「歡迎」畫面選擇「新增 > 網站」。按一下「流動寬度」使用自適應版面,或「固定寬度」以使用替代版面。

  2. 在接下來出現的「新增網站」對話方塊中,設定「頁面寬度」為 950、「最小高度」為 800。設定「欄」為 3,「間距」為 20。在「邊界」區將 4 個值均設為 50。設定「間隔」值為 36。

    從「網站屬性」對話方塊設定網站屬性。
    直接在各欄位輸入值,或按一下各設定的箭頭按鈕,以設定網站屬性。

    註解:

    若您正在設計手機與平板電腦專用的網站,「從桌面重新導向」選項可讓您開啟/關閉行動版面的重新導向功能。此功能對於尚未就緒且還不應作為重新導向目的地的版面 (進行中的工作) 相當有用。注意,即使關閉重新導向選項,仍會轉存版面。然而,行動瀏覽器將不會重新導向至行動頁面,除非在「網站屬性」對話方塊中針對您的網站啟用此選項,否則轉存的檔案將不會包含在 sitemap.xml 內。

  3. 按一下「確定」儲存設定,並關閉對話方塊。

  4. 選擇「檔案 > 網站屬性」。按一下「網址列圖示影像」旁的檔案夾圖示。瀏覽至 Kevins_Koffee_Kart 範例檔案夾,選擇名為 favicon.png 的檔案。按一下「確定」。

    fig_07
    網址列圖示即是在瀏覽器網址欄中,於網站 URL 旁出現的圖示。

  5. 選擇「檔案 > 儲存」。為您的新網站指定唯一的名字,例如 YourNameKoffeeKart.muse。(本教學課程中的範例網站稱為 01KevinsKoffeeKart.muse)。

在「網站屬性」面板中新增網址列圖示

網址列圖示是個小巧的正方形影像,您可以自行建立、將其新增至網站及上傳至個人化的書籤和 URL。雖然網址列圖示的運作依據您使用的瀏覽器而有不同,但當您檢視網頁時,網址列圖示通常會顯示在瀏覽器的網址列上,就在網站的 URL 旁邊。多數時候,當網頁加入書籤時,它也會顯示在網頁名稱的旁邊,或顯示在包含載入網頁的索引標籤內。您可以使用任何影像編輯程式,例如 Photoshop 或 Illustrator,來建立正方形 (比例一致) 影像檔,作為網址列圖示檔案使用。本教學課程已提供一個 PNG 檔案。

請依照下列步驟,將網址列圖示新增至網站:

  1. 選擇「檔案 > 網站屬性」。隨即會顯示「網站屬性」面板。

  2. 在「內容」索引標籤中,按一下「網址列圖示」區段右方的檔案夾圖示。使用出現的「選擇網址列圖示影像」對話方塊瀏覽樣本檔案檔案夾,選取名為 favicon.png 的檔案。

    Favicon
    在「網站屬性」中設定 favicon.png 檔案。

    註解:

    若您是使用 Adobe Muse 2015.0.2 或更舊版本,則可按一下「檔案 > 網站屬性 > 版面」標籤,以便為網站新增網址列圖示。

  3. 按一下「開啟」來關閉「選擇網址列圖示影像」對話方塊並選取檔案。接下來,按一下「確定」,關閉「網站屬性」對話方塊。

  4. 選擇「檔案 > 在瀏覽器中預視網站」。在瀏覽器視窗頂端,可看到網址列圖示顯示在網址列中。如果網站已載入索引標籤中,您可能也會看到網址列圖示顯示在索引標籤上。您可將頁面加入書籤,看看圖示如何在書籤清單的頁面名稱旁顯示。

    現在網站已完成,下一步是將網站上傳至提供的 Adobe Business Catalyst 主控伺服器。

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

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