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 , 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. 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, podemos, também, linkar outras coisas, como Redes Sociais e etc. Agora vou ensinar vocês a usar o site citado.
O link do site para linkar as partes é 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 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.
Ex: http://designers-do-cp.blogspot.com/
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: <div id='header-wrapper'> (use o HTML disponível aqui no blog para ter esse código). Aperte Ctrl F 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:
<!-- 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 -->
Então, apague a partir dali até aparecer esta frase:
<!-- Image map text links - End - -->
Vá apagando com cuidado para não passar.
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 no HTML de seu blog, por esse código:
#header-wrapper {
Depois troque o height pela altura de seu cabeçalho.
Para ver a altura de seu cabeçalho, veja o número entre parênteses no nome da aba do link da imagem hospedada.
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.
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.
Depois faça a mesma coisa com o código:
#header {
Não se esqueçam de botar a imagem do cabeçalho que linkamos como a imagem do cabeçalho de seu blog.
~Conrado
Nenhum comentário:
Postar um comentário