Estou finalmente de volta a casa. Depois de umas óptimas férias e muitos (mas mesmo muitos) quilómetros de carro no corpo, estou de volta para trazer as melhores novidades do mundo digital aos vossos ecrâs.
Além das nossas habituais notícias, também contaremos com o fim da série de tutoriais traduzidos do original da NetTuts.
Talvez seja uma boa idéia parar por aqui e descançar um pouco… 
Até amanhã!
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.
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!
Passo 13 – Adicionar faixa
Agora vamos adicionar uma faixa ao primeiro item, tal como anteriormente. Vejámos o HTML:
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:
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.
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:
Passo 9 – Adicionar mais algum estilo
Bem, aqui vem mais um bloco de CSS:
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:
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:
Template Baunilha 1.0.1
Desenhado e construído por Vanilla Lounge e modificado por Código PT, com ícones FamFamFam
10 Visitantes Online | Powered by WordPress 2.8
RSS (Artigos)
RSS (Comentários)
XHTML Válido
CSS Válido