Kentico CMS 6.0 Tutorial ASPX

Master page

Master page

 Previous topic Next topic Mail us feedback on this topic!  

Master page

 Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

Open the web project in Visual Studio, right-click the CMSTemplates folder in the Solution Explorer window and create a new sub-folder named MySite. Please note that the folder name must be the same as the code name of your site to ensure that the contents are exported/imported along with the website if it is deployed to another location.

 

Right-click the MySite folder, select Add new item... and create a new Master page called 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 the <%@ Master %> directive with the following code:

 

<%=DocType%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title id="Title1" runat="server">My website</title>
  <asp:literal runat="server" id="ltlTags" enableviewstate="false" />
</head>
<body class="<%=BodyClass%>" <%=BodyParameters%>>
  <form id="form1" runat="server">
  <cms:CMSPortalManager ID="CMSPortalManager1" runat="server" />
  </form>
</body>
</html>

 

The CMSPortalManager control ensures the loading and saving of content between the database and editable regions. It also provides the management necessary for web part or widget zones defined on child ASPX pages.

 

Add the ToolkitScriptManager control after the CMSPortalManager control to allow AJAX components to work on the pages of your site:

 

<ajaxToolkit:ToolkitScriptManager ID="manScript" runat="server" EnableViewState="false" />

 

Switch to code behind and add a 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 the TemplateMasterPage class:

 

[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:

 

[C#]

 

protected override void OnPreRender(EventArgs e)

{

  base.OnPreRender(e);

 

  this.ltlTags.Text = this.HeaderTags;

}

 

[VB.NET]

 

Protected Overloads Overrides Sub OnPreRender(ByVal e As EventArgs)

  MyBase.OnPreRender(e)

 

  Me.ltlTags.Text = Me.HeaderTags

End Sub

 

Now switch back to the Source mode (HTML mode) and copy and paste the HTML code from inside the <body>...</body> tags of the sample home.htm file) onto the master page after the <cms:PortalManager> control.

 

However, we only need the logo, main menu and footer, so replace the entire code in the <!-- main content --> ... <!-- /main content --> section with the following control:

 

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

 

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

 

So the final code of the <body> element of the master page will look like this:

 

<body class="<%=BodyClass%>" <%=BodyParameters%>>
  <form id="form1" runat="server">
  <cms:CMSPortalManager ID="CMSPortalManager1" runat="server" />

   <ajaxToolkit:ToolkitScriptManager ID="manScript" runat="server" EnableViewState="false" />
         
  <div class="MainDiv">
  <!-- logo -->
  <br />
  <div class="Logo">
      &nbsp;    
  </div>

 
  <!-- main menu -->
  <div class="MainMenu">
  <table cellspacing="2" cellpadding="2" border="0">
    <tr>
            <td class="MainCMSMenuHighlightedMenuItem">Home</td>
            <td class="MainCMSMenuItem">Page 1</td>
         </tr>
 </table>            
  </div>

 
  <!-- main content -->
      <asp:ContentPlaceHolder ID="plcMain" runat="server"></asp:ContentPlaceHolder>
  <!-- /main content -->

 
  <!-- footer -->    
      <div class="Footer">
           This is a sample web site for Kentico CMS      
      </div>      
  </div>

 
  </form>
</body>

 

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

 

tutorial_clip0153

 

Save the changes.

 

 

InfoBox_Tip

 

Using CSS-based layout instead of tables

 

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