目錄

1.創建HTML頁面

2.將HTML文件轉換為SharePoint母版頁

3.在 SPD中修改母版頁“PlaceHolderMain代碼段”位置

4.發布母板頁

5.使用母版頁

6.最終效果

7.母版頁轉換中的重要知識點介紹

1.創建HTML頁面

在電腦的任意位置（此處示例放到D盤的根目錄下）創建TestMaster.html文件

(1)文件位置：

(2)文件源碼:

        
這里是頁頭
    
這里是頁尾

(3)效果預覽

2.將HTML文件轉換為SharePoint母版頁

1.點擊右上角的【小齒輪】--【設計管理器】--【編輯母版頁】--【將HTML文件轉換為SharePoint母版頁】，如下圖所示：

2.在彈出的”選擇資產”頁面點擊【添加】，如下圖所示：

3.在彈出的“添加母版頁”頁面中點擊【瀏覽】找到在D盤的TestMaster.html文件并點擊【確定】按鈕，如下圖所示：

4.在彈出的“母版頁欄目庫”設置中選擇內容類型為“設計文件”并修改標題（此處為測試母版頁），點擊【保存】按鈕，如下圖所示：

5.在“選擇資產”頁面選擇剛剛上傳的TestMaster.html文件并點擊【插入】按鈕，如下圖所示：

6.母版頁轉換成功，如下圖所示：

3.在 SPD中修改母版頁“PlaceHolderMain代碼段”位置

1.找到已安裝的SPD，如下圖所示：

2.在SPD中打開你的網站，如下圖所示：

3.點擊導航中的【母版頁】，雙擊【TestMaster.html】文件，如下圖所示：

4.點擊【編輯文件】，如下圖所示：

5.找到””的div塊狀元素(一般會在整個頁面的最下方)，如下圖所示：

6．將””的div塊狀元素拷貝到應該放置的位置（一般為頁頭和頁尾之間）保存文件并關閉，如下圖所示：

注：筆者曾經試過直接將ContentPlaceHolderMain代碼段在創建html時就加入，但經過SP的轉換后仍然會在最下方重新生成新的ContentPlaceHolderMain代碼段，根據微軟官方說明也沒有查閱到可以在創建的時候“定位母版頁的占位符”。但在SP中創建并轉換然后通過SPD來修改才能完成這整體的一個步驟似乎是不合理的。

4.發布母板頁

1.再次點擊右上角的【小齒輪】--【設計管理器】--【編輯母版頁】，如下圖所示：

2.點擊TestMaster后面的【…】，在彈出的功能項中再點擊【…】，然后點擊【發布主要版本】，如下圖所示：

3.填寫注釋并點擊【確定】按鈕，如下圖所示：

4.轉換成功后狀態改變了“已批準”，如下圖所示：

5.使用母版頁

1.點擊右上角的【小齒輪】--【網站設置】--【母版頁】，如下圖所示：

2.在網站母版頁中選擇TestMaster,點擊【確定】按鈕，如下圖所示：

6.最終效果

7.母版頁轉換中的重要知識點介紹

1.TestMaster.html與TestMaster.master
??? 細心的朋友可能會看到，將 .html 文件轉換為 SharePoint 2013 母版頁后系統中會存在兩個同名母版頁文件，此篇文章中為：TestMaster.html與TestMaster.master。
TestMaster.html為微軟為我們提供的可修改的文件，我們在修改母版頁時直接在該文件上修改內容，保存 HTML 文件后，這些更改內容會同步到關聯.master中。
TestMaster.master為在SP中實際應用的文件。該文件在默認的情況下是只讀的，你不可以通過SP或其他文件進行修改，如果去掉了文件的“只讀”屬性強行修改該文件后，當你再次保存.html文件時，.master中的修改結果將會被.html覆蓋。

2.?為什么要轉換 HTML 文件，而不是從頭開始創建 .master 文件？

??? 在 SharePoint 2013 中，母版頁就像在 ASP.NET 中一樣工作，但 SharePoint 還要求特定于 SharePoint 的某些元素（如控件和內容占位符）必須存在于該頁面上，SharePoint 才能正確呈現該母版頁。使用設計管理器將 HTML 文件轉換為完整功能的 SharePoint 母版頁，您就不必知道 ASP.NET 或 SharePoint 特定標記，而將精力集中于用 HTML、CSS 和 JavaScript 設計您的網站。

3.如果我更習慣修改.master而不想使用.html轉換，怎么辦？
(1)在該母版頁的設置中找到【編輯屬性】，如下圖所示：

(2)去掉關聯文件的【對號】即可，如下圖所示：