無廢話SharePoint入門教程四[建立SharePoint母版頁]
一、前言
文章成體系,如果有不明白的地方請檢視前面的文章。
二、目錄
1.建立HTML頁面
2.將HTML檔案轉換為SharePoint母版頁
3.在 SPD中修改母版頁“PlaceHolderMain程式碼段”位置
4.釋出母板頁
5.使用母版頁
6.最終效果
7.母版頁轉換中的重要知識點介紹
1.建立HTML頁面
在電腦的任意位置(此處示例放到D盤的根目錄下)建立TestMaster.html檔案
(1)檔案位置:
(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,掌握了方法後可以自定義擴充套件
版權:http://www.cnblogs.com/iamlilinfeng
活到老,學到老,練到老...