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

Passo 5 – Fazer um logo transparente

Bem, vamos passar ao logótipo. Já fiz um logótipo mas desta vez, um PNG transparente. Isto deve-se porque mais tarde irei utilizar outras cores no tema e o melhor a fazer é uma imagem transparente. Se quiserem, podem fazer download daqui.

Ler o resto desta entrada »

Partilhar esta Entrada

Passo 4 – Teste nos browsers

Não se esqueça de testar em todos os browsers. Aqui fica uma screen do teste no IE7.

Partilhar esta Entrada

Passo 3 – Adicionar imagens de fundo

Para já o nosso layout está muito pobre… Feio mesmo não é? Com os elementos principais já posicionados, é só uma questão de dar uns toques no estilo e fica muito melhor! Não podia ser mais fácil!

A primeira coisa que iremos precisas é de imagens. Pode fazê-las vocês apartir do .PSD fornecido ou então pode fazer download daqui.

Aqui está uma screen da primeira imagem a ser utilizada. É uma grande imagem de fundo para fazer o efeito de radius no centro. Dos lados será usado uma “fatia” desta imagem de 1px para cobrir o resto do fundo.

Ler o resto desta entrada »

Partilhar esta Entrada

Passo 2 – Primeiro Layout

A primeira coisa que iremos fazer é um pequeno layout com HTML e algumas coisas básicas de CSS para nos certificarmos que temos um base sólida para poder avançar.

Também devemos consultar vários browsers (IE6, IE7, Firefox, Opera e Safari) para nos certificarmos que a página fica igual em todos os browsers. Não há nada pior que dar conta de um erro e depois ter de ver todo o código. Se formos consultando vários browsers à medida que avançámos, é melhor pois poupa-nos várias dores de cabeça.

Ler o resto desta entrada »

Partilhar esta Entrada

Parte 1 – Construir o Framework e a primeira página

Este tutorial irá avançar por partes. Primeiro, iremos construir o Framework, que será a base de todas as páginas, depois páginas alternativas e finalmente uma página com uma alterações de cor.

Passo 1 – Preparando a ferramenta

Aqui podem ser usadas várias ferramentas que podem ser encontradas facilmente na internet ou em lojas. Eu, tal como o autor original deste tutorial, irei utilizar o Dreamweaver CS3 mas, podem utilizar até o bloco de notas do Windows, o GEdit no Ubuntu ou o Editor de Texto no Mac. É indiferente. Este será um critério do utilizador.

Depois do software escolhido, vamos criar a estrutura das pastas para o nosso site. Crie uma pasta em qualquer lado com o nome do site, no nosso caso pode ser “Creatif”. Dentro dessa pasta crie outras duas com o nome “images” e outra com o nome “scripts”.

Agora estamos prontos para o próximo passo.

Partilhar esta Entrada

Bem-vindos ao primeiro grande tutorial traduzido pelo Código PT para todos vocês. Este tutorial, é a versão traduzida do tutorial da NetTuts, que eu achei muito bom.

Este primeiro tutorial irá conduzir o utilizador durante vários dias ao mundo do Web Design. Este tutorial irá dar uma boa base ao leitor para HTML e CSS.

Estejam bem atentos, pois este tutorial é bastante interessante e penso ser bom para todos.

Bom trabalho! Ler o resto desta entrada »

Partilhar esta Entrada