Oi lindos ♥ vocês devem estar confusos com o título: "Como assim Menu dentro do Cabeçalho"
Bom, esse tuto é bem fácil, através de um site você transforma uma imagem em um tipo de Menu, e que você pode usar como cabeçalho fica bem legal. Caso você não entendeu, clique aqui para ver a preview. Rele em Contato, e no F, quando você clica ele automaticamente vai para outra guia, ou seja, pode ser usado como um Menu. Vamos aprender?
1::Primeiro, faça uma imagem (menu) que deseja ( Recomendo você fazer no Photoshop ), eu irei usar essa. ( O próximo post será sobre como fazer uma imagem dessas pelo PS, ok? )
Agora, entre nesse site, e clique em "Escolher Arquivos" e, obviamente, abra sua imagem. Depois, clique em: "Start Mapping Your Image".
Agora, abriu uma guia
1º Clique em "Rectangle", e, no canto da guia, vai aparecer um quadrado.
2::Agora, arraste esse retângulo para o lugar que você queira que contenha um link. No meu caso, eu coloquei 3 retângulos, Um no "Home", "Goodies", e "Contato".
3::Bom, agora sim é que vamos colocar o link nas imagens: Clique no retângulo, E na primeira barrinha, coloque o link que deseja que vá, ao clicarmos. Na segunda, coloque o Título, o título seria o texto que apareceria ao relar no quadradinho, exemplo. Agora clique em Save. ( faça isso com todos os retângulos ).
4:: Recomendo que tire dessa opção ( número 1 na imagem ) pois ela deixa uns textos que não precisam ficar na imagem. Depois de fazer tudo isso, clique em "Get your code" ( Número 2 na imagem ).
5:: Por fim, irá aparecer uma outra guia ( quantas guias e.e ) e aí, você vai clicar na opção "HTML Code", copie o código e cole em um Gadget "HTML/Javascript", deixa Nesse lugar ( cabeçalho )
Foi muito difícil de entender? Dúvidas? Funcionou? Comente!
Adorei o tuto, estava precisando, agora só aprender a deixar esse menu dentro do cabeçalho com efeito hover.
ResponderExcluirhttp://inventyourhappiness.blogspot.com
Obrigada! Aqui o tuto http://htmlandresources.blogspot.com.br/2013/09/menu-hover.html
Excluir