一、前言

文章成体系，如果有不明白的地方请查看前面的文章。

二、目录

1.创建HTML页面

2.将HTML文件转换为SharePoint母版页

3.在 SPD中修改母版页“PlaceHolderMain代码段”位置

4.发布母板页

5.使用母版页

6.最终效果

7.母版页转换中的重要知识点介绍

1.创建HTML页面

在电脑的任意位置（此处示例放到D盘的根目录下）创建TestMaster.html文件

(1)文件位置：

(2)文件源码:

<!DOCTYPE html>

<html>

<head>

    <title>测试母版页</title>

</head>

<body>

    <div style="font-size: 24px; color: #ff0000; margin: 0px auto; text-align: center">这里是页头</div>

    <div style="font-size: 24px; color: #0000ff; margin: 0px auto; text-align: center">这里是页尾</div>

</body>

</html>

(3)效果预览

2.将HTML文件转换为SharePoint母版页

1.点击右上角的【小齿轮】--【设计管理器】--【编辑母版页】--【将HTML文件转换为SharePoint母版页】，如下图所示：

2.在弹出的”选择资产”页面点击【添加】，如下图所示：

3.在弹出的“添加母版页”页面中点击【浏览】找到在D盘的TestMaster.html文件并点击【确定】按钮，如下图所示：

4.在弹出的“母版页栏目库”设置中选择内容类型为“设计文件”并修改标题（此处为测试母版页），点击【保存】按钮，如下图所示：

5.在“选择资产”页面选择刚刚上传的TestMaster.html文件并点击【插入】按钮，如下图所示：

6.母版页转换成功，如下图所示：

3.在 SPD中修改母版页“PlaceHolderMain代码段”位置

1.找到已安装的SPD，如下图所示：

2.在SPD中打开你的网站，如下图所示：

3.点击导航中的【母版页】，双击【TestMaster.html】文件，如下图所示：

4.点击【编辑文件】，如下图所示：

5.找到”<div data-name=”ContentPlaceHolderMain”></div>”的div块状元素(一般会在整个页面的最下方)，如下图所示：

6．将”<div data-name=”ContentPlaceHolderMain”></div>”的div块状元素拷贝到应该放置的位置（一般为页头和页尾之间）保存文件并关闭，如下图所示：

注：笔者曾经试过直接将ContentPlaceHolderMain代码段在创建html时就加入，但经过SP的转换后仍然会在最下方重新生成新的ContentPlaceHolderMain代码段，根据微软官方说明也没有查阅到可以在创建的时候“定位母版页的占位符”。但在SP中创建并转换然后通过SPD来修改才能完成这整体的一个步骤似乎是不合理的。

4.发布母板页

1.再次点击右上角的【小齿轮】--【设计管理器】--【编辑母版页】，如下图所示：

2.点击TestMaster后面的【…】，在弹出的功能项中再点击【…】，然后点击【发布主要版本】，如下图所示：

3.填写注释并点击【确定】按钮，如下图所示：

4.转换成功后状态改变了“已批准”，如下图所示：

5.使用母版页

1.点击右上角的【小齿轮】--【网站设置】--【母版页】，如下图所示：

2.在网站母版页中选择TestMaster,点击【确定】按钮，如下图所示：

6.最终效果

7.母版页转换中的重要知识点介绍

1.TestMaster.html与TestMaster.master
    细心的朋友可能会看到，将 .html 文件转换为 SharePoint 2013 母版页后系统中会存在两个同名母版页文件，此篇文章中为：TestMaster.html与TestMaster.master。
TestMaster.html为微软为我们提供的可修改的文件，我们在修改母版页时直接在该文件上修改内容，保存 HTML 文件后，这些更改内容会同步到关联.master中。
TestMaster.master为在SP中实际应用的文件。该文件在默认的情况下是只读的，你不可以通过SP或其他文件进行修改，如果去掉了文件的“只读”属性强行修改该文件后，当你再次保存.html文件时，.master中的修改结果将会被.html覆盖。

2. 为什么要转换 HTML 文件，而不是从头开始创建 .master 文件？

在 SharePoint 2013 中，母版页就像在 ASP.NET 中一样工作，但 SharePoint 还要求特定于 SharePoint 的某些元素（如控件和内容占位符）必须存在于该页面上，SharePoint 才能正确呈现该母版页。使用设计管理器将 HTML 文件转换为完整功能的 SharePoint 母版页，您就不必知道 ASP.NET 或 SharePoint 特定标记，而将精力集中于用 HTML、CSS 和 JavaScript 设计您的网站。

3.如果我更习惯修改.master而不想使用.html转换，怎么办？
(1)在该母版页的设置中找到【编辑属性】，如下图所示：

(2)去掉关联文件的【对号】即可，如下图所示：

