本文主要介绍如何为SharePoint 2013网站创建Master Page。与以前版本开发不同,如果你熟悉html/CSS/JavaScript, 那么恭喜你,SharePoint2013的Master Page你已经掌握了90%。以前版本的Master Page开发是基于asp.net的,而SharePoint2013的Master Page是基于HTML的。本文将会一步一步来实现创建一个新的Master Page。

以http://sharepoint.microsoft.com/en-us/Pages/default.aspx为例子,该网站是微软SharePoint官方网站,我们要创建一个类似于它的2013网站。

SharePoint Master Page结构分析及准备工作

使用Master Page可以为网站中的页面创建一致的布局、样式。在本例中,导航,Log将会出现在网页顶部。

版本信息,相关链接等将会出现在网站底部。

网页中间的内容会出现在内容页里面,创建一个Page Layout即可。网页中间内容不在本文讨论范围之内,具体办法和SharePoint 2010类似。

第一步就是创建一个HTML页面,为了简化期间,直接使用图片来代替复杂的样式等内容,请自动忽略样式及美观。

HTML页面效果如下图:

HTML代码如下:

注意:如果想顺利将此文件转化为Master Page, 里面的HTML标签要闭合。不能出来错误或不完整的标签,例如少“</div>”。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<link rel="stylesheet" type="text/css" href="images/style.css"/>

</head>

<body>

<div class="warp">

<div class="header"><img src="Images/Header.png" /></div>

<div class="maincontent">网页主要内容会显示在这</div>

<div class="footer"><img src="Images/footer.png" /></div>

</div>

</body>

</html>

Design Manager

点击网站设置,在弹出菜单中就可以看到“Design Manager”。点击之后即可以将刚做的HTML页面转化为Master Page。

如果点击网站设置在弹出菜单中没有“Design Manager”,在网站设置中激活“Publishing”功能即可。

上传HTML文件及图片

在网站设置中,点击“Master pages and page layouts”。

然后将HTML文件上传到该文件夹中。

图片和样式上传到了网站”Images”文档库,所以在HTML页面中的图片地址稍后要做一些调整。

将HTML转换为Master Page

点击Design Manager,打开转换页面。选择4”Edit Master Pages”. 在打开的页面选择”Convert an HTML file to a SharePoint master page”.

在弹出的选择框中选择刚上传的HTML页面。

点击文件名开始转化。

系统会提示转化结果,下一步要做的就是将黄色的DIV区域移到将来编辑内容的区域。

用SharePoint Designer打开网站,然后在Master Pages中找到我们的HTML页面。在HTML文件的下方自动生成了同名的master page文件。

在高级模式下编辑HTML页面。可以自动SharePoint自动为HTML页面添加了很多标记。

找到黄色的DIV,然后将它移到中间内容区域。

最终形成的代码如下:

最终效果如下图:

将master page发布之后,就可以在网站设置中将网站master page换成自定义的。网页最终效果如下图:

转载于:https://www.cnblogs.com/crazysharepoint/archive/2012/11/26/SP2013MasterPage.html

