SharePoint 中如何將HTML文件轉換為母版頁

SharePoint 2013提供了很多新功能，下面我們看看將Html頁面，轉換為母版頁的功能。這個功能更加方便設計人員設計母版頁，并實施到sharepoint中去，是一個非常不錯的功能。來來來，進入正題！~

1、 首先，新建一個Html頁面，效果如下圖：

預覽效果：

2、 將這個html頁面上傳到sharepoint，我選擇上傳到“母版頁樣式庫”；

3、 我選擇作為“設計文件”上傳，當然你也可以選擇其他的文件類型；

4、 上傳成功以后，點擊“設置”—“設計管理器”，左側導航選擇“編輯母版頁”；

5、 選擇“將 HTML 文件轉換為 SharePoint 母版頁”，找到剛剛上傳的html文件；

6、 選擇我們上傳的html文件，點擊插入（如果你上傳的不是設計文件，選擇你上傳的文件類型，才能找到你的html頁面，默認是設計文件）；

7、 插入以后，稍等片刻，就可以看到轉換成功（當然，你的html也符合標準，否則的話，可能會轉換失敗）；

8、 下面開始應用我們轉換成功的母版頁；

打開網站設置，網站母版頁設置，發現下拉框里沒有我們轉換成功的，卻只有系統自帶的，好奇怪，打開spd看一眼！

9、 打開spd，找到母版頁，發現有我們新轉換的母版頁，我很欣慰啊；

猜想：或許是因為轉換的是asp.net母版頁，自帶的是母版頁，所以下拉列表找不到？

10、 既然找不到，我就在spd直接設置為母版頁試試；

中間會彈出是否更改為15的提示框，是或者否看你需要咯

11、 我在spd中設置為默認母版頁，打開首頁；

居然沒有反應，跟之前一樣，刷新了好幾次，都這樣！好吧，還有一個設置為自定義母版頁，試試，看一看效果吧！

12、 設置為自定義母版頁后，打開，終于出現我要的東西了！！

后話：誰翻譯的spd，設置為默認母版頁，其實改的系統母版頁，而自定義母版頁，改的是頁面，這翻譯真夠坑爹的！！

13、 設置完系統母版頁，發現一個問題，我們的內容心不在中間，而且樣式跟之前也不一樣了。后來查資料，轉換之前的樣式，不能卸載head標簽里，否則會被覆蓋掉。下面，我們修改這個母版頁，把PlaceHolderMain放到中間吧。特別注意，我們要修改html文件，不要去修改master頁面（給開發人員使用），html是設計人員使用的，修改以后會覆蓋master，方便設計。

如上圖，把PlaceHolderMain的div全部放在我們放內容的地方。而后看下效果，如下圖：

終于看到我們的母版頁的頭部和尾部了！很欣慰，把丟了的樣式加進去吧！

14、 添加樣式的時候，發現，原來的樣式只是被注釋掉了，其實還在（如下圖所示），好吧，還原回來！

當我試圖把樣式還原的時候，發現無論放在head標簽或者body標簽里，style樣式都是不起作用的，不知道你們是不是一樣，所以只好改為外部引用。

找了好久，找到樣式表位置，跟10貌似位置不太一樣，如下圖：

加入我們自己的樣式，如下圖：

當然，我們也可以自定義一個樣式表，然后引用。

15、 終于查看帶效果的母版頁了，不容易啊！如下圖！效果一般，哈哈，就是測試一下，需要調整再調整了~~~

題外話：這樣轉換的模板，我們可以直接修改html頁面，然后spd會自動修改master，如果修改了master再改html會覆蓋掉之前修改的。