註解:

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

使用階層式主版頁面

Muse 可讓您建立可套用到其他主版頁面的主版頁面。階層式主版頁面的工作方式與主版頁面套用至「規劃」視圖中頁面的方式相似。在 Muse 之前的版本中,您可以建立多個主版頁面,但一次只能將一個包含一組頁面元素的主版頁面套用至網頁。

在過去,如果您要建立一個包含兩個不同區段,但這兩個區段相似,而每一區段又擁有唯一外觀的網站,您可以複製主版頁面、略微變更一下,然後再將其套用至特定頁面。這樣一來,這兩個主版頁面通常會包含一些相同的元素,因此當您更新網站時,就必須編輯兩個主版頁面中的內容,以保持所有元素的同步化。

而現在使用 Muse 4.0 及以上版本時,您便可以建立一個「A-主版」頁面,其中包含會顯示在多個主版頁面中的共用元素 (例如之前幾節所述的新增背景及頁尾),然後再建立繼承「A-主版」頁面中所有元素的其他主版頁面,再加上第一區段所特有的任何元素。若您建立了第三個主版頁面,則該頁面可以使用「A-主版」頁面中的元素,以及第二區段所特有的任何元素。

使用階層式主版頁面的好處是,您可以限制某元素相對於一個實例的出現次數。在重新設計網站時,只需要編輯每個元素一次,它的所有實例就會自動在網站中更新。

您可以在「規劃」視圖中管理及套用主版頁面。就像您可以按一下主版頁面縮圖並將其拖移至頁面縮圖,以將主版頁面套用至頁面一樣,您也可以建立多個主版頁面,然後再按一下主版頁面並將其拖移到另一個主版頁面上。或者依您的個人喜好,您也可以在「規劃」視圖中的任何主版或頁面縮圖上按一下滑鼠右鍵,並使用所顯示環境選單中的「主版」選項來設定主版。

請注意,當您將滑鼠游標停留在頁面或主版頁面名稱上時,工具提示會針對該頁面或主版頁面顯示所套用主版的階層。

現在,您已建立包含瀏覽器填色並排顯示背景及頁尾內容的「A-主版」頁面。在下一節,您將建立一個繼承「A-主版」頁面內容的新主版頁面,然後再新增頁首,以便您可以將其套用至網站頁面。請依照下列步驟進行:

  1. 當在「規劃」視圖中檢視網站地圖時,請將游標置於「A-主版」頁面縮圖上,以便能夠看到顯示在兩側的加號按鈕。按一下「A-主版」頁面右側的加號來建立一個全新的主版頁面。依照預設,新主版頁面名為「B-主版」。
  2. 按兩下縮圖下方的「B-主版」文字欄位進行編輯。為您剛建立的新主版頁面輸入一個更具描述性的名稱:「主要」。
  3. 在「主要」主版頁面縮圖上按一下滑鼠右鍵,然後從顯示的環境選單中選擇「主版 > A-主版」。
在本教學課程中,您將會熟悉 Adobe Muse 工作區,並瞭解如何在不用撰寫任何程式碼的情況下建置一個功能健全的網站。您也將會瞭解如何建置網站地圖、處理多個主版頁面,以及瞭解 Muse 的瀏覽器填色選項。
在選單中選擇「A-主版」來將其套用至「主要」主版頁面。

請注意,在您將「A-主版」頁面套用至「主要」主版頁面之後,「主要」主版頁面縮圖會更新以顯示相同的外觀。「主要」主版頁面縮圖下方的藍色標籤表示為「A-主版」,這是因為您在步驟 3 中將它套用至「主要」主版頁面。

一個重要的區別是,「主要」主版頁面實際並不包含「A-主版」元素,您並不是只複製了「A-主版」,而是將「主要」主版頁面設定為了「A-主版」的連結,這表示您新增至「A-主版」的任何新內容也將自動顯示在「主要」主版頁面上。

如前所述,有關階層式主版的一個優點是頁尾、選單以及背景仍只存在於「A-主版」頁面。因此,如果客戶在之後要求您使用不同的並排顯示背景,您可以更新「A-主版」頁面,然後「主要」主版頁面將會自動更新。

