註解:

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

為網站擁有者設計網站時,主要的要求之一,就是設定一套擁有者可以自行更新網站內容的系統。當您不在工作站前,但是想要修改網站時,有一個能夠隨時進行修改的方式也相當實用。

現在,Muse 提供「In-Browser Editing」功能,讓您、網站擁有者及您的團隊成員可以使用 Business Catalyst Administrator 介面變更文字與影像內容。使用「In-Browser Editing」的編輯人員不需安裝 AdobeMuse。

「In-Browser Editing」使用起來也很便利。就算是沒有網頁設計經驗的人,也能輕鬆變更網頁內容,因為只要他們取得存取權限,就能使用網頁瀏覽器編輯內容。

在本文中,您將學習如何設定 Adobe Muse 網站以啟用「In-Browser Editing」功能,讓受邀的網站用戶能夠更新 Adobe Muse 網站。您會取得使用「In-Browser Editing」介面的相關步驟概覽,如此一來您就可以協助他人學習如何利用這項功能變更網站內容。最後,您會瞭解如何在使用「In-Browser Editing」介面將變更套用至即時網站後,將 .muse 檔案與現有版本同步。

使用 In-Browser Editing 時可編輯何種內容?

內容 是否可編輯? 追蹤連結
水平文字
影像框
垂直文字
影像 - 背景填色 (矩形、影像框及 Widget)
幻燈片展示計數器
表格送出按鈕
動態選單標籤 (選單 Widget 未設為「手動」)
點陣化頁面項目 (圓角、斜角、內光暈或套用旋轉、使用系統字體的文字框,以及套用效果的旋轉文字框)
超連結文字
文字標籤 - 折疊式 Widget
文字標籤 - 標籤面板 Widget
文字標籤 - 手動選單 Widget

按鈕 - 幻燈片展示 Widget

 

按鈕 - 排版 Widget

幻燈片展示縮圖影像

「排版」Widget「觸發」區內的文字框及影像框

設定瀏覽器內編輯

設定「瀏覽器內編輯」功能的程序共有兩部分。首先,您要啟用「網站屬性」中的設定,然後將網站發佈至 Adobe 主機伺服器。接著,您可以邀請新使用者造訪網站,他們便可以使用任何瀏覽器登入以變更網站內容。

如前文所述,使用者無法利用「In-Browser Editing」編輯背景影像。如果網站包含設計內容不可或缺的影像,且您不希望網站擁有者變更此類影像,請務必先將這些影像新增為背景影像,然後再啟用「In-Browser Editing」並授與編輯存取權限。

註解:

