Creating a page layout with three columns of web part zones_SharePoint 2013 WCM Advanced Cookbook-QQ阅读男频玄幻网

上QQ阅读APP看书，第一时间看更新

Creating a page layout with three columns of web part zones

A page layout is a template used when creating new content pages in SharePoint. There are a number of page layouts included with SharePoint out of the box. When one of those doesn't suffice, we can easily create our own. In this recipe, we will modify the BlankWebPartPage.aspx page layout to have three columns, each with a web part zone. A web part zone is an area of the page where users can add web parts. A web part is an ASP.NET user control under the covers.

How to do it...

Follow these steps to create a page layout with three columns of web part zones:

Open SharePoint Designer.
Select Open Site. Enter the complete URL to the SharePoint site and select Open.
From the Navigation pane, select Page Layouts.
In the list of files in the Page Layouts library, make a copy of BlankWebPartPage.aspx (for our example, we have renamed it PageLayout_ThreeColumn.aspx).

Note

The Page Layouts view is a view of the _catalogs/masterpage library that is limited to show Page Layouts only.
Check out the new PageLayout_ThreeColumn.aspx page layout.
Open the PageLayout_ThreeColumn.aspx page layout.
Locate the first <div class="ms-table ms-fullWidth"> element.

Remove the following <div> elements it contains:

<div class="ms-table ms-fullWidth">
<SharePointWebControls:ScriptBlock runat="server">
if(typeof(MSOLayout_MakeInvisibleIfEmpty) == &quot;function&quot;) 
{MSOLayout_MakeInvisibleIfEmpty();}</SharePointWebControls:ScriptBlock>
</div>

Using the SharePoint table layout styles, add three <div> column containers as shown in the following code:

<div class="ms-table ms-fullWidth">
<div class="ms-table ms-fullWidth">
<div class="cell-margin tableCol-33">
</div>
<div class="cell-margin tableCol-33">
</div>
<div class="cell-margin tableCol-33">
</div>
</div>
<SharePointWebControls:ScriptBlock runat="server">
if(typeof(MSOLayout_MakeInvisibleIfEmpty) == &quot;function&quot;) 
{MSOLayout_MakeInvisibleIfEmpty();}</SharePointWebControls:ScriptBlock>
</div>

In each <div> column container, add a WebPartZone element as shown in the following code:

<div class="cell-margin tableCol-33">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Left%>" ID="CenterLeftColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>
<div class="cell-margin tableCol-33">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Center%>" ID="CenterColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>
<div class="cell-margin tableCol-33">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Right%>" ID="CenterRightColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>

Save the page layout.
Navigate back to the Properties page for the page layout.
Select Manage all file properties in the browser from the Customization section as shown in the following screenshot:
From the ribbon, select Edit Item as shown in the following screenshot:
Ensure the Content Type option is set to Page Layout as shown in the following screenshot:
Provide a new title in the Title field for the page layout (for example, Three Column).
In the Associated Content Type field, set Content Type Group to Page Layout Content Types and Content Type Name to Article Page, as shown in the following screenshot:
Save the item.
Check in and publish the page layout using the Check In and Publish options.
Navigate to the Pages library of the SharePoint site using your preferred web browser.

Note

If the Pages library is not on the quick launch, it can be accessed from the Settings menu under Site Content.
Select New Document from the FILES tab on the ribbon.
Provide a title and URL for the new page in the Title and URL fields.
Select the newly created page layout as shown in the following screenshot:
Click on Create.
Edit the new page to observe our new layout and web part zones. The following screenshot shows the editing window of the page:

How it works...

For content pages, SharePoint uses the master page and the page layout to provide the content structure of the pages. This allows the master page to provide the overall design of the SharePoint site and the page layout to provide the structure within the master page for specific pages. When a content page is rendered, the page content is rendered in the areas provided by the page layout. Then the content and page layout are rendered in the content area of the master page.