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.
Partilhar esta Entrada
Passo 14 – Últimos toques no Portfolio Home
Finalmente, chegámos ao fim. Apenas fiz umas pequenas alterações: alterei as imagens e os textos dos blocos pequenos para não serem três blocos exactamente iguais, livrei-me do botão “View Project” e apenas coloquei um link. Fica mais limpo e claro. Aqui está o Portfolio Home acabado!
Partilhar esta Entrada
Passo 13 – Adicionar faixa
Agora vamos adicionar uma faixa ao primeiro item, tal como anteriormente. Vejámos o HTML:
Ler o resto desta entrada »
Partilhar esta Entrada
Passo 12 – Criar o segundo bloco
No último passo, o nosso primeiro bloco ficou completo. Agora vamos começar a trabalhar no segundo bloco. Este segundo bloco terá uma lista dos últimos trabalhos. Vejámos o HTML:
Ler o resto desta entrada »
Partilhar esta Entrada
Passo 11 – Adicionar faixa do canto
Vamos agora adicionar uma pequena faixa no canto do bloco. Isto é possível com uma mistura de CSS com PNG’s transparentes.
Bem, primeiro, iremos precisar da imagem. Podem encontrá-la no pack disponibilizado no início destes tutoriais.
Ler o resto desta entrada »
Partilhar esta Entrada
Passo 10 – Adicionar estilos ao texto
Para já o nosso texto está a “denegrir” a página pois não está lá muito bonito, pois não? Bem, vamos adicionar estes bocados de CSS para corrigir isso:
Ler o resto desta entrada »
Partilhar esta Entrada
Passo 9 – Adicionar mais algum estilo
Bem, aqui vem mais um bloco de CSS:
Ler o resto desta entrada »
Partilhar esta Entrada
Passo 8 – Adicionar o conteúdo item “Featured Portfolio”
Agora que temos a nossa base, chegou a hora de colocar-mos os blocos de conteúdo. O primeiro bloco chama-se “Featured Project”. Vamos adicionar algum HTML:
Ler o resto desta entrada »
Partilhar esta Entrada
Passo 7 – Corrigir o menu
Para já o nosso menu está muito feio… Vamos adicionar mais algumas linhas de CSS para o deixar mais bonito:
Ler o resto desta entrada »
Partilhar esta Entrada
Passo 6 – Corrigir a transparência no IE6
O único problema com as PNG’s transparentes é que o IE6 não suporta a transparência. Felizmente, isto é fácil de resolver graças a este script. Basta fazer download e colocar esta linha extra no CSS:
Ler o resto desta entrada »
Partilhar esta Entrada
