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:
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..
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.
Right-click on 'Partial Views', click 'Create':
Add the name of your control, in my case 'Header' and click 'Create':
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:
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:
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.
