一、前言

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

二、目录

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. IDEA个人常用配置记录

    原文 一.常用快捷键 编辑 ⇧ + ↩:开始新的一行 ⌘ + ⇧ + ↩:行内任意位置进行换行,并自动补齐“;”.“{}” ⌘ + ⇧ + U:大小写切换 ⌥ + ⌦:删除到单词的末尾(⌦键为Fn+D ...

  2. OUC_Summer Training_ DIV2_#14 724

    又落下好多题解啊...先把今天的写上好了. A - Snow Footprints Time Limit:1000MS     Memory Limit:262144KB     64bit IO F ...

  3. ubuntu 17.04 添加用户到sudo组

    最近在系统中安装了KVM和docker,用KVM的时候好好的,可以直接使用virsh等命令.但是安装了docker,使用docker命令时需要在前面加上sudo,这个用起来就挺麻烦的,于是想到dock ...

  4. 【Makefile】Makefile中的常用函数简介

    1. subst函数 格式:$(subst <from>, <to>, <text>)功能:把字串<text>中的<from>字符串替换成& ...

  5. Django之通用视图

    01-介绍 通用视图把视图开发中常用的写法和模式抽象出来,让你编写少量代码就能快速实现常见的数据视图.显示对象列表就是这样一种任务. Django 自带的通用视图能实现下述功能: 1.列出对象并显示单 ...

  6. Jedis的Publish/Subscribe功能的使用

    redis内置了发布/订阅功能,可以作为消息机制使用.所以这里主要使用Jedis的Publish/Subscribe功能. 1.使用Spring来配置Jedis连接池 <!-- pool配置 - ...

  7. Qt可扩展窗口实现

    前言 有时候需要实现窗口可扩展,换句话说有一部分widget能够隐藏,显示,并且对话框大小可以随着widget变动而做出相应的变化:如图: 在点击CheckBox时,GroupBox_2能够显示,取消 ...

  8. 关于注释【code templates】,如何导入本地注释文件

    关于如何在eclipse.myeclipse导入本地注释文件 [xxx.xml]   请看操作方式 下面是code templates文件的内容 注意  把文件中的 @@@@@@@@@@@@@@@  ...

  9. JAVA_day1_变量和常量

    JAVA变量和常量 一.JAVA中的关键字 注:关键字区分大小写,Try不是关键字而try则是. 二.JAVA标识符 1.标识符:标识符就是用于给 Java 程序中变量.类.方法等命名的符号. 2.标 ...

  10. 从零开始的白帽子学习--stage1--常见漏洞类型介绍--part3--不安全的文件上传

    Q:什么是文件上传漏洞 A:文件上传功能在web应用系统很常见,比如很多网站注册的时候需要上传头像.上传附件等等.当用户点击上传按钮后,后台会对上传的文件进行判断 比如是否是指定的类型.后缀名.大小等 ...