使用 Adobe Muse 建立行動裝置版網站

您可以使用 Adobe Muse 中的自適應網頁設計為行動裝置建立及設計網站。在自適應版面之下，您可以使用單一 Muse 檔案來為所有裝置建立網站，包括行動裝置在內。

首先，您應決定要設計之網站的瀏覽器寬度。之後您即可繼續設計網站。如需使用自適應版面建立行動網站的詳細資訊，請參閱建立自適應網站。

如果您要為僅限行動裝置用的網站設計替代版面，請閱讀下文。

您可以利用 Adobe Muse 建立網站版面，將網頁內容顯示於桌上型電腦、智慧型手機與平板電腦。利用行動設計功能，您可以針對手機、平板電腦以及桌上型電腦建立替代版面。

Adobe Muse 含有許多設定，例如 100% 寬度切換和「黏性頁尾」功能，確保您的設計在現今市面上多樣化的裝置螢幕上均可順利呈現。Adobe Muse 讓您用熟悉的工作流程，為各種不同尺寸的螢幕創造身臨其境的設計。

若要為行動裝置建立替代版面：

當您建立新專案時，您可以先設計任何版面，接著再建立其他版面，這些作業均在相同的 .Muse 檔案內進行。 當您發佈或轉存網站時，Adobe Muse 將自動產生一個名為 sitemap.xml 的檔案，檔案中列出所有版面的所有頁面。Sitemap.xml 會隨其他網站資源一併上傳。此檔案將協助搜尋引擎製作網站索引，使頁面在搜尋結果中準確地排列，進而改善網站的搜尋引擎最佳化 (SEO)。

若要為手機建立新的行動版面，您必須對現有網站執行的首要事項之一為檢閱其內容，並判斷哪些項目是智慧型手機使用者體驗所需。因為智慧型手機訪客通常是在行動間使用裝置，並以較小的螢幕檢視內容，簡化設計和只顯示有用且容易在觸控式螢幕上進行互動的內容就顯得格外重要。

Adobe Muse 能讓您使用超連結，輕輕鬆鬆連結到外部網頁、可下載的檔案及網頁內的區段等項目。在網站設定適當的導覽，對於確保訪客在網站頁面間能輕鬆移動非常重要。組織良好的網站導覽還有助於針對搜尋引擎將網站最佳化。如需詳細資訊，請參閱建立超連結。

「超連結」下拉式選單列出了新增至網站地圖的頁面或錨點連結。若要搜尋正確連結，請開始輸入網頁或錨點名稱。 您僅需輸入最初的幾個字，「超連結」選單即會進行篩選並以下拉式清單顯示結果。如此即可輕鬆存取您想要更新的連結。

首先要做的是將「首頁」頁面完稿。

1. 按一下「Interior (手機)」索引標籤。複製四個編號按鈕的整個群組。
2. 使用「跳至頁面」功能跳至「首頁 (手機)」頁面並貼上此群組。您在前一節加入的連結仍會保留，因此現在「首頁」頁面及「Interior」主版頁面擁有相同導覽區。
3. 使用「選取」工具將此群組置於「首頁」頁面，接近頁尾下方。
4. 按一下「scratch (桌上型電腦)」索引標籤返回暫存頁。複製左方標註「There's more than one way to solve a problem」的文字框。
5. 按一下「首頁 (手機)」索引標籤並貼上此文字框。使用「選取」工具放置文字框，使其置中於按鈕群組上方。

接著，您將要在「Section 01」(區段 01) 頁面加入內容。

1. 按一下「Scratch (桌上型電腦)」索引標籤返回「Scratch」頁面。從左方第二區選取白色圓角的背景矩形及三個文字框。這 3 個文字框包含了 01 圓圈、Section 01 (區段 01) 的預留位置文字，以及橘色的「手機」按鈕。複製選取的項目。
2. 按一下 Command+J (Mac) 或 Ctrl+J (Windows) 並輸入「Section 01」(區段 01) 最初的幾個字母。按一下向下鍵選取「Section 01」(區段 01) 手機頁面，再按 Return/Enter 以「設計」視圖開啟。
3. 在手機版面的「Section 01」(區段 01) 頁面貼上元素。使用「選取」工具將其依暫時出現的參考線置中於頁面。