若要使用「In-Browser Editing」,試用版或即時網站必須存放於 Adobe Business Catalyst 主控伺服器。

  1. 啟動 Adobe Muse,並開啟您要配置的網站。

    inbrowserediting
    在「網站屬性」對話方塊中勾選「啟用 In-Browser Editing」核取方塊。

  2. 按一下「檔案 > 網站屬性」。按一下「進階」索引標籤,並確認「啟用 In-Browser Editing」選項已啟用。

    如果尚未啟用,請勾選「啟用 In-Browser Editing」核取方塊。

  3. 按一下「確定」,關閉「網站屬性」對話方塊。

  4. 在 Adobe Muse 上方的導覽列按一下「Publish > Business Catalyst」(發佈 > Business Catalyst)。

    使用 Business Catalyst 發佈網站
    使用 Business Catalyst 發佈網站

    在「發佈」對話方塊中選擇想要的選項,然後按一下「發佈」,將所有網站檔案上傳至 Adobe Business Catalyst 主控伺服器。

    註解:

    您可以建立新的試用網站,或上傳使用自訂網域名稱的即時網站。凡是由 Adobe 網頁伺服器代管的試用或即時網站,都能使用「In-Browser Editing」。

  5. 發佈作業完成後,「發佈」對話方塊會更新,並詢問您是否要針對網站新增「In-Browser Editing」用戶。

    您需要新增 In-Browser Editing 用戶至您的網站,讓他們能夠編輯您的即時網站。您將使用「Admin User」(管理員用戶) 介面為用戶建立帳戶,之後他們就可以登入並開始編輯您的網站。

    fig02_ibe
    對話方塊可以讓您選擇按一下連結或按一下「確定」。

  6. 您可以按一下「新增 In-Browser Editing 用戶」的連結,或者按一下「確定」,關閉對話方塊。

    在此範例中,按一下「確定」。

    如果按一下「新增 In-Browser Editing 用戶」的連結,您會看到與步驟 9 說明內容相同的介面。

  7. 在 Adobe Muse 中,按一下步驟 5 說明內容中的「新增 In-Browser Editing 用戶」連結,或是選取「檔案 > 管理 Business Catalyst 網站」。

    網站的 Business Catalyst 介面會在新的瀏覽器視窗中開啟。

    管理 Business Catalyst 網站
    選擇選項,將 In-Browser Editing 用戶新增至網站。

    註解:

    您也可以在發佈網站後,按一下「管理」按鈕,然後在進行其他更新時邀請「Admin User」(管理員用戶),以便管理網站。

  8. 在 Business Catalyst 用戶介面左方的導覽窗格按一下「Site Settings > Admin Users」(網站設定 > 管理員用戶)。

  9. 按一下「Invite Admin User」(邀請管理員用戶)。

    fig04_ibe
    在網站的「Admin User」(管理員使用者) 介面中,邀請新的管理員使用者。

    「Admin User」(管理員使用者) 區段會更新為新介面。

  10. 在出現的欄位中,輸入新使用者的電子郵件地址及姓名。您也可以根據需要輸入他們的手機號碼。將「User Roles」(使用者角色) 選單設定為「Users」(使用者)。

    fig05_ibe
    在提供的欄位中,輸入使用者的姓名及電子郵件地址。

  11. 按一下「Invite」(邀請),將新用戶新增至您的 Adobe Muse 網站。

    註解:

    送出資訊後,系統會自動以電子郵件訊息將登入資訊傳送給您邀請的對象。他們收到電子郵件並按一下連結後,即可設定自選的唯一密碼。他們建立帳戶密碼後,即可使用任何網頁瀏覽器登入網站編輯功能。

使用「In-Browser Editing」更新網站

本章節列出使用者獲得存取權限後,更新 Adobe Muse 網站的相關步驟。如果您要將相關步驟的複本傳送給使用者,可以下載這些說明。

  1. 請開啟瀏覽器,然後輸入下列其中一個網址:

    • my-site.businesscatalyst.com/admin (試用版網站)
    • my-site.com/admin (即時網站)
  2. 輸入電子郵件地址和密碼,登入 Business Catalyst。

    您會透過電子郵件收到登入詳細資料。

    fig06_ibe
    使用任一瀏覽器登入您的網站帳戶。

  3. 按一下「編輯」按鈕,在編輯介面中檢視您的網站。

    fig07_ibe
    按一下「編輯」按鈕,開始編輯網站。

    「In-Browser Editing」介面中會載入網站首頁。

使用 In-Browser Editing 編輯文字

變更網站內容時,請記住您是在瀏覽器視窗內作業。除非您改變心意決定捨棄相關變更,否則請務必發佈您所做的變更,再離開目前頁面或關閉瀏覽器視窗。

請依下列步驟編輯網站的文字內容:

  1. 當您使用 Business Catalyst 登入網站時,會看見文字以藍色覆蓋。請選取或刪除文字,開始輸入您的內容。

    使用 In-Browser Editing 編輯文字
    選取您要編輯的文字,並開始輸入更新內容。

    當您將游標懸停在文字方塊中的文字上,In-Browser Editing 會顯示該段文字所套用的格式。系統會預設將相同格式套用在您輸入文字方塊中的任何文字。

    In-Browser Editing 中的文字格式
    將游標懸停在文字上,查看所顯示的格式。

  2. 如果您不滿意這些變更,且想要回復原本的文字,請按一下頁面頂端的「還原」圖示。

     

    按一下「還原」,回復原本內容
    按一下「還原」圖示,恢復原本的文字內容。

  3. 完成編輯文字後,按一下「發佈」。

    fig11_ibe
    按一下「發佈」按鈕,讓變更內容上線。

    在您按一下頁面頂端的「發佈」按鈕前,您在編輯介面中所做的變更將不會套用到即時網站。如果您決定不要進行任何變更,請關閉瀏覽器視窗。

