Amigos leitores, nesse e no próximo artigo mostrarei a vocês como fazer um menu com css e uma imagem, mas apenas uma imagem, capaz de simular 3 estados do menu (estático, ativo e clicado).

Na primeira parte do artigo explicarei como criar a imagem para fazer o efeito.

Na segunda parte explicarei como criar os códigos CSS utilizando a imagem criada na primeira parte e mostrarei como ficará o MENU depois de concluído, utilizando as imagens criadas na primeira parte.

Agora que você já sabe o que faremos, vamos começar a trabalhar.

Criando a imagem no Fireworks

Abra o Fireworks e crie um arquivo com o tamanho de 200 x 96 pixels, com fundo transparente.



Após criar o arquivo, crie 3 camadas e coloque em cada uma delas um retângulo de 200 x 32 pixels.

  


Atenção, o mais importante vem agora. Vamos posicionar os retângulos.

Para o retângulo da primeira camada, posicione-o com os seguintes valores em relação aos eixos x e y.



Para o retângulo da segunda camada, posicione-o com os seguintes valores em relação aos eixos x e y.



Para o retângulo da terceira camada, posicione-o com os seguintes valores em relação aos eixos x e y.



Após ter posicionado os retângulos você verá que eles estão um abaixo do outro, preenchendo todo o espaço da imagem (200 x 96 pixels).

Ação de cada retângulo

1º Retângulo: estático (sem o mouse sobre ele)
2º Retângulo: ativo (com o mouse sobre ele)
3º Retângulo: clicado (ao ser clicado)


Agora use a sua criatividade para colorir os retângulos. Veja abaixo um exemplo de preenchimento.



Dica: use cores sólidas para fazer este exemplo, pois ficará mais fácil de você visualizar os efeitos depois de pronto.

Depois de ter colorido os retângulos, vamos exportar o arquivo para que ele seja usado posteriormente.

Vá em File > Image Preview , selecione o formato da imagem (gif ou jpg) e clique Export.



Salve com o nome de menufw.



Pronto, a imagem está pronta para ser utilizada.



Bem pessoal, terminamos a nossa primeira parte do artigo. Criem imagens bem interessantes, pois na próxima semana vamos concluir o tutorial, criando a folha de estilos para esse menu.

Se tiverem dúvidas quanto à montagem da imagem, entrem em contato comigo pelo msn jonhweb@hotmail.com.

Baixem o arquivo anexo deste tutorial, com o arquivo da imagem em formato.png, para visualizá-lo no Fireworks.

Até a próxima semana...