É hora de criar o layout principal para o site. Iremos criar um simples layout usando tabela. A estrutura da tabela será a seguinte:
A seguinte lista contém links para as imagens que iremos usar para criar a principal aparência do site.
Salve todas as imagens acima no diretório design/docedesejo/images/.
Configurando o layout principal
Edite o arquivo template principal design/docedesejo/templates/pagelayout.tpl e coloque o conteúdo logo após a tag body. Simplesmente substitua a frase “Olá Mundo!” do arquivo com o conteúdo abaixo:
<table cellspacing="0" cellpadding="0" border="0" class="main">
<tr>
<td><a href={"/"|ezurl}><img src={"banner.png"|ezimage} /></a></td>
</tr>
<tr>
<td height="20" background={"degrade.png"|ezimage} valign="middle">
<table height="20" cellspacing="0" cellpadding="0" class="menu">
<tr>
<td><a href={"/"|ezurl}>Principal</a></td>
<td><a href={"/"|ezurl}>Notícias</a></td>
<td><a href={"/"|ezurl}>Receitas</a></td>
<td><a href={"/"|ezurl}>Links</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="conteudo">{$module_result.content}</td>
</tr>
<tr>
<td class="rodape" background={"rodape.png"|ezimage} valign="middle">
{include uri="design:rodape.tpl"}
</td>
</tr>
</table>
Note que o layout principal inclui um arquivo chamado rodape.tpl. Em outras palavras o conteúdo deste arquivo foi colocado em um arquivo separado em vez de colocá-lo diretamente no arquivo de template principal. O objetivo aqui é demonstrar como inserir arquivos de templates dentro de outros arquivos.
Crie o arquivo design/docedesejo/templates/rodape.tpl com o seguinte conteúdo:
Copyright © 2006 – Doce Desejo - Powered by
<a href="http://ezbrasil.com.br">eZ brasil</a> ™
Agora você deve limpar o cache do sistema para que todas estas alterações tenham efeito.
Testando o layout
Abra o endereço http://localhost/index.php/docedesejo no seu browser ou dê um reload/refresh e você verá uma página semelhante a figura abaixo:
