zoukankan      html  css  js  c++  java
  • 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会覆盖掉之前修改的。

  • 相关阅读:
    spring-boot快速搭建解析
    springmvc处理ajax跨域
    Spring-AOP解析
    springmvc注解
    springmvc源码分析
    Spring源码分析
    JAVA性能优化
    数据取舍
    命令行控制
    Junit常用操作
  • 原文地址:https://www.cnblogs.com/jianyus/p/3034349.html
Copyright © 2011-2022 走看看