Rollovers da imagem em adobe cs5 dreamweaver

Video: Rollover Images in Dreamweaver CS5

Em Adobe Creative Suite 5 (Adobe CS5) Dreamweaver, você pode inserir objetos de imagem, incluindo espaços reservados de imagem, imagens de sobreposição (imagens que mudam quando um espectador passa o mouse sobre a imagem), barras de navegação e HTML do Fireworks. Você acessa essas imagem objetos, escolhendo Inserir → Objetos de imagem.

1Criar as imagens para ser usado como o capotamento

Você pode gerar estas imagens no Fireworks, Illustrator, Photoshop, ou qualquer outra aplicação capaz de salvar imagens otimizadas para a web.

286763.image1.jpg

2Coloque o cursor na página onde você deseja que o rollover a aparecer

Escolha Inserir → Objetos de imagem → Imagem cambiável ou clique no botão Imagem cambiável no painel Inserir. A caixa de diálogo Inserir imagem cambiável.

3Nome da imagem

Digite um nome de imagem sem espaços no campo de texto Nome da imagem. Este nome é usado no script criando o rollover.

286765.image3.jpg

4Clique nos botões Procurar

O botão Procurar é o direito da imagem original e capotamento campos de texto da imagem. Localize a imagem que você quer que apareça como um padrão na página e a imagem que aparece apenas quando alguém passa o mouse sobre a imagem.

Video: Dreamweaver Cs5 : Rollover Button Tutorial

5Deixe a caixa de seleção Imagem Preload Rollover selecionado



Esta opção transfere a imagem em movimento quando a página é baixado para evitar atrasos na capotamentos.

6Descrever a imagem

Digite o texto alt adequadamente descritivo no campo de texto Alt.

7Completar o Quando clicado, vá ao campo de texto URL

Isso direciona Dreamweaver onde os espectadores são direcionados quando clicam a imagem rollover. Você também pode clicar no botão Procurar para localizar outra página no seu site ou digite um URL. Nota: Se você está ligando para um site diferente, você precisa incluir o prefixo http: // no início da URL.

Se você ainda não tem uma ligação real para usar um botão ou hyperlink, você pode inserir um sinal de libra (#) para criar um link morto. O link ou botão aparece clicável, mas não ir a qualquer lugar quando clicado. Esta opção é melhor do que bater a barra de espaço para criar um espaço vazio como um link, enquanto que irá exibir uma página não encontrada erro quando clicado.

8Clique em OK

A imagem em movimento é criada na página.

Video: Quick rollover image tutorial Dreamweaver CS5

9Visualizar a imagem

Para visualizar a imagem rollover novo, escolha Arquivo → Visualizar no navegador ou clique no botão Exibição ao vivo na barra de ferramentas Documento.


Publicações relacionadas