MOSS母板页制作学习笔记（一）

转：http://xiachanghao1990.blog.163.com/blog/static/4869602420114235536573/

母版页制作其实应该算是一个比较基础的工作，但是熟练制作出灵活、完整的母版页的人却很少。。为什么会这样呢，分析原因有几个，主要的问题应该是母版页制作是介于开发和美工之间的工作，开发人员关注代码，美工关注界面效果，就忽略和回避了这部分，都不愿意作怎么办，那就我来作吧。。

首先MOSS的母版页也是来自于asp.net的母版页，原理都是一样的。

基于微软提供的文档，母版页制作有两种方式：一，布局变化不大的情况下，在原母版页上修改；二，重新制作。

我们主要说说重新制作吧。。

最简单的理解就是：

第一，先知道哪些是母板页中必须有的元素；

第二，从美工处拿到界面的展示效果和html布局，css样式表；

第三，从SPD创建一个新的母版页，将html代码复制进去；

第四，将css放到相应位置，母版页应用对应的css；

第五，将美工模拟的控件用母版页中的占位符替换；

第六，除了必须的元素外，还需要添加什么附加控件，也加到相应的位置；

完成！

下面详细说下每一步：

一、哪些是母板页中必须有的元素

空白的，没有样式的包括所有占位符的母版页：

<%-- Identifies this page as a .master page written in C# and registers tag prefixes, namespaces, assemblies, and controls. --%>

<%@ Master language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ Import Namespace="Microsoft.SharePoint" %>

<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %>

<%@ Register TagPrefix="wssuc" TagName="DesignModeConsole" src="~/_controltemplates/DesignModeConsole.ascx" %>

<%@ Register TagPrefix="PublishingVariations" TagName="VariationsLabelMenu" src="~/_controltemplates/VariationsLabelMenu.ascx" %>

<%@ Register Tagprefix="PublishingConsole" TagName="Console" src="~/_controltemplates/PublishingConsole.ascx" %>

<%@ Register TagPrefix="PublishingSiteAction" TagName="SiteActionMenu" src="~/_controltemplates/PublishingActionMenu.ascx" %>

<%-- Uses the Microsoft Office namespace and schema. --%>

<html>

<WebPartPages:SPWebPartManager runat="server"/>

<SharePoint:RobotsMetaTag runat="server"/>

<head runat="server">

    <asp:ContentPlaceHolder runat="server" id="head">

      <title>

        <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server" />

      </title>

    </asp:ContentPlaceHolder>

    <Sharepoint:CssLink runat="server"/>

    <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" />

</head>

<body onload="javascript:_spBodyOnLoadWrapper();">

    <form runat="server" onsubmit="return _spFormOnSubmitWrapper();">

      <wssuc:Welcome id="explitLogout" runat="server"/>

      <PublishingSiteAction:SiteActionMenu runat="server"/>

      <PublishingWebControls:AuthoringContainer id="authoringcontrols" runat="server">

        <PublishingConsole:Console runat="server" />

      </PublishingWebControls:AuthoringContainer>

      <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />

        <asp:Panel visible="false" runat="server">

<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"/>

<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server"/>

<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server"/>

<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server"/>

<asp:ContentPlaceHolder ID="PlaceHolderPageImage" runat="server"/>

<asp:ContentPlaceHolder ID="PlaceHolderBodyLeftBorder" runat="server"/>

<asp:ContentPlaceHolder ID="PlaceHolderNavSpacer" runat="server"/>

<asp:ContentPlaceHolder ID="PlaceHolderTitleLeftBorder" runat="server"/>

<asp:ContentPlaceHolder ID="PlaceHolderTitleAreaSeparator" runat="server"/>

<asp:ContentPlaceHolder ID="PlaceHolderMiniConsole" runat="server"/>

<asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat ="server" />

<asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>

<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat ="server"/>

<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat ="server"/>

<asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat ="server"/>

</asp:Panel>

    </form>

</body>

</html>

然后我们来分别认识下这些占位符：

1、<asp:ContentPlaceHolder ID="PlaceHolderGlobalNavigationSiteMap" runat="server" />

就是一般放在最上面一行显示站点名称的，点击返回到首页；这是占位符，包含控件默认的写法是：

<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server">