編輯置入或貼上頁面的影像

使用「In-Browser Editing」,只要網站上的影像是以前景影像插入,您就可以編輯這些影像。如果網站上的影像是設為背景影像,則無法編輯。如果有您想變更但無法編輯的影像,請聯絡設計網站的人員。

  1. 選取您要編輯的影像。

    您會注意到影像旁邊的「編輯影像」按鈕。

    使用 In-Browser Editing 編輯影像
    當您將滑鼠移至可編輯的影像上時,會顯示「編輯影像」按鈕。

  2. 按一下「編輯影像」。

    彈出式視窗隨即顯示,內含您專案使用的所有資產。您可以從現有資產選擇影像,或者使用「上傳圖片」按鈕從您的電腦上傳新影像。

    使用 In-Browser Editing 編輯影像
    使用「編輯影像」介面,以新影像替換現有影像。

    如果您選擇「上傳圖片」選項,您在電腦上選取的影像會自動上傳至網站。

    您選取的檔案會上傳到存放網站的網頁伺服器上。

  3. 如有需要,您可以在「影像工具提示」欄位中,輸入工具提示。建議您執行此操作,因為這樣能協助改善「搜尋引擎最佳化」,還有助於確保使用者更容易存取網站。

  4. 請執行以下任一動作:

    • 按一下勾選標示以儲存變更。
    • 按一下交叉符號以取消更新。

    當您取代影像時,如果新影像的長寬比與原始影像不同,系統會將您選取的新影像剪裁至合適大小。因此,建議您僅使用面積相同或長寬比相同的更大影像,來取代現有影像。

    如果您想定期變更特定影像,可以請創建網站的人員上傳相同大小的不同影像,您就可以選擇網站上的現有影像。例如,網站設計師可以上傳四張面積相同的春、夏、秋、冬影像。隨著時光流轉,您可以選擇「從網站」選項,然後替換影像以呼應目前季節。

  5. 當您完成所有變更時,請按一下「發佈」將變更即時推送出去。

編輯置於文字框中的影像

如果頁面上的影像是貼入文字框中,您仍然可以編輯影像。

  1. 選取文字框。然後,選取文字框中的影像。

「編輯影像」按鈕會出現在所選取的影像旁邊。

在文字方塊內編輯影像
選取文字框,然後選取文字方塊中的影像,按一下「編輯影像」。

  1. 按一下「編輯影像」。從現有資產中選擇影像,或是按一下「上傳圖片」從您的電腦上傳新影像。
  2. 當您完成所有變更時,請按一下「發佈」將變更即時推送出去。

編輯共用的內容

設計網站時,可以將網站上的某些內容加入主版頁面。將元素新增至主版頁面時,這些元素會顯示在與該主版連結的所有其他網站頁面上。這表示,如果您變更一個頁面上的某個元素,也會同時更新該內容的所有其他執行個體。

當您選取共用的編輯元素時,該項目會顯示在「編輯共用影像」視窗中。

fig16_ibe
在「編輯共用影像」視窗中,編輯於各頁面間共用的內容。

當您看到此視窗時請謹慎處理,因為這表示當您進行變更時,網站上其他頁面可能也會自動隨之更新。謹慎起見,建議您最好按一下「取消」。在新瀏覽器視窗中,造訪即時網站並檢閱頁面,查看元素出現的地方。確認您想變更元素的所有反覆項目,然後返回「In-Browser Editing」介面將其更新。

編輯超連結

如需「編輯超連結」的相關資訊,請參閱編輯超連結

開啟「Home」(首頁) 頁面上的連結,以編輯其他網站頁面

當您首次登入帳戶時,會看到網站首頁的可編輯版本。在您完成首頁的變更後,您可以瀏覽網站中的其他連結頁面,以便編輯這些頁面。

  • 如果連結出現在文字框外,只要按一下連結即可跳至網站中的連結頁面。編輯介面中不會載入外部連結 (不在現有網站中的網頁),因為您無法使用「In-Browser Editing」編輯其他網站的頁面。
  • 如果連結出現在文字框內,請將您的游標懸停在連結上,就會看到按鈕。按一下按鈕跳往連結的網頁。例如,按一下「首頁」按鈕前往您的網站首頁。
  • 如果該連結已套用至整個文字框,請按一下整個文字框以查看內含連結或錨點標籤的按鈕。