在本教學課程稍後的部分中,您將會為兩個不同網站部分的不同外觀建立兩個不同的主版。不過現在,您可以在「規劃」視圖中將頁面更新為全部使用新的「主要」主版頁面,而不是使用「A-主版」頁面。

  1. 按一下「主要」主版頁面,並將其拖移至左上角的「food」頁面縮圖。請注意,隨著您將「主要」主版頁面縮圖拖放到「food」頁面縮圖上,「food」頁面縮圖下方的藍色文字會從「A-主版」更新為「主要」。

這是在「規劃」視圖中將主版頁面套用至頁面的最常用方式,不過您也可以嘗試使用環境選單來予以套用:

  1. 在「活動」頁面縮圖上按一下滑鼠右鍵,然後在顯示的環境選單中選擇「主版 > 主要」。
在本教學課程中,您將會熟悉 Adobe Muse 工作區,並瞭解如何在不用撰寫任何程式碼的情況下建置一個功能健全的網站。您也將會瞭解如何建置網站地圖、處理多個主版頁面,以及瞭解 Muse 的瀏覽器填色選項。
使用環境選單來將「主要」設定為「events」(活動) 頁面的主版頁面。

  1. 使用您偏好的方法 (如步驟 4 和 5 所述) 將「主要」設定為其餘三個頁面的主版頁面,即「home」(首頁)、「about」(簡介) 及「visit」(位置)。

進行完此變更之後,各頁面縮圖下方的所有藍色文字標籤現在應該都會顯示「主要」。如果您將滑鼠游標停留在任何藍色標籤上,會出現工具提示,顯示已套用主版頁面的階層。

在本教學課程中,您將會熟悉 Adobe Muse 工作區,並瞭解如何在不用撰寫任何程式碼的情況下建置一個功能健全的網站。您也將會瞭解如何建置網站地圖、處理多個主版頁面,以及瞭解 Muse 的瀏覽器填色選項。
當您將滑鼠指向標籤時,會顯示描述階層的實用工具提示。

在此範例中,階層只有一層深。換句話說,也就是「主要」主版頁面繼承「A-主版」頁面內容。不過請注意,您也可以根據需要建立主版頁面鏈。例如,您可以先建立一個名為「頁首」且只包含頁首內容的主版頁面,再建立一個名為「頁尾」且繼承「頁首」主版頁面內容的主版頁面,然後再建立一個名為「主要」且繼承「頁尾」主版頁面 (也包含頁首) 上所有內容的主版頁面。根據網站的設計以及您對某些元素可能會有所改變的認知,您可以建構繼承層級來將其設定為數層深。以此方式劃分設計有點像是建立符號,因為您可以隔離設計的特定部分,然後再於稍後根據需要輕鬆找到及編輯該部分。

請繼續閱讀下一個教學課程,「用 Muse 建置您的第一個網站,第 2 部分」,在這裡您將會學習如何使用 Widget (供您拖移到頁面上的預建網站互動網站功能)。Widget 可讓您快速將進階功能新增至頁面,而不必撰寫任何程式碼。您將會學習如何編輯 Widget 的行為與外觀,來自訂它們在網站設計中的顯示方式。

新增頁首內容至「主要」主版頁面

您已在「主要」主版頁面新增「選單」Widget,完成頁尾部分,現在您將新增頂層的導覽功能。請依照下列步驟將內容新增至頁首區域。

  1. 在「規劃」視圖中,按兩下「主要」主版頁面縮圖來在「設計」視圖中將其開啟並編輯 (若尚未開啟)。
  2. 使用矩形工具畫出一個矩形,起點在可見瀏覽器區域左上角,寬度則與整體寬度相同,止於右上角。使用「選取工具」拖移矩形的上方、左方與右方的控制點,直到看到紅色邊框短暫顯示為止;這代表矩形已設為 100% 寬度,此與建立頁尾的方法相同。
fig_30_building
畫出一個佔滿瀏覽器視窗頂端區域的矩形。

 

拖移控制點後,矩形尺寸應約寬 1160 像素、高 253 像素。水平 X 值為 -100,代表矩形左上角位於頁面左上角的 100 像素處。Y 值為 0 (代表矩形左上角與頁面左上角垂直相符)。若要精確設定這些值,可在選取矩形的狀態下檢閱「變形」面板或「控制」面板的欄位。

  1. 設定線條寬度為 0,並用「填色」選單將填色顏色設定為「無」。按一下「影像」區段右側的檔案夾,然後瀏覽以選取名為 tile-header.png 的影像。將「符合」選單設定為「水平並排」。