「Section 01」(區段 01) 頁面用於簡介此企業，並讓行動裝置訪客能夠輕易撥打電話。設計行動版網站時，您可以加入一種新的連結，讓訪客輕按畫面即啟動智慧型手機的撥號程式，撥出電話。這是極實用的行動版網站功能，因為它讓潛在客戶能夠輕易聯絡企業。

要在行動版面新增撥號連結，請如下操作：

1. 使用「選取」工具選擇「手機」按鈕。
2. 在「連結」選單欄位中，輸入 tel:+1 加上電話號碼，如下：
   tel:+14155551234

這是行動裝置瀏覽器辨識電話號碼連結所需的格式。

3. 按 Return 或 Enter 儲存此連結。

注意：如果您選擇建立電子郵件連結，則可在「超連結」選單欄位中輸入下列格式：
mailto:designers@design-is-fun.com

在「手機」按鈕新增連結後，即完成「Section 01」(區段 01) 的頁面設計。

1. 按一下「Scratch (桌上型電腦)」索引標籤返回「Scratch」頁面。選取白色圓角背景矩形、綠色 02 圓圈以及「Section 02」文字框、內嵌的地圖，還有綠色的「地圖」按鈕。複製選取的項目。
2. 按 Command+J (Mac) 或 Ctrl+J (Windows) 並輸入「Section 02」最初的幾個字母。按一下向下鍵選取「Section 02」(區段 01) 手機頁面，再按 Return/Enter 以「設計」視圖開啟。
3. 在手機版面的「Section 02」頁面貼上您在第 1 步驟中複製的元素。用「選取」 工具，依對齊參考線將其置中於頁面。

「Section 02」(區段 02) 頁面含有 Google 地圖網站產生的內嵌式 HTML 程式碼，可建立互動式地圖。

若您是隨著「Muse 快速入門」教學課程操作，就會記得您已從 Google 網站複製 Google 地圖原始碼，並利用 Muse 的內嵌式 HTML 功能將其貼入頁面。

幸好，Google 地圖程式碼已含有觸控式螢幕手指動作支援，所以使用此類裝置的訪客均可輕鬆操作地圖。在此樣本專案中，地圖尺寸已經過調整。

不過，若您需要調整專案中內嵌 HTML 內容的尺寸，可以在該內容按一下滑鼠右鍵，選擇「HTML」在 HTML 視窗檢視程式碼。您可以編輯程式碼中的 height 及 width 數值，將地圖縮小配合較小尺寸螢幕。

若您有開啟「編輯 HTML」視窗，請按一下「確定」將其關閉，不做任何變更。

4. 選取「地圖」按鈕。

這一次，您要新增外部網站 (Google 地圖) 的連結，讓行動裝置訪客能輕易在新開的瀏覽器視窗查看完整版的地圖。

5. 複製下面的連結並將其貼上至「連結」選單的欄位：

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

6. 按一下「連結」選單左方的「連結」文字。在顯示的對話方塊中，選取核取方塊「在新視窗或標籤中開啟連結」。另外，也在「工具提示」欄位輸入下列文字：「Adobe Fremont 的地圖」。

7. 在「連結」對話方塊外按一下，將其關閉。

接著，您將要在「Section 03」(區段 01) 頁面加入內容。

1. 按一下「Scratch (桌上型電腦)」索引標籤返回「Scratch」頁面。選取白色圓角背景矩形、紫色 03 圓圈、「Section 03」文字框、聯絡表單以及送出按鈕。複製選取的項目。
2. 按 Command+J (Mac) 或 Ctrl+J (Windows) 並輸入「Section 03」的最初幾個字母。按一下向下鍵選取「Section 03」(區段 01) 手機頁面，再按 Return/Enter 以「設計」視圖開啟。
3. 將您在第 1 步驟中複製的元素貼至手機版面的「Section 03」頁面。使用「選取」工具將其依據對齊參考線置中於頁面。複製至手機版面時，會保留原先套用於桌上型電腦「聯絡表單」Widget 的樣式。為行動版面所做的唯一變更，即是調整表單及表單元素大小以符合小螢幕。

「Section 03」頁面含有「聯絡表單」Widget，使用 Business Catalyst 伺服器端程式碼及資料庫，處理送出的表單資料。當您在 Muse 按下「發佈」並上傳網站檔案時，表單功能即可自動生效。

