Entrar
Cadastre-se
Ajuda
Responder
Postou 08 dezembro 2006 - 08:50
Aeh, este é meu primeiro tutorial, e vamos montar um layout com XHTML+CSS. Esse tutorial se destina à iniciantes que estão cansados dos famosos tutos de "Layout de 3 colunas".
Antes de agir você pode ver o Resultado final do tutorial .
Hoje vamos montar um site "de verdade" com XHTML e CSS. Vamos lá!
1 - As imagens
As imagens do site já estão todas prontas e "fatiadas", esse layout foi gentilmente cedido pelo nosso amigo Guilherme Medeiros, ele fez o layout no Photoshop, me mandou o psd e eu "fatiei" ele no fireworks.
Você pode baixar as imagens neste link . A senha do arquivo é "tutorial"(sem aspas).
Após baixadas as imagens, crie uma pasta no seu pc com o nome que você quizer, para que ali fique o seu trabalho, depois dentro dessa crie uma pasta com o nome "img"(sem aspas), e descompacte o arquivo ali.
Agora abra o arquivo "layout.png" no fireworks ou no photoshop(eu particularmente prefiro o fireworks, já que iremos lidar em varios programas ao mesmo tempo, pois o PS pode deixar o PC "lerdo"). É interessante ressaltar que não é necessário que você tenha esses programas para executar o tutorial, mas é interessante pois assim você pode acompanhar melhor como se desenvolve a montagem do layout com base na imagem original.
2 - O (x)HTML
Eu irei utilizar para a criação tanto do XHTML quanto do CSS o PHP Designer Personal(programa gratuíto), que também não é necessário, você pode fazer os códigos até no bloco de notas.
A primeira parte do processo de desenvolvimento é analizar o layout e ver quantos "blocos" iremos precisar para montá-lo. Observe:
Agora vamos ver cada parte do código separadamente, para que eu possa explicá-lo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="pt-br"> <head> <meta http-equiv="Content-type" content="application/html+xml;charset=iso-8859-1" /> <meta http-equiv="Keywords" content="styllus melhores móveis brasil decoração casa loja informações" /> <meta http-equiv="Description" content="Loja de móveis com grande variedade de móveis para todos os gostos." /> <meta name="Author" content="Guilherme Rambo(INSIDE)" /> <meta name="Robots" content="INDEX,FOLLOW" /> <title>Stylus Móveis, Os Melhores Móveis do Brasil</title> <link rel="stylesheet" media="all" href="screen.css" type="text/css" /> </head>
Nesta primeira parte temos o DOCTYPE, no caso eu usei o XHTML Strict, porque tinha certeza de que todo o xhtml seria escrito corretamente e validado;
Após o DOCTYPE, temos a tag de abertura do html, com a definição de lingua para "pt-br";
Depois abrimos a tag head, dentro dela temos as meta-tags, com informações importantes do site, como palavras-chave,descrição, autor, título, informações para robôs de busca, etc;
Após a tag title temos a tag link, que está "linkando" nosso xhtml ao css, que será feito logo mais.
Próxima parte do código xhtml:
<body id="home"> <div id="geral"><!-- Div que engloba todo o site --> <div id="conteudo"><!-- Aqui vai conteúdo central -->
Aqui abrimos a tag body(corpo do documento), repare que coloquei um id na tag body, pois é, isso é possível sim, e bastante útil para o caso de eu querer que algumas paginas tenham formatação um pouco diferente;
Depois temos a div geral, onde vamos por o fundo do site, dentro desta div estara todo o site;
Após isso vem a div conteudo, que é onde ficarão os textos, titulos, menu, etc, corresponde àquele centro branco do nosso layout;
Um detalhe que deve-se notar é que eu coloco bastante comentários no código, isso é muito importante para que quando você for editar o código ou colocar programação nele você consiga entender claramente cada parte do código, sem se "perder" em linhas e mais linhas sem sentido.
Próxima parte do código:
<ul class="menu"> <li><a href="/" title="Página Inicial">Home</a></li> <li><a href="/a_empresa/" title="Sobre a empresa">A empresa</a></li> <li><a href="/produtos/" title="Conheça nossos produtos">Produtos</a></li> <li><a href="/contato/" title="Entre em contato conosco para mais informações">Contato</a> </li> </ul> <h1>Stylus Móveis, Os melhores móveis do Brasil</h1>
Esta parte é o topo do site, aquela lista não-ordenada(ul) com classe ".menu" é o menu do site, cada item dessa lista(li) é um link para uma seção do site, depois no css você se surpreenderá com a personalização que é possivel realizar nessas tags;
Este h1 ali com o nome da empresa e slogan será substituido no css pela imagem do logo, essa técnica de sumir com o texto e colocar uma imagem chama-se "image replacement".
Próxima parte do código:
<div id="texto1"> <p class="left"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed facilisis. Praesent eu diam quis lectus porttitor vestibulum. Aliquam pretium, tellus nec molestie consectetuer, tellus neque rhoncus elit, eget blandit velit metus faucibus augue. Sed diam. Mauris eu nisi. Integer vel libero at lacus scelerisque iaculis. Suspendisse ante. Proin pharetra dignissim leo. Quisque aliquet quam ut enim. Fusce ultrices, risus et eleifend aliquam, felis felis vehicula ante, in posuere eros odio consequat lorem. Sed malesuada. Nulla facilisi. Nunc quis elit sit amet sapien luctus hendrerit. Sed luctus commodo enim. </p> <img src="img/foto1.png" alt="Cadeira de escritório" class="right" /> </div> <div id="texto2"> <img src="img/foto2.png" alt="Poltronas confortáveis" class="left" /> <p class="right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed facilisis. Praesent eu diam quis lectus porttitor vestibulum. Aliquam pretium, tellus nec molestie consectetuer, tellus neque rhoncus elit, eget blandit velit metus faucibus augue. Sed diam. Mauris eu nisi. Integer vel libero at lacus scelerisque iaculis. Suspendisse ante. Proin pharetra dignissim leo. Quisque aliquet quam ut enim. Fusce ultrices, risus et eleifend aliquam, felis felis vehicula ante, in posuere eros odio consequat lorem. Sed malesuada. Nulla facilisi. Nunc quis elit sit amet sapien luctus hendrerit. Sed luctus commodo enim. </p> </div> <div id="texto3"> <p class="left"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed facilisis. Praesent eu diam quis lectus porttitor vestibulum. Aliquam pretium, tellus nec molestie consectetuer, tellus neque rhoncus elit, eget blandit velit metus faucibus augue. Sed diam. Mauris eu nisi. Integer vel libero at lacus scelerisque iaculis. Suspendisse ante. Proin pharetra dignissim leo. Quisque aliquet quam ut enim. Fusce ultrices, risus et eleifend aliquam, felis felis vehicula ante, in posuere eros odio consequat lorem. Sed malesuada. Nulla facilisi. Nunc quis elit sit amet sapien luctus hendrerit. Sed luctus commodo enim. </p> <img src="img/foto3.png" alt="Kit sala de estar" class="right" /> </div>
Esta parte é aquela com alguns textinhos e imagens de produtos, dispensa maiores explicações, apenas note que eu coloquei as classes "right" e "left" em alguns elementos, pois eles deverão ficar alinhados uns à direita e outros à esquerda respectivamente.
Agora vem o rodapé:
<div id="rodape"> <address> Copyright© 2006 Stylus Móveis LTDA - Todos os direitos reservados,<br /> Layout: Guilherme Medeiros. Montagem: Guilherme Rambo(INSIDE) </address> </div>
Esta parte também é simples, apenas o bom e velho copyright dentro de um elemento "address", na imagem com os blocos que eu fiz, coloquei essa parte do código como sendo um elemento "p" mas no decorrer da codificação achei mais semântico utilizar o address nesse caso.
E finalmente a última parte do XHTML:
</div><!-- Fim do conteúdo central --> </div><!-- Fim da div que engloba todo o site --> </body> </html>
Creio que não precise explicar nada nessa parte, é apenas o fechamento de todas as tags.
OBS: o código XHTML completo, juntamente com o CSS pode ser baixado no final do tutorial.
3 - O CSS, a parte mais divertida
Chegou a parte mais divertida(e difícil) do nosso desenvolvimento, a criação do nosso css, que vai dar vida à nossa página(que poético, não?!). O segredo de um bom css é testar, teste sempre varias maneiras diferentes de fazer alguma coisa, tente, experimente,até que você se sinta satisfeito com o resultado.
Para fazer o css, o ideal é ter o projeto do layout aberto em um programa de edição gráfica(fireworks no meu caso), pois assim você pode ver tamanhos, cores, tipos de fontes, etc com bastante facilidade, e ir colocando no seu css.
Tenha também aberta a pasta onde se localizam as imagens, assim você pode olhar os nomes das imagens e colocá-los no seu css com segurança.
Vamos fazer exatamente como eu fiz com o XHTML, vou mostrar cada trecho do código e ir explicando para que você entenda pra que serve cada coisa.
Primeira Parte:
* {
margin:0;
padding:0;
list-style:none;
vertical-align:middle;
text-decoration:none;
font-style:normal;
line-height:16px;
}Esta parte do código é extremamente importante, pois aqui eu estou "zerando" algumas propriedades que os elementos html têm por padrão, e que podem atrapalhar e muito no desenvolvimento do css.
Essas propriedades são o margin, padding, o alinhamento vertical, que eu coloco como middle(meio), defino que nenhum texto terá decoração, coloco o estilo de fonte como normal e defino a altura da linha como 16px.
É desse modo que ficarão todas as tags inicialmente, até que eu decida colocar as propriedades adequadas em cada uma.
a:link, a:active, a:visited {
color:#9B7E62;
}
a:hover {
color:#09C;
}Esta parte é a definição das cores dos links em geral.
Primeiro eu defino os links nos estados normal, ativo e visitado.
E por ultimo coloco uma cor diferente para quando o usuario estiver com o mouse sob o link.
div#geral {
width:1007px;
height:760px;
margin:0 auto;
background:#FFF url(img/fundo.jpg) no-repeat center;
}
div#conteudo {
width:560px;
margin:0 0 0 397px;
font:13px Geneva, 'Times new roman', Times, serif;
}Divs #geral e #conteudo. A div geral terá uma largura de 1007px, é a largura ideal para resolução de 1024x768, ou seja, esse site não ficará tão agradável para quem tem uma resolução inferior à esta.
O margin auto serve para, no caso de sobrar espaço, o site inteiro irá ficar centralizado horizontalmente no navegador.
Logo depois eu defino o background do site, este background deu muito trabalho na hora de expotar as imagens, pois eu tinha medo que ficasse muito grande(em kb) e também não queria que a imagem ficasse feia, mas no fim consegui equilibrar as duas coisas.
A div conteudo como ja citei no xhtml, é o que corresponde à parte branca do fundo do site, ali é que fica o conteudo principal do site, as fotos, menus, etc....
O margin que eu defini irá "empurrá-lo" para o meio, o valor exato desse margin foi "chutado", ou seja, eu fui testanto até que ficasse bem centralizado.
Após o margin, apenas defino a fonte, neste site usei uma familia de fontes com-serifa.
div#conteudo ul.menu {
display:block;
width:560px;
height:26px;
}
div#conteudo ul.menu li {display:inline}
div#conteudo ul.menu li a {
font:bold 13px 'Trebuchet MS', Arial, Helvetica, Tahoma, Verdana, sans-serif;
display:block;
float:right;
padding:3px 5px;
}
div#conteudo ul.menu li a:hover {
background:#523724;
color:#FFF;
}Aqui está o nosso menu, a manipulação daquela lista não-ordenada, lembram-se de que falei que era surpreendente a capacidade delas?
Pois é mesmo, aí está um menu super bacana e simples, não tem nenhum segredo.
Na ul com classe menu eu apenas defini que seria um elemento de bloco, e também suas dimensões.
O display inline da li serve para que em vez de uma ficar abaixo da outra, uma fique ao lado da outra.
Depois vem as definições dos links, que seriam os "botões" do nosso menu, coloquei apenas uma fonte bacana e um padding para espaçar.
E finalizando o estilo para quando o mouse estiver sob o link, apenas mudará o fundo e a cor do texto.
Para você saber mais sobre menu horizontal, pode dar uma lida nesse tutorial , criado pelo Gio e pelo Hunter.
div#conteudo h1 {
text-indent:-90000em;
overflow:hidden;
background:#FFF url(img/logo.gif) no-repeat center;
width:559px;
height:119px;
margin:0 0 18px 0;
}Aqui está a técnica de image replacement, na primeira linha eu estou sumindo com o texto do h1, após isso eu defino que o texto que "transbordar" o tamanho do h1 também irá sumir, depois coloco a imagem que eu quero que apareca no background do h1, digo para não repetir e coloco ela no centro do elemento, e após a altura e larguras, que são as mesmas da imagem do logo.
O margin ali está só na parte de baixo, serve apenas pra separar um pouco o logo do conteudo que virá logo abaixo.
div#texto1,div#texto2,div#texto3 {
height:180px;
}
div#conteudo p {
width:390px;
height:155px;
}
.right {float:right;}
.left {float:left;}Toda a definição do nosso conteúdo central está aqui, na primeira linha eu coloco a mesma altura para todas as divs que estão com os textos e imagens. Depois defino uma largura e altura para os parágrafos. Essas são as duas classes que farão com que as imagens fiquem ao lado dos textos, isso depende de qual classe eu coloquei no elemento, alternando essas classes entre os elementos ficou um "efeito" vizual bem legal.
div#rodape {
clear:both;
height:26px;
width:450px;
margin:18px 0 0 0;
background:#FFF url(img/logo_mini.png) no-repeat center left;
}
div#rodape address {
font:bold 11px Arial, Helvetica, sans-serif;
color:#AA9782;
text-align:center;
}E aqui está a última parte do nosso CSS, coloquei no rodapé um clear both, isso fará com que os elementos, mesmo que com float "empurrem" ele para baixo, após eu só defino os tamanhos, margem, e ali no background eu estou colocando aquele logo em tamanho reduzido, observe que a posição dele é "center left", ou seja, "centro esquerda", assim ele ficará centralizado na vertical, e alinhado à esquerda na horizontal.
Últimas considerações
Bem pessoal, basicamente era isso, eu resolvi fazer este tutorial, pois percebi que tem muita coisa na internet como "layout de 3 colunas", etc, porém nada mais "real", como este tutorial que acabam de realizar.
Considero realmente importantes estes tutoriais básicos existentes na internet, mas acho que o pessoal que está aprendendo e já passou por eles quer algo mais do que apenas "bla,bla,bla".
Então tá, até a próxima, e quero agradecer o meu amigão Guilherme Medeiros(xará por sinal ^^) por ter feito este layout especialmente para a realização do tutorial.
LINKS
Meu blog(prometo que vou atualizar ^^)
HTML e CSS completos do site feito no tutorial(a senha é "tutorial" [sem aspas])
Todas as imagens utilizadas no tutorial, inclusive o projeto em png
Tutorial sobre menu horizontal dos amigos Gio e Hunter
Validador da W3C(experimente validar o XHTML do tutorial)
Resultado final do tutorial
Quote
Autor do Artigo: Guilherme Rambo(INSIDE)
Autor do Layout da Página: Guilherme Medeiros
Fonte: http://www.insidewebdesign.rg3.net - http://www.web2ponto0.com.br/
Autor do Layout da Página: Guilherme Medeiros
Fonte: http://www.insidewebdesign.rg3.net - http://www.web2ponto0.com.br/
Quote
