Template nao mostra conteudo

Front-end
#1

Boa noite pessoal! o problema é o seguinte: tenho um template que so funciona qdo defino o menu na pagina xhtml que quero usar o template.

Template.xhtml

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./../resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>Protótipo de Tópicos Avançados</title>
        
        <ui:include src="cabecalho.xhtml" />
        
        <script type="text/javascript">
                $(document).ready(function(){
                    $("dd").hide(); //esconde todos os sub-menus
                    $("dt a").click(function(){ 
                        $("dd:visible").slideUp("slow"); //abre o menu selecionado
                        $(this).parent().next().not(":visible").slideDown("slow");//esconde outros menus
                        return false;
                    });
                });
            </script>
            <style type="text/css">

                dl { 
                    width: 175px;
                    background: #8CC63F;
                }
                dl,dd { 
                    margin: 0; 
                }
                dt {
                    background: #8CC63F; 
                    font-size: 13px; 
                    padding: 5px; 
                    margin: 2px; 
                }
                dt a { 
                    color: #000;

                }
                dd a { 
                    color: #000; 
                }
                ul { 
                    list-style: none; 
                    padding: 5px; 
                    margin:0 0 0 25px;
                }            

            </style>        
    </h:head>

    <h:body>
        <div id="top" class="top ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            <ui:insert name="top">
                <div style="float: left; padding-right: 20%;">
                        <h:graphicImage library="images" name="brasao_ufsm_2.png"/>
                    </div>
                    <div style="float: left;">
                        <p><h2>Universide Federal de Santa Maria</h2></p>
                        <p><h4>Programa de Pós Graduação em Informática - LaCA</h4></p>
                    </div>
                    <div style="float: right;"><h:graphicImage library="images" name="quadradoII.png" height="90" /></div>
            </ui:insert>
        </div>
        <div style="background: green; width: 900px; height: 600px; float: left;">
            <div id="left" class="ui-widget-vertical-menu ui-corner-all">
                <ui:insert name="left">
                     <h:form id="menus">   
                        <dl>
                            <dt>
                                <h:commandLink action="index.xhtml"><h:graphicImage library="images" name="onebit_01.png" width="15" height="15"/> Home</h:commandLink>
                                <br/><br/><h:commandLink action="setupII.xhtml">Setup</h:commandLink>
                            </dt>
                            <hr/>
                            <dt><a href="#">
                                    <h:graphicImage library="images" name="onebit_39.png" width="15" height="15"/> New
                                </a>
                            </dt>
                            <dd>
                                <ul>
                                    <h:commandLink class="forceBreakLine" value="New organization" action="#{organizationBean.pageInsert}"/>
                                    <hr/><h:commandLink class="forceBreakLine" value="New Action" action="#{actionBean.pageInsert}" />
                                    <hr/><h:commandLink class="forceBreakLine" value="New Discipline" action="#{disciplineBean.pageInsert}" />
                                </ul>
                            </dd>
                            <hr/>
                            <dt><a href="#">
                                    <h:graphicImage library="images" name="onebit_02.png" width="15" height="15"/> Search</a></dt>
                            <dd>
                                <ul>
                                    <h:commandLink class="forceBreakLine" value="Organizations List" action="#{organizationBean.pageList}" />
                                    <hr/>
                                    <h:commandLink class="forceBreakLine" value="Action List" action="#{actionBean.pageList}" />
                                    <hr/>
                                    <h:commandLink class="forceBreakLine" value="Discipline List" action="#{disciplineBean.pageList}" />
                                </ul>
                            </dd>
                            <hr/>
                            <dt><a href="#">Menu 3</a></dt>
                            <dd>
                                <ul>
                                    <li><a href="#">Menu 3 - Item 1</a></li>
                                    <li><a href="#">Menu 3 - Item 2</a></li>
                                    <li><a href="#">Menu 3 - Item 3</a></li>
                                </ul>
                            </dd>
                        </dl> 
                    </h:form>
                </ui:insert>
            </div>
            
            <div id="content" style="margin: 0 0 0 400px; width: 400px; height: 400px; color: red;">
                <ui:insert name="content">
                    
                </ui:insert>
            </div>
        </div>
    </h:body>

</html>

Assim nao funciona:

[code]<?xml version='1.0' encoding='UTF-8' ?>

<ui:composition template="./template/Template.xhtml">
    
    <ui:define name="content">
         
        <h:graphicImage library="images"  name="engI.jpg" />
         
    </ui:define>
       
        
</ui:composition>

[/code]

e asim aparece o conteudo da content

[code]<?xml version='1.0' encoding='UTF-8' ?>

<ui:composition template="./template/Template.xhtml">
    [b]<ui:define name="left">menus</ui:define>[/b]
    
    <ui:define name="content">
         
        <h:graphicImage library="images"  name="engI.jpg" />
         
    </ui:define>
       
        
</ui:composition>
[/code]

o que pode ser isso?

#2