This is the third article in the 'creating your first Umbraco web page' series.  In the first part, we broke a static HTML file into the components we need within Umbraco, namely a master layout, a header, a footer and a template.  In the second post we created a very simple master layout and a template, as seen below:

umbraco_create_first_page_13

In this post, we're going to create a header and footer and add it to the master layout.  To prevent duplication we will create the header and footer controls as partial views.  A partial view can be thought of as a reusable component within a webpag.e.  A partial view isn't a full template, but, something that lives within one.  A partial view will usually be used on more than one template/  Some examples of components include banners, carousels, headers, footer etc..

umbraco_create_header_and_footer_1

If you open your websites Umbraco backend and go to the 'Settings' section on the main left-hand menu, you should see the 'Partial View' folder as seen above.  This is where we'll create our header and footer.

umbraco_create_header_and_footer_2

Right-click on 'Partial Views', click 'Create':

umbraco_create_header_and_footer_3

Add the name of your control, in my case 'Header' and click 'Create':

umbraco_create_header_and_footer_4

When the page reloads you should now see a fairly empty 'Templates' tab for your new 'Header' control.  As in the last guide, I'm just copying HTML from the bootstrap website, here.  

At the minute I'm just creating static HTML to help you understand the main processes, in a production website, the header would be dynamically generated:

umbraco_create_header_and_footer_5

Now we have a header, we need to add it to our master page.  In 'settings' and go to 'templates'.  Find the master template we created in the previous article.  To include a partial view of a template, you need to use this Razor helper:

umbraco_create_header_and_footer_6

If you save your page and view the homepage (which uses 'master' as it's layout), you will now see the header.  To create a footer, simply follow the steps above.  At this stage, we have now created all the major building blocks of our page.  The master layout, a header, footer, and a homepage template.  So far everything is pretty boring as we only display static HTML.  In the next article in this series, we will start adding dynamic properties to allow content editors to add and manage content within the page.