leitura de
Encontrou um problema no conteúdo? Por favor, deixe seu comentário!

Fala gente!

Tenho recebido vários e-mails pedindo um tutorial ensinando a criar um sistema de destaques como esse que fiz na home do blog.

O sistema de destaques que iremos criar não é específico para o WordPress e sim para qualquer site… Por isso não iremos criar um plugin de WordPress ou usar as funções do mesmo, faremos tudo com código puro.

O sistema de destaques que iremos criar terá a seguinte aparência: [](/arquivos/2010/02/destaque.jpg)

A marcação XHTML

Antes de mais nada, precisamos criar o HTML do nosso bloco de destaque… Começamos com uma div e dentro dela criaremos uma lista (UL) com três itens (LI):

Agora, dentro de cada item, vamos adicionar uma imagem (IMG) com um link (A):

Agora vamos inserir, após as imagens com links, parágrafos (P) contendo a descrição (ou titulo) do destaque e que também estão com link (A) para o destaque:

Algumas pessoas podem ter pensado que errei ao criar dois links ao invés de inserir o parágrafo (P) dentro do primeiro link, após a imagem… Mas isso seria errado pois o link é um elemento de linha (in-line) e o parágrafo é um elemento de bloco (block) e nunca devemos inserir um elemento block dentro de um in-line.

Criamos também, antes de cada parágrafo, uma div.fundo vazia que será o fundo preto transparente da descrição/titulo de cada item.

Até agora nosso sistema de destaques ficou assim: [](/arquivos/2010/02/destaque1.jpg)

Por fim, nós vamos inserir mais um link, dessa vez vazio, antes da lista (UL)… Esse link será a faixa [Destaques] que teremos sobre a imagem e a nossa marcação HTML está pronta:

Melhorando a aparência (CSS)

Começaremos criando um arquivo CSS e nele definiremos que a lista (UL), os seus itens (LI) e as imagens não terão estilo, margem ou espaçamento:

Agora nós definiremos a altura e largura de todos os elementos usados no destaque:

Agora nós definimos o posicionamento de todos os elementos, o estilo dos elementos que compoem a descrição de cada item e o fundo da faixa [Desaques] que ficará sobre as imagens:

Por enquanto vamos ficar por aqui… O HTML e o CSS do sistema de destaques está pronto… Na Parte 2 falaremos sobre o efeito em jQuery que fará a transição dos slides e colocaremos o paginador.

Quer ver como ficou o sistema de destaques até agora? Veja RAR com os arquivos.

Espero que tenham gostado! :)

Thiago Belem / Blog

Thiago Belem


Publicado

Thiago Belem / Blog

Thiago Belem / Blog

Artigos e tutoriais sobre desenvolvimento WEB

Continue lendo