Criando um site: Dimensões (parte 2)
O nosso site será criado dentro da área útil de uma resolução de monitor de 1024 x 768px. A área útil aproximada é de 950 x 500px.
Antigamente usava-se muito a resolução de 800 x 600px devido a limitação das placas de vídeos e do tamanho da tela dos monitores.
Podemos afirmar que, atualmente, mais da metade dos usuários utilizam uma resolução igual ou maior que 1024px.
No primeiro post eu disponibilizei um código inicial para o desenvolvimento deste website.
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- arquivo css --> <link href="estilo.css" rel="stylesheet" type="text/css" /> <title>Criando um website</title> </head> <body> <div id="tudo"> <div id="cabecalho"></div> <div id="menu"></div> <div id="conteudo"></div> </div> </body> </html> |
Vamos precisar criar um arquivo .css para configuração dos elementos do site. Um arquivo css externo fica melhor de visualizar e dar manutenção.
A chamada do arquivo .css é feita dentro da tag head do arquivo index.php.
estilo.css
#tudo{ } #cabecalho{ } #menu{ } #conteudo{ } |
Arquivo .css com alguns dados para ajustar o tamanho do site.
#tudo{ width:900px; /* valor dentro da area util */ margin:0 auto; /* centraliza o site */ } #cabecalho{ background-color:#000033; /* cor de fundo */ height:120px; /* altura do site */ color:#FFFFFF; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:120px; /* alinhamento vertical */ } #menu{ background-color:#FFFF00; /* cor de fundo */ width:270px; /* largura do menu */ float:left; } #conteudo{ background-color:#FF0000; /* cor de fundo */ float:right; width:620px; /* largura da area de conteudo */ } |
Eu não estarei aprofundando em css. Para aqueles que querem aprender, temos o site do Maujor como uma ótima referência para aprendizado de css.
Próximo post: Criação do Menu, Vamos utilizar css e javascript.