Master page

Open the web project in Visual Studio and righ-click the CMSTemplates folder in the Solution Explorer window and create a new sub-folder MySite. Please note that the folder name must be same as the code name of your site.

Right-click the MySite folder and choose Add new item... Choose to create a new master page and set its name to MyMaster.master. If you are a VB developer, you may want to choose Visual Basic in the Language drop-down list.

tutorial_clip0152

Replace all default ASPX code from the master page (in the Source view) except for the first line with <%@ Master %> directive with the following code:

<%@ Register Assembly="CMS.PortalControls" Namespace="CMS.PortalControls" TagPrefix="cc2" %>

<%@ Register Assembly="CMS.Controls" Namespace="CMS.Controls" TagPrefix="cc1" %>

<%=DocType%>

<asp:literal runat="server" id="ltlTags" enableviewstate="false" />

</head>

<cc1:CMSPageManager ID="CMSPageManager1" runat="server" />

</form>

</body>

</html>

The CMSPageManager control ensures loading of content from the database into the page.

In case you are planning to use AJAX components on your site, you need to add the ScriptManager control after the CMSPageManager control.

<asp:ScriptManager ID="manScript" runat="server" />

Switch to code behind and add the reference to the CMS.UIControls namespace:

[C#]

using CMS.UIControls;

[VB.NET]

Imports CMS.UIControls

Change the class definition so that the master page inherits from TemplateMasterPage:

[C#]

public partial class CMSTemplates_MySite_MyMaster : TemplateMasterPage

[VB.NET]

Partial Class CMSTemplates_MySite_MyMaster

Inherits TemplateMasterPage

Add the following code after the Page_Load method and call both the CreateChildControls and the OnPreRender methods from the Page_Load method:

[C#]

protected override void CreateChildControls()

{

base.CreateChildControls();

this.PageManager = this.CMSPageManager1;

}

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

this.ltlTags.Text = this.HeaderTags;

}

[VB.NET]

Protected Overloads Overrides Sub CreateChildControls()

MyBase.CreateChildControls()

Me.PageManager = Me.CMSPageManager1

End Sub

Protected Overloads Overrides Sub OnPreRender(ByVal e As EventArgs)

MyBase.OnPreRender(e)

Me.ltlTags.Text = Me.HeaderTags

End Sub

Now switch to the Source mode (HTML mode) copy and paste the HTML code from the sample home.htm file (inside <body></body> tags) after the <cc1:CMSPageManager /> control in the master page.

However, we need only the logo, main menu and footer. So we will replace the  ...  section of the HTML code with the following code:

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

This is a standard ASP.NET control that ensures loading of pages into the master page.

So the added code will look like this:

<br />

</div>

<tr>

</tr>

</table>

</div>

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

This is a sample website for Kentico CMS

</div>

When you switch to the Design tab, you should see a page preview like this:

tutorial_clip0153

Save the changes.

Using CSS-based layout instead of tables

If you prefer using CSS-based layout, you can easily change the HTML code here and replace the tables with DIV elements. We use table-based layout by default since it's easier to understand, although we are aware of advantages of the CSS-based layout.

Page url: http://devnet.kentico.com/docs/tutorial_aspx/index.html?master_page_aspx.htm