<asp:SiteMapPath SiteMapProvider="SPSiteMapProvider" id="GlobalNavigationSiteMap" RenderCurrentNodeAsLink="true" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>

</asp:ContentPlaceHolder>

2、<asp:ContentPlaceHolder ID="PlaceHolderGlobalNavigation" runat="server" />

放置顶部一行内容的占位符；一般中间可以加上表格，并放上需要的东西，例如欢迎信息，我的站点等。例如欢迎信息：

<asp:ContentPlaceHolder ID="PlaceHolderGlobalNavigation" runat="server">

<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false"></wssuc:Welcome> </asp:ContentPlaceHolder>

欢迎信息也可以单独拿出来放在其他位置。

3、<asp:ContentPlaceHolder ID="PlaceHolderSiteName" runat="server" />

放置LOGO旁边的大的站点名称的占位符；中间加了内容的默认写法是：

<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle">

<SharePoint:ProjectProperty Property="Title" runat="server" />

</SharePoint:SPLinkButton>

4、<asp:ContentPlaceHolder ID="PlaceHolderSearchArea" runat="server" />

放置搜索框的占位符；全局母版页，添加了内容的默认写法是

<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">

<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox"/>

</asp:ContentPlaceHolder>

当然样式也可以调整，例如只要搜索框，就直接写代码：

<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">

<SPSWC:SearchBoxEx id="SearchBox" RegisterStyles="false" TextBeforeDropDown="" TextBeforeTextBox="<%$Resources:cms,masterpages_searchbox_label%>" TextBoxWidth="100" GoImageUrl="<% $SPUrl:~sitecollection/xx.jpg %>"

GoImageUrlRTL="<% $SPUrl:~/xx.jpg %>" UseSiteDefaults="true" DropDownMode = "HideScopeDD" SuppressWebPartChrome="true" runat="server" WebPart="true" __WebPartId="{0CA22729-81FE-4BC5-8261-D2A8EE83AE77}"/>

</asp:ContentPlaceHolder>

5、<asp:ContentPlaceHolder ID="PlaceHolderHorizontalNav" runat="server" />

放置水平导航栏的占位符；全局母版页，添加了内容的默认写法是

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">

<SharePoint:AspMenu

   ID="TopNavigationMenu"

   Runat="server"

   DataSourceID="topSiteMap"

   EnableViewState="false"

   AccessKey="<%$Resources:wss,navigation_accesskey%>"

   Orientation="Horizontal"

   StaticDisplayLevels="2"

   MaximumDynamicDisplayLevels="1"

   DynamicHorizontalOffset="0"

   StaticPopoutImageUrl="/_layouts/images/menudark.gif"

   StaticPopoutImageTextFormatString=""

   DynamicHoverStyle-BackColor="#CBE3F0"

   SkipLinkText=""

   StaticSubMenuIndent="0"

   CssClass="ms-topNavContainer">

  <StaticMenuStyle/>

  <StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/>

  <StaticSelectedStyle CssClass="ms-topnavselected" />

  <StaticHoverStyle CssClass="ms-topNavHover" />

  <DynamicMenuStyle BackColor="#F2F3F4" BorderColor="#A7B4CE" BorderWidth="1px"/>

  <DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/>

  <DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/>

  <DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected"/>

</SharePoint:AspMenu>

<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource">

  <Template_Controls>

   <asp:SiteMapDataSource

     ShowStartingNode="False"

     SiteMapProvider="SPNavigationProvider"

     id="topSiteMap"

     runat="server"

     StartingNodeUrl="sid:1002"/>

  </Template_Controls>

</SharePoint:DelegateControl>

</asp:ContentPlaceHolder>

要应用其他样式，就把cssclass样式都去掉，修改应用到母版页的样式表就可以了，另外，注意DataSourceID，导航栏的数据来源是可以设定，例如从xml中获取数据；StaticDisplayLevels和MaximumDynamicDisplayLevels也很重要，可以用来修改导航栏的样式和展现方式。

6、<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server" />

放置水平导航栏一行内容的占位符，在PlaceHolderHorizontalNav外面一层。

7、<asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server" />

页面编辑控件，当页面进入编辑页面模式时使用(当我们点 Site Actions, Edit Page后)

8、<asp:ContentPlaceHolder ID="SPNavigation" runat="server" />