注意：雖然您可以使用其他服務供應商來存放您的 Muse 網站，但需注意，若非使用 Business Catalyst 伺服器來進行存放，則需額外編寫程式碼才能使表單生效。

在此樣本專案中，聯絡表單並未啟用 CAPTCHA。CAPTCHA 是「聯絡表單」Widget 的「選項」選單設定之一，加入此選單可在送出表單時確認是由人工送出，而非程式或「廣告程式」自動寄送；CAPTCHA 介面會顯示一個影像，其中印有一串字元，要求訪客輸入同樣字串才能使用表單成功送出訊息。雖然廣告程式濫用表單是個問題，但是也必須考量網站在手機的易用性。若表單填寫過於困難，訪客就可能決定不送出訊息。

現在已完成「Section 03」頁面。「送出」按鈕並不需要加入連結，因為此按鈕已在「聯絡表單」Widget 中設置完成。

手機版面最後一頁「Section 04」含有「幻燈片展示」Widget。Muse 的 Widget 設計相容於所有現代桌上型電腦及行動裝置瀏覽器並通過測試，所以您不必做任何變更，幻燈片展示即可在觸控式螢幕使用。

請依下列步驟操作，將桌上型電腦版面暫存頁的內容複製至手機版面的「Section 04」(區段 04) 頁面：

1. 按一下「Scratch (桌上型電腦)」索引標籤返回「Scratch」頁面。選取白色長形背景矩形、紅色 04 圓圈、「幻燈片展示」Widget 以及「Section 04」文字框。您可以使用「選取」工具，以拖移方式框住所有元素，一次選取全部。複製選取的項目。
2. 按一下 Command+J (Mac) 或 Ctrl+J (Windows) 並輸入「Section 04」最初的幾個字母。按一下向下鍵選取「Section 04」(區段 01) 手機頁面，再按 Return/Enter 以「設計」視圖開啟。
3. 將您在第 1 步驟中複製的元素貼至手機版面的「Section 03」頁面。使用「選取」工具將其依據對齊參考線置中於頁面。複製至手機版面時，仍會保留桌上型電腦「聯絡表單」Widget 所套用的樣式。為行動版面所做的唯一變更，即是調整表單及表單元素大小以符合小螢幕。當您使用互動功能在 Muse 行動版面加入 Widget 時 (例如「幻燈片展示」Widget)，您會發現「選項」面板含有「啟用撥動」選項。此選項預設為開啟，所以您在行動版設計加入的任何 Widget 均已自動設定允許訪客在觸控式螢幕輕點並使用手勢。「Section 04」頁面含有「幻燈片展示」Widget，會在輕點縮圖時顯示對應的影像。幻燈片展示設定使用水平轉變效果，切換收藏庫中的影像。此範例需要使用者互動才能顯示相片，但是您也可以設定「幻燈片展示」Widget 自動播放，在頁面載入時即開始循環顯示影像。

注意：若您設定「幻燈片展示」Widget 使用「淡化」、「水平」或「垂直」轉變，則 Muse 程式碼會自動啟用撥動手指手勢，允許訪客在觸控螢幕撥動影像，切換幻燈片展示的影像。

在下一節，在 Muse 建立行動版面設計，您將學習如何輕鬆更新所有行動平台的資源，以及如何為每個行動版面發佈您的 Muse 網站。

與桌上型電腦相比，平板電腦及智慧型手機處理器效能較有限、連線速率較慢，儲存容量較小。因此，設計並製作行動裝置網站時有一些特別的考量。

Muse 含有許多功能可協助您最佳化行動版面所顯示的圖形，確保網站迅速載入且效能良好。

1. 按 Command/Ctrl+7 顯示桌上型電腦版面，然後按兩下「A-主版」桌上型電腦檔案將其開啟於「設計」視圖。
2. 在面板組按一下「資源」索引標籤，使其成為作用中面板。或者，若面板未開啟，請選擇「視窗 > 資源」。
3. 選擇綠色山丘的背景影像。此資源會在「資源」面板中亮起。
4. 按一下資源名稱「background.jpg」，展開用於此網站的實例清單。請注意背景影像列出三次，其中兩次有不同圖示，表示在手機與桌上型電腦版面均有使用。

在這個小型範例網站中，資源清單尚屬容易掌握，但是當您建置大型網站時，資源清單就可能變長，不易尋找。

