Adobe Dreamweaver CS6 inclui algumas instalações embutidas como o comportamento Trocar imagem.Os swaps de comportamento Trocar imagem de uma imagem para outra imagem, esta técnica é normalmente usado em sobreposições de botão e galeria de fotos. Você pode trocar mais de uma imagem ao mesmo tempo com um único comportamento Trocar imagem. Este tutorial foi concebido para ajudá-lo a criar uma galeria de fotos usando Trocar imagem Behavior & Aparecer / Desaparecer efeitos no Adobe Dreamweaver CS6.
Vamos começar o tutorial.
Passo 1: Abra o Adobe Dreamweaver CS6 e carregar o seu " gallery.html page ".
Passo 2: Usando tag DIV e estilo CSS podemos criar um layout básico para a galeria de fotos. Aqui vamos começar por definir as propriedades da página como abaixo
background-color: # 333;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: # 333;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
Passo 3: Nesta galeria, eu usei 8 grandes imagens e oito imagens em miniatura (ou seja, imagem pequena). Você pode cortar e ajustar o maior tamanho das imagens como: largura - 640px, altura - 500px eo tamanho miniatura da imagem: largura - 76px, altura - 57px.
Passo 4: Basta fazer um esboço da estrutura de galeria que você está planejando para criar. Por isso, vai ajudar você a especificar exatamente como os elementos da página será organizado. Neste tutorial, eu preciso de uma estrutura de layout, como mostrado abaixo:
Passo 5: Primeiro eu preciso para criar a tag DIV e, em seguida, para criar seu estilo correspondente como a sua posição, margem, cor, aparência, preenchimento e tamanho para o layout de página galeria de fotos.
Passo 6: Usando tag DIV, eu criei as áreas para o título, a imagem grande galeria e imagem em miniatura na " gallery.html page ".
Passo 7: Depois código as propriedades CSS em folhas de estilo "style.css" para recuperar a estrutura abaixo.
Passo 8: Coloque a primeira grande imagem (ie, p1.jpg), onde você deseja inseri-lo. Também tenho chamado todas as imagens maiores como p1.jpg, p2.jpg para p8.jpg e todas as imagens em miniatura como p1a.jpg, p2a.jpg para p8a.jpg .
Ir para Inserir> Imagem .
A caixa de diálogo Select Image Source aparece. Selecione p1.jpg imagem e clique em OK.
Passo 9: Repita o processo de " Passo 8 "para cada imagem em miniatura para colocá-los em seus lugares apropriados.
Passo 10: Agora, a estrutura da galeria foi formado como abaixo
Passo 11: Selecione a imagem "p1.jpg" (ie, imagem maior). Vamos criar uma ID da Imagem no "Bottom-Left" no Adobe Dreamweaver CS6.
Digite o ID como " gallery_main "no campo de propriedades.
Passo 12: Agora selecione a imagem em miniatura. Repita o "Passo 11" e nomeie o ID como " g1 ".
Passo 13: Repita esse processo para o descanso das imagens em miniatura e nomear seu ID como " G2, G3 para g8 ".
Passo 14: Quando você aplica um comportamento a uma imagem, Adobe Dreamweaver CS6 insere o código-fonte HTML na tag área automaticamente. Vamos criar o efeito de imagem com a troca para as imagens em miniatura.
Selecione a primeira imagem em miniatura e ir para o " Tag Inspector ", no lado direito da área de trabalho e escolha a ação Trocar imagem da lista de comportamentos.
Tag Inspector> Comportamento> Trocar imagem
Imediatamente aparece uma caixa de diálogo "Trocar imagem". Certifique-se os abaixo de 4 pontos foi feito antes de clicar em "Ok" na caixa de diálogo "Trocar imagem".
1. Images - Escolha aqui a identificação da imagem, o que você precisa para trocar.
. 2 Definir fonte para - Escolher o nome da imagem, o que você precisa para substituir com a imagem "gallery_main" ao clicar na miniatura.
3. Verifique sempre as imagens pré-carga (ou seja, para carregar as imagens quando a página é carregada)
4. Certifique-se de desmarcar a restaurar imagens onMouseOut (ou seja, as imagens originais serão substituídos)
Aqui quando eu clicar sobre a imagem thumbnail "p1a.jpg", eu preciso de imagem "p1.jpg" para ser exibido. Daí eu ter escolhido imagem "p1.jpg".
Passo 15: Agora para a imagem em miniatura "p2a.jpg", eu cliquei imagem "p2.jpg" para ser exibido.Repita este procedimento para as outras imagens em miniatura também.
Passo 16: Depois de definir as ações, precisamos definir os eventos para todas as imagens em miniatura. Adobe Dreamweaver CS6 aplica evento de default como " onMouseOver ", mude isso em um evento como" onClick ". (Ie, Ao clicar na imagem em miniatura, a imagem maior mudará de acordo com sua ação)
Passo 17: Agora vamos ter completado a galeria de fotos simples, sem quaisquer efeitos.
Passo 18: Prepare-se e experimentar alguns efeitos para a galeria de fotos. Selecione a imagem em miniatura e definir o " Aparecer / Desaparecer efeito ", como abaixo
Tag Inspector> Comportamento> Effects > Aparecer / Desaparecer
Neste tutorial, eu definir o efeito de "parecer" para a galeria de fotos. Certifique-se sempre de manter o "elemento-alvo", como a maior imagem de identificação.
Definir o "parecer" valores de efeitos como abaixo
Passo 19: Após a conclusão da criação dos efeitos para fotos imagens em miniatura da galeria. Ao salvar o arquivo "gallery.html", o Adobe Dreamweaver CS6 vai gerar o javascript e seus arquivos de acordo com o nome " SpryEffects.js "na pasta" SpryAssets ".
Nota: efeitos do Spry é uma adição relativamente nova ao arsenal de comportamentos do Dreamweaver.
Passo 20: É isso, criamos uma galeria de fotos linda usando swap Comportamento de imagem em Adobe Dreamweaver CS6. O resultado final do Photo Gallery é como abaixo
