Menu / Linkar Partes de um Cabeçalho - Postagem DdCP recuperada
Autor: Conrado 8 | Publicado: 2015-06-27T00:18:00-07:00

Usaremos duas coisas para fazer, o Adobe Fireworks CS4 e um site chamado Image Maps. Esse site tem a mesma função que o DreamWaver, mas considero ele bem melhor, pois é online e mais fácil de ser usado. Então, se você baixou o DreamWaver pode desinstalá-lo de seu pc para não ocupar espaço, foi o que fiz com o meu. Vamos começar...Abra o Fireworks, iremos fazer o seguinte: Um cabeçalho com um menu embaixo ou em cima (sua preferência), o que o site irá fazer é por links nas partes que queremos que no caso são as páginas do menu. Depois de feito o cabeçalho (veja qui como fazer um), iremos aumentar o tamanho da imagem para fazer o menu. Acompanhe:





Para aparecer essa barra do Canvas (fundo da página) basta clicar na setinha preta (pointer tool), que está no 1º ícone da parte superior esquerda, e clicar fora da imagem, parte cinza. Para mudar o tamanho da nossa área de trabalho, clique na parte circulada de vermelha, e depois acrescente a sua altura quantos pixels você quer para fazer o menu, eu aaumentei 150, e achei muito. Veja:






Agora faça o menu de seu jeito, você pode usar as técnicas usadas nos tutoriais de banner, by's e também os efeitos de letras. Basta criar um retângulo de seu jeito e depois escrever com a Text Tool as páginas que você quiser. Escrevi Home, Teste e Menu, só pra dar uma ideia. Depois com o cabeçalho e menu pronto na mesma imagem, usaremos um site, que nos ajudará a mapear a imagem. Isto é, colocar links em qualquer parte da imagem, que no nosso caso são as palavras do menu. Logo, poderemos linkar outras coisas, como Redes Sociais e etc. Agora vou ensinar vocês a usar o site citado.&nbsp;



O link do site para linkar as partes é&nbsp;http://www.image-maps.com/.



Bom, para inserir nossa imagem no site para começar a mapear, deveremos inserir o link em que o cabeçalho foi hospedado (veja como hospedar no final desta postagem). Veja o local:







Depois de colocar o link e clicar em Start Mapping Your Image, aparecerá uma tela de avisos, espere a imagem carregar totalmente, então clique na parte circulada na imagem.







Após isso, você verá a parte em que mapearemos a imagem. Para criar um local com um link qualquer, deveremos clicar em "Rectangle" na parte de "Image Map Tool Box". Quando clicar irá aparecer um retângulo na imagem, então você deve movê-lo e dimensioná-lo do seu jeito. Arraste pelo meio para mover, a arraste as setinhas do contorno para aumentar ou diminuir. Veja:





No local circulado de vermelho, é onde você deve botar o link em que você irá ser redirecionado quando clicar no local em que o retângulo está. ATENÇÃO: O LINK TEM QUE SER COMPLETO.&nbsp;

Ex: http://designers-do-cp.blogspot.com/&nbsp;



Depois de botar o link, clique em Save, e seu retângulo linkado já estará pronto. Depois adicione quantos retângulos quiser conformoe suas páginas, que no meu caso são três. Com tudo linkado, clique em Get Your Code, para copiarmos o código da imagem mapeada.







Na página que abrirá, deveremos clicar em "HTML Code", e depois copiar o código, mas não feche a página caso haja algum imprevisto. Entre no HTML do seu blog em outra Guia (Aba, no Mozila Firefox). Confira:













No seu HTML do Blog, iremos colocar o código depois dessa tag:&nbsp;&lt;div id='header-wrapper'&gt;&nbsp;(use o HTML disponível aqui no blog para ter esse código).&nbsp;AperteCtrl F&nbsp;e procure a tag acima. Podemos colocar logo após. Veja:







Depois iremos editar uma coisinha no nosso código. Porque nele irá ter umas palavras com links das páginas. Mas para tirar devemos apagar uma parte do código. Aperte Ctrl F e cole isso na caixinha de pesquisa:



&lt;!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV --&gt;



Então, apague a partir dali até aparecer esta frase:



&lt;!-- Image map text links - End - --&gt;



Vá apagando com cuidado para não passar.&nbsp;



Editando o tamanho do cabeçalho para que não fique cortado



Depois de deletar, você deverá editar o tamanho do nosso cabeçalho para que não corte nenhuma parte da nossa imagem. Procure na caixinha do Ctrl F, o número&nbsp;288. E substitua pela altura do seu cabeçalho, para ver isso, basta ir no link em que hospedamos, que está entre parênteses após o nome da imagem.&nbsp;Se o nome for grande, fique com o mouse em cima do nome para aparecer um balão com a continuação do nome com o tamanho.



Não se esqueçam de botar a imagem do cabeçalho que linkamos como a imagem do cabeçalho (veja aqui como pôr a imagem do cabeçalho no blog).&nbsp;



~Conrado