為使資源清單較容易導覽，可以選取每個資源的第一個項目後，按一下左方箭頭將整組資源收合。再按一次，即可展開查看該資源在網站專案中所有使用實例的完整清單。

若要找到特定版本所使用的資源，請按一下「資源」面板最右方頂端顯示桌上型電腦、平板電腦或手機圖示的欄位。如此即可將資源清單彙整排序，依照所使用的版面歸類。

若希望對圖形所做的變更可一併更新所有使用實例 (包含所有版面)，您可以在資源名稱按滑鼠右鍵，從顯示的選單選擇「編輯原稿」。

您置入的原始檔案即會在 Photoshop、Fireworks 或原本建立該檔案所使用的影像編輯程式中開啟，讓您迅速進行修改。

當您儲存修改過的檔案並返回 Muse 後，「資源」面板會在該項目顯示「未同步」圖示，表示該圖形在網站中的版本已不符合來源檔案。再次以滑鼠右鍵按一下該檔案，選擇「更新」，即可將圖形的所有反覆項目更新為使用新版本。

有多種選擇可以預視您所建立的網站設計：

在桌上型電腦版面的「設計」視圖時，按一下「預視」可使用內建的 Webkit 模擬器來呈現 HTML、CSS 與 JavaScript。「預視」功能讓您可在發佈網站，並使用裝置查看線上版本之前，事先檢查版面在瀏覽器的呈現效果。

在手機版面的「設計」視圖時，按「預視」可看到手機版面的畫面。使用「預視大小」選單選擇 iPhone 4、iPhone 5、Samsung Galaxy S III 及 Nokia Lumia 920，查看版面在不同螢幕大小的效果。

按一下「預視大小」視窗右方的圖示，切換垂直及水平模式顯示版面。

「預視大小」提供預先定義的高度與寬度比例，涵蓋大多數常見的手機螢幕尺寸。

有些智慧型手機螢幕較寬，例如 Motorola Droid。若訪客擁有較寬的顯示器，則 Muse 的視框功能會自動縮放手機版面寬度，配合螢幕實際可用的空間。

在預視模式下，您可以試按連結並導覽網站。您可以捲動頁面，此即模擬手指滑動手勢；不過若要實際測試，仍需在裝置上測試。

若您在「預視」模式按一下「預視大小」旁的「i」按鈕，即可看到提示，並提供連結說明名為 Edge Inspect 的 Adobe 工具。Edge Inspect 讓您使用 Chrome 瀏覽器擴充功能將行動裝置連接至電腦，然後同步您在桌上型電腦 Chrome 瀏覽器檢視的內容。

使用 Edge Inspect，即可利用 Chrome 與 Adobe Muse 的「在瀏覽器預視」選項，在桌上型電腦檢視網站的同時，自動於連接的裝置顯示相同頁面(請務必將 Chrome 設為預設瀏覽器)。

若有需要，也可以購買一個稱為 Reflection 的第三方工具；此工具讓您在桌上型電腦螢幕上顯示裝置模擬畫面 (裝置則使用相同網路連線連接)。使用智慧型手機或平板電腦瀏覽網站時，模擬器即顯示該裝置的觸控螢幕畫面。

黏性頁尾

如同舊版 Muse 一樣，您可以拖移參考線定義頁面下方部分，設定頁尾區域。您也可以將任何內容元素設為「頁尾項目」，如此將使該項目顯示於「網站屬性」中所設定最小頁高之下，或是在現有頁面內容之下，視何者較長而定。

當網站各頁面長度不同時，定義頁尾內容即相當實用；因為頁尾的垂直位置會隨之調整，一致顯示在頁面底端而不會蓋過頁面內容。

依照預設，「黏性頁尾」選項會啟用。此功能是專為擁有大尺寸桌上型螢幕的訪客所設計。大多數情況下，您的網站均應啟用「黏性頁尾」選項，因為如此在瀏覽器視窗大幅超過網頁設計大小時，仍可讓頁尾保持於合適位置；例如使用 Apple Cinema 顯示器時。

要實際看到其效果，可在瀏覽器預視 Muse 網站後，將頁面縮小。注意到當頁面內容大幅小於瀏覽器視窗時，頁尾下方的區域會顯示瀏覽器視窗，而不會將頁尾固定於最下方。

當您在 Muse 建立新網站時，即可看到「新增網站」對話方塊中已啟用「黏性頁尾」選項。