fig_31_building
使用「符合」選單使背景影像水平並排。

 

雖然頁首僅由單一矩形構成,但是其中水平並排填滿的背景影像會創造出灰色矩形存在於黑色矩形之上的印象。

  1. 選擇「檔案 > 置入」,或使用鍵盤捷徑 Command+D (Mac) 或 Control+D (Windows) 來開啟「讀入」對話方塊。
  2. 瀏覽以選取樣本檔案檔案夾內名為 bg-ribbon.png 的檔案。按一下「開啟」選擇該檔案,然後關閉「讀入」對話方塊。
  3. 在頁首矩形的中央接近頁面頂端處按一下。如此即會以原始尺寸置入一份 bg-ribbon.png 檔案執行個體。
  4. 使用「選取」工具將橘色長條圖形對齊,使它垂直置中於頁首頂端附近,且涵蓋整個頁面寬度。
fig_32_building
橘色長條圖形置中於頁首內。

 

這個橘色長條圖形會成為下一節中要新增的頂層選單之背景。

複製主版頁面

「主要」主版頁面的頁首內容已完成。雖然您可以直接在網站中的每一個頁面使用「主要」主版頁面,但是此網站設計共有兩個部分。「主要」主版頁面設計最終會用於「home」及「visit」頁面。另一個稍微不同的主版頁面則會用於「food」、「events」以及「about」頁面。

請依下列步驟複製「主要」主版頁面:

  1. 在「規劃」視圖中,以滑鼠右鍵按一下「主要」主版頁面縮圖。
  2. 在出現的環境選單中,選擇「複製頁面」。
fig_38_building
使用選單複製現有的「主要」主版頁面。

 

在「主要」主版頁面右側會出現新的主版頁面,其預設名稱為「主要複本」。因為您複製了「主要」主版頁面,所以新的主版亦是依據「A-主版」頁面。

  1. 在您剛建立的主版頁面下方,連按兩下名稱欄位,並將其重新命名為「Foreground」(前景)。

在下一節中,您將學習如何設定主版頁面元素排列順序,讓各個項目能夠顯示於頁面元素上方,不再僅顯示於下方。此時是您儲存工作成果的好機會。

  1. 請選擇「檔案 > 儲存網站」。

建立主版頁面複本的好處之一,就是能將部分內容設定顯示於其他頁面內容之上,形成有若「排列 > 移至最前」的效果。我們將在「food」及「events」頁面使用此種「前景」顯示。

設定主版頁面元素的堆疊順序,是 Muse 4.0 的新功能。在此之前,若要將共通的網站元素置於頁面版面的其他內容之上,就必須將頁首或頁尾元素置入每一頁,而非僅置於主版頁面。

設定主版頁面中的元素,使其在前方顯示

您可在 Muse 的「設計」視圖介面選取頁面元素,並選擇「物件 > 移至最前、前移、移至最後或後移」,使一個項目顯示在頁面上另一個項目的上方或下方。(您也可以在元素或群組上以滑鼠右鍵按一下,並選擇「排列 > 移至最前、前移、移至最後或後移」,以設定堆疊順序)。

若使用舊版 Muse 設計網站,呈現頁面時,預設是將主版頁面的所有元素永遠顯示於頁面所有元素之後。這種背景的分層放置有時會相當麻煩 (視網站設計而定),因為唯一的因應措施即是將您原本會置於主版頁面的元素拷貝,並貼上至所有您希望於頂端顯示這些元素的網站頁面。

Muse 提供可控制主版頁面元素排列的新功能。現在,您不必再將主版頁面的所有東西一律顯示於頁面元素之後,而是可以選擇主版頁面的元素,並設定將其顯示為前景元素。主版頁面設為前景元素的項目,會顯示在所有頁面元素之上。

這個新的選項可在「物件 > 移動至 > 主版前景」找到。另外,您也可以於「設計」視圖編輯主版頁面時,以滑鼠右鍵按一下任何元素,在顯示的環境選單中選擇「移動至 > 主版前景」。

在此樣本專案的設計中,「home」(首頁) 與「visit」(位置) 頁面的內容使用預設堆疊順序 (即頁面元素顯示在「主要」主版頁面的頁首頂端),但是「food」(餐點)、「events」(活動) 以及「about」(簡介) 頁面則否。

