How can I correctly import an header and a footer page into a FreeMarker page?

I am working on a Spring MVC application that use FreeMarker for my views.

I am absolutly new in FreeMarker and I have the following problem: in my projct I have 3 files that have to be assemblet togheter into a single page.

So I have:

1) header.ftl representing the header of all my pages, somthing like:

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js is-ie8"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Registrazione -  MY WEBSITE</title>
        <meta name="robots" content="noindex,nofollow">

        <link rel="stylesheet" href="resources/css/webfont.css">
        <link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="resources/bootstrap/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="resources/plugins/bs-select/bootstrap-select.min.css">
        <link rel="stylesheet" href="resources/plugins/bs-dialog/bootstrap-dialog.min.css">
        <link rel="stylesheet" href="resources/css/style.css" />

    </head>

    <body id="main">

        <!-- versione per popup. non prendere in considerazione -->
        <!--
        <div class="container page-header">
            <h1>MY WEBSITE</h1>
        </div>

2) footer.ftl representing the footer of all my pages:

<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/bs-select/bootstrap-select.min.js"></script>
    <script src="assets/plugins/bs-select/i18n/defaults-it_IT.min.js"></script>
    <script src="assets/plugins/bs-dialog/bootstrap-dialog.min.js"></script>
    <script src="assets/plugins/jq-form-validation/jquery.validation.js"></script>
    <script src="assets/js/functions.lib.js"></script>
    <script src="assets/js/form-validation.js"></script>

    </body>
</html>

3) Then I have my specific page (named myPage.ftl that represent only the content, something like this:

<h1>This is the content</h1>
<p>Some inforamation</p>

The header.ftl and the footer.ftl are into this directory **\WEB-INF\freemarker\layout** of my project.

So my problem is: how can I import the header.ftl content above the content of the myPage.ftl and the footer.ftl under the content of myPage.ftl page?

Solution

I did this using user-defined macros for page layouts, e.g. let's call your layout standardPage.ftl:

<#macro standardPage title="">
<!DOCTYPE html>
<html lang="en">
<head>
    <title>${title}</title>
</head>
<body>
    <#include "/include/header.ftl">    

    <#nested/>

    <#include "/include/footer.ftl">    
</body>
</html>
</#macro>

Then you can call this macro in each of your pages, e.g. homePage.ftl:

<#include "/pages/standardPage.ftl" />

<@standardPage title="Home">
    <h1>Home Page</h1>
    <p>This bit replaces the nested tag in the layout</p>
</@standardPage>