Vamos à aula 2…
Aula 02
- Construindo uma estrutura mais elaborada
- Falando sobre CSS
- Diferentes navegadores. Diferentes resultados.
- Comentário pessoal do autor
Construindo uma estrutura elaborada
Continuando então… blocos de notas abertos?! vamos fazer uma estrutura utilizando o exemplo anterior da estrutura simples. Vamos simular um site mais completo. Além de TOPO, MENU, CONTEÚDO E RODAPÉ, vamos encher mais com um menu e umas caixas flutuantes dentro do conteúdo. Algo assim:
Henrique, por que essas cores horríveis Jamaicanas? porque não uns degradês , um design bacana? desculpe desapontá-l@, mas isto não é um curso de design e sim de estrutura de site, vamos prosseguindo então… 
Copiar-colar e vamos recuperar a nossa estrutura simples:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//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=iso-8859-1″ />
<title>Henrique Araujo – Curso de Tableless (Aula 01)</title>
<style type=”text/css”>
#geral {
width:600px;
height:350px;
}
#topo {
width:600px;
height:80px;
background-color:#EC0002;
}
#menu {
height:210px;
width:200px;
float:left;
background-color:#006FD8;
}
#conteudo {
width:400px;
height:210px;
background-color:#FFEB01;
float:left;
}
#rodape {
height:60px;
width:600px;
background-color:#007D07;
float:left;
}
</style>
</head>
<body>
<div id=”geral”>
<div id=”topo”>Minha logomarca</div>
<div id=”menu”>menu</div>
<div id=”conteudo”>conteúdo</div>
<div id=”rodape”>rodapé</div>
</div>
</body>
</html>
Vamos ao menu! lembra da W3C? ok, ela diz que menus são listas! Veja abaixo:
<ul id=”menu”>
<li>opção 1</li>
<li>opção 2</li>
<li>opção 3</li>
</ul>
e o CSS disso aí seria:
#menu {
height:210px;
width:200px;
float:left;
background-color:#006FD8;
}
#menu ul {
list-style-type:none;
padding:0px;
}
#menu ul li {
margin:1px;
padding:3px;
}
#menu ul li a {
background-color:#FFFFFF;
border:0px;
display:block;
text-decoration:none;
}
#menu ul li a:hover {
background-color:#999999;
color:#FFFFFF;
}
O código completo com o MENU então seria:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//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=iso-8859-1″ />
<title>Henrique Araujo – Curso de Tableless (Aula 01)</title>
<style type=”text/css”>
#geral {
width:600px;
height:350px;
}
#topo {
width:600px;
height:80px;
background-color:#EC0002;
}
#menu {
height:210px;
width:200px;
float:left;
background-color:#006FD8;
}
#menu ul {
list-style-type:none;
padding:0px;
}
#menu ul li {
margin:1px;
padding:3px;
}
#menu ul li a {
background-color:#FFFFFF;
border:0px;
display:block;
text-decoration:none;
}
#menu ul li a:hover {
background-color:#999999;
color:#FFFFFF;
}
#conteudo {
width:400px;
height:210px;
background-color:#FFEB01;
float:left;
}
#rodape {
height:60px;
width:600px;
background-color:#007D07;
float:left;
}
</style>
</head>
<body>
<div id=”geral”>
<div id=”topo”>Minha logomarca</div>
<div id=”menu”>
<ul>
<li><a href=”#”>opção 1</a></li>
<li><a href=”#”>opção 2</a></li>
<li><a href=”#”>opção 3</a></li>
</ul>
</div>
<div id=”conteudo”>
</div>
<div id=”rodape”>rodapé</div>
</div>
</body>
</html>
Agora, vamos às nossas caixinhas no corpo do conteúdo do nosso site. Elas são DIVS que flutuarão à esquerda, com espaços entre eles afastando.
Assim:
<div id=”box”>caixa 1</div>
<div id=”box”>caixa 2</div>
<div id=”box”>caixa 3</div>
<div id=”box”>caixa 4</div>
Vamos ao CSS:
#box {
background-color:#FFFFFF;
width:160px;
height:100px;
margin-left:20px;
margin-bottom:5px;
float:left;
}
Então o resultado disso seria:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//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=iso-8859-1″ />
<title>Henrique Araujo – Curso de Tableless (Aula 01)</title>
<style type=”text/css”>
#geral {
width:600px;
height:350px;
}
#topo {
width:600px;
height:80px;
background-color:#EC0002;
}
#menu {
height:210px;
width:200px;
float:left;
background-color:#006FD8;
}
#menu ul {
list-style-type:none;
padding:0px;
}
#menu ul li {
margin:1px;
padding:3px;
}
#menu ul li a {
background-color:#FFFFFF;
border:0px;
display:block;
text-decoration:none;
}
#menu ul li a:hover {
background-color:#999999;
color:#FFFFFF;
}
#conteudo {
width:400px;
height:210px;
background-color:#FFEB01;
float:left;
}
#box {
background-color:#FFFFFF;
width:160px;
height:100px;
margin-left:20px;
margin-bottom:5px;
float:left;
}
#rodape {
height:60px;
width:600px;
background-color:#007D07;
float:left;
}
</style>
</head>
<body>
<div id=”geral”>
<div id=”topo”>Minha logomarca</div>
<div id=”menu”>
<ul>
<li><a href=”#”>opção 1</a></li>
<li><a href=”#”>opção 2</a></li>
<li><a href=”#”>opção 3</a></li>
</ul>
</div>
<div id=”conteudo”>
<div id=”box”>caixa 1</div>
<div id=”box”>caixa 2</div>
<div id=”box”>caixa 3</div>
<div id=”box”>caixa 4</div>
</div>
<div id=”rodape”>rodapé</div>
</div>
</body>
</html>
Diferentes navegadores. Diferentes resultados
Como eu já havia falado antes, desenvolver páginas requer que você teste em vários navegadores. O IE 6,0 e o Firefox chegam a ser suficientes, mas o ideal mesmo é que os testes ocorram em: IE 6.0 (se possível IE7.0 também), Firefox e Safari, presente nas 3 plataformas mais utilizadas hoje respectivamente: Windows, Linux e MAC.
Porque ocorrem diferentes resultados? simples, os padrões estão ai colocados pela W3C, mas as empresas (leia-se principalmente a Microsoft) fabricam seus navegadores sem obedecê-los. Felizmente, ela – a microsoft – se redimiu quando lançando o IE7.0, assemelhou o seu motor com o do Firefox; este último o navegador que atualmente mais chega próximo dos padrões.
Então eu vou ter que testar na base do “F5″ neste navegadores todos? Sim.
Comentários
Falar do TABLELESS sem falar de CSS é um troço complicado. Os dois são casados na igreja e no “civil”, e a separação hoje é improvável e inviável. O método “sem-tabelas” exige que por trás da nossa estrutura tenhamos folhas de estilos (CSS) extensas, que serão de qualquer jeito carregadas e desenhadas pelo navegador. Isto caracteriza mão-de-obra intensa, ou seja, um trabalhão muitas vezes, mesmo para quem conhece bem o CSS. Eu não pretendo (pelo menos tão cedo) abordar CSS aqui no blog, por se tratar de algo que exige muito conteúdo teórico e muita prática agregada também. Seria muita audácia da minha parte. Resta a mim esperar que, primeiro, você que se interessou mesmo por este conteúdo, navegue um pouco pelo Google estudando CSS (sugestão: W3SCHOOLS) e reutilize os códigos aqui apresentados para te ajudar, e segundo, que soluções revolucionárias como Microsoft Silverlight e Adobe FLEX venham em breve ORGANIZAR esta forma de desenvolvimento que temos hoje .
A grande lição que eu gostaria que ficasse (pronto, agora deu a louca no cara, ele tá se achando um mix de professor sabe-tudo e profeta) é: não importa o que você faça na vida, organização deve estar sempre à frente.
.
