SharePoint 2013 入门教程之创建及修改母版页

简介: 原文:SharePoint 2013 入门教程之创建及修改母版页  在SharePoint 2013中,微软提供了根据HTML页面转换Master页的方法,并支持单项同步,但是这样的更新,并不完善,会使一些功能造成丢失,所以,了解Master结构的人,尽量直接去修改Master比较方便。
原文: SharePoint 2013 入门教程之创建及修改母版页

  在SharePoint 2013中,微软提供了根据HTML页面转换Master页的方法,并支持单项同步,但是这样的更新,并不完善,会使一些功能造成丢失,所以,了解Master结构的人,尽量直接去修改Master比较方便。

  当然,如果需要使用母版页,必须开启SharePoint 2013的发布功能,也就是去网站集功能和网站功能,打开激活发布的Feature。

1、激活发布功能

image

2、打开SharePoint Designer 2013(以下简称spd),打开网站,右侧菜单选择母版页,选中seattle.master,Ctrl+C –>Ctrl+V,然后重命名即可。当然,你可以选择其他母版页,两个母版页的命名很有意思,一个西雅图,一个奥斯陆(挪威首都);

image

3、  右键 -> 在高级模式下编辑文件(或者直接双击)进入代码编辑,如果出现大片黄色背景,可以选择Ribbon菜单上的高级模式(途中红框标识);

image

 

4、在<div id="s4-workspace"上面,添加header

image

效果,如下图:

image

5、在</SharePoint:SharePointForm>上面,添加Foot

image

效果,如下图:

image

6、但是打开页面,你会发现看不到footdiv(如下图),因为被sharepoint样式覆盖了;

image

添加样式:

          body   /*Body元素样式*/

          {

          width:1349px !important;

          overflow:auto !important;

          padding:0 !important;

          margin:0 !important;

          background-color:green !important;

         }

 

7、添加body样式后效果,如下图:

image

8、隐藏左侧导航,添加如下样式:

         /*左侧导航隐藏*/

         #sideNavBox

         {

         display:none !important;

         }

效果如下图

image

如上图,左侧导航被css样式表隐藏掉了,同样的方法,我们可以隐藏掉标题栏,修改空出来的paddingmargin值,而Css样式都可以通过浏览器开发工具进行查找。

9、隐藏标题Div,如下css样式;

         /*标题行隐藏*/

         #s4-titlerow

         {

         display:none !important;

         }

效果,如下图:

image

10、去掉s4-workspace的宽高,设为自动值;

         /*去掉wordspace宽高*/

         #s4-workspace

         {

         width:auto !important;

         height:auto !important;

         }

效果,如下图:

image

至此,我们只需要把红框位置的空白去掉就可以了,然后给headerfoot自己的样式,就能达到我们想要的效果。

11、隐藏边框css样式,并且,给headerfoot所在div样式,因为测试,所以样式给的有点难看,大家参考一下方法就好;

         /*去掉内容margin*/

         #contentBox

         {

         margin:0;

         }

        

         /*去掉行padding*/

         #contentRow

         {

         padding:0;

         }

        

         /*去掉body容器padding*/

         #s4-bodyContainer

         {

         padding:0;

         }

        

         /*div样式*/

         .myhead

         {

         height:70px;

         background-color:#90AFC6;

         text-align:center;

         vertical-align:middle;

         }

        

         /*div样式*/

         .myfoot

         {

         height:50px;

         background-color:#90AFC6;

         text-align:center;

         vertical-align:middle;

         }

 

12、最后的展示效果,如下图:

image

如上图,就是最后母版页的效果了,你可以在header里面放上你的flash、导航等,foot是网站的版权信息,中间部分就是网站的布局了。当然,如果你想再修改ribbon菜单的话,也可以参照上面方法,找到标签名称,使用权限+css样式表(或者js)的方式,更合理的处理Ribbon菜单。

 

结束语

本文介绍的只是一个母版页的制作思路,并不是一个完整实例,也没有根据一个完整的效果图进行排版,只是希望给大家一个简单参考,希望对于刚刚入门的人们有所帮助。

