在 Adobe Muse 中建立頁首與頁尾

Adobe Muse 可讓您以簡單的方式建立網頁的頁首與頁尾。維持頁首與頁尾外觀相同，使網站的外觀一致是一個不錯的做法。若要達成此效果，您可以在 Adobe Muse 中的「主版」定義頁首與頁尾元素。更新「主版」頁面時，網站上的頁面都會進行變更。

使用 HTML 和 CSS 建置網站時，根據每個頁面上顯示的獨特內容，各頁面的高度通常都不同。Muse 包含允許網站頁面根據各頁面上的獨特內容顯示不同長度的功能。您可以設定區域，使每個頁面無論高度為何，其頁首始終保持位於頂部位置，而其頁尾內容始終直接顯示在頁面內容下方。

開始定義頁面的頁首與頁尾區域前，請確定頁首與頁尾參考線已顯示。若未顯示，請選擇「檢視 > 顯示頁首與頁尾」。

或者，您也可以使用「控制」面板中的「檢視」選單來啟用「頁首與頁尾」參考線。

如果您想要，您也可以在工作區的左側，也就是瀏覽器視窗區域之外按一下滑鼠右鍵。然後在顯示的環境選單中啟用「顯示頁首與頁尾」選項。

使用參考線與尺標

若要重新放置頁首與頁尾參考線，必須啟用尺標。尺規可讓您將參考線設定到精確的像素位置。依照預設，也會顯示標準參考線 (顯示您在建立新網站時所設定之欄數的參考線)。

五條藍色的水平參考線會橫跨頁面寬度。從最上方開始，這五條參考線分別用來定義頁面頂部、頁首的最下方邊緣、頁尾的最上方邊緣、網頁的底部以及瀏覽器視窗的底部。當您拖移參考線來定義這些區域時，會有工具提示說明每條參考線及其目前的位置。放大頁面可能會對您很有幫助，因為這樣就可以放大頁面，更精確地放置參考線。

中間的三條參考線定義了將會顯示在頁首及頁尾區域的內容。剩餘的中間區域是您要新增獨特頁面內容的區域；此中間區域會展開以符合置入各頁面上之元素的高度。

您也可以選取頁面上的矩形與元素。使用所選元素的邊界方塊在設定頁首與頁尾區域時，協助您對齊參考線。

定義頁首與頁尾元素

若要定義「頁首與頁尾」元素，請執行下列操作：

1. 將「頁面底部」參考線與「瀏覽器底部」參考線拖移到頁面底部的相同位置，緊靠著頁尾矩形的下方，如下圖所示。

2. 在包含並排顯示背景影像的頁尾中選取矩形。拖移「頁尾」參考線，直到它與頁尾矩形的頂部對齊為止。
3. 使「頁面頂端」參考線留在最上方 (在 Y: 0 px 的位置)。將「頁首」參考線向下拖移至想要的層級。

頁首內容將會顯示在頁面頂部與「頁首」參考線之間的區域中。

在設計過程中，若需要重新調整參考線使其符合頁首與頁尾內容，您可以隨時返回「A-主版」頁面。

按一下「規劃」連結，或按一下標記為 katiesCafe 的索引標籤即可返回「規劃」視圖。

請注意，網站中的所有頁面縮圖現在會顯示您新增至已連結「A-主版」頁面的設計元素。

在設計網站時，您對主版頁面所做的變更會隨時自動更新連結的頁面。主版頁面可讓您輕鬆更新或維護網站，因為只要您更新一個主版頁面，即可變更網站的外觀。

置入影像以填入頁首內容

由於網站標誌將顯示在網站的每一個頁面上，因此最好將其置入主版頁面的頁首中。

接著，您要置入其他影像，以作為「選單列」Widget (將在下一節中新增) 的背景圖形。

使用黏性頁尾

使用「黏性頁尾」選項可讓您將「頁尾」元素貼在網頁上。「黏性頁尾」是專為使用大尺寸桌上型螢幕的訪客所設計。啟用「黏性頁尾」選項會讓頁尾留在想要的位置，即便瀏覽器視窗大幅超過網頁設計的大小也一樣。

在 Muse 中建立網站時，會於「新增網站」對話方塊提供「黏性頁尾」選項 (「檔案 > 新增網站」)。您也可以在「頁面屬性」(「頁面 > 頁面屬性」) 和「網站屬性」對話方塊 (「檔案 > 網站屬性」) 存取「黏性頁尾」。

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

如果您要為整個網站停用此功能，可在「網站屬性」對話方塊中取消選取該選項。