Friday, February 3, 2012

Create Page Layout using SharePoint Designer 2010

We can create page layout in SharePoint designer 2010 very easily. First open your site in SharePoint designer 2010 and then from the Site Objects section from the left side click on Page Layouts as shown in the figure below.
Then from the ribbon click on New Page Layout as shown in the figure below:


Then from the New Page Layout Dialog box Select the content type group, content type name, url name, title as shown in the figure below, then click on OK.

This will create your pagelaout, now to add web part zones or to add different sections modify as below.



<%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ 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" %>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
<SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
<table>
<tr>
<td><WebPartPages:WebPartZone id="MyTopZone" runat="server" title="TopZone"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</td>

</tr>
<tr><td>
<WebPartPages:WebPartZone id="MyMiddleZone" runat="server" title="MiddleZone"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</td></tr>
<tr><td>
<WebPartPages:WebPartZone id="MyLeftZoneFirst" runat="server" title="LeftZoneFirst"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</td>
<td>
<WebPartPages:WebPartZone id="MyLeftZoneMiddle" runat="server" title="LeftZoneMiddle"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</td>
<td>
<WebPartPages:WebPartZone id="MyLeftZoneRight" runat="server" title="LeftZoneRight"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</td>
</tr>
</table>
</asp:Content>

Here I have added 3 sections, top, middle and lower. And my top and middle section contains one web part zone and my lower section contains 3 web part zone.

Then you can publish the page layout by right click on the page layout and click on Checkin. And your name page will look like below image

1 comment:

  1. This is a great article. However, when I do what you've described, after making any change to the layout and checking it it, it shows that blue icon with the "i" in the middle next to the file. How do we customize a newly created page layout without breaking it away from the site definition? Any insight would be greatly appreaciated.

    ReplyDelete