当然,如果你还不清楚母版页在SharePoint中的作用,本文并没有深入介绍,你可以参考附录中的参考文档,了解SharePoint中页面结构,加深自己的理解。

 

附录

SharePoint 2013 页面模型概述

http://msdn.microsoft.com/library/jj191506(v=office.15)

目录
相关文章
|
存储 消息中间件 监控
|
前端开发 Java Apache
SpringBoot实现电子文件签字+合同系统!
【10月更文挑战第15天】 在现代企业运营中,合同管理和电子文件签字成为了日常活动中不可或缺的一部分。随着技术的发展,电子合同系统因其高效性、安全性和环保性,逐渐取代了传统的纸质合同。本文将详细介绍如何使用SpringBoot框架实现一个电子文件签字和合同管理系统。
1310 1
|
测试技术 数据库
『软件测试2』 关于黑盒测试和测试用例的基础知识
该文章讲解了黑盒测试的基本概念以及如何编写有效的测试用例,包括选择合适的输入数据、预期结果的设定和测试执行的步骤。
|
5月前
|
安全 测试技术 网络安全
2025年移动应用渗透测试流程方案及iOS与Android框架对比
聚焦2025年移动应用渗透测试,介绍行业背景与趋势,分析核心问题与挑战,对比开源、商业、混合三类主流解决方案的优劣势,深入剖析iOS与Android框架差异,阐述标准测试流程、关键成功要素,还解答方案选择、成本评估等常见问题,为企业提供全面参考。
|
域名解析 Kubernetes JavaScript
如何开发一个完整的Helm charts应用实例(1)
如何开发一个完整的Helm charts应用实例(1)
如何开发一个完整的Helm charts应用实例(1)
|
Ubuntu Linux Web App开发
在Linux下如何安装QQ?
本文导航 第1页:如何在linux版本中安装QQ 第2页:linuxqq安装下载完成 第3页:linuxqq安装完成 第4页:linuxqq的体验 第5页:使用tar.gz 包安装 1如何在linux版本中安装QQ     对于大多数网友来说,开源Linux发行版未能成为市场主流应用,其很大一部分原因是支持软件相对较少,娱乐功能有限,导致很多用户放弃
2437 0
|
算法 数据安全/隐私保护
以太网与 IEEE 802.3
以太网与 IEEE 802.3 标准
1256 0
以太网与 IEEE 802.3
|
机器学习/深度学习 人工智能 算法
人工智能的三大主义--——行为主义(actionism),连接主义 (connectionism)
这段内容涵盖了人工智能领域的重要概念和历史节点。首先介绍了布鲁克斯的六足行走机器人及Spot机器狗,被视为新一代“控制论动物”。接着解释了感知机作为最简单的人工神经网络,通过特征向量进行二分类。1974年,沃伯斯提出误差反向传播(BP)算法,利用梯度调整权重以优化模型。最后,阐述了符号主义、连接主义和行为主义三大学派的发展与融合,强调它们在持续学习中共同推动人工智能的进步。
人工智能的三大主义--——行为主义(actionism),连接主义 (connectionism)
|
11月前
|
安全 Java 编译器
JD-GUI,java反编译工具及原理: JavaDecompiler一个Java反编译器
Java Decompiler (JD-GUI) 是一款由 Pavel Kouznetsov 开发的图形化 Java 反编译工具,支持 Windows、Linux 和 Mac Os。它能将 `.class` 文件反编译为 Java 源代码,支持多文件标签浏览、高亮显示,并兼容 Java 5 及以上版本。JD-GUI 支持对整个 Jar 文件进行反编译,可跳转源码,适用于多种 JDK 和编译器。其原理基于将字节码转换为抽象语法树 (AST),再通过反编译生成代码。尽管程序可能带来安全风险,但可通过代码混淆降低可读性。最新版修复了多项识别错误并优化了内存管理。
9788 1
|
Web App开发 监控 应用服务中间件

热门文章

最新文章