一、前言

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

二、目录

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. react-redux学习初步总结

    1.index.js文件中需要引入 a.React(把jsx编译到js需要调用一个函数, 这个函数在React叫React.createElement. 解答地址:https://segmentfau ...

  2. 前端知识点回顾之重点篇——CSS中的BFC

    BFC布局(Block Formatting Contexts) 来源:https://www.cnblogs.com/lzbk/p/6057097.html 块级格式化上下文是页面中的一块渲染区域, ...

  3. ios-Realm数据库的使用

    [集成 Realm] 本 Demo 使用 OC 创建,所以先进入 Realm 官网 (我记得之前都是有官方中文教程的,但现在最新版没有中文了),到 Objective-C -> Getting ...

  4. Android局部更新(RecyclerView+ DiffUtil)

    一 概述 DiffUtil是support-v7:24.2.0中的新工具类,它用来比较两个数据集,寻找出旧数据集->新数据集的最小变化量. 说到数据集,相信大家知道它是和谁相关的了,就是我的最爱 ...

  5. Understanding decimal(p, s) of sqlite3

    带固定精度和小数位数的数值数据类型.decimal(p[ ,s]) 和 numeric(p[ ,s]) 固定精度和小数位数. 使用最大精度时,有效值的范围为 - 10^38 +1 到 10^38 - ...

  6. 2018网特招新题writeup

    沈永宁(周鸣振)这狗比,晚上才发现他隐姓埋名偷偷刷了分还刷到了第一名,不行我也刷...我刷刷刷

  7. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-1.SpringBoot整合微信支付开发在线教育视频站点介绍

    笔记 第一章项目介绍和前期准备 1.SpringBoot整合微信支付开发在线教育视频站点介绍     简介: 课程介绍,和小D课堂在线教育项目搭建开发 1.课程大纲介绍         2.微信支付项 ...

  8. Linux（centos）安装vim

    当在Linux环境下使用vim提示: vim command not found时,说明系统还没有安装vim. 安装步骤: 1.检查是否已安装 查看一下你本机已经存在的包,确认一下你的VIM是否已经安 ...

  9. curl and wget

    写在前面: a.  对比curl 和 wget 的相同和不同点 来记忆 a-1 curl url  直接将请求内容输出到标准输出. 如果下载不是瞬时间完成,会显示下载进度条,如果向取消,加-s : w ...

  10. docker部署jar、war包方法

    一.将war包放入容器 1.# docker imagesREPOSITORY                         TAG                 IMAGE ID         ...