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:

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.

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.
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
.

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:

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:
- Nome do componente: div, input, span...;
- Nome da classe ou ID: div#borda-especial, div.canto-destaque, div#titulo...;
- 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.
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.
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.
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.
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.
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.

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

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.
eu ñ emtendi na de na
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?
asfd
Boa tarde. não achei o local para baixar o layout, vc poderia mandar p mim, obrigadão.
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
Muito bom o tutorial, parabéns.
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!
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.
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
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.
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
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"
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!
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.
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
Oi Rodrigo,
Esse login seria o layout do formulário de login ou a funcionalidade de autenticação?
esse login seria a funcionalidade...
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 aaction
e omethod
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
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.
Oi Lord,
Creio que você escreveu o código de forma incorreta.
Troque os dois pontos por ponto:
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:
Oi JF Neto,
Fiz um fix do seu código e postei pra você ver: http://pastebin.com/vh7y4EyH
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?
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:
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)
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
Oi Márcio,
Abraço e boa sorte nos estudos. (:
ola Botelho sera q vc poderia me enviar o codigo fonte do Layout postado por vc na materia Criando Layout com CSS
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.
Excelente tutorial cara! Me ajudou bastante.
wbotelhos,
Muito boa a explicação !
Agora, como faço para entrar no MOVIE COLLECTION, pois la esta pedindo senha e usuario :/
Abrs
Valeu
Fábio,
Você precisa clicar no link participar e fazer seu cadastro e então receberá um e-mail com sua senha para acesso.
Cara aonde vc hospeda suas app java?
abs
Fala Rodrigo,
Atualmente hospedo na http://www.integrator.com.br.
Suporte muito bom. Principalmente pela empresa pertencer ao Edson Gonçalves.
Legal, cara to com eles tb
O que esta achando da performance da sua app nos servers deles?
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.
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
Ansioso pelo artigo sobre o Sitemesh!
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)?
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:
Ahh muleki multidisciplinar =P
Bacana o post, parabéns, Washington! ;)