一般而言，設計網站最好都使用「黏性頁尾」。但是，若您注意到頁面長度遠遠超出應有長度 (因為網站的頁面內容極少，導致頁面偏短)，隨時可以在「頁面屬性」對話方塊中取消選取該核取方塊，停用此功能。

固定的元素

Muse 產生的程式碼均經測試，確保在所有現代網頁瀏覽器及平台均能如預期顯示與操作。

而桌上型電腦與行動裝置瀏覽器之間有所差別的網頁標準之一，就是固定的頁面元素支援。為桌上型電腦瀏覽器設計網站時，您可以選取元素後，使用「控制」面板將其固定於瀏覽器視窗。固定功能在建立一致的導覽元素時非常實用。當您需要在較長頁面中，不論訪客捲動至何處均維持特定元素於固定位置時，此功能亦同樣實用。

在本文著筆之時，行動裝置瀏覽器對於固定的物件支援並不一致。因此，為手機與平板電腦版本設計網站時，必須針對固定的物件另外設計解決方案。

設計手機或平板電腦版面時，您會發現「固定」選項為灰色且處於非作用中狀態。

您可以在 Muse 以平常發佈桌上型電腦版網站的同樣方式，發佈含有多種版面的網站。發佈試用網站並使用行動裝置檢視線上版本，實際測試小螢幕顯示效果也相當有幫助。

按一下「發佈」或選擇「檔案 > 上傳至 FTP 主機」將網站檔案上傳至主控伺服器。

當您發佈含有多種版面的 Muse 網站時，會使用單一 URL 推送上線。所以您僅需要註冊一個網域名稱，例如：

http://www.my-site.com

當您發佈含有兩個或三個不同版面的網站時，Muse 會為網站產生程式碼，內含偵測指令碼能夠辨識訪客所使用的電腦類型或裝置，以及存取頁面所用的瀏覽器類型。

偵測程式碼判斷平台與瀏覽器版本後，會自動顯示正確的版面。您不必做任何動作即可確保使用平板電腦的訪客看到平板電腦設計，使用智慧型手機的訪客則會看到手機設計。這一切都在幕後發生。

Muse 全新的行動版面功能讓您最佳化行動版面，使裝置使用者不會下載不必要的大檔案。替代版面的功能會改而提供縮小過、檔案也較小的影像檔案，使網站在全部平台與瀏覽器均擁有優秀的表現。

若要瞭解有關使用 Muse 的詳細資訊，請參閱 Adobe Muse 說明頁面的文章與教學課程。

按一下「主版 (桌上型電腦)」索引標籤，使桌上型電腦版面的主版頁面成為「設計」視圖的作用中頁面。

Muse 內建「跳至頁面」工具可輕易在不同版面之間切換。所有含有多種版面的專案中，均會於「設計」視圖顯示此按鈕。

1. 按一下「跳至頁面」按鈕。

使用多個版面時，能夠迅速在兩頁或更多頁面之間移動是非常實用的，可讓您輕易複製貼上內容。

注意：除了按「跳至頁面」按鈕，也可使用鍵盤組合鍵 Command+J (Mac) 或 Ctrl+J (Windows)。

畫面會顯示「跳至頁面」對話方塊。其中含有文字欄位，可輸入網站頁面開頭的幾個字，讓您輕易跳至該頁而不必一再返回「規劃」視圖。

2. 輸入您要尋找的頁面名稱前三個字母。本範例中請輸入「Master」的前三個字母：mas。

該欄位會掃描網站以尋找所有符合的頁面名稱，並顯示於下方清單。

3. 按兩下向下鍵選取「A-主版」(手機) 頁面，再按 Return/Enter 將其開啟。

「主版 (手機)」頁面會在「設計」視圖開啟，可以進行編輯。

另一個便於在網站不同版面間切換的方法，是使用新設的鍵盤組合鍵：

• Command/Ctrl+7 顯示桌上型電腦版面
• Command/Ctrl+8 顯示平板電腦版面
• Command/Ctrl+9 顯示手機版面

這些組合鍵僅在所編輯的網站含有其對應版面時，才可使用。請自行試用這些新組合鍵，養成一套您在不同版面與特定頁面之間切換用的慣用工作流程。

接下來，您將要建立第二個手機主版頁面，並加入設計元素。