一、前言

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

二、目录

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. Final阶段贡献分配规则

    此次作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/10063 贡献分分配规则: 组内一共五名同学,贡献分共计50分. 1.每 ...

  2. Nginx-HTTP之静态网页访问流程分析一

    假设访问静态网页的配置如下: worker_processes 1; error_log stderr debug; daemon off; master_process on; events { w ...

  3. pm2 配合log4js处理日志

    1.pm2启动时通常会发现log4js记录不到日志信息: 2.决解方案,安装pm2的pm2-intercom进程间通信模块 3.在log4js的配置文件logger.js里添加如下命令: pm2: t ...

  4. SR论文代码汇总

    1.SRCNN 页面  里面有论文,matlab和caffe代码. Tensorflow https://github.com/tegg89/SRCNN-Tensorflow 2.ESPCN 论文链接 ...

  5. 在业务控制方法中收集List<JavaBean>参数

    @Controller @RequestMapping(value="/user") public class UserAction { @RequestMapping(value ...

  6. JSTL优点

    1. 在应用程序服务器之间提供了一致的接口,最大程序地提高了WEB应用在各应用服务器之间的移植. 2. 简化了JSP和WEB应用程序的开发.3. 以一种统一的方式减少了JSP中的scriptlet代码 ...

  7. 20180817周在ubuntu上面使用kettle一些总结

    1 ubuntu上面安装mysql用户名和密码问题: ubuntu上面安装MySQL的时候,如果是自动安装,没设置密码的话,那么用户名不是root. 比如在ubuntu用文本工具打开:gedit /e ...

  8. Spring-Kafka —— KafkaListener禁止自启动

    应用服务启动时,KafkaListener默认会自动启动进行消费,如果想不自动消费,可以设置AutoStartup属性值为false @Override @KafkaListener(id = Con ...

  9. v-model语法糖在组件中的使用

    原文地址 v-model 主要是用于表单上数据的双向绑定 一:基本 1:主要用于 input,select,textarea,component 2:修饰符: .lazy- 取代input监听chan ...

  10. office web apps安装部署,配置https,负载均衡(一)背景介绍

    Office Web Apps,简称owa,是微软开发的在线预览office 文件服务.只要是做web开发技术的技术人员都知道,office文件预览,对于网站来说,绝对是一个难点,目前常见的预览off ...