zoukankan      html  css  js  c++  java
  • SharePoint 2013—创建Master Page

    摘要

    本文主要介绍如何为SharePoint 2013网站创建Master Page。与以前版本开发不同,如果你熟悉html/CSS/JavaScript, 那么恭喜你,SharePoint2013的Master Page你已经掌握了90%。以前版本的Master Page开发是基于asp.net的,而SharePoint2013的Master Page是基于HTML的。本文将会一步一步来实现创建一个新的Master Page。

    http://sharepoint.microsoft.com/en-us/Pages/default.aspx为例子,该网站是微软SharePoint官方网站,我们要创建一个类似于它的2013网站。

    SharePoint Master Page结构分析及准备工作

    使用Master Page可以为网站中的页面创建一致的布局、样式。在本例中,导航,Log将会出现在网页顶部。

    版本信息,相关链接等将会出现在网站底部。

    网页中间的内容会出现在内容页里面,创建一个Page Layout即可。网页中间内容不在本文讨论范围之内,具体办法和SharePoint 2010类似。

    第一步就是创建一个HTML页面,为了简化期间,直接使用图片来代替复杂的样式等内容,请自动忽略样式及美观。

    HTML页面效果如下图:

    HTML代码如下:

    注意:如果想顺利将此文件转化为Master Page, 里面的HTML标签要闭合。不能出来错误或不完整的标签,例如少"</div>"。

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" type="text/css" href="images/style.css"/>

    </head>

    <body>

    <div class="warp">

    <div class="header"><img src="Images/Header.png" /></div>

    <div class="maincontent">网页主要内容会显示在这</div>

    <div class="footer"><img src="Images/footer.png" /></div>

    </div>

    </body>

    </html>

    Design Manager

    点击网站设置,在弹出菜单中就可以看到"Design Manager"。点击之后即可以将刚做的HTML页面转化为Master Page。

    如果点击网站设置在弹出菜单中没有"Design Manager",在网站设置中激活"Publishing"功能即可。

    上传HTML文件及图片

    在网站设置中,点击"Master pages and page layouts"。

    然后将HTML文件上传到该文件夹中。

    图片和样式上传到了网站"Images"文档库,所以在HTML页面中的图片地址稍后要做一些调整。

    将HTML转换为Master Page

    点击Design Manager,打开转换页面。选择4"Edit Master Pages". 在打开的页面选择"Convert an HTML file to a SharePoint master page".

    在弹出的选择框中选择刚上传的HTML页面。

    点击文件名开始转化。

    系统会提示转化结果,下一步要做的就是将黄色的DIV区域移到将来编辑内容的区域。

    用SharePoint Designer打开网站,然后在Master Pages中找到我们的HTML页面。在HTML文件的下方自动生成了同名的master page文件。

    在高级模式下编辑HTML页面。可以自动SharePoint自动为HTML页面添加了很多标记。

    找到黄色的DIV,然后将它移到中间内容区域。

    最终形成的代码如下:

    最终效果如下图:

    将master page发布之后,就可以在网站设置中将网站master page换成自定义的。网页最终效果如下图:

    致力于SharePoint开发. QQ:28748451.
  • 相关阅读:
    Extensions in UWP Community Toolkit
    Rust 算法排位记
    【华为云技术分享】mongos-sharding连接池配置
    【华为云技术分享】opensuse使用zypper安装软件
    MongoDB经典故障系列一:数据库频繁启动失败怎么办?
    刚刚,华为云找到了更安全更卫生的乘坐电梯方式
    攻防学习
    通过FTP无法删除文件
    photoswipe-3.0.5 手机端横屏后竖屏图片无法归位问题解决
    【转载】apache配置虚拟主机以及虚拟目录详解
  • 原文地址:https://www.cnblogs.com/hearticy/p/2773811.html
Copyright © 2011-2022 走看看