SharePoint 2013 中将 HTML文件转换为母版页

原文:SharePoint 2013 中将 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会覆盖掉之前修改的。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。