在「food」與「visit」頁面,您將更新「前景」主版頁面,使頁首內容顯示於前景,即使頁面捲動也仍在頁面內容之上。請依照下列步驟操作:

  1. 在「規劃」視圖中,按兩下「Foreground」(前景) 主版頁面縮圖來在「設計」視圖中將其開啟並開始編輯 (若尚未開啟)。
  2. 使用「選取」工具,按一下並拖移整組頁首內容,包括含有並排顯示背景的矩形、置入的橘色長條圖形、「選單」Widget,以及中央的 GIF 標誌動畫。
  3. 選取整個頁首內容後,按一下滑鼠右鍵並選擇「移動至 > 主版前景」。請注意,此時與一般選取物件顯示藍色邊框不同,設定顯示於前景的項目在選取時會顯示紅色邊框。
fig_39_building
使用環境選單將頁首內容移至前景。

如此可確保在套用「Foreground」(前景) 主版頁面的頁面上,頁首將會顯示在頁面元素的頂端。

  1. 在仍然選取整個頁首的情況下,您將把頁首固定於頁面頂端,如此即使頁面捲動,頁首也不會隨之捲動。您將在第 7 部分中學習如何固定物件,但是現在請直接按一下「控制」面板的上方中央固定位置,將頁首固定住。
fig_40_building
選取上方中央固定位置,將選取的頁首固定。

  1. 按一下「前景」主版頁面,並將其拖移至「food」頁面,進行套用。再重覆此步驟兩次,將「前景」主版頁面套用至「events」頁面及「about」頁面。

完成此變更後,藍色標籤文字將顯示「前景」一詞,代表「food」、「events」以及「about」頁面均正在使用「前景」主版頁面。若您將游標移至藍色「前景」標籤上,就會顯示工具提示,指出「前景」主版頁面是依據「A-主版」頁面設計。

設計您自己的網站專案時,可嘗試使用新的「移至前景」功能,將主版頁面的元素設定為顯示在最前面。之後在本教學課程系列中,您會將「food」與「events」頁面的設計定稿,並瞭解前景設定是如何確保頁首顯示在其他頁面內容之上。

在本教學課程下一節,「用 Muse 建置您的第一個網站,第 4 部分」,您將看到如何使用嵌入式 HTML 來顯示從其他網站拷貝的原始碼。您也將學習如何新增「影像預視燈箱排版」Widget,著手建置「home」頁面。

使用多個主版頁面及併入動畫

在本節中,您將學習使用主版頁面以及如何在多個主版頁面中顯示常用網站內容以建立一致性,同時建立網站的不同區段。您也將學習從主版頁面移動元素的方法,因為在某些網站設計中,您可能會發現建立多個主版頁面並只將特定圖形置於每一個頁面上 (例如包含四種顏色編碼區域的網站) 很有用。您還會學到如何將通常位於主版頁面上的元素移至特定的個別頁面,來建立設計效果,例如在彼此之上分層項目。

編輯主版頁面內容

置入主版頁面上的物件將會在您置入各頁面上的任何內容下方分層顯示。例如,您置入「首頁」頁首或頁尾中的任何物件都會在置入主版頁面頁首及頁尾的背景上方分層顯示。因此,您可能會遇到這樣的情況,即您需要從主版頁面移動元素,並將其置入各頁面上,以使這些元素顯示在頁面中的其他元素之上。

新增至主版頁面的內容必須在之後透過開啟主版頁面進行編輯。如果您開啟與主版頁面關聯的頁面,並嘗試編輯頁首、頁尾或其他主版頁面內容,它看起來會像是已鎖定。當需要變更主版頁面上的內容時,您可以使用兩種不同的策略:

  1. 在「規劃」視圖中按兩下主版頁面縮圖,然後在「設計」視圖中編輯主版頁面的內容。

  2. 在「規劃」視圖中按兩下主版頁面縮圖,以在「設計」視圖中將其開啟。選取您要編輯的元素 (但需要將這些元素置入網站頁面,來使其位於其他元素之上),然後選擇「編輯 > 剪下」,或使用鍵盤快速鍵 Command-X (Mac) 或 Ctrl-X (Windows)。

  3. 返回「規劃」視圖,然後按兩下將包含內容的頁面 (之前是主版頁面)。選擇「編輯 > 就地貼上」。如此可確保將您從主版頁面剪下的元素放在一般頁面上的相同位置。如有需要,您可以開啟多個頁面並選擇「編輯 > 就地貼上」,來將位於主版頁面的內容均分至網站的各個頁面中。

您也可以根據需要複製現有主版頁面。您可以將網站設定為大多數頁面使用一個主版,而特定頁面使用主版的複製、相似版本 (包含從該複製主版頁面拷貝到網站特殊頁面的特定元素)。若要瞭解有關複製主版頁面的詳細資訊,請參閱下一小節。

若物件位於個別頁面而不是主版頁面上,您可以根據需要按頁面來編輯物件,並確保物件顯示在最上方。

在此樣本專案中,網站目前將 Kevin's Koffee Kart (凱文的咖啡車) 標誌 (掛著橫幅的紅色腳踏車) 顯示在頁首中網站導覽的正上方。頁首與頁尾內容會自動顯示在每個頁面上,因為依照預設,「Home」(首頁) 頁面 (以及您建立的其他每個頁面) 會連結至包含此內容的「A-主版」頁面。在多數情況下,您可能會選擇使用相同主版頁面來建置所有網站,以在網站間建立一致性。

不過,此網站擁有一個只顯示在「Home」(首頁) 頁面上的唯一動畫標誌。如果您檢閱 Kevin's Koffee Kart (凱文的咖啡車) 網站的即時上線範例,您會發現,「Home」(首頁) 頁面上的紅色腳踏車標誌動畫會在頁面第一次載入時播放,呈現腳踏車從左側騎入頁面的效果。當您四處按一下來造訪其他頁面時,您會發現動畫只在「Home」(首頁) 頁面播放;網站頁面上的其他所有標誌都是靜態的。

在以下小節中,您將學習如何建立重複的主版頁面,以及如何指定頁面來使用「規劃」視圖中的特定主版頁面。

複製及刪除主版頁面

  1. 按一下「規劃」連結來存取「規劃」視圖。找到位於「規劃」視圖介面底部的「A-主版」縮圖。

  2. 將游標置於「A-主版」縮圖上,並注意當您將指標指向到它上面時,您會看到相同的加號 (+) 圖示,與您在將新頁面新增至網站地圖時所看到的加號一樣。按一下「A-主版」縮圖右側的加號 (+)。當您要從頭開始建立全新的主版頁面時,可以使用此技巧。請注意縮圖是空白的,這表示它並不包含您已新增至「A-主版」頁面的內容。依照預設,新的主版頁面名為「B-主版」,不過如有需要,您可以按一下縮圖下方的欄位來重新命名。

    在此情況下,您將會建立現有「A-主版」的複本,而不是建立全新的空白主版頁面。

  3. 按一下「B-主版」頁面右上角的 X 圖示,將其刪除。(如果您在使用此方法時意外刪除了現有主版頁面,請選擇「編輯 > 還原刪除主版頁面」將其還原)。

  4. 在「A-主版」頁面縮圖上按一下滑鼠右鍵,然後從出現的環境選單中選擇「複製頁面」。顯示重複主版頁面的新縮圖會出現,名為「A-主版拷貝」。

    fig_59_getting
    在「規劃」視圖中複製「A-主版」頁面。

  5. 按一下「A-主版拷貝」縮圖下方的欄位,然後將複製的主版頁面重新命名為:MasterFlash。您將需要使用此頁面來新增專門在「首頁」上以動畫方式顯示的多媒體內容,而其他所有頁面都將繼續指向「A-主版」頁面,它會在頁首中顯示靜態版本的標誌。

  6. 在「Home」(首頁) 頁面縮圖上按一下滑鼠右鍵。在顯示的選單中,選擇「主版 > MasterFlash」。此操作會將 MasterFlash 主版頁面與「Home」(首頁) 頁面建立關聯。

    註解:

    或者,您也可以將 MasterFlash 縮圖拖移至「HOME」(首頁) 頁面縮圖上方來加以套用。

套用之後,MasterFlash 主版頁面的名稱會顯示在「規劃」視圖「Home」(首頁) 頁面縮圖下方的括號中。

如果按一下「預視」,您不會在「Home」(首頁) 頁面中看到任何差異。由於 MasterFlash 是 A-主版檔案的一個複製拷貝,因此「Home」(首頁) 頁面的外觀會像之前一樣,並顯示靜態標誌。不過,在下一小節中,您將會編輯 MasterFlash 內容來新增只會在「Home」(首頁) 頁面播放的動畫。

