Este artigo faz parte de uma série de artigos que podem ser encontrados no Manual de 960 Grid System . Em módulos anteriores já começamos a maquetar este caso real de página web, com um aspecto bastante profissional. Todo o processo está sendo gravado em vídeo para que qualquer leitor possa ademais ver em seu computador como nós realizamos esta prática.
No presente artigo veremos a maquetação da parte principal do corpo da página e chegaremos até o ponto que pode ser visto clicando neste link. Recordemos que já explicamos como se fazia o cabeçalho da página no artigo anterior .
Assim, vamos começar a ver como realizamos este trabalho, embora devamos dizer que as explicações no texto deste artigo serão bem básicas, uma vez que todo o processo explicado pode ser visto no vídeo que publicamos e que se encontra disponível ao final deste artigo.
A maquetação principal do corpo, com o container e as caixas grid_xx seria a seguinte:
<div class="container_12" id="corpo">
<div class="grid_12" id="navegador">
Aqui vai o navegador
</div>
<div class="clear"></div>
<div class="grid_8">
Aqui vai a coluna da esquerda do corpo
</div>
<div class="grid_4">
Aqui vai a coluna da direita do corpo
</div>
<div class="clear"></div>
</div>
O primeiro que realizamos neste artigo foi a barra de navegação que há debaixo do cabeçalho. O interessante desta barra de navegação é que a fizemos com listas. As listas nos ajudam à hora de maquetar com CSS, porque são muito versáteis para apresentar elementos um detrás do outro.
Colocamos o navegador em uma fila de maneira independente, com uma caixa grid_12, porque não há mais nada nesta fila.
A parte da esquerda do corpo foi definida em um grid_8, porque tem 8 colunas de largura. Dentro, colocamos várias notícias de portada em uns quadros bastante simples aos que atribuímos uma borda e um fundo plano.
A parte da direita do corpo é a que tem mais detalhes. Colocamos com um grid_4, para que ocupe 4 colunas de largura, tal como foi desenhada em Photoshop e para completar o espaço disponível no container_12 (8 colunas da parte da esquerda + 4 colunas da direita = 12 colunas do container_12). Se criou um tipo de caixa, com um titular e um corpo que tem um degradé. Dentro os conteúdos são diversos e têm por sua vez diversas classes de estilos CSS para conseguir o aspecto que andávamos buscando. Nota: Para as explicações, lembrem sempre que há um vídeo ao final do artigo onde se vê passo a passo a maquetação e se dão as razões pelas quais optamos por esses estilos CSS e todas as guias para conseguir o resultado final. (Um vídeo vale mais que mil palavras ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Desenho desde zero</title>
<link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/reset.css">
<link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/text.css">
<link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/960.css">
<style type="text/css">
BODY{
background-color: #2b1f1f;
color: #FFF;
font-family: verdana, arial, helvetica;
}
A{
color: #bce7e4;
}
#cabeçalho{
background: #fff url(images/fundo-cabeçalho.gif) repeat-x;
}
#titulogeral img{
padding: 28px 0 0 0;
}
#buscador{
background: transparent url(images/fundo-buscador.gif) no-repeat bottom right;
text-align: right;
}
#buscador input{
font-size:8pt;
}
#buscador form{
padding: 40px 30px 6px 0px;
}
#corpo{
background-color: #000;
}
#navegador{
font-size: 12pt;
margin-top: 10px;
margin-bottom: 10px;
}
#navegador a{
color: #FFF;
font-weight: bold;
text-decoration: none;
}
#navegador ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navegador li{
float: left;
margin: 0 20px 0 0;
padding: 0;
}
.itemportada{
border: 3px solid #3b1010;
background-color: #3c2a2a;
padding: 10px;
margin-bottom: 10px;
overflow:hidden;
}
.imagemitemportada{
float: right;
margin-left: 10px;
}
.tituloitemportada{
font-weight: bold;
font-size: 120%;
margin-bottom: 6px;
}
.autoritemportada{
font-size: 8pt;
margin-bottom: 4px;
}
.introitemportada{
}
.comentariositemportada{
font-size: 8pt;
margin-top: -10px;
}
.titlateral{
background-color: #4b0d0d;
padding: 10px;
}
.corpolateral{
background: #612323 url(images/fundo-corpo-lateral.gif) repeat-x;
overflow: hidden;
padding: 10px 7px 10px 7px;
margin-bottom: 15px;
}
.imagemcorpolateral{
float: left;
}
.corpolateral form{
margin: 0px;
}
.corpolateral form span{
display: block;
margin: 5px 0 5px 0;
}
.textocorpolateral{
margin-left: 110px;
}
.corpolateral input{
font-size: 8pt;
}
.corpolateral ul{
list-style-type: none;
margin: 15px 0 0 0;
padding: 0;
}
.corpolateral li{
padding: 0 0 0 20px;
margin: 0 0 6px 0;
background: transparent url(images/estrelinha.png) no-repeat scroll 0 4px;
}
.nuvem{
font-size: 10px;
text-align:center;
}
.nuvem span.etiqueta1{font-size: 100%}
.nuvem span.etiqueta2{font-size: 120%}
.nuvem span.etiqueta3{font-size: 140%}
.nuve span.etiqueta4{font-size: 160%}
.nuvem span.etiqueta5{font-size: 180%}
.nuvem span.etiqueta6{font-size: 200%}
.nuvem span.etiqueta7{font-size: 220%}
.nuvem span.etiqueta8{font-size: 240%}
.nuvem span.etiqueta9{font-size: 260%}
.nuve span.etiqueta10{font-size: 280%}
.nuvem a{
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="cabeçalho" class="container_12">
<div id="titulogeral" class="grid_6 suffix_2">
<img src="images/titulo-geral.png" width="443" height="30" alt="Desenho de uma web desde zero">
</div>
<div id="buscador" class="grid_4">
<form>
<input type=text>
<input type=button value="buscar">
</form>
</div>
<div class="clear"></div>
</div>
<div class="container_12" id="corpo">
<div class="grid_12" id="navegador">
<ul>
<li><a href="#">Portada</a></li>
<li><a href="#">Seleçoes</a></li>
<li><a href="#">Tutoriais</a></li>
<li><a href="#">Recursos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="grid_8">
<div class="itemportada">
<img src="images/foto-desarolloweb.jpg" width="258" height="250" alt="Foto" class="imagemitemportada"/>
<div class="tituloitemportada"><a href="#">Título de um artigo</a></div>
<div class="autoritemportada">DesarrolloWeb.com</div>
<div class="introitemportada">
<p>
Lorem ipsum dolor sit amet...
</p>
<p>
Curabitur placerat. Vivamus rhoncus est...
</p>
</div>
<div class="comentariositemportada"><a href="#">3 comentarios</a></div>
</div>
<div class="itemportada">
<img src="images/foto-guiarte.jpg" width="256" height="252" alt="foto" class="imagemitemportada" />
<div class="tituloitemportada"><a href="#">Outro artigo destacado na portada com titulo maior</a></div>
<div class="autoritemportada">DesarrolloWeb.com</div>
<div class="introitemportada">
<p>
Nullam enim nulla...
</p>
<p>
sagittis convallis...
</p>
</div>
<div class="comentariositemportada"><a href="#">8 comentarios</a></div>
</div>
<div class="tituloitemportada"><a href="#">>> Ver conteúdos anteriores</a></div>
</div>
<div class="grid_4">
<div class="titlateral">
<img src="images/tit-usuarios.png" width="91" height="20" alt="Usuarios" />
</div>
<div class="corpolateral">
<img src="images/usuarios-grande.png" width="91" height="118" alt="usuarios" class="imagemcorpolateral" />
<div class="textocorpolateral">
<form>
<span>Nome:</span>
<input type="text" name="nome" size="15" />
<span>Chave:</span>
<input type="text" name="chave" size="15" />
<span><input type="submit" value="Entrar" /></span>
</form>
</div>
</div>
<div class="titlateral">
<img src="images/tit-rss.png" width="41" height="21" alt="RSS" />
</div>
<div class="corpolateral">
<img src="images/RSS-grande.png" width="101" height="101" alt="" class="imagemcorpolateral" />
<div class="textocorpolateral">
<ul>
<li><a href="#">Todos os conteúdos</a></li>
<li><a href="#">Artigos em RSS</a></li>
<li><a href="#">Noticias em RSS</a></li>
</ul>
</div>
</div>
<div class="titlateral">
<img src="images/tit-hablamos.png" width="205" height="26" alt="Falamos de..." />
</div>
<div class="corpolateral">
<div class="nuvem">
<span class="etiqueta6"><a href="#">html</a></span>
<span class="etiqueta8"><a href="#">desarrollo</a></span>
<span class="etiqueta5"><a href="#">javascript</a></span>
<span class="etiqueta3"><a href="#">asp</a></span>
<span class="etiqueta10"><a href="#">php</a></span>
<span class="etiqueta5"><a href="#">diseño web</a></span>
<span class="etiqueta4"><a href="#">servidores</a></span>
<span class="etiqueta1"><a href="#">java</a></span>
<span class="etiqueta3"><a href="#">apache</a></span>
<span class="etiqueta6"><a href="#">promoção web</a></span>
<span class="etiqueta9"><a href="#">ajax</a></span>
<span class="etiqueta4"><a href="#">recursos</a></span>
<span class="etiqueta5"><a href="#">dhtml</a></span>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Podemos ver este código em funcionamento em uma página à parte para apreciar o resultado da maquetação CSS criada até o momento.
