SharePoint 2010 母版页制作的简单介绍
转:http://www.cnblogs.com/jianyus/archive/2012/01/11/2319621.html
1、 首先打开SharePoint Designer 2010,找到母版页,复制一份V4.master,用来做我们剪裁用,不建议修改之前的母版页,错了的话,不容易找回来。同时新建一个页面布局,引用自定义这个母版页,用来看效果。引用后预览下未修改的母版页,如图1所示:

2、 编辑我们复制出来的母版页,我们要做的就是要一个网站的Head将来放Flash,要网站的Foot放版权信息,还有中间的Main用来给页面布局。在这里,我暂时隐掉了左侧导航,头部的其它控件等,如果有需要,可以随时显示出来。那么,开始我们的母版页之旅吧。
3、 我们经过查看,可以看到<div id="s4-workspace">这个区域,是将来我们网站主体显示的区域,而向上查看可以发现上面是<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">这个区域,通过id我们可以看出来是2010特色的ribbon的区域。今天我们不需要这一区域,暂时隐藏掉,但是开发过程中,可能需要,当然,我们随时可以显示出来。我们在里面加上样式隐藏。
4、 继续往下看是<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">,同样通过id我们可以看到这个是title行,这个title行主要包括两部分,包括上面的网站信息行,还有下面的导航,我们隐藏掉上面的网站信息,留下下面的导航区域。同样,用样式隐藏。然后,在上面加上一个<div>用来放我们头部的Flash,样式建议写在corev4.css里面,方便我们查找。
5、 接下来是左侧导航,在PlaceHolderMain左边找到<div id="s4-leftpanel" class="s4-notdlg">这个区域,通过id我们知道这个是左侧导航,隐藏之。同时在PlaceHolderMain下面加上Foot区域,写上下面的版权信息吧。看看我们现在的样子吧,如图2。

6、 很明显有一点是不对的,通过IE开发工具,我们可以看到PlaceHolderMain的左边,还有一个区域。倒要看看这个空白是什么,继续IE开发工具找之。功夫不负有心人,终于发现<div class="s4-ca s4-ca-dlgNoRibbon" id="MSO_ContentTable">这个区域里面的s4-ca里面有个margin-left:155px;,去掉之!问题解决!下面为了展示我们的页面是不是正确的,我们把Head、Body、Foot三个区域写上字,上个背景色,看看效果,如图3.

7、 看起来,跟我们要求的差不多了,把底色去掉,换成我们的图片、Flash就OK了,为了满足开发需要,先把Ribbon填上。刚要说结束,又发现问题了,怎么Ribbon不跟着页面一起滚动,这样看着也太难看了,还得继续修改。如图4

8、 首先<body scroll="no"这个里面有个跟滚动有关的属性,把它去掉,刷新不行;对了,<body里面还有样式class="v4master",看看样式,果然,里面有设置,去掉试试,刷新,出现个怪现象,首先ribbon跟着滚动了,接着一闪又不行了。这是为什么呢?突然发现,只是中间部分滚动,是不是这部分有问题,好,看看去!找到<div id="s4-workspace">查看样式,overflow-y:scroll;overflow-x:auto;这两个参数在作祟!好吧,删之。终于在漫长的查找和修改中,完成了!惊喜的发现,不光Ribbon随着滚动了,而且在不需要滚动的情况下,右侧那个滚动条也不见了,很好!就是这样!看看劳动成果,如图5