使用幾乎相似 (但略有不同) 的複製主版頁面來區分網站特定部分,以及建立獨一無二的「Home」(首頁) 頁面 (如此專案所述) 是很好的方法。

在本教學課程中,您將學習如何使用主版頁面。我們將檢視三個網站版面並一一解構,探索如何利用主版頁面的通用元素,獲得各種有趣的效果並使網站設計一致。

但是首先,什麼是「主版頁面」?「主版頁面」讓您可以將通用的元素套用在網站內的多個頁面,例如頁首、頁尾、圖誌、導覽等。您可以在網站使用單一主版頁面,也可以有數個主版頁面,讓您在網站不同區域迅速套用獨特的風格,並輕易維持各區的一致性。

依照預設,新建網站時 Muse 會建立一個空白首頁及一個空白主版頁面。這些頁面是所有網站的起點。您可以在空白頁面規劃網站地圖,稍後再套用主版;或者也可以從主版開始,先套用至單一頁面 (首頁) 後,再以此為基礎建立其他頁面。

解構網站版面

一個學習新穎設計技巧的好方法,就是檢視各種不同的主版頁面版面。在本文中,我們將檢視三種在 Muse 建立的不同網站版面,探索其各自的原始建構手法。

若您想要一同操作並開啟各個範例網站的資源,請下載範例檔案,解壓縮該 ZIP 檔後,在各個 .muse 檔案按兩下以 Muse 開啟。

查看各個範例網站時,請注意其中一些有助於訪客輕鬆導覽並掌握自己所在位置的網站設計功能:

  • 設定網站屬性以定義所有頁面尺寸
  • 使用參考線在主版頁面定義頁首及頁尾區域
  • 將物件固定於瀏覽器視窗,以放置在頁面版面範圍之外
  • 設定背景影像填滿方式為捲動或固定位置,製造有趣效果
  • 放大矩陣以 100% 寬度顯示,覆蓋瀏覽器全寬
  • 加入「折疊式」Widget 與「幻燈片展示」Widget,以顯示互動式頁面內容
  • 自訂「選單」Widget 並調整風格,提供網站導覽控制
  • 連立錨點連結以垂直或水平連結至特定頁面區段
  • 貼上第三方網站的程式碼 (嵌入式 HTML) 以在頁面添加功能

當您造訪各個範例網站時,請嘗試捲動瀏覽器視窗並調整視窗大小,觀察線上範例效果。其後,在 Muse 開啟各個 .muse 檔案,查看如何應用主版頁面將網站版面標準化,建立一貫的線上體驗。

範例 1:Happy Valley Adventure (快樂谷旅遊)

fig01.master.b720

在第一個範例中,頁尾圖形是固定於瀏覽器視窗底部。除此外,頁尾背景也設為 100% 寬度,覆蓋頁面底部全寬。頁面內容超出的部分會在頁尾背景後方捲動,創造出天空漸層效果。當您按下左側錨點連結時,頁面會垂直移動至對應的區段。半透明的圖形元素加上特別設計的堆疊順序有助於營造出身處熱氣球在空中航行的體驗。

查看此網站的 .muse 檔案時,請注意下列項目:

在主版頁面中,以一連串的漸層填色矩形作為較長頁面內容的背景。

  • 首頁包含 1 個頁尾圖形,其水平並排的背景影像設定為 100% 寬度,且固定於瀏覽器視窗底部。第二個頁尾圖形 (山峰) 置中,同樣固定於瀏覽器底部,且使用「排列順序 > 移至最佳」編排顯示在頁尾其他並排圖形之上。此設計可配合任何螢幕尺寸。
  • 左側的導覽連結會跳至垂直頁面各處加入的錨點標籤。當訪客按下連結時,頁面即捲動顯示相應的內容。此設計畫面均衡,進入網站其他區域時設計也一致。
  • 「Home」(首頁) 頁面的「Contact」(聯絡方式) 區段包含嵌入式 HTML,用於顯示有利與訪客聯繫並安排近期冒險行程的聯絡表單元素。

範例 2:Kevin's Koffee Kart (凱文的咖啡車)

fig02.master.b720
此一多階層式網站使用「選單」Widget 及嵌入式 HTML 功能。

Kevin's Koffee Kart 網站的首頁中,於頁首加入了 Flash 動畫,並有固定的浮雲圖案。當您使用捲軸瀏覽頁面時,可見到背景影像固定不捲動,但是頁面內容會在其上方捲動。幻燈片展示會自動播放,在嵌入的 HTML Twitter 摘要之下循環顯示影像。

