Criando um Menu para seu Blog [Atualizado] // 2018

Hi People!

Há alguns anos atrás, eu ensinei aqui no blog como criar um menu com o design que você desejar, e como gerar o código html dele para inserir em seu site. Na época, ensinei como fazer tudo isso nos programas Fireworks e Dreamweaver, porém; hoje o Fireworks não existe mais. Então, a partir de agora, farei tutoriais utilizando os programas Adobe Illustrator CS2 e Notepad ++.

1º Passo - Criar o design do menu

Para começar, escolha seu editor de imagens preferido e crie um design simples {ou não :D} para seu menu.

Primeiramente criei um retângulo simples, nas medidas :
W : 143 px
H : 26 px
Y : 0 px {devemos considerar 0 px para que o código HTML5
 que vamos criar mais pra frente funcione}
X : 0 px

Agora basta copiar a forma e colar para criar o formato do menu

Agora basta escolher a fonte preferida e criar os títulos dos links.
Esse é o resultado final com zoom de 200%

Tamanho real do menu {100%}

E agora, vamos ao Notepad ++ criar o código da imagem mapeada e dos mapas dentro de uma estrutura padrão HTML 5 :

Para maiores detalhes sobre esse código, e como eu fiz os cálculos para definir as coordenadas de cada imagem mapeada, visite este post:

Como descobrir e inserir coordenadas para Imagens mapeadas | Criando imagens Mapeadas em HTML 5

E por hoje é tudo, qualquer dúvida deixem nos comentários !

  ..........................

bjssss