SharePoint 创建母版页的更多相关文章

  1. SharePoint 2013 图文开发系列之Visual Studio 创建母版页

    一直以来,对于SharePoint母版页的创建,都是使用SharePoint Designer来创建和修改的,而后接触了SharePoint 2013,发现可以使用Html文件,通过设计管理器导入,然 ...

  2. 使用SharePoint 2010 母版页

    SharePoint 2010母版页所用的还是ASP.NET 2.0中的技术.通过该功能,实现了页面框架布局与实际内容的分离.虽然在本质上自定义母版页的过程和以前版本的SharePoint大致相同,但 ...

  3. 在SharePoint 2010 母版页里添加自定义用户控件

    在SharePoint 2010 母版页里添加自定义用户控件(译) 使用自定义用户控件的好处: 1.容易部署:2.易于控制显示或隐藏. (在使用的过程中)可能要面对的问题是:如何在用户控件里使用Sha ...

  4. SharePoint 创建网站地图树视图及格式枚举截图

    SharePoint 创建网站地图树视图及格式枚举截图         SharePoint首页隐藏掉左側导航以后,假设要以树视图呈现站点地图也非常easy.         仅仅须要复制v4.mas ...

  5. SharePoint创建web application出现“The password supplied with the username was not correct”错误的解决方法

    平台环境 Windows Server 2012 R2 Standard, SharePoint Server 2010, Microsoft SQL Server 2012 (SP1) 问题描述 在 ...

  6. 创建母版页导致js出现“ 'document.getElementById(...)' 为空或不是对象”错误

    导读:一个控件在设计时的ID往往不同于生成页面后的ID,为了获得控件客户端ID,我们可以从生成的页面入手,冷静思考,把握主次,从底层框架入手 本文将为大家介绍一下 ASP.NET中在创建母版页时引来的 ...

  7. SharePoint 2010 母版页定制小思路介绍

    转:http://tech.ddvip.com/2013-11/1384521515206064.html 介绍:我们使用SharePoint2010做门户网站,经常需要定制母版页,但是2010提供的 ...

  8. SharePoint 2013 母版页修改后，无法添加应用程序

    原文:SharePoint 2013 母版页修改后,无法添加应用程序 问题描述:前一段时间尝试了一下将HTML文件转换为母版页,但是,用着用着又发现新的问题,我们转换的母版页,设置成默认母版页以后,无 ...

  9. 使用SharePoint创建和定义自己的网站页面

    使用SharePoint创建和定义自己的网站页面 1. 打开SharePoint Designer 2010. 2. 点击网站页面导航. 3. 在功能区点击Web部件页面,新建Employee.axp ...

随机推荐

  1. 第11组 团队Git现场编程实战

    第11组 团队Git现场编程实战 组员职责分工: 前端部分: 陈郑铧:构架的搭建,前端模块开发 陈益:前端模块开发 李镇平:前端模块开发 后端部分: 沈国煜:后端模块开发 王泽鸿:后端模块开发 林铮威 ...

  2. 黑马vue---18、v-for指令的四种使用方式

    黑马vue---18.v-for指令的四种使用方式 一.总结 一句话总结: (item, i) in list:什么in什么的形式,前面是各种参数 1.v-for循环普通数组? <p v-for ...

  3. 同源策略和Ajax跨域访问

    1. 什么是同源策略 理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略.    何谓同源:        URL由协议.域名.端口和路径组成,如果两个URL的协议 ...

  4. 图解Python 【第一篇】：Python基础1

    本节内容一览图 一.Python简介  Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间, ...

  5. 一个伪静态与404重定向例子（房产网），.htaccess文件内容

    ErrorDocument 404 /404.phpRewriteEngine OnRewriteBase /RewriteRule ^(.*)\.(asp|aspx|asa|asax|dll|jsp ...

  6. C#.net winform skin 皮肤大全

    C#.net winform skin 皮肤大全 1. 东日IrisSkin IrisSkin 共有两个版本,一个是IrisSkin.dll 用于.Net Framework1.0/1.1 和Iris ...

  7. 根据规则去掉List 对象数组中的重复元素

    package container.main; import java.util.ArrayList; import java.util.Comparator; import java.util.Li ...

  8. RxJS 6有哪些新变化？

    我们的前端工程由Angular4升级到Angular6,rxjs也要升级到rxjs6.  rxjs6的语法做了很大的改动,幸亏引入了rxjs-compact包,否则升级工作会无法按时完成. 按照官方的 ...

  9. mysql 如何给大表添加字段

    1. 能不加字段就不要加, 能不修改字段就不要修改, 能不删除字段就不要删除, 等等为什么要删除字段呢? 如果没事,不要蛋疼的找事. 实际上,我们那次更新失败后, 我们并没有增加那个字段, 然后我们一 ...

  10. 等待数据库引擎恢复句柄失败 SqlServer2012安装时报错 Win10

    上周,在一批Win10系统电脑上安装SqlServer 2012时,屡次发生报错,安装失败,显示的失败信息是:等待数据库引擎恢复句柄失败 如下图所示: 面对这样的错误,我的第一反应是百度,在百度上找了 ...