Programador ajudante e aprendiz da comunidade open source.

Criando Layout com CSS

Mai 24, 2010

Sabemos que para nós não designers, montar um layout não é algo tão trivial assim, até mesmo porque as vezes não é a falta de conhecimento, mas sim a falta de criatividade que nos falta. Veremos como montar um layout com caixas flutuantes (widgets) e bordas arredondadas utilizando CSS.

Objetivo:

Criar um layout com topo, menu, conteúdo, rodapé, área lateral esquerda e direita contendo caixas flutuantes dentro destas.

Esboço do design:



Esboço do design

Criando o projeto e as páginas:

Vamos criar um projeto e adicionar as seguintes páginas para representar cada parte numerada na imagem acima.



Páginas JSP

Convertemos a imagem em páginas, agora vamos implementar o código das páginas.

Criando os containers (frame.jsp):

Nossas divs nada mais são do que containers para manter nossos elementos alinhados e estilisados, por isso iremos acumulá-los em um só lugar, mas onde? Repare que temos a página de número 0 (zero) não esboçada no desenho, a frame.jsp, ela manterá todos os nossos containers.

<body id="corpo">
    <div id="geral"> <!-- 0 -->

       <div id="topo"></div> <!-- 1 -->
       <div id="menu"></div> <!-- 2 -->

       <div id="conteudo">
           <div id="esquerda"> <!-- 3 -->
               <div id="info"></div> <!-- 7 -->
           </div>

             <div id="sub-conteudo"></div> <!-- 4 -->

           <div id="direita"> <!-- 5 -->
               <div id="top-filme"></div> <!-- 8 -->
               <div id="top-usuario"></div> <!-- 9 -->
           </div>
       </div>

       <div id="rodape"></div> <!-- 6 -->
    </div>
</body>

Repare que cada container possui um identificador (ID) próprio, que nos serve de âncora para aplicarmos o CSS.

Importando as páginas:

O próximo passo é importar as páginas enumeradas para dentro dos seus respectivos container.

<body id="corpo">
    <div id="geral"> <!-- 0 -->

       <div id="topo"><%@ include file="/topo.jsp" %></div> <!-- 1 -->
       <div id="menu"><%@ include file="/menu.jsp" %></div> <!-- 2 -->

       <div id="conteudo">
           <div id="esquerda"> <!-- 3 -->
               <div id="info"><%@ include file="/info.jsp" %></div> <!-- 7 -->
           </div>

             <div id="sub-conteudo"><jsp:include page="/index.jsp"/></div> <!-- 4 -->

           <div id="direita"> <!-- 5 -->
               <div id="top-filme"><%@ include file="/topFilme.jsp" %></div> <!-- 8 -->
               <div id="top-usuario"><%@ include file="/topUsuario.jsp" %></div> <!-- 9 -->
           </div>
       </div>

       <div id="rodape"><%@ include file="/rodape.jsp" %></div> <!-- 6 -->
    </div>
</body>

As páginas esquerda.jsp e direita.jsp, não existirem, sendo representadas por divs.

Utilizamos dois tipos de imports: action (jsp:include) e a diretiva (<%@ include %>). Mas qual é a diferença entre elas?

Diretiva:

  • Inclue o conteúdo na fase de compilação, combinando os dois arquivos e gerando um só;
  • Elementos declarados em uma página pode ser usados em outra, por serem no final uma só; e
  • Alterações em uma página nem sempre são visíveis à página que a importa, sendo necessário recompilá-la.

Action:

  • Inclui o resultado da execução do arquivo quando a página que a inclui é requisitada; Usada para arquivos que sofrem alterações constantes; e
  • Como é o conteúdo gerado pela página, e não a página em si, que será incluído, pode-se escolher qual arquivo será incluído em tempo de execução.

Fonte

Quando você possuir um conteúdo dinâmico, no qual a página é decidida durante a navegação como:

    <jsp:include page="${param.pagina}"/>

