7. Estrutura adicional
- Links para navegação
- Cabeçalhos (Cabeçalho do Site e os cabeçalhos do conteúdo)
- Conteúdo
- Rodapé informativo (informação de copyright, créditos, e navegação alternativa)
Agora que nós temos nossas divs de layout base nos devidos lugares, podemos adicionar o restante da estrutura que vai ser a “cara” desse website.
O fundamental que ainda precisamos adicionar ainda são:
Ao implementar essas coisas sem quebrar o layout da página, vamos criar uma pequena classe muito útil, chamada “hidden”.
Adicione isto perto do topo da sua folha-de-estilos, depois da definição da tag body:
.hidden {
display: none;
}
Isto significa agora que podemos setar qualquer elemento no site com a tag “hidden” e ele não será exibido logo de cara. Isto vai nos facilitar agora, portanto, você pode esquecê-la por um momento.
Vamos falar sobre cabeçalhos
Cabeçalhos num documento HTML são definidos pelas tags <h1> até <h6> em ordem de importância no documento. Por exemplo: <h1> para o nome do website, <h2> para os cabeçalhos principais (ex.: nome da página), <h3> para cabeçalhos secundários, etc… Nós vamos adicionar um <h1> dentro da nossa div Header e setá-lo como o nome da companhia, Enlighten Designs neste caso.
<div>
<h1>Enlighten Designs</h1>
</div>
Se você recarregar a página, notará que Enlighten Designs aparece em letras grandes dentro do cabeçalho, mas há também agora muito espaço em branco ao redor do cabeçalho. Isto é causado pelas margens padrões das tags <h1>. Então necessitamos cortar a margem e seu preenchimento dessa forma:
h1 {
margin: 0;
padding: 0;
}
Agora vamos adicionar a navegação. Os prós e contras de como a navegação vai funcionar podem ser um tanto complicados e serão discutidos em detalhes posteriormente em sua própria seção.
A navegação será estruturada como lista de definição (<dl>) com id’s individuais relevantes a cada termo de navegação com o uso da tag (<dt>). Estes itens de navegação terão dentro de si, links para nossas seções principais. Se isto parecer confuso, adicione somente este código à sua div main-nav:
<div id="main-nav">
<dl class="hidden">
<dt><a href="#">About</a></dt>
<dt><a href="#">Services</a></dt>
<dt><a href="#">Portfolio</a></dt>
<dt><a href="#">Contact Us</a></dt>
</dl>
</div>
Nota: Muitas pessoas usam listas não-ordenadas para navegação, mas para este simples nível de navegação resolvi usar listas de definição por se mostrarem mais fáceis de funcionar no IE. O IE tem alguns bugs de CSS irritantes com listas não-ordenadas. Mas com pequenos ajustes, uma lista não-ordenada pode fazer a mesma coisa facilmente. É questão de preferência, creio.
Em termos fáceis para entender, a <dl> age como um contêiner, as <dt>’s são identificadores únicos para cada item de navegação e os links… são links. Nós vamos usar id’s únicos mais tarde quando viermos a fazer o ‘look’ da navegação como ele deve ser, com suas belas imagens de rollover. Só que mais tarde. Se você recarregar a página, vai notar que ela parece um tanto feia, então por ora, vamos esconder a navegação que adicionamos com a classe “hidden” que construímos anteriormente.
<div id="main-nav">
<dl>
<dt><a href="#">About></a></dt>
<dt><a href="#">Services</a></dt>
<dt><a href="#">Portfolio</a></dt>
<dt><a href="#">Contact Us</a></dt>
</dl>
</div>
“E como num passe de mágica, tudo se transformou…”
Agora vamos passar para o rodapé porque é relativamente fácil. Há duas partes no rodapé: a informação de copyright e os créditos na esquerda e a navegação alternativa do site na direita.
Nós queremos que a navegação alternativa flutue à direita, como fizemos com a sidebar e o conteúdo, então vamos colocar isso no primeiro div. Em teoria você poderia fazer as divs flutuarem não importasse onde elas estivessem no código, mas erros no IE tornam isso difícil, então agora, qualquer item flutuante deve vir primeiro na ordem do código.
Posicione em uma div com uma id única como esta:
<div id="footer">
<div id="altnav">
<a href="#">About</a> -
<a href="#">Services</a> -
<a href="#">Portfolio</a> -
<a href="#">Contact Us</a> -
<a href="#">Terms of Trade</a>
</div>
</div>
Abaixo dessa div, vamos acrescentar a marca de copyright e os créditos.
<div id="footer">
<div id="altnav">
<a href="#">About</a> -
<a href="#">Services</a> -
<a href="#">Portfolio</a> -
<a href="#">Contact Us</a> -
<a href="#">Terms of Trade</a>
</div>
Copyright © Enlighten Designs
Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>
E agora o rodapé está pronto. Para ter certeza de que seu site está indo bem, ele deve se parecer com isto:
Movendo dentro da área de conteúdo principal, vamos adicionar o conteúdo. Estou pegando o conteúdo do design diretamente do passo 2. Use as tags <h2> para os cabeçalhos “About” e “Contact Us”. Coloque os parágrafos em tags <p></p>, e use <br /> para a quebra de linhas.
<div id="content">
<h2>About</h2>More contact information...</a></p>
</div>
Atualize a visualização da sua página. Você vai notar que há mais de um espaço em branco “pulando” ao redor da div de conteúdo. Isto acontece por causa das margens padrão nas tags <h2> e <p>. Necessitamos diminuir as margens e o espaçamento. Porém, nós não queremos fazer isto para cada simples tag de parágrafo ou cabeçalho secundário que estará no website. Para fazer isto, necessitamos usar seletores CSS “filhos”. Todos os elementos em HTML tem um relacionamento “filho, pai”. Se a “tag a” estiver dentro da “tag b”, então a tag b é filha da tag a. No código acima, nossas tags <h2> e nossas tags <p> são ambas filhas da div #content. Se quisermos selecionar os elementos filhos de um pai específico, nós separamos eles com um espaço, como no exemplo abaixo:
#content h2 {
margin: 0;
padding: 0;
}
#content p {
margin: 0;
padding: 0;
}
Então as regras acima dizem para o browser aplicar estes estilos SOMENTE para as tags <h2> e para aqueles que são elementos filhos da div #content.
Na próxima parte faremos o visual do texto parecer um pouco melhor.
A versão 2.24 do 
