自訂 [我的網站] 主版頁面

重要:  本文係由機器翻譯而成,請參閱免責聲明。本文的英文版本請見這裡,以供參考。

主版頁面為您網站中的所有頁面提供外觀和風格。透過變更主版頁面的樣式或內容,即可快速變更整個網站的外觀。

本文說明如何建立及修改現有 [我的網站] 主版頁面複本,然後將新的或已修改的 [我的網站] 主版頁面套用至 [我的網站] 網站集合中所有附加的頁面。在您修改 [我的網站] 主版頁面之後,所有的使用者都會在各自的 [我的設定檔] 頁面上看見變更。

如欲深入瞭解主版頁面,請參閱 SharePoint 主版頁面簡介

附註: 若要遵循本文中的程序,您必須擁有適當的權限。依預設,您必須是網站擁有人群組的成員、設計師群組的成員,或是網站集合管理員,才能以 SharePoint Designer 2010 開啟 SharePoint Online 網站,並自訂主版頁面。如果您是這類群組的成員,但無法看到本文提及之選項,您的 SharePoint Online 實作或許能夠自訂,針對可使用 SharePoint Designer 的對象加以限制。請洽詢網站管理員以找出原因。

本文內容

概觀:主版頁面可定義版面配置

檢視 [我的網站] 主版頁面

自訂或從頭開始?

自訂 [我的網站] 主版頁面

建立 [我的網站] 主版頁面複本

使用內容預留位置控制項

尋找並修改內容預留位置控制項

使用樣式

DIV 標籤簡化了 CSS 的使用

在主版頁面中編輯樣式或建立自訂的 CSS

概觀:主版頁面可定義版面配置

主版頁面可為 SharePoint 頁面定義常見的版面配置與介面。

我的網站 ] 主版頁面會顯示您在我的網站,例如控制項頂端的頁面或網站標題上瀏覽頁面頁面時就會看到常設元素。

這些元素全都儲存於 [我的網站] 主版頁面。

在 SharePoint 中,[我的網站] 與 [我的設定檔] 頁面都被視為網站上的內容頁面處理。這些頁面以瀏覽器檢視時,會與 [我的網站] 主版頁面結合,產生單一且連續的網頁。

[我的網站] 主版頁面會顯示常設元素與版面配置,而內容頁面會顯示獨特且頁面專屬的內容。

檢視 [我的網站] 主版頁面

  1. 在 SharePoint Designer 中,開啟 [我的網站] 根目錄,例如 https://YourDomainName-my.sharepoint.com,然後按一下功能窗格中的 [主版頁面]

  2. 按一下 [mysite.master],即可查看主版頁面圖庫中的摘要資訊。

  3. 按一下功能區中的 [編輯檔案] 頁面,以開啟主版頁面。

如此一來,主版頁面隨即會在 SharePoint Designer 2010 全螢幕網頁編輯器中開啟。

您可以在 [設計] 檢視、[分割] 檢視或 [程式碼] 檢視中編輯頁面。有了設計階段的支援,就可以在自訂主版頁面時,查看主版頁面的外觀。另有一些工具可用來自訂標籤、樣式、指令碼、內容區域,如下所示:

開啟 [我的網站] 主版頁面後,就可以編輯檔案以及檔案的屬性。

A許多功能,讓您輕鬆建立及自訂 SharePoint Designer 2010 中的主版頁面,比過去的 ︰

  • 導覽功能表包含 [主版頁面] 類別,可讓您直接前往您網站上的主版頁面圖庫。

  • 編輯主版頁面時,可使用頁面編輯工具來插入及管理圖層,或放置 DIV 標籤;還可以使用 [串連點選] 選項快速找出這些圖層及其他元素,讓您瀏覽重疊的圖層。

  • 在您建立新的網站與網頁組件頁面後,網站與網頁組件頁面就會自動與主要的主版頁面相關聯,如此一來,就不用每一次都要手動建立關聯。

自訂或從頭開始?

若要在您的 SharePoint 2010 網站中使用自訂的 [我的網站] 主版頁面,您可以:

  • 自訂 [我的網站] 主版頁面複本 (mysite.master),或

  • 從頭建立新的自訂 [我的網站] 主版頁面,並讓該主版頁面成為您網站的 [我的網站] 主版頁面。

本文著重於第一種方法:自訂 [我的網站] 主版頁面複本。

這兩種方法各有優缺點。

