Tutorial Web Design – Parte I -> Passo 15
Passo 15 – Adicionar conteúdo do footer
Só falta mais uma secção para a página ficar totalmente completa: o footer!
<div id=”footer”>
<div class=”container”><div class=”footer_column long”>
<h3>Designed by Collis Ta’eed, do with this as you please</h3>
<p>You can read a photoshop tutorial for creating the design at <a href=”http://psdtuts.com”>PSDTUTS</a>, You can read a PS->HTML tutorial for creating the site at <a href=”http://nettuts.com”>NETTUTS</a> and you can learn how to turn the HTML into a Wordpress theme in the upcoming book <a href=”http://freelanceswitch.com/book”>How to be a Rockstar Wordpress Designer</a></p>
</div><div class=”footer_column”>
<h3>More Links</h3>
<ul>
<li><a href=”http://vectortuts.com”>VECTORTUTS</a></li>
<li><a href=”http://flashden.net”>FlashDen</a></li>
<li><a href=”http://audiojungle.net”>AudioJungle</a></li>
<li><a href=”http://freelanceswitch.com”>FreelanceSwitch</a></li>
<li><a href=”http://faveup.com”>FaveUp</a></li>
</ul>
</div><div class=”footer_column”>
<h3>RSS</h3>
<ul>
<li><a href=”">RSS Feed</a></li>
<li><a href=”">What is RSS?</a></li>
</ul>
</div></div>
</div>
Algumas notas:
1. Criei a <div class=”footer_column”> para conter o conteúdo do footer. Iremos colocar isto no sítio já de seguida.
2. Dado que a primeira coluna tem uma largura diferente, criei uma nova classe chamada “long”. Note, que para atribuir duas classes a uma div tem de fazê-lo assim (class=”nome1 nome2″) e não assim (class=”nome1″ class=”nome2″).
3. Dentro das colunas utilizei listas <ul> e <h3> para os títulos. É sempre bom utilizar estes termos pois o código torna-se mais fácil de ler e os motores de busca gostam de ver estes títulos e estas listas.
