Mock Up

“Mockup” é uma peça em tamanho real ou exagerado do produto. Em webdesign (projeto de página a ser veiculada em navegadores, seja na própria máquina, seja na Internet), eu chamo de estrutura. A estrutura de nosso lay-out terá: uma linha para a imagem de topo, uma linha para a barra de navegação, uma linha com duas colunas para uma introdução e uma imagem, uma linha de espaço, quatro colunas, outro espaço e um rodapé com três colunas. Levando em conta as colunas, associe as classes às divs. Repare que a cada fim de linha é necessária uma div com a classe=clear. Não esqueça de ‘linkar’ os estilos do pacote 960 Grid System.

mock up

Veja o código Copiar para área de transferência Imprimir

<div class=”container_12″>
<div class=”grid_12″></div>
<div class=”clear”></div>
<div class=”grid_12″></div>
<div class=”clear”> </div>
<div class=”grid_7″></div>
<div class=”grid_5″></div>
<div class=”clear”></div>
<div class=”grid_12″></div>
<div class=”clear”></div>
<div class=”grid_3″></div>
<div class=”grid_3″></div>
<div class=”grid_3″></div>
<div class=”grid_3″></div>
<div class=”clear”></div>
<div class=”grid_12″></div>
<div class=”clear”></div>
<div class=”grid_4″></div>
<div class=”grid_4″></div>
<div class=”grid_4″></div>
</div>

O esqueleto está pronto. É hora de incrementar o layout. As barras verdes são simplesmente divs com background color e ‘enchimento’ (padding). A div navbar não tem altura definida in loco. Isto será definido pelo tamanho dos links. Não se esqueça de colocar a imagem conforme o código.

Veja o código Copiar para área de transferência Imprimir