在 Adobe Muse 中定義網站的頁首與頁尾區域,以新增選單、標誌、版權注意事項等內容。

註解:

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

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

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

新增頁面的頁首與頁尾

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

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

確認「頁首與頁尾」參考線已啟用。
確認「頁首與頁尾」參考線已啟用。

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

使用參考線與尺標

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

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

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

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

註解:

瀏覽器視窗的底部規定了訪客在瀏覽器中檢視網站時,顯示區域的最下方部分;根據設計而定,您可以為瀏覽器本身設定背景顏色或背景影像,以及為瀏覽器參考線底部上方的頁面底部位置設定參考線,讓背景顏色或影像在頁面內容下方顯示。

定義頁首與頁尾元素

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

  1. 將「頁面底部」參考線與「瀏覽器底部」參考線拖移到頁面底部的相同位置,緊靠著頁尾矩形的下方,如下圖所示。
在 Adobe Muse 中定義頁首與頁尾元素
在 Adobe Muse 中定義頁首與頁尾元素

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

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

拖曳「頁首」參考線來設定頁首區域
拖曳「頁首」參考線來設定頁首區域

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

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

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

請注意,在所有頁面中指定的頁首與頁尾會連結到「A-主版」
「A-主版」設計顯示在「規劃」視圖中的所有已連結頁面縮圖上。

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

置入影像以填入頁首內容

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

  1. 選擇「檔案 > 置入」。或者,如果您想要,也可以使用鍵盤快速鍵 Ctrl+D (Windows) 或 Command+D (Mac) 來置入影像。

  2. 在顯示的「讀入」對話方塊中,於 Kevins_Koffee_Kart 檔案夾中瀏覽至名為 Logo.png 的檔案並加以選取。按一下「選取」。

  3. 使用「選取」工具將標誌向上拖移到您之前定義的頁首區域頂端附近。

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

  1. 選擇「檔案 > 置入」,或針使用您作業系統的鍵盤快速鍵:Ctrl+D (Windows) 或 Command+D (Mac)。

  2. 瀏覽至 Kevins_Koffee_Kart 檔案夾,並選取名為 top-nav.png 的檔案。

  3. 在您之前定義為頁首的區域,按一下頁面的頂端部分。確保將影像放置在頁首標記上方,以便其顯示在每個頁面上的相同位置,即主要頁面內容的上方。

  4. 使用「選取」工具來拖移您剛置入的棕色長條 (功能區) 圖形,以使標誌中的紅色腳踏車輪胎剛好接觸到棕色長條 (功能區) 的頂端。這個位置會產生腳踏車騎過棕色長條 (功能區) 的效果。

  5. 再次選擇「檔案 > 置入」。瀏覽選取名為 thedrip.png 的檔案。在棕色長條 (功能區) 圖形右下方附近按一下,以原始大小置入影像。

  6. 使用「選取」工具來重新放置水滴影像,使其與棕色長條 (功能區) 對齊,並讓咖啡看起來像是從右側滴下來一樣。

    為網站導覽新增標誌與背景之後所顯示的頁首內容。
    為網站導覽新增標誌與背景之後所顯示的頁首內容。

    您可以檢查實際上線網站範例,查看標誌與頂端導覽的位置是否正確。

    在下一節,您將學習如何根據處理 Widget 容器方式的簡短綜覽來新增 Widget。

使用黏性頁尾

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

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

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

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

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

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