SharePoint 2013—创建Master Page

小木木 · 发表于 2015-9-24 11:30:35

　　本文主要介绍如何为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换成自定义的。网页最终效果如下图：

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

zabbix3.4.1安装部署+微信推送信息+大屏显

winhex数据恢复教程（非常巨大，内容丰富）

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

[经验分享] SharePoint 2013—创建Master Page

扫码加入运维网微信交流群