頁首的選單列使用「水平選單」Widget 顯示,建立網站一貫的導覽按鈕,每次您新增頁面即自動更新。在本範例中,「選單」Widget 設定顯示頂層及次層的頁面。

請試操作選單,觀察按鈕按下後載入頁面的反應。頁首及頁尾在所有頁面均相同,但是頁高隨內容而變。棕色的頁尾是由 2 個矩形構成,設定 100% 寬度覆蓋瀏覽器視窗全寬,如此使所有頁面更加一致。

Kevin's Koffee Kart (凱文的咖啡車) 網站的製作採用下列設計準則:

  • 網站使用兩個相似的主版頁面:無 Flash 動畫的主版頁面套用於大部分的網頁,而另一個有 Flash 動畫的主版頁面則僅套用在首頁。這 2 個主版頁面均設有 100% 寬度的頁尾,有透明的邊框設計,並使用相同的「選單」Widget 維持一致性。建立第一個主版後,我們將其中元素複製貼上至第二個主版,以確保所有元素均正確對齊。
  • 頁面編排使用「規劃」視圖來建立網站頂層及次層區域,此設計反映於「選單」Widget 的下拉式選單項目中。
  • 瀏覽器填色使用的背景影像地圖設定顯示原始大小而非並排。此影像置中且設定不捲動超過頁面內容底部。
  • 頁面的背景填色為稍微透明的純白色,以顯現背景的地圖影像。
  • 首頁包含了兩個半透明的浮雲影像,固定於瀏覽器。垂直捲動頁面即可見到固定的元素不會移動,調整瀏覽器視窗大小時也維持原位置。
  • 「Home」(首頁) 頁面使用嵌入式 HTML 即時顯示 Twitter 摘要內容。
  • 「The Koffee」頁面使用了「折疊式」Widget,按下時可展開或收合,在頁面的小面積區域顯示更多內容。
  • 「Origins」頁面使用「縮圖幻燈片展示」Widget,顯示互動式的相片收藏館。「Preparation」頁面使用錨點標籤可跳至頁面各區,而「Kart Map」頁面則使用嵌入式 HTML 顯示即時的 Google Latitude 地圖,並依目前該帳戶手機所在位置顯示。

範例 3:More than Square (不只是廣場)

fig03.master.b720
效果強烈的重疊固定圖形,框住可捲動的頁面內容。

檢視最後的範例時,請注意頁面右上角及左下角固定住的大樓影像,形成頁面內容的外框。右上的大樓排列在前,蓋在頁面內容之上,而左下的大樓則在頁面之下。

頁面內容置中,以半透明顯示,並且避開前述構造元素,以圓角框顯示。頁面內容垂直捲動,瀏覽各頁面時高度隨之變動。社交網路連結 (Twitter、Facebook 及 YouTube) 維持於頁面左方,促進分享連結,也使整個網站一致呈現出不對稱的設計感。

首頁設有相片收藏館,可用「Next」(下一張) 及「Previous」(前一張) 連結瀏覽,若訪客選擇不按下這些按鈕時,也會自動緩緩換頁展示。「How to Get Here」(交通方式) 頁面含有互動式地圖,是嵌入了 Google Maps 複製的 HTML 程式碼所製成。

查看此範例的原始 .muse 檔案時,請注意下列事項:

本範例中,幾乎所有通用的頁面元素均置於主版頁面。此做法使得日後更新網站並變更個別頁面內容時非常便利。

主版頁面的頁尾影像為不捲動的背景圖案,固定於瀏覽器左下角。主版頁面也包含了頁面的圓角、半透明頁面設計及網站導覽按鈕。

網站所有頁面右上角均有固定的影像,排列顯示在頁面內容前方,利用大樓影像的角度創造出景深錯覺。

Muse 是一個直覺化的設計工具,讓您把設計創意帶到網路上。在主版頁面置入創意元素,再加上每一頁顯示的獨特內容,讓您能製作出令人驚艷的版面設計。為客戶設計創新網站時,您將可天馬行空,毫不受限。

若要瞭解更多關於使用 Muse 的秘訣,請務必造訪 Muse 說明和教學課程頁面,或 Muse 活動頁面的即時網路研討會和影片。

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

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