SharePoint 2013—创建Master Page

时间:2022-03-29 15:05:55

摘要

本文主要介绍如何为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 2013—创建Master Page

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

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

SharePoint 2013—创建Master Page

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

SharePoint 2013—创建Master Page

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

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

HTML页面效果如下图:

SharePoint 2013—创建Master Page

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。

SharePoint 2013—创建Master Page

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

SharePoint 2013—创建Master Page

上传HTML文件及图片

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

SharePoint 2013—创建Master Page

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

SharePoint 2013—创建Master Page

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

将HTML转换为Master Page

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

SharePoint 2013—创建Master Page

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

SharePoint 2013—创建Master Page

点击文件名开始转化。

SharePoint 2013—创建Master Page

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

SharePoint 2013—创建Master Page

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

SharePoint 2013—创建Master Page

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

SharePoint 2013—创建Master Page

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

SharePoint 2013—创建Master Page

最终形成的代码如下:

SharePoint 2013—创建Master Page

最终效果如下图:

SharePoint 2013—创建Master Page

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

SharePoint 2013—创建Master Page