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


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

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

clip_image001

預覽效果:

clip_image002

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

clip_image003

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

clip_image004

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

clip_image005

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

clip_image006

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

clip_image007

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

clip_image008

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

clip_image009

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

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

clip_image010

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

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

clip_image011

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

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

clip_image012

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

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

clip_image013

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

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

clip_image014

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

clip_image015

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

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

clip_image016

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

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

clip_image017

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

clip_image018

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

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

clip_image019

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM