Sharepoint 2010 自定义布局页

Sharepoint 2010 自定义布局页

这里主要介绍如何使用Sharepoint Designer自定义布局页，及如何使用Visual Studio 2010创建部署解决方案。

1:创建内容类型

1-1：首先我们使用VS2010 创建一个内容类型项目。

1-2：该内容类型继承“页面”内容类型，页面内容类型属于发布内容。

1-3：我希望在页面上面显示一些“版权” ，“图像”等。所以需要为这些内容提供一个栏位来存醋。所以我们需要在这内容类型里面新增几个栏。代码如下：

01 <?xml version="1.0" encoding="utf-8"?>
02 <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
03   <!-- Parent ContentType: 页面 (0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39) -->
04   <ContentType ID="0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900d9382e6c08b34b38af10610a206f51c1"
05                Name="Ylsoft门户网站页面"
06                Group="YLSoft Portal"
07                Description="Ylsoft门户网站页面内容类型"
08                Version="0">
09     <FieldRefs>
10         <FieldRef ID="{F55C4D88-1F2E-4ad9-AAA8-819AF4EE7EE8}" Name="PublishingPageContent" DisplayName="网页内容"/>
11         <FieldRef ID="{3de94b06-4120-41a5-b907-88773e493458}" Name="PublishingPageImage" DisplayName="页面图像" />
12         <FieldRef ID="{543BC2CF-1F30-488e-8F25-6FE3B689D9AC}" Name="PublishingRollupImage" DisplayName="滚动图像" />
13         <FieldRef ID="{31E5E0E6-73C7-41BA-BFC8-7E43B454C1EB}" Name="PublishingPageSideContent" DisplayName="网页边栏内容"/>
14         <FieldRef ID="{6f7a46dc-94e6-46b6-916b-cd05092e42ec}" Name="PublishingPageAreaShow" DisplayName="显示区域"/>
15         <FieldRef ID="{FB0A88BB-8D83-4436-B650-2C14D1A2C1BC}" Name="PublishingPageCopyRight" DisplayName ="版权"/>
16     </FieldRefs>
17   </ContentType>
18     <Field ID="{31E5E0E6-73C7-41BA-BFC8-7E43B454C1EB}"
19            Name="PublishingPageSideContent"
20            StaticName="PublishingPageSideContent"
21            SourceID="http://schemas.microsoft.com/sharepoint/v3"
22            Group="YLSoft Portal"
23            DisplayName="网页边栏内容"
24            Type="HTML"
25            Required="FALSE"
26            Sealed="TRUE"
27            RichText="TRUE"
28            RichTextMode="FullHtml" />
29     <Field ID="{FB0A88BB-8D83-4436-B650-2C14D1A2C1BC}"
30            Name="PublishingPageCopyRight"
31            DisplayName ="版权"
32            StaticName="PublishingPageCopyRight"
33            SourceID="http://schemas.microsoft.com/sharepoint/v3"
34            Group="YLSoft Portal"
35            Type="HTML"
36            Required="FALSE"
37            Sealed="TRUE"
38            RichText="TRUE"
39            RichTextMode="FullHtml" />
40     <Field Type="MultiChoice"
41            DisplayName="显示区域"
42            Required="FALSE"
43            EnforceUniqueValues="FALSE"
44            Indexed="FALSE"
45            FillInChoice="FALSE"
46            Group="YLSoft Portal"
47            ID="{6f7a46dc-94e6-46b6-916b-cd05092e42ec}"
48            SourceID="{f67bda5f-fa92-48f8-b1d5-0cfcf724358b}"
49            StaticName="显示区域"
50            Name="显示区域">
51         <Default>无</Default>
52         <CHOICES>
53             <CHOICE>无</CHOICE>
54             <CHOICE>网站导航</CHOICE>
55             <CHOICE>页眉导航</CHOICE>
56             <CHOICE>页脚导航</CHOICE>
57         </CHOICES>
58     </Field>
59 </Elements>

然后我们发布此内容类型。

2：使用Sharepoint Designer 2010创建布局页

2-1:新建布局页

进入Sharepoint Designer2010

在新建界面，选择我们刚刚发布的内容类型。

我们开始设计这个界面。主要是如何使用我们刚刚创建的那些栏。

2-2：设计布局页

布局页使用默认的母板页，母板页我已经做好，或则你就使用系统默认的母板页页可以。建好布局页，我们一般都需要对PlaceHolderMain的内容区域进行排版布局。

01 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
02 <!-- 横幅banner开始-->
03   <tr>
04     <td>
05
06     </td>
07   </tr>
08 <!-- 横幅banner结束-->
09   <tr>
10     <td height="10"></td>
11   </tr>
12   <tr>
13     <td style="text-align:center;" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
14       <tr>
15       <!-- 位置提示开始-->
16         <td style="vertical-align:top; text-align:left; line-height:36px;">
17         </td>
18       <!-- 位置提示结束-->
19         <td width="10" rowspan="2" style="width:10px;">&nbsp;</td>
20         <td rowspan="2"  style="width:245px; vertical-align:top;">
21         <!--右边栏目开始-->
22         <div style="height:10px;"></div>
23         <!--右边栏目结束-->
24         </td>
25       </tr>
26       <tr>
27         <td style="vertical-align:top; text-align:left;">
28         <!--文章内容表格开始-->
29         <table width="100%" border="0" cellspacing="0" cellpadding="0">
30           <tr>
31             <td>
32
33             </td>
34           </tr>
35         </table>
36         <!--文章内容表格结束-->
37         </td>
38       </tr>
39     </table>
40     </td>
41   </tr>
42   <tr>
43     <td style="text-align:center; height:10px;"></td>
44   </tr>
45   </table>
46     <table width="100%" border="0" cellspacing="10" cellpadding="0" style="border-top:#AACBEE 1px solid; background-image:url(_layouts/images/ylsoft/portal/10soft-bottom-bg.jpg);">
47       <tr>
48         <td align="center">
49         </td>
50       </tr>
51    </table>

我就在PlaceHolderMain插入上面的表格。效果如下图。基本布局就这样。

我们在第一行插入WEBPART
 

在同一行，我们还想显示我们内容类型里面“页面图像”网站栏的内容。很简单，操作如图 ：

详细过程就不描述，其中还有一个服务器控件(Sharepoint)里面的EditModePanel也比较有用，这控件只会在编辑模式下才会显示。最后的布局如下：

HTML：

