“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

mock up

  1. <div class=”container_12″>
  2.     <div class=”grid_12″></div>
  3.     <div class=”clear”></div>
  4.     <div class=”grid_12″></div>
  5.     <div class=”clear”> </div>
  6.     <div class=”grid_7″></div>
  7.     <div class=”grid_5″></div>
  8.     <div class=”clear”></div>
  9.     <div class=”grid_12″></div>
  10.     <div class=”clear”></div>
  11.     <div class=”grid_3″></div>
  12.     <div class=”grid_3″></div>
  13.     <div class=”grid_3″></div>
  14.     <div class=”grid_3″></div>
  15.     <div class=”clear”></div>
  16.     <div class=”grid_12″></div>
  17.     <div class=”clear”></div>
  18.     <div class=”grid_4″></div>
  19.     <div class=”grid_4″></div>
  20.     <div class=”grid_4″></div>
  21. </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.

  1. div.spacer {
  2.     background-color: #8FC73E;
  3.     height: 1em;
  4. }
  5. div#navbar {
  6.     background-color: #8FC73E;
  7.     padding: 10px 0;
  8. }

Aplique a(s) clase(s) às divs grid_12 e configure a ID.

  1. <div class=”container_12″>
  2.     <div class=”grid_12″><a href=”images/header.png” alt=””/></div>
  3.     <div class=”clear”></div>
  4.     <div class=”grid_12″ id=”navbar”></div>
  5.     <div class=”clear”> </div>
  6.     <div class=”grid_7″></div>
  7.     <div class=”grid_5″></div>
  8.     <div class=”clear”></div>
  9.     <div class=”grid_12 spacer”></div>
  10.     <div class=”clear”></div>
  11.     <div class=”grid_3″></div>
  12.     <div class=”grid_3″></div>
  13.     <div class=”grid_3″></div>
  14.     <div class=”grid_3″></div>
  15.     <div class=”clear”></div>
  16.     <div class=”grid_12 spacer”></div>
  17.     <div class=”clear”></div>
  18.     <div class=”grid_4″></div>
  19.     <div class=”grid_4″></div>
  20.     <div class=”grid_4″></div>
  21. </div>
About these ads