天天看點

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

原文:

SharePoint 2013 中将 HTML檔案轉換為母版頁

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

1、 首先,建立一個Html頁面,效果如下圖:

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

預覽效果:

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

2、 将這個html頁面上傳到sharepoint,我選擇上傳到“母版頁樣式庫”;

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

3、 我選擇作為“設計檔案”上傳,當然你也可以選擇其他的檔案類型;

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

4、 上傳成功以後,點選“設定”—“設計管理器”,左側導航選擇“編輯母版頁”;

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

5、 選擇“将 HTML 檔案轉換為 SharePoint 母版頁”,找到剛剛上傳的html檔案;

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

6、 選擇我們上傳的html檔案,點選插入(如果你上傳的不是設計檔案,選擇你上傳的檔案類型,才能找到你的html頁面,預設是設計檔案);

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

7、 插入以後,稍等片刻,就可以看到轉換成功(當然,你的html也符合标準,否則的話,可能會轉換失敗);

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

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

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

打開網站設定,網站母版頁設定,發現下拉框裡沒有我們轉換成功的,卻隻有系統自帶的,好奇怪,打開spd看一眼!

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

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

猜想:或許是因為轉換的是asp.net母版頁,自帶的是母版頁,是以下拉清單找不到?

10、 既然找不到,我就在spd直接設定為母版頁試試;

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

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

11、 我在spd中設定為預設母版頁,打開首頁;

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

居然沒有反應,跟之前一樣,重新整理了好幾次,都這樣!好吧,還有一個設定為自定義母版頁,試試,看一看效果吧!

12、 設定為自定義母版頁後,打開,終于出現我要的東西了!!

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

後話:誰翻譯的spd,設定為預設母版頁,其實改的系統母版頁,而自定義母版頁,改的是頁面,這翻譯真夠坑爹的!!

13、 設定完系統母版頁,發現一個問題,我們的内容心不在中間,而且樣式跟之前也不一樣了。後來查資料,轉換之前的樣式,不能解除安裝head标簽裡,否則會被覆寫掉。下面,我們修改這個母版頁,把PlaceHolderMain放到中間吧。特别注意,我們要修改html檔案,不要去修改master頁面(給開發人員使用),html是設計人員使用的,修改以後會覆寫master,友善設計。

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

如上圖,把PlaceHolderMain的div全部放在我們放内容的地方。而後看下效果,如下圖:

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

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

14、 添加樣式的時候,發現,原來的樣式隻是被注釋掉了,其實還在(如下圖所示),好吧,還原回來!

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

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

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

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

加入我們自己的樣式,如下圖:

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

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

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

将.html轉換為母版頁,SharePoint 2013 中将 HTML檔案轉換為母版頁

題外話:這樣轉換的模闆,我們可以直接修改html頁面,然後spd會自動修改master,如果修改了master再改html會覆寫掉之前修改的。