Não tenha dúvida em utilizar a action, pois somente ela permite parametrizar o conteúdo importado, por ser decidido isso em tempo de execução. (;

Criando e importando o CSS:

Primeiramente vamos criar uma pasta chamada css contendo um arquivo chamado de frame.css.



Arquivo CSS

E logo em seguida importá-lo na página frame.jsp

    <link type="text/css" rel="stylesheet" href="<c:url value='/css/frame.css'/>" />

Nosso layout por enquanto esta desta forma:



Layout Parte 1

Agora falta apenas criarmos os estilos para cada container existente de acordo com seu ID.

Revisão rápida e dicas:

# = ID
. = Classe

É sempre bom indicar o elemento que estamos trabalhando antes do indicador de ID ou classe, além de ficar mais legível, o estilo mais detalhado tem maior prioridade:

input: aplicado em todos os elementos inputs.
div.caixa-lateral: aplicado em elementos div com classe de nome caixa-lateral.
select#estado: aplicado em elementos select com ID chamado estado.

Tente separar seus estilos por ordem alfabética e grupos:

  1. Nome do componente: div, input, span...;
  2. Nome da classe ou ID: div#borda-especial, div.canto-destaque, div#titulo...;
  3. Nome do atributo: color: #000, background-color: #FFF, width: 23px....

Cada um tem seu jeito, porém esta forma me ajuda muito e talvez te ajude também. (:

Criando estilo para os containers:

Corpo e Geral:

body#corpo {
    background-color: #EEF4FB;
    font: 10px verdana;
}

Nosso corpo da página tem um fundo colorido, tamanho e tipo de fonte fixo para todo o sistema.

div#geral {
    margin: 0 auto;
    width: 1100px;
}

Nosso container que mantém todos os outros, esta centralizado e com uma largura de tela fixa.


Layout Parte 2

Topo e Menu:

div#topo {
   background-color: #FFF;
   height: 110px;
   margin-bottom: 5px;
   width: 100%;
}

Nosso topo de fundo branco terá uma altura fixa e uma largura sempre máxima, lembrando que 100% equivale a toda largura disponível e limitada pelo container geral. Temos um espaçamento inferior para separar o topo do menu.

div#menu {
   background-color: #FFF;
   height: 30px;
   margin-bottom: 5px;
   width: 100%;
}

Semelhante ao topo, temos cor de fundo, altura, largura e espaçamento separando as laterais e sub-conteúdo.


Layout Parte 3

Lateral Esquerda e Sub-Conteúdo:

div#esquerda {
   float: left;
   height: 430px;
   margin-right: 5px;
   width: 145px;
}

A lateral esquerda deve flutuar à esquerda com uma largura fixa servindo para ambas laterais, assim como uma altura igual ao sub-conteúdo, além de um espaçamento direito para separar esta lateral do sub-conteúdo.

div#sub-conteudo {
   background-color: #FFF;
   float: left;
   margin-bottom: 5px;
   min-height: 430px;
   width: 830px;
}

Semelhante à leteral esquerda, este flutua a esquerda com uma cor de fundo, largura, espaçamento para separar o rodapé e um novo atributo que mantém uma altura mínima a este container, mesmo não existindo elementos dentro dele para preencher tal tamanho. Isso mantém o design evitando sua contração.


Layout Parte 4

Lateral Direita e Rodapé:

div#direita {
   float: right;
   height: 430px;
   margin-left: 5px;
   width: 145px;
}

Nossa lateral direita se comporta igual a esquerda, porém flutuando a direita.

div#rodape {
   background-color: #FFF;
   clear: both;
   height: 25px;
   width: 100%;
}

Nosso rodapé também não há nada de novo a não ser um atributo que faz com que ele não aceite que nada fique à sua esquerda e nem à sua direita (both), acarretando seu isolamento abaixo, que por vez é o efeito esperado.


Layout Parte 5

Conteúdo, Informações, Top Filme e Top Usuário:

div#conteudo {
}

Este container mantém nossos containers centrais agrupados. Podemos centralizar todo o texto ou qualquer outro tipo de estilo. Por hora vamos deixá-lo somente para organização.

div#info {
   background-color: #FFF;
   height: 200px;
   width: 140px;
}

Nossa caixa de informação tem uma cor de fundo para se destacar, já que as laterais não possuem uma cor de fundo.

div#top-filme,
div#top-usuario {
   background-color: #FFF;
   margin-bottom: 5px;
   min-height: 190px;
   width: 140px;
}

Nossas duas caixas de conteúdos dinâmicos utilizam um espaçamento para separá-las assim como uma altura mínima.


Layout Parte 6

Bordas Arredondadas:

Faltando agora o último acabamento, vamos criar um estilo para manter as bordas arredondadas.

div#info,
div#menu,
div#rodape,
div#sub-conteudo,
div#topo,
div#top-filme,
div#top-usuario {
   border-radius: 8px; /* CSS3 */
   -khtml-border-radius: 8px; /* Safari() */
   -moz-border-radius: 8px; /* Mozilla */
   -opera-border-radius: 8px; /* Opera */
   -webkit-border-radius: 8px; /* Safari */
}

