Como criar botões rollover interativos em dreamweaver

Quem visita o seu site vai esperar para ver seus botões mudam quando o mouse passa sobre eles. Rollovers indicam que um botão estiver ativo, e clicando levará os visitantes em outro lugar. Quando verificar a referência HTML, você descobrir que você não pode adicionar rollovers- você tem que usar javascript ou CSS. Ou você pode usar o Dreamweaver para escrever o código para você.

Coisas que você precisa

  • software de edição de imagens que suporta o corte de imagem web

instruções

  1. Projete sua barra de navegação ou interface página web em seu editor de imagem favorito. Manter os elementos que nunca mudam em uma camada. Mova as camadas com elementos que nunca mudam para uma camada denominada "Fixo" e os elementos que irão mudar com o rollover a uma segunda camada chamada "Estado normal." Os elementos da interface capotamento poderia incluir o fundo, texto, barras de botões ou efeitos especiais aplicados à camada.

  2. duplicar o "Fixo" camada e nomeie "Rolar." Faça as alterações que deseja fazer para refletir o novo estado de rolagem. Ocultar o "Rolar" camada.

  3. Selecione fatia ferramenta web do editor de imagem. Fatie cada botão e nomeá-lo com paleta de opções de fatias do software (ou ferramenta). Você também deve ser capaz de adicionar o link URL no software de edição de imagem. Se não, você pode adicioná-lo no Dreamweaver.



  4. Exportar a imagem como um documento HTML com fatias (é importante que a "Rolar" Camada não sejam visíveis nesta fase). Confira o novo arquivo HTML em um navegador para certificar-se de todas as fatias são visíveis. Quando você conhece as obras de arquivo HTML originais, mostram a "Rolar" camada e esconder o "Estado normal" camada. Selecione o botão fatias somente e exportá-los como "Apenas fatias selecionadas" para uma subpasta dentro de sua pasta de imagens.

  5. Abra o arquivo HTML no Dreamweaver. Você deverá ver a sua imagem inteira remontada na janela do documento. Selecione o botão de fatia para revelar o limite célula da tabela.

  6. Abrir a paleta de comportamentos. Clique no "+" ícone e escolha "Trocar imagem" a partir do menu suspenso para abrir o diálogo Trocar imagem. Verifique para certificar-se o botão direito está selecionado e verificar o "Pré-carregar imagens" e "Restaurar imagens no mouse para fora" opções. Clique no "procurar" botão para localizar a fatia de imagem que você salvou para o estado de rolagem.

  7. Visualizar a página web no seu browser. Se tudo funcionar corretamente, você pode salvar a página da web e enviá-lo para o servidor.

dicas & avisos

  • Se o seu editor de imagens não suporta cortar, você vai ter que cortar os elementos individuais do seu documento e salvá-los como arquivos separados, o que será uma dor.
  • Certifique-se de salvar as imagens de sobreposição para uma subpasta dentro de sua pasta de imagens. Caso contrário, você irá substituir as imagens normais estaduais botão.
De esta maneira? Compartilhar em redes sociais:

LiveInternet