在 Windows SharePoint Services中默认为空，用于附加的页面编辑控件的占位符，

9、<asp:ContentPlaceHolder ID="PlaceHolderPageImage" runat="server" />

左侧的图片的占位符，

10、<asp:ContentPlaceHolder ID="PlaceHolderTitleLeftBorder" runat="server" />

Title区左侧边框的占位符，

11、<asp:ContentPlaceHolder ID="PlaceHolderTitleBreadcrumb" runat="server" />

TitleBreadcrumb页面导航区的占位符，

12、<asp:ContentPlaceHolder ID="PlaceHolderPageTitleInTitleArea" runat="server" />

Breadcrumb区下面的标题的占位符，

13、<asp:ContentPlaceHolder ID="PlaceHolderMiniConsole" runat="server" />

一个放置页面级命令的地方，比如在WIKI站点里的Edit Page, History, Incoming Links的占位符，

14、<asp:ContentPlaceHolder ID="PlaceHolderTitleRightMargin" runat="server" />

Title区右侧空白的占位符，

15、<asp:ContentPlaceHolder ID="PlaceHolderTitleAreaSeparator" runat="server" />

TitleAreaSeparator 区的占位符，

16、<asp:ContentPlaceHolder ID="PlaceHolderLeftNavBarDataSource" runat="server" />

左侧导航区数据源的占位符，

17、<asp:ContentPlaceHolder ID="PlaceHolderCalendarNavigator" runat="server" />

在页面中有日历时为其显示一个日期选择框的占位符，

18、<asp:ContentPlaceHolder ID="PlaceHolderLeftNavBarTop" runat="server" />

左侧导航区上面的导航区的占位符，

19、<asp:ContentPlaceHolder ID="PlaceHolderLeftNavBar" runat="server" />

左侧导航区的占位符，

20、<asp:ContentPlaceHolder ID="PlaceHolderLeftActions" runat="server" />

左侧导航区下面的动作区的占位符，

21、<asp:ContentPlaceHolder ID="PlaceHolderNavSpacer" runat="server" />

左侧导航区的宽度的占位符，

22、<asp:ContentPlaceHolder ID="PlaceHolderLeftNavBarBorder" runat="server" />

左侧导航区的边框元素的占位符，

23、<asp:ContentPlaceHolder ID="PlaceHolderBodyLeftBorder" runat="server" />

页面body的边框元素的占位符，

24、<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />

页面描述区的占位符，

25、<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />

页面主体的占位符，

26、<asp:ContentPlaceHolder ID="PlaceHolderBodyRightMargin" runat="server" />

页面body的右边空白的占位符，

27、<asp:ContentPlaceHolder ID="PlaceHolderFormDigest" runat="server"/>

这是页面中必备的 "form digest"安全组件的占位符，

28、<asp:ContentPlaceHolder ID="PlaceHolderUtilityContent" runat="server" />

页面底部需要的一块特殊内容的占位符，

29、<asp:ContentPlaceHolder ID="PlaceHolderBodyAreaClass" runat="server" />

附加在页面顶部的body中的样式的占位符，

30、<asp:ContentPlaceHolder ID="PlaceHolderTitleAreaClass" runat="server" />

TitleArea附加的样式的占位符，

31、<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" />

提供给内容页添加所有可以放在<head>区域的内容，如CSS、JS等的占位符，

从美工处拿到界面的展示效果和html布局，css样式表

这个按理是不用说了，这里少说几句，html的页面也是有布局要求的，要提前和美工说好，比如要把头尾中间分开，需要写循环的地方不要用一个表格套下来等等。

从SPD创建一个新的母版页，将html代码复制进去

step(1): 打开Sharepoint Designer.

step(2): 在文件菜单点击New，选择Sharepiont Content，选择Page 标签。

step(3): 双击母版页来创建一个母版页。

step(4): 选择在代码模式下查看母版页。

step(5): 把html的代码拷贝并粘贴到母板页中（注意别把原来的必须元素代码覆盖了）

step(6): 去掉重复的元素，例如<html>

将美工模拟的控件用母版页中的占位符替换；

除了必须的元素外，还需要添加什么附加控件，也加到相应的位置；

这两个就不用说了吧。。

MOSS母板页制作学习笔记（一）的更多相关文章

Android学习笔记（十二）——实战：制作一个聊天界面
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Pa ...
【Unity 3D】学习笔记29：游戏的例子——简单的小制作地图
无论学习.只看不练是坏科学. 因此,要总结回想这怎么生产MMROPG小地图的游戏.于MMROPG游戏类,在游戏世界中行走时导致各地,通常在屏幕的右上角,将有一个区域,以显示当前的游戏场景微缩.在游戏世 ...
[P1169] 棋盘制作 &悬线法学习笔记
学习笔记悬线法最大子矩阵问题: 在一个给定的矩形中有一些障碍点,找出内部不包含障碍点的,边与整个矩形平行或重合的最大子矩形. 极大子矩型:无法再向外拓展的有效子矩形最大子矩型:最大的一个有效子矩 ...
lfs（systemd版本）学习笔记-第3页
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemd)学习笔记-第2页的地址:https://www.cnblogs.com/renren-study-no ...
lfs（systemd版本）学习笔记-第4页
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemd版本)学习笔记-第3页的地址:https://www.cnblogs.com/renren-study- ...
blfs（systemd版本）学习笔记-总页
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemd版本)学习笔记:https://www.cnblogs.com/renren-study-notes/p/ ...
lfs（systemd版本）学习笔记-第1页
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一名linux爱好者,记录构建Linux From Scratch的过程经博客园-骏马金龙前辈介绍,开始接触学习lfs,用博客 ...
lfs（systemd版本）学习笔记-第2页
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemd)学习笔记-第1页的地址:https://www.cnblogs.com/renren-study-no ...
blfs（systemv版本）学习笔记-制作一个简单的桌面系统
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 大概思路: lfs(系统)+xorg(驱动)+i3-wm(窗口+桌面)+lightdm(显示管理器+登录管理器) 链接: lfs ...

随机推荐

四、使用Maven和使用Eclipse构建javaWeb项目
环境前边已经搭建过了,我们就再弄了. 1.使用Maven构建javaWeb项目 (1).键入以下命令: $ mvn archetype:generate -DgroupId=com.holytax.w ...
BCEC手动验证业务方法
在每次割接或业务调整后手动执行并做好业务验证工作一.研发区利用ansible手动执行巡检程序: 步骤1:登陆 10.254.3.4/opt/ansible 步骤2:手动执行 sh compute_c ...
greenplum学习
公司TM蛋疼,动不动让你学习新东西,就是不让你闲下来,本着胳膊拧不过大腿定律,忍了,这是背景. 好吧哥端起一本厚厚的<GreenPlum企业应用实战>,打开百度开始GP的学习之路: GP只 ...
centOS 6.4 vsftpd 500 illegal port command
原先配置好的vsftpd突然不行了,不知为啥,感觉跟网络有关,这个网络总是有dns拦截的现象,..小公司.真烦人,用联通线路就没问题, 但同事就是连不上,我的笔记本却可以连接上..我的ubuntn,同 ...
gcc 生成动态库时-fpic选项是什么意思。
-f后面跟一些编译选项,PIC是其中一种,表示生成位置无关代码(Position Independent Code)
认识linux权限
首先,我们来了解下linux系统的用户和用户组场景:公司里有两个项目组:小组A和小组B:A.B.C是小组A的成员,甲.乙是小组B的成员.为了保密起见,小组内的进度.文档.程序都有小组内公开.比如小组 ...
sar监控系统状态
sar 命令很强大,它可以监控系统所有资源状态,比如平均负载.网卡流量.磁盘状态.内存使用等等. 它不同于其他系统状态监控工具的地方在于,它可以打印历史信息,可以显示当天从零点开始到当前时刻的系统状态 ...
OpenCV学习目录（持续更新）
这个暑假开始,需要用到图像处理相关的东西,于是我选择了OpenCV库,这里记录下我的整个学习过程. 参考资料: <OpenCV 2计算机视觉编程手册> 张静译,科学出版社 1. Linu ...
如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法
div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...
jquery 放大图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

MOSS母板页制作 学习笔记（一）

MOSS母板页制作 学习笔记（一）的更多相关文章

随机推荐

热门专题

MOSS母板页制作学习笔记（一）

MOSS母板页制作学习笔记（一）的更多相关文章