First Project On SharePoint | Part 1 of 2

13 September 2016

sp

I’ve been asked to create a simple static site on SharePoint. The requirements were to create a site without any SharePoint features. It seems easy to me.

First I started to look at what I have and what SharePoint can offer me.

I started with creating a subpage called Test Site to create and test all changes here before I update the original site page.

01

On the Site Settings exists nice section: Look and Feel. This section has a lot of things to do with SharePoint sites appearance. But there was one link that I liked the most: Master page. So why not use something that I know well?

02

Site Master Page Settings using only existing master pages to change the appearance of our website, but from this content not allow to create a new, custom master page.

03

To create a new master page, I used the Design Manager. To access the Design Manager you need to have full control to the Main Site Collection. Design Manager offers a lot of things that I could use. But because I wanted to create a new master page, I choose: Edit Master Pages

04

Edit Master Pages can be converted from HTML file or can create a minimal master page. But I was not sure if this could help me to create a simple master page.

05

With help, came to me SharePoint Designer 2013.

06

SharePoint Designer 2013 is an easy way to connect to SharePoint and change or create a lot of objects.

07

I created a Blank Master Page called Test.master

The blank template for the master page looks as shown below:
<%@ Master Language="C#" %>
<html dir="ltr">
<head runat="server">
<title>Untitled 1</title>
<asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
	<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
</form>
</body>
</html>

And after a project is saved, two tags are added automatically:

<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<SharePoint:RobotsMetaTag runat="server"></SharePoint:RobotsMetaTag>

I added some customization:

  • New CSS file
  • Div classes from CSS file
  • Asp: Content Place Holders
<%@ Master Language="C#" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr">

<head runat="server">
	<SharePoint:RobotsMetaTag runat="server"></SharePoint:RobotsMetaTag>
	<title>Test site</title>
	<link href="../SitePages/css/main.css" rel="stylesheet" />
</head>

<body>
    <form id="form1" runat="server">
        <div class="main-container">

            <div class="header-container block">
                <asp:ContentPlaceHolder ID="HeaderContent" runat="server"></asp:ContentPlaceHolder>
            </div>

            <div class="left-container container block">
                <asp:ContentPlaceHolder ID="LeftContent" runat="server"></asp:ContentPlaceHolder>
            </div>

            <div class="middle-container container block">              
                <asp:ContentPlaceHolder ID="MiddleContent" runat="server"></asp:ContentPlaceHolder>    
            </div>

            <div class="right-container container block">
                <asp:ContentPlaceHolder ID="Right Content" runat="server"></asp:ContentPlaceHolder>
            </div>
        </div>
    </form>
</body>

</html>

When the master page was ready I used a Page From Master to create a new page based on my custom master page.

08 09

The Page (without any content) looks like shown below: Code: 10 Page: 11

To update some content I added:

<asp:Content ContentPlaceHolderID="HeaderContent" runat="server">
<h1>Header Content</h1>
</asp:Content>
<asp:Content ContentPlaceHolderID="LeftContent" runat="server">
<h3>Left Content</h3>
</asp:Content>
<asp:Content ContentPlaceHolderID="MiddleContent" runat="server">
<h3>Middle Content</h3>
</asp:Content>
<asp:Content ContentPlaceHolderID="RightContent" runat="server">
<h3>Right content</h3>
</asp:Content>

And after that page looks like shown below:

12