fig17_ibe
按一下按鈕,存取連結的頁面或錨點標籤位置。

完成編輯網站上的每個頁面後,如果您想儲存變更,務必按一下「發佈」。完成編輯整個網站後,關閉瀏覽器視窗。

在 In-Browser Editing 中預覽變更

In-Browser Editing 支援自適應版面。也就是說,您可以直接預覽變更以及變更在每個中斷點的外觀。另一方面,如果您已在網站使用替代版面,則可使用下拉式選單預覽每個裝置的變更。

若要預覽您的變更:

  1. 請針對您的網站內容進行所需的變更。

    請注意顯示為 1200 像素的中斷點,此為您已更新內容的位置。預覽此中斷點的變更。

  2. 從下拉式選單選擇其他中斷點,並預覽每個中斷點的變更。

  3. 如果您使用替代版面建立網站,請從下拉式選單選擇裝置並預覽變更。

將編輯內容同步至 .Muse 檔案

使用「In-Browser Editing」後,您本機上的 .muse 檔案所包含的內容就不會再與即時網站相同。在本章節中,您將學習如何核准或拒絕他人進行的變更,藉此更新 .Muse 檔案,讓檔案與目前的網站設計相符。

  1. 啟動 Muse 並開啟網站的 .muse 檔案。

    警告訊息隨即出現,表示發佈的網站已變更。

    除了在首度開啟 .muse 檔案會看到訊息外,當您開始發佈與即時網站不同步的 .muse 檔案時,也會顯示訊息,提醒您先檢閱變更,然後再次發佈網站。

    註解:

    您也可以隨時選擇「檔案 > 與 Adobe Business Catalyst 網站同步化」,查看可讓您檢閱 .muse 檔案與即時網站之差異的介面。

  2. 按一下「檢閱」,檢閱變更。

    「檢閱並合併變更」視窗隨即出現。

  3. 使用介面檢閱每項變更。系統會醒目標示每項編輯的變更。新內容會以綠色醒目標示,已刪除的「項目」會以紅色標示,因此您一眼就能看出新增或刪除的內容。

  4. 使用下拉式選單選項 (「不要合併」或「合併至 Muse」),拒絕或接受特定變更或所有變更。

    fig20_ibe
    使用選單選項合併或捨棄變更。

    註解:如果您不合併變更,下次您發佈 .muse 檔案時,會覆寫套用至即時網站的變更。此行為可以協助您修正拼字錯誤,或他人使用「In-Browser Editing」編輯網站時發生的其他網站問題。

  5. 若要比較即時網站的文字及影像版本,與本機 .muse 檔案的差異,請啟用並停用「預視於頁面」核取方塊。

    fig21_ibe
    選取並取消選取「預視於頁面」核取方塊,即可在「設計」視圖中,隱藏並顯示最近的變更。

    完成同步及編輯 .muse 檔案後,請將其發佈以使變更上線。當您再次發佈網站時,.muse 檔案的目前設計會覆蓋所有標示為「不要合併」的變更項目。

儲存已發佈的網站反覆項目

因為其他人可能會在您變更 .muse 檔案時,也對即時網站進行變更,建議您在同步處理變更並發佈最新版本後,儲存網站的複本。

在發佈網站後,立即選擇「檔案 > 另存網站為」,並儲存 .muse 檔案的複本。如有需要,當您建立新複本時,可以在檔案名稱中加入目前日期。如此即可輕鬆找出您在特定日期發佈的 .muse 檔案。

例如,您可以建立一個包含 .muse 檔案最新工作複本的檔案夾,以及數個包含之前發佈之網站設計反覆項目的封存版本。檔案夾中的檔案清單看起來像這樣:

my-site.muse

my-site_2013-1-4.muse

my-site_2013-2-23.muse

my-site_2013-4-7.muse

這項作法除了讓您可以更輕鬆回復至之前的網站設計外,還能協助 Muse 正確判斷網站中有哪些使用「In-Browser Editing」所做的變更 (若有的話)。儲存網站的備份版本,也能讓您更輕鬆檢查目前的 .muse 檔案與即時網站是否仍然同步。

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

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