Aplicamos à todos os container de interesse, tal estilo. Existe uma linha de código específica para cada navegador interpretar, mas como de costume o Internet Explorer nos deixa na mão, não possuindo um código e nem aceitando o border-radius do CSS3.

Se for crucial a borda arredondada no IE, utilize imagens para isso.



Layout Parte 7

Pronto! Terminamos nosso temido design, porém você ainda deverá personalizar o restante. Adicionei uns estilos à parte como exemplo:



Layout Parte final

Criar layout não é algo trivial, requer paciência e criatividade. Apesar das brincadeiras feita com os designers, devemos parabenizá-los, pois são eles que constroem uma interface legal que enxe os olhos dos usuários misturando usabilidade, acessibilidade e interesse pelo software.

Link do projeto:

http://github.com/wbotelhos/criando-layout-com-css

  1. wyllson 9 Out 2015 08:09

    eu ñ emtendi na de na

  2. Nilton 9 Out 2015 07:21

    Este post parece ter um bom tempo, mas vendo agora, tentei construir e ao abrir o arquivo frame.jsp aparece o design do site e no local de cada frame surge apenas as linhas <%@ include file="/topo.jsp" %>, <%@ include file="/topFilme.jsp" %>, assim como os demais.
    O que falta para chamar as páginas de cada local?

  3. dgdf 9 Jul 2014 10:29

    asfd

  4. caco 12 Ago 2013 13:28

    Boa tarde. não achei o local para baixar o layout, vc poderia mandar p mim, obrigadão.

  5. adri 26 Set 2012 20:59

    Opa! Nice work brother!

    Cara tenho uma duvida em uma divisão... Se puder ajudar com uma dica... nesse site onde tem amostra varias roupas esta dividido em trés linhas e seis para baixo! Eu preciso aumentar a altura de todas essas divisões. Saberia dizer em qual div ou comando devo mexer?

    Desde já agradeço parabéns pelo trabalho.

    Abraços

  6. Laércio 1 Mai 2012 17:55

    Muito bom o tutorial, parabéns.

  7. Renis Rodrigo Longhi 25 Abr 2012 09:37

    Parabéns pelo site, seguinte, estou com dificuldades pra fazer o layout encaixar certo!
    Tenho um modelo que fiz, mas não está dando certo o código css.
    Tem como dar um help?
    Grato!

    1. Washington Botelho autor 25 Abr 2012 11:36

      Oi Renis,

      Ajudar com CSS é algo meio complicado. É mais na tentativa e erro mesmo, pois uma propriedade pode avacalhar todas as outras.
      Mas me diga o seu problema e eu tento te ajudar.

  8. Saulo 27 Mar 2012 16:15

    Ola amigo, excelente tutorial. Parabéns mesmo! Gostaria de tirar uma dúvida contigo. Como eu posso fazer para que o conteúdo seja gerado dinamicamente se sempre será acessado o index.jsp. ? Abraços

    1. Washington Botelho autor 30 Mar 2012 08:43

      Oi Saulo,

      Se você quer ter diferentes layous para uma mesma página, teria que usar alguma lógica na sua view.
      Neste caso você poderia usar o if ou when da JSTL para decidir qual JSP entrará em um include, por exemplo.

  9. josias josé 12 Dez 2011 18:57

    oi, foi vendo seu tutorial que por sinal achei o 10 que resolvir mandar este email pedindo sua ajuda se puder mim ajudar claro! construi meu site sozinho, sem entender nada de codigos nem html, css, php e etc, mas foi vendo tutoriais que consegui entender um pouco de cada coisa e seus siguinificados, enfim construi meu site, em meu computador ele funciona tudo blz em todos os navegadores, mas assim que o enviei para hospedagem nada mas funcionou, nem links, nem imagens e ficou meu site hospedado sem nada funcionar e eu não sei como resolver este problema, depois de tanto trabalho que tive para construilo, mim dar uma tristeza tão grande por não saber como resolver este problema, ja pedi a ajuda de um profissional na area ele viu mas so disse a mim que tinha algo errado mas não mim deu nenhuma solução ou seja mim deixou na mão e ja ja faz um mês que ele esta hospedado e sem nada funcionando, gostaria de poder contar com sua ajuda, pois ja entrei em tanto site e até agora ninguem mim deu uma resposta positiva nem mim ajudou vou mandar pra vc o endereço do site pra que vc de uma olhada e se possivel mim passar os erros para que eu possa concertalos, so quero que vc mostre a mim as dicas de como deve ser feito, bgjnejr.hd1.com.br este é o endereço dele olhe la e se puder mim dar esta força de antemão agradeço sem mas pelo momento josias

    1. Washington Botelho autor 18 Dez 2011 01:11

      Oi Josias,

      Me parece que o site esta funcionando até legal, faltando apenas aparecer as imagens.
      Isso esta ocorrendo porque o caminho para as mesmas estão errados veja:

      src="//Jn-416863d2bab1/SharedDocs/CyberLink/imagens/biblia1.jpg"

      Tenta trocar para o caminho onde se encontra tais imagens no seu servidor tipo:

      src="http://bgjnejr.hd1.com.br/imagens/biblia1.jpg"

  10. Ademar Morais 25 Out 2011 18:18

    Olá WBotelho!

    Parabéns pelo profissionalismo.
    Cara, não entendo nada de webmaster, sou um curioso e tento aprender com aulas assim como as suas. Botelho, eu estou construindo meu site e gostaria muito da sua nota dele e que você me corrija naquilo que estiver errado. Gostaria que você abrisse ele no navegador e ver o que está fora do aceitável.
    Posso lhe enviar meu html e css?

    Obrigado e espero sua resposta!

    1. Washington Botelho autor 27 Out 2011 12:27

      Oi Ademar,

      Infelizmente não dá para analisar o seu sistema, pois tenho minhas bastante coisas para fazer também. (:
      Ajudo no que posso como, por exemplo, os artigos.
      Caso tenha alguma dúvida só postar que respondo assim que eu puder.

      Abraço.

  11. RODRIGO PORTO 25 Set 2011 10:19

    Ola Washington, beleza?

    Eu tenho 1 duvida eu uso dreamweaver cs3, porém não estou conseguindo encaixar 1 login que eu fiz.. eu testei ele fora do meu site o login funciona normal, mas ao aplicar ele na div ele aparece a seguinte mensagem:

    You don't have permission to access on this server.

    Ou então eu vo fazer o layout desse tópico agora no dreamweaver cs3 e depois eu tento aplicar o login lah...

    Se puder me indicar algum tutorial, agradeço.

    Abraço

    1. Washington Botelho autor 25 Set 2011 10:39

      Oi Rodrigo,

      Esse login seria o layout do formulário de login ou a funcionalidade de autenticação?

      1. RODRIGO PORTO 25 Set 2011 10:37

        esse login seria a funcionalidade...

        1. Washington Botelho autor 25 Set 2011 10:52

          Então Rodrigo,

          É meio complicado eu dizer qual é o problema, pois a dúvida esta meio genérica.

          Aplicar o login em uma div vou dar como entendido que você colocou o formulário de login dentro de uma div, porém isso não deveria dar erro, pois a funcionalidade de login não esta no layout e sim no seu código Java/Ruby/PHP e afins. Tenta ver se você não alterou o name dos campos do login ou a action e o method dele, pois são as únicas coisas que podem fazê-lo parar de funcionar.

          Essa mensagem diz que você não tem permissão de acesso ao servidor. Então verifique se você não esta fazendo uma requisição para um IP que você não tem permissão de utilização. Se você estiver tentando personalizar um serviço de website gratuito, pode ser o problema. Alguns te dão um site pronto, mas não te permite personalizá-lo, a não ser pagando para ter total acesso ao servidor.

          Se você estiver usando VRaptor segue esse artigo: http://www.wbotelhos.com.br/2010/04/07/controle-de-login-com-vraptor-3

          Lá tem o link para um projeto funcionando, então basta personalizar do jeito que achar melhor.

          Se quiser um projeto mais completo para iniciar um sistema existe o VRaptor Starting Project:

          https://github.com/wbotelhos/vraptor-starting-project

  12. Lord 9 Mai 2011 18:26

    Olá wbotelhos,

    Parabens pelo excelente tuto, fiz aqui e ficou beleza, so não consegui mostrar as paginas no container 4.

    Ta dando esse erro na carregamento do container 4.

    "The requested resource (/Sigesc/${param:pagina}) is not available"

    o link esta nessa forma.

    href="frame.jsp?pagina=Funcionario.jsp"

    pois tenho varios links para o container 4.

    Poderia me ajudar, pois estou montando uma home por curiosidade, nem sei programar direito ainda, pois sou iniciante no mundo da T.I.

    Falou.

    1. Washington Botelho autor 14 Jul 2011 17:14

      Oi Lord,

      Creio que você escreveu o código de forma incorreta.
      Troque os dois pontos por ponto:

      ${param.pagina}
  13. jf neto 30 Mar 2011 16:27

    Primeiro parabéns pelo tuto! Washington, de acordo com seu tuto fiz um baseado no seu, acontece que a direita está dando um erro e não estou conseguindo corrigir, se você puder me ajudar, me envie a solução para o meu email, por favor. Estou iniciando em css! abaixo o html e o css:

    <div id="topo">Topo</div>
<div id="menu">Menu</div>

<div id="slideshow">slideshow</div>
<div id="prodnovos">Produtos novos</div>
<div id="promocoes">Promoções</div>

<div id="direita">Direita</div>```

```css
@charset "utf-8";

body#corpo {
   font: 10px verdana;
   background-color: #C4E8FF;
}
div#geral {
    margin: 0 auto;
    width: 1000px;
}
div#topo {
    background-color: #060;
    height: 164px;
    margin-bottom: 5px;
    width: 100%;
}
div#menu {
    background-color: #F00;
    height: 30px;
    margin-bottom: 5px;
    width: 100%;
}
div#conteudo {
   height: 100%;
   background-color: #FFF;
   float: left;
}
div#slideshow {
    background-color: #11afd7;
    float: left;
    margin-bottom: 5px;
    height: 200px;
    width: 795px;
}
div#prodnovos {
    background-color: #11d79d;
    float: left;
    margin-bottom: 5px;
    height: 400px;
    width: 795px;
}
div#direita {
   width: 200px;
   float: right;
   height: 100%;
}
div#promocoes {
   background-color: #FF0;
   height: 350px;
   float: right;
   margin-bottom: 5px;
   width: 200px;
}
div#outros {
   background-color: #309;
   float: right;
   height: 350px;
   width: 200px;
   margin-bottom: 5px;
}
div#rodape {
    background-color: #000;
    clear: both;
    height: 25px;
    width: 100%;
}
    1. Washington Botelho autor 2 Abr 2011 11:01

      Oi JF Neto,

      • O seu slideshow tem que estar com o tamanho sem ser porcentagem igual aos outros e a largura dele esta menor, não fechando o layout;
      • O direita também deve estar com o tamanho em pixel, igual aos outros;
      • O promocoes deve estar flutuando para a esquerda, sendo que somente a direita que flutuará para a direita. E a altura novamente deve estar em pixel.

      Fiz um fix do seu código e postei pra você ver: http://pastebin.com/vh7y4EyH

  14. Kaio Valente 15 Nov 2010 13:51

    Parabéns Washington pelos tutoriais!

    Tenho uma dúvida...
    Utilizando esta estrutura, como ficaria a lógica de redirecionamento de páginas, sempre tem que ser redirecionado para a página frame.jsp e passando um paramentro com a página que desejo carregar, seguindo a estrutura: frame.jsp?pagina=index.jsp ? é isso? Como ficaria as chamadas às páginas dinamicas no VRaptor?

    1. Washington Botelho autor 16 Nov 2010 21:01

      Oi Kaio,

      Se você não utilizar um web-page layout com o Sitemesh, por exemplo, infelizmente terá de sempre chamar a página principal com um parâmetro indicando qual será o conteúdo interno ou fazer via ajax.

      Usando o VRaptor talvez dê para você fazer algo como:

      @Path("/ir/pagina/{pagina}")