01 <%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document"%>
02 <%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
03 <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
04     <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
05 </asp:Content>
06 <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
07 <PublishingWebControls:editmodepanel runat="server" id="editmodepanel1">
08 <SharePointWebControls:CheckBoxChoiceField FieldName="6f7a46dc-94e6-46b6-916b-cd05092e42ec" runat="server">
09 </SharePointWebControls:CheckBoxChoiceField>
10 </PublishingWebControls:editmodepanel>
11 <asp:ScriptManagerProxy runat="server" id="ScriptManagerProxy">
12 </asp:ScriptManagerProxy>
13 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
14 <!-- 横幅banner开始-->
15   <tr>
16     <td>
17     <WebPartPages:WebPartZone runat="server" Title="顶部" ID="top"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
18     <PublishingWebControls:RichImageField FieldName="3de94b06-4120-41a5-b907-88773e493458" runat="server"></PublishingWebControls:RichImageField>
19     </td>
20   </tr>
21 <!-- 横幅banner结束-->
22   <tr>
23     <td height="10"></td>
24   </tr>
25   <tr>
26     <td style="text-align:center;" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
27       <tr>
28       <!-- 位置提示开始-->
29         <td style="vertical-align:top; text-align:left; line-height:36px;">
30         <asp:SiteMapPath
31                                 runat="server"
32                                 SiteMapProviders="SPSiteMapProvider,SPXmlContentMapProvider"
33                                 RenderCurrentNodeAsLink="false"
34                                 NodeStyle-CssClass="breadcrumbNode"
35                                 CurrentNodeStyle-CssClass="breadcrumbCurrentNode"
36                                 RootNodeStyle-CssClass="breadcrumbRootNode"
37                                 HideInteriorRootNodes="true"
38                                 SkipLinkText=""/>
39         </td>
40       <!-- 位置提示结束-->
41         <td width="10" rowspan="2" style="width:10px;">&nbsp;</td>
42         <td rowspan="2"  style="width:245px; vertical-align:top;">
43         <!--右边栏目开始-->
44         <WebPartPages:WebPartZone runat="server" Title="右侧1" ID="Righter1"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
45         <PublishingWebControls:RichHtmlField FieldName="31e5e0e6-73c7-41ba-bfc8-7e43b454c1eb" runat="server" id="RichHtmlField1">
46         </PublishingWebControls:RichHtmlField>
47         <WebPartPages:WebPartZone runat="server" Title="右侧2" ID="Righter2"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
48         <div style="height:10px;"></div>
49         <PublishingWebControls:RichImageField FieldName="543bc2cf-1f30-488e-8f25-6fe3b689d9ac" runat="server" id="RichImageField1"></PublishingWebControls:RichImageField>
50         <!--右边栏目结束-->
51         </td>
52       </tr>
53       <tr>
54         <td style="vertical-align:top; text-align:left;">
55         <PublishingWebControls:EditModePanel runat=server id="EditModePanel2">
56         <SharePointWebControls:TextField FieldName="fa564e0f-0c70-4ab9-b863-0177e6ddd247" runat="server" id="TextField1">
57         </SharePointWebControls:TextField>
58         </PublishingWebControls:EditModePanel>
59         <!--文章内容表格开始-->
60         <table width="100%" border="0" cellspacing="0" cellpadding="0">
61           <tr>
62             <td>
63             <PublishingWebControls:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server"></PublishingWebControls:RichHtmlField>
64             </td>
65           </tr>
66         </table>
67         <!--文章内容表格结束-->
68         </td>
69       </tr>
70     </table>
71     </td>
72   </tr>
73   <tr>
74     <td style="text-align:center; height:10px;"></td>
75   </tr>
76   </table>
77     <table width="100%" border="0" cellspacing="10" cellpadding="0" style="border-top:#AACBEE 1px solid; background-image:url(_layouts/images/ylsoft/portal/10soft-bottom-bg.jpg);">
78       <tr>
79         <td align="center">
80         <PublishingWebControls:RichHtmlField FieldName="fb0a88bb-8d83-4436-b650-2c14d1a2c1bc" runat="server"></PublishingWebControls:RichHtmlField>
81         </td>
82       </tr>
83    </table>
84 </asp:Content>

3：利用VS2010发布布局页

 

 

 

3-1：增加一个Empty Sharepoint Project项目

3-2: 然后在这个项目增加一个Module

把新增后的sample.txt文件删除。

将刚刚在Sharepoint Dsigner做好的ylsoftportalcontentpage.aspx布局页拷贝到YLSoftPortalPageLayouts Module目录下。

同时把布局页代码里面的meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document这段代码移除，如果没有移除，Sharepoint会认为这个布局页有定制过。

接下来修改这个Elements.xml。

01 <?xml version="1.0" encoding="utf-8"?>
02 <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
03     <Module Name="YLSoftPortalPageLayouts" Url="_catalogs/masterpage">
04         <File Path="YLSoftPortalPageLayouts\ylsoftportalcontentpage.aspx" Url="ylsoftportalcontentpage.aspx" Type="GhostableInLibrary">
05             <Property Name="Title" Value="YLSoft门户内容页面" />
06             <Property Name="MasterPageDescription" Value="YLSoft门户网站的内容页面布局"/>
07             <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
08             <Property Name="PublishingPreviewImage" Value="~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/ylsoftportalcontent.png, ~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/ylsoftportalcontent.png" />
09             <Property Name="PublishingAssociatedContentType" Value=";#Ylsoft门户网站页面;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900d9382e6c08b34b38af10610a206f51c1;#"/>
10         </File>
11     </Module>
12 </Elements>

 

Url，指定我这个布局页存放的地址，这里我写的是_catalogs/masterpage,这个地址实际上就是母板页样式库(http://Server/_catalogs/masterpage/Forms/AllItems.aspx)

Property元素制定了这个布局页的一些属性，也就是母板页样式库的一些栏位的字段。其中PublishingAssociatedContentType的值是我们刚刚创建的布局页内容类型。

具体Module的帮助，可以访问：http://msdn.microsoft.com/en-us/library/ms453137.aspx。我们发布这个项目。你就可以在母板页样式库看到你所发布的这个母板页了。

 

原文地址: http://www.cnblogs.com/sonce/archive/2010/07/17/1779608.html