总结: 经过母版页剪裁的这个过程,感觉2010还是有提高的,div的方式是每个功能点更容易单独使用了,但是依然没敢删掉不需要的节点。期间,当然也遇到各种问题,感谢之前分享文章的博主。下面就简单列几个自己做母版页过程中参考的文章。
参考资料:
http://www.cnblogs.com/Sunmoonfire/archive/2010/07/28/1784991.html
http://msdn.microsoft.com/en-us/library/ee537576.aspx
SharePoint 2010 母版页制作的简单介绍的更多相关文章
- SharePoint 2010 网站备份还原简单介绍
今天尝试了SharePoint2010网站的备份和还原,从网上搜一些文档看看,然后自己试试,感觉和2007的操作没什么太大的区别,跟大家分享下自己尝试的命令行方式和数据库的方式,2007自己常用的也是 ...
- SharePoint 2010 母版页定制小思路介绍
转:http://tech.ddvip.com/2013-11/1384521515206064.html 介绍:我们使用SharePoint2010做门户网站,经常需要定制母版页,但是2010提供的 ...
- 使用SharePoint 2010 母版页
SharePoint 2010母版页所用的还是ASP.NET 2.0中的技术.通过该功能,实现了页面框架布局与实际内容的分离.虽然在本质上自定义母版页的过程和以前版本的SharePoint大致相同,但 ...
- 在SharePoint 2010 母版页里添加自定义用户控件
在SharePoint 2010 母版页里添加自定义用户控件(译) 使用自定义用户控件的好处: 1.容易部署:2.易于控制显示或隐藏. (在使用的过程中)可能要面对的问题是:如何在用户控件里使用Sha ...
- SharePoint 2010 master page 控件介绍(1)
转:http://blog.csdn.net/lgm97/article/details/6409204 以下所有的内容都是根据Randy Drisgill (MVP SharePoint Serve ...
- SharePoint 2010 master page 控件介绍(3) :页面主体内容
转:http://blog.csdn.net/lgm97/article/details/6409217 <!-- ===== 页面滚动区域开始 ====================== ...
- SharePoint 2010 master page 控件介绍(5):其他
转:http://blog.csdn.net/lgm97/article/details/6409227 <!-- 处理搜索按下"enter"键和点击后退按钮 --> ...
- SharePoint 2010 master page 控件介绍(4):隐藏placeholder
转:http://blog.csdn.net/lgm97/article/details/6409225 <!-- form digest 安全控件用来进行form的安全校验--> &l ...
- SharePoint 2010 master page 控件介绍(2):ribbon (一同事读听着像泪奔)
转:http://blog.csdn.net/lgm97/article/details/6409208 <!-- ===== 开始Ribbon ======================= ...
随机推荐
- scrapy抓取到中文,保存到json文件为unicode,如何解决.
http://scrapy-chs.readthedocs.org/zh_CN/latest/intro/overview.html 以上链接是很好的scrapy学些资料.感谢marchtea的翻译. ...
- 01_JavaMail_04_带附件邮件的发送
[工程截图] [代码实例] package com.Higgin.mail.demo; import java.io.File; import java.util.Properties; import ...
- linux一部分常用的命令
如今的web项目,一般在windows下开发,然后部署在linux上.搜索了一下原因,大概是说,linux免费,此外,linux长时间运行都没有问题,可以达到1到2年不停机.因此,需要学习一些常用的l ...
- C# 制作卸载文件
1.建一个控制台应用程序Uninstall: 2.在应用程序的mian方法中添加 static void Main(string[] args) { System.Diagnostics.Proces ...
- dom例子
//凡是html标签中的属性和值是一样的,那么在js中用true或者false 1,阅读协议倒计时 <input type="button" name="name& ...
- DIV+CSS 网页布局之:三列布局
1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
- 列表字体css
white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden;
- 学一点 mysql 双机异地热备份----快速理解mysql主从,主主备份原理及实践
双机热备的概念简单说一下,就是要保持两个数据库的状态 自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始终保持两个数据库数据一致. 这样做的好处多. 1. 可以做灾备,其中一个坏了可以切换 ...
- python 中对list做减法操作
问题描述:假设我有这样两个list, 一个是list1,list1 = [1, 2, 3, 4, 5] 一个是list2,list2 = [1, 4, 5] ...
- mongodb篇二:mongodb克隆远程数据库,去重查询的命令及对应java语句
http://blog.csdn.net/qkxh320/article/details/16115671 1.首先操作mongodb最基本命令:: show databases; ...