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.
Fonte: http://bit.ly/apnpic
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:
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.
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.
Veja este design funcionando em: http://moviecollection.com.br
Link do projeto:
josias josé
dezembro 12th, 2011
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
wbotelhos
dezembro 18th, 2011
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"Ademar Morais
outubro 25th, 2011
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!
wbotelhos
outubro 27th, 2011
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.
RODRIGO PORTO
setembro 25th, 2011
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
wbotelhos
setembro 25th, 2011
Oi Rodrigo,
Esse login seria o layout do formulário de login ou a funcionalidade de autenticação?
RODRIGO PORTO
setembro 25th, 2011
esse login seria a funcionalidade…
wbotelhos
setembro 25th, 2011
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
namedos campos do login ou aactione omethoddele, 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
Lord
maio 9th, 2011
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.
wbotelhos
julho 14th, 2011
Oi Lord,
Creio que você escreveu o código de forma incorreta.
Troque os dois pontos por ponto:
${param.pagina}jf neto
março 30th, 2011
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:
@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%; }wbotelhos
abril 2nd, 2011
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
Kaio Valente
novembro 15th, 2010
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?
wbotelhos
novembro 16th, 2010
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:
wbotelhos.com.br/2010/07/01/criando-template-com-sitemesh
Márcio
outubro 11th, 2010
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
wbotelhos
outubro 11th, 2010
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;
Só seguir os artigos do blog que consiguirá fazer uma aplicação igual, pois são baseados no Movie Collection.
Abraço e boa sorte nos estudos. (:
francisco
setembro 25th, 2010
ola Botelho sera q vc poderia me enviar o codigo fonte do Layout postado por vc na materia Criando Layout com CSS
wbotelhos
setembro 27th, 2010
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.
Leandro Fiel
agosto 26th, 2010
Excelente tutorial cara! Me ajudou bastante.
Fabio Silveira
agosto 21st, 2010
wbotelhos,
Muito boa a explicação !
Agora, como faço para entrar no MOVIE COLLECTION, pois la esta pedindo senha e usuario :/
Abrs
Valeu
wbotelhos
agosto 21st, 2010
Fábio,
Você precisa clicar no link participar e fazer seu cadastro e então receberá um e-mail com sua senha para acesso.
Rodrigo
agosto 18th, 2010
Legal, cara to com eles tb
O que esta achando da performance da sua app nos servers deles?
wbotelhos
agosto 18th, 2010
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.
Rodrigo
agosto 18th, 2010
Cara aonde vc hospeda suas app java?
abs
wbotelhos
agosto 18th, 2010
Fala Rodrigo,
Atualmente hospedo na http://www.integrator.com.br.
Suporte muito bom. Principalmente pela empresa pertencer ao Edson Gonçalves.
daisy
junho 23rd, 2010
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
wbotelhos
junho 23rd, 2010
Olá @daisy,
Você pode utilizar a action <jsp:include/> da seguinte forma:
<jsp:include page="${param.pagina}"/>E o link dda seguinte forma:
http://localhost:8080/frame.jsp?pagina=index.jspMantendo os links sempre apotando para a página que contém todos os includes (
frame.jsp) e passando um parâmetro (pagina) indicando qual a página que será incluída no container número 4, neste caso aindex.jsp.Semana que vem postarei um artigo mostrando como automatizar esta tarefa com o Sitemesh, só ficar ligada. (;
Daniel Jurado
maio 29th, 2010
Ansioso pelo artigo sobre o Sitemesh!
Vinicius Assef
maio 28th, 2010
Gostei. Bem didático.
Só 1 comentário: não seria + semântico trocar os nomes “esquerda” e “direita” por outros que fizessem mais sentido?
wbotelhos
maio 28th, 2010
Fala @Vinicius,
Com certeza seria, porém como você mesmo disse, estou sendo didático.
Costumo usar nomes como “frame-noticia”, “frame-informacao”, ou até mesmo “frame-left/right”.
Quanto mais componentes você tiver na tela, maior será a necessidade do detalhamento na identificação.
Jefferson
maio 24th, 2010
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)?
wbotelhos
maio 24th, 2010
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. (;
Francisco Souza
maio 24th, 2010
Ahh muleki multidisciplinar =P
Bacana o post, parabéns, Washington! ;)