SharePoint 2013—创建Master Page相关推荐

  1. 如何在SharePoint 2013 创建Power pivot 库(How to create a PowerPivot Gallery )及错误解决方法

    如何在SharePoint 2013 创建Power pivot 库(How to create a PowerPivot Gallery ) 为了这样一个功能 浪费我一个上午的时间. 需求是在Sha ...

  2. 为SharePoint 2010创建Application Page

    如果不了解什么是Application Page,可以参考我以前写过的这篇文章.SharePoint 2010的页面模型没有太多的变化,基本和2007保持一致.对于开发人员而言,为SharePoint ...

  3. SharePoint 2013 创建一个搜索中心和搜索设置

    这篇文章不是太多深奥的东西,只是一个简单的搜索配置,假设你已经有了,请跳过这篇文章. 行,输入信息,大家都知道,搜索SharePoint一个主要特征.下列,我们在搜索中心创建个人资料. 1.创建Sea ...

  4. 通过SharePoint Designer对SharePoint 2010的Master Page进行自定制

    1:需要在对应的SiteCollection 和 Site 中开启Publishing的服务 2:在Designer中创建自己的Master Page,进行对原始v4.master代码进行复制,和修改 ...

  5. SharePoint要在master page中动态显示List数据的几种方式

    我们都知道,在SharePoint中,Content page继承自Page layout,而Page layout又继承自Master page.Master page的作用大家都知道,它定义了站点 ...

  6. SharePoint 2013创建应用程序时IIS端口文件夹下没文件

    最近SharePoint 2007迁移到2013的时候,碰到创建应用程序时IIS端口文件夹下没文件的问题,网上找了大把的原因,终于在这里找到了解决方案: Fix: 1. Open IIS on the ...

  7. 利用SharePoint 2013 创建Service Desk 网站之发布表单模板到文档库

    前面我们的表单模板基本上已经创建完成,接下来我们就该把这些表单模板发布到我们的网站,操作的方法如下: 1. 点击文件-发布到SharePoint服务器 2. 填写我们的发布地址: 3. 设置为表单库: ...

  8. SharePoint 2013中规划企业搜索体系结构

    SharePoint 2013中规划企业搜索体系结构 摘要:了解如何规划小型.中型或大型企业搜索体系结构. 设置企业搜索体系结构之前,需要仔细规划很多事项.我们将逐步帮助您规划小型.中型或大型企业搜索 ...

  9. 在 SharePoint 2013 中选择正确的 API 集

    决定使用哪个 API 集的因素 您可以在多个 API 集中选择一个来访问 SharePoint 2013 平台.您使用哪一个 API 集取决于以下因素: 应用程序的类型. 可能的类型包括但不限于以下不 ...

  10. SharePoint 2013 的硬件和软件要求

    http://technet.microsoft.com/zh-CN/library/cc262485%28v=office.15%29.aspx 重要说明: 如果您就生产系统未满足本文档中所述的最低 ...

最新文章

  1. js 识别汉字和全角字符
  2. caffe loss
  3. Hybrid框架UI重构之路:三、工欲善其事,必先利其器
  4. 给WIN7安装盘添加双PE3.0
  5. java double精确比较,Java float比double更精确?
  6. poj 3486 A Simple Problem with Integers(树状数组第三种模板改段求段)
  7. ES6-----学习系列十三(类与对象)
  8. 高斯滤波/高斯平滑/高斯模糊的实现及其快速算法(Gaussian Filter, Gaussian Smooth, Gaussian Blur, Fast implementation)
  9. ckeditor 部分保存按钮去除_怎样去除mp4视频中的水印呢
  10. Sql Server Express版本升级到企业版
  11. mysql 数据库建模工具 mysqlworkbench
  12. AI近义词替换工具.v.1.2
  13. C语言学习 -- 数组
  14. 游戏修改器制作教程三:内存与Cheat Engine
  15. WPF界面美化(整体作用到控件),一步步教你使用FirstFloor.ModernUI
  16. 假设检验:使用p值来接受或拒绝你的假设
  17. 皓月酒店管理系统: Jquery + Servlet + Mybatis
  18. 想用FPGA加速神经网络,这两个开源项目你必须要了解
  19. 企业经营中的“细节杀”:无线AP让你比别人更快一步
  20. 因网络延迟造成数据库插入相同记录,如何解决.

热门文章

  1. iOS下拉刷新和上拉刷新
  2. 回顾云计算项目的得与失
  3. jquery 分页插件
  4. mysql sqrt_详解MySQL中的SQRT函数的使用方法
  5. 电脑太慢了最简单的办法怎么弄_最简单快速的方法恢复电脑误删文件-数据恢复常见问题...
  6. fastadmin在html中查询数据,常见问题 · fastadmin 常见问题 · 看云
  7. usb环境Linux,Linux环境下USB的原理、驱动和配置
  8. mybatis注册映射文件
  9. JAVA if语句快捷键_java编程基础 第一、第二章
  10. oracle查询所有表字段属性_MybatisPlus基础篇学习笔记(四)------查询方法