無廢話SharePoint入門教程四[建立SharePoint母版頁]

時間 2019-11-06

標籤廢話 sharepoint 入門教程建立欄目 Java開源简体版

原文原文鏈接

1、前言

文章成體系，若是有不明白的地方請查看前面的文章。html

2、目錄

1.建立HTML頁面測試

2.將HTML文件轉換爲SharePoint母版頁網站

3.在 SPD中修改母版頁「PlaceHolderMain代碼段」位置spa

4.發佈母板頁設計

5.使用母版頁3d

6.最終效果code

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

1.建立HTML頁面

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

(1)文件位置：ip

(2)文件源碼:

<!DOCTYPE html>
<html>
<head>
    <title>測試母版頁</title>
</head>
<body>
    <div style="font-size: 24px; color: #ff0000; margin: 0px auto; text-align: center">這裏是頁頭</div>
    <div style="font-size: 24px; color: #0000ff; margin: 0px auto; text-align: center">這裏是頁尾</div>
</body>
</html>

(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 data-name=」ContentPlaceHolderMain」></div>」的div塊狀元素(通常會在整個頁面的最下方)，以下圖所示：

6．將」<div data-name=」ContentPlaceHolderMain」></div>」的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)去掉關聯文件的【對號】便可，以下圖所示：

說明：本篇文章中的頁頭頁尾爲了減小信息量只作了兩個DIV，掌握了方法後能夠自定義擴展