public void novo(String pagina) {
    result.redirectTo("/WEB-INF/jsp/frame.jsp?pagina=" + pagina);
}

      E na view chamar a URL /ir/pagina/home, mas nunca testei e não recomendo você tentar dessa maneira.
      O melhor a se fazer é utilizar um web-page layout como Sitemesh.

      Da uma lida no seguinte artigo que irá resolver esse problema:
      [http://www.wbotelhos.com.br/2010/07/01/criando-template-com-sitemesh/" target="_blank" rel="nofollow">wbotelhos.com.br/2010/07/01/criando-template-com-sitemesh)

  15. Márcio 11 Out 2010 07:58

    Olá Botelho, gostaria de saber em qual linguagem de programação você desenvolveu este seu sistema. Sou iniciante de programação web Java. Gostei do layout e toda a interação disponível. Isso me lembra um Ajax, RichFaces. Mas poderia me repassar tudo que vc usou para ficar desse jeito, estou afim de estudar algumas linguagens. Obrigado

    1. Washington Botelho autor 11 Out 2010 10:13

      Oi Márcio,

      • O sistema é desenvolvido em Java com JSP e JSTL;
      • O controle de camadas é feito com o VRaptor;
      • Os templates, ou seja, disposição do layout e design são feitos com o Sitemesh, CSS e jQuery UI;
      • Interação de telas e efeitos com JavaScript e jQuery;
      • Persistência com a JPA/Hibernate;
      • Banco de dados MySQL;

      Abraço e boa sorte nos estudos. (:

  16. francisco 25 Set 2010 13:14

    ola Botelho sera q vc poderia me enviar o codigo fonte do Layout postado por vc na materia Criando Layout com CSS

    1. Washington Botelho autor 27 Set 2010 07:28

      Oi Francisco,

      O código se encontra no Github.
      Lá você encontrará o botão "Download Source", é só clicar e escolher o formato do download.
      Para facilitar fiz um upload do .zip que pode ser baixado neste link.

  17. Leandro Fiel 26 Ago 2010 12:36

    Excelente tutorial cara! Me ajudou bastante.

  18. Fabio Silveira 21 Ago 2010 04:58

    wbotelhos,

    Muito boa a explicação !

    Agora, como faço para entrar no MOVIE COLLECTION, pois la esta pedindo senha e usuario :/

    Abrs

    Valeu

    1. Washington Botelho autor 21 Ago 2010 10:27

      Fábio,

      Você precisa clicar no link participar e fazer seu cadastro e então receberá um e-mail com sua senha para acesso.

  19. Rodrigo 18 Ago 2010 07:54

    Cara aonde vc hospeda suas app java?

    abs

    1. Washington Botelho autor 18 Ago 2010 08:14

      Fala Rodrigo,

      Atualmente hospedo na http://www.integrator.com.br.
      Suporte muito bom. Principalmente pela empresa pertencer ao Edson Gonçalves.

      1. Rodrigo 18 Ago 2010 08:15

        Legal, cara to com eles tb

        O que esta achando da performance da sua app nos servers deles?

        1. Washington Botelho autor 18 Ago 2010 08:51

          Rodrigo,

          De fato estou percebendo um bocado de lentidão nestes últimos dias, pricipalmente na parte da noite.

          Estou fazendo uns testes no Movie Collection de interceptor e também No Cache por conta do IE e sei que isso esta deixando-o muito lento, mas estou ciente, já que esta app é voltada para aplicação e testes de aprendizado.

          Uso o plano de 128MB, mas mesmo assim acho que o desempenho poderia ser melhor, isso sem fazer nenhuma otimização explícita.

  20. daisy 23 Jun 2010 09:16

    Bom Dia!
    eu gostaria de saber se tem como eu fazer com que somente o conteudo do meio no seu caso o numero 4 mude, quando eu clicar em um link.

    tipo o que acontece com frames.

    obrigado
    Att. Daisy

  21. Daniel Jurado 29 Mai 2010 14:25

    Ansioso pelo artigo sobre o Sitemesh!

  22. Jefferson 24 Mai 2010 10:06

    Falaí, Washington, muito bom o tutorial.
    Tirei muito proveito, parabéns.
    Também gostei da forma que você apresentou a matéria.
    Mas agora, no fim, tenho uma dúvida geral...
    Qual uma boa prática pra dividir meu conteúdo da melhor forma possível?
    Realmente deixar cada parte em um .jsp gerando conteúdo dinamicamente? E conforme for navegando eu incluir no index (4)?

    1. Washington Botelho autor 24 Mai 2010 16:04

      Fala Jefferson!

      Não há como fugir dos includes, isso é fato! Até mesmo porque não da pra ficar repetindo nossos códigos em todas as páginas e muito menos ter de reescrevê-los em cada alteração, então você pode fazer de três formas:

      1. Manter todos os includes em uma página e trocar apenas o sub-conteúdo (4) à partir de um parâmetro com o nome da página;
      2. Deixar os includes diretamente nas páginas que você chamar, evitando o trabalho da passagem de parâmetro, porém sendo necessário repetir os includes em todas essas páginas; ou
      3. Utilizar um web-page layout para gerenciar tudo isso para você de forma automática como o Facelets, Tiles ou Sitemesh, este que será o próximo assunto abordado aqui no blog. (;
  23. Francisco Souza 24 Mai 2010 07:46

    Ahh muleki multidisciplinar =P

    Bacana o post, parabéns, Washington! ;)

Em resposta:
(Cancelar)
Formate seu código utilizando Markdown.