一、前言

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

二、目录

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. 在SUSE LINUX中如何用命令行关闭防火墙?

    sudo /sbin/SuSEfirewall2 stop 因为系统重启防火墙会自动开启, 导致ssh远程无法登陆,但系统里是可以PING出.也可以上网. 所以需要永久性关闭系统自带的防火墙,命令如下 ...

  2. Go之GOPATH与工作空间

    来自: GOPATH与工作空间 GOPOATH 设置 go 命令依赖一个重要的环境变量:$GOPATH 在类 Unix 环境下大概这样设置: exprt GOPATH=/home/apple/mygo ...

  3. （转载）IOCP 浅析

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-iocp/#author   郭 仁祥, 软件工程师, IBM 简介: 传统的 Server/Cli ...

  4. vuejs2从入门到精通与项目开发实战

    vuejs2从入门到精通:一.基础部分0.课件1.介绍2.vue实例3.模板语法4.计算属性和观察者5.Class与Style绑定6.条件渲染7.列表渲染8.事件处理9.表单输入绑定10.1.组件(1 ...

  5. Go项目的测试代码1（基础）

    最近写了测试代码,整理了一下. 先看看简单的测试代码. // add_test.go ==> 文件名 _test.go 结尾的默认为测试代码文件 package models import ( ...

  6. WebLogic服务器

    WebLogic是美国Oracle公司出品的一个application server确切的说是一个基于JAVAEE架构的中间件,BEA WebLogic是用于开发.集成.部署和管理大型分布式Web应用 ...

  7. 创建使用Spring Boot

    Spring Boot 创建项目 Spring Initializr 创建完成会自动下载 解压后 Idea导入 修改国内镜像 网络不够强的话停掉自动更新 build.gradle 加上 reposit ...

  8. JPA，Hibernate，Spring Data JPA之间的关系

    什么么是JPA? 全称Java Persistence API(JAVA对象持久化API),可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1 ...

  9. 一百一十三：CMS系统之前台注册界面

    html {% from 'common/_macros.html' import static %}<!DOCTYPE html><html lang="en" ...

  10. php+UEditor粘贴word

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...