當您自訂 mysite.master 複本時,    是使用現有的 SharePoint 外觀與風格,以及其功能、品牌與設計元素,並進行自訂,以符合您的需求。您試圖瞭解 mysite.master 頁面中每個項目的運作方式,這可能不太容易,但這種方法可大幅減少建立品牌形象或自訂 (例如變更 SharePoint 頁面的頁首) 時所需付出的心力。

建立空白的自訂 [我的網站] 主版頁面或使用 Starter 主版頁面    作為頁面之基礎時,就等於是從頭建立整個設計。由於您必須知道如何在 SharePoint 中實作設計,因此這種方法可能不太容易。不過,由於您熟知自己正在試圖建立的設計,又沒有利用現有的計畫與原型,因此這種方法更有彈性。大部分為空白的頁面就有如一面畫布,等待您率先建置設計,然後加上必要的 SharePoint 元件。

自訂 [我的網站] 主版頁面

若要以 SharePoint Designer 2010 自訂主版頁面,先要從網站本身或從 [開始] 功能表開啟 SharePoint Designer 2010。您的網站在 SharePoint Designer 2010 中開啟後,請按一下功能窗格的 [主版頁面]

對於 SharePoint Online 企業版中的多數網站,您會在主版頁面圖庫中看見三個主版頁面,分別是 [v4.master][minimal.master][default.master],如此處所示。如果 [我的網站] 已啟用,您也應該會看見 [mysite.master] 主版頁面。

SharePoint 2010 主版頁面清單。

建立 [我的網站] 主版頁面複本

  1. 以 SharePoint Designer 開啟您的網站,然後按一下功能窗格中的 [主版頁面]

  2. 以滑鼠右鍵按一下 [mysite.master],然後按 Ctrl+P,將複本貼到主版頁面圖庫。

  3. 按一下 [mysite_copy(1).master],即可查看主版頁面圖庫中的摘要資訊。

  4. 按一下功能區中的 [編輯檔案] 頁面,以顯示主版頁面。

如此一來,主版頁面隨即會在 SharePoint Designer 2010 全螢幕網頁編輯器中開啟,您可以在 [設計] 檢視、[分割] 檢視或 [程式碼] 檢視中編輯頁面。有了設計階段的支援,就可以在自訂主版頁面時,查看主版頁面的外觀。另有一些工具可供您瀏覽及自訂標籤、樣式、指令碼和內容區域,如此處所示。

使用內容預留位置控制項

使用一組可取代的區域或內容預留位置控制項,讓主版頁面與內容頁面可搭配使用。每個內容預留位置 (在頁面程式碼中顯示為 ContentPlaceHolder) 代表的是可在主版頁面上覆寫的內容。網站上的任一頁面都可以取代內容預留位置裡的內容,只要提供相符的內容控制項即可。內容控制項甚至可以是空白的,這樣一來就會從轉譯頁面完全移除元素。

重要: 自訂主版頁面時,請勿刪除內容預留位置。如此可能會造成主版頁面與某些頁面 (甚至是網站) 之間的關聯中斷。不要刪除控制項,改而隱藏控制項,這便是很好的做法。

您可以使用 [管理內容區域] 功能來找出頁面上的每個內容預留位置控制項。您可以在 [程式碼] 檢視與 WYSIWYG 編輯器中檢視控制項。

另一個特別重要的內容預留位置就是 PlaceHolderMain,因為以網頁瀏覽器檢視頁面時,這個內容預留位置會被每個內容頁面所取代。

以瀏覽器檢視 [我的網站] 主版頁面時,PlaceHolderMain 控制項會被每個內容頁面所取代。

您可以變更 SharePoint 網站內容的版面配置,只要變更內容預留位置控制項的所在位置即可。

如需使用內容預留位置的詳細資訊,請參閱使用內容預留位置控制項

內容預留位置控制項是主版頁面上的一段程式碼,可與內容頁面中的內容控制項搭配使用。內容預留位置控制項會針對頁面上的該區域,顯示預設內容 (如果控制項為空白,就可以是沒有內容)。預設內容可由內容頁面上的內容控制項專屬內容覆寫。

尋找並修改內容預留位置控制項

遵循這些步驟,在 SharePoint 2010 [我的網站] 主版頁面找出 PlaceHolderSiteName 內容預留位置控制項。

  1. 以 SharePoint Designer 2010 開啟您的網站,按一下功能窗格中的 [主版頁面]

    附註:  如果您在功能窗格中沒有看見 [主版頁面],表示 SharePoint 可能已停用主版頁面。詳情請連絡網站管理員。如需深入瞭解,請參閱管理 SharePoint Designer 2010

  2. 在主版頁面圖庫,按一下 [mysite.master]

  3. 在主版頁面摘要頁面,按一下 [編輯檔案]

  4. 如果系統提示您取出檔案,請按一下 [是]

  5. 如果您正在 [設計] 檢視中檢視頁面,只要按一下頁面上的某個區域,就可以看見用於提供內容的內容預留位置控制項。

  6. 在內容區域清單中,選取 [PlaceHolderSiteName],然後按一下 [移至]。然後按一下 [關閉]。頁面上的內容預留位置控制項會依此方式選取。

附註:  依預設,此預留位置的 [標籤屬性] 會設為 Visible=False。您可以在 SharePoint Designer 2010 的 [分割] 檢視中選取標籤、以滑鼠右鍵按一下該標籤,然後選擇內容功能表中出現的 [標籤屬性],即可查看其值。


隨即會顯示 PlaceHolderSiteName 控制項的標籤屬性。

  1. 您可在此變更其設定、變更位置、套用不同樣式等。完成後,請儲存主版頁面。

  2. 如果系統警告您所做的變更會從網站定義來自訂頁面,請選擇 [是]

附註:  SharePoint 頁面依預設是與網站定義檔案相關聯。若主版頁面是以 SharePoint Designer 2010 進行自訂‧,則不會再與網站定義相關聯。這有可能會造成將來更新或升級至 SharePoint 後還要從事額外的管理工作,因此您才會看見這則訊息。如有必要,您隨時可以將主版頁面重設回網站定義。


除非頁面是直接自訂,否則您的變更一律會顯示在此主版頁面附加的每一個頁面上。

使用樣式

若要變更主版頁面的樣式,最輕鬆最快速的方法就是套用預先設計的主題至頁面。您可以看見及套用可用的主題,請在 SharePoint Designer 的 [網站設定] 索引標籤,按一下 [自訂] 底下的 [變更網站主題] 連結。

不過,如果您正在比對公司色彩、圖形、文字格式設定或其他樣式屬性,那麼可能會想要自行建立自訂樣式,並將樣式直接加到主版頁面,或將樣式置於您附加在主版頁面的外部階層式樣式表 (CSS)。

DIV 標籤簡化了 CSS 的使用

SharePoint 2010 的 [我的網站] 主版頁面是使用 DIV 標籤來定義頁面上的區塊線條元素與區段。DIV 標籤有幾個優點勝於表格標籤,後者是在舊版中使用。DIV 標籤的優點如下:

  • 以 CSS 設定頁面樣式的方法更具彈性

  • 標記更少

  • 下載速度更快

  • 加強搜尋引擎最佳化

  • 加強協助工具支援

  • 加強瀏覽器支援

舉例來說,您或您的使用者在頁面上插入網頁組件及其他 SharePoint 內容時,仍會使用 HTML 表格。不過,若是自訂主版頁面,可以主要使用 DIV 標籤來建立內容結構。

自訂 [我的網站] 主版頁面時使用 Div 標籤

在主版頁面中編輯樣式或建立自訂的 CSS

若要編輯樣式,請按一下 [樣式] 功能表,然後從功能區的選項中加以選擇,依照您想要的方式來使用 CSS。

您可以建立新樣式,然後套用新樣式,也可以使用功能區上的命令來附加樣式表。使用 [管理樣式] 命令,依照元素、順序或類型替樣式分類;還可僅顯示頁面或元素所使用的樣式,並查看樣式預覽。

[我的網站] 主版頁面的新樣式對話方塊。

附註: 機器翻譯免責聲明︰本文係以電腦系統翻譯而成,未經人為介入。Microsoft 提供此等機器翻譯旨在協助非英語系使用者輕鬆閱讀 Microsoft 產品、服務及技術相關內容。基於本文乃由機器翻譯而成,因此文中可能出現詞辭、語法、文法上之錯誤。

擴展您的技能
探索訓練
優先取得新功能
加入 Office 測試人員

這項資訊有幫助嗎?

感謝您的意見反應!

感謝您的意見反應! 我們將協助您與其中一位 Office 支援專員連絡以深入了解您的意見。

×