Criar um PhotoGalleryu usando o swap Comportamento imagem no Dreamweaver CS6

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.
 

Confira a demonstração aqui
 
 
Passo 1: Abra o Adobe Dreamweaver CS6 e carregar a página "gallery.html".
 
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;
 
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 página "gallery.html".
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.
Vá para Inserir> Imagem.
A caixa de diálogo Select Image Source. Selecione imagem p1.jpg 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 "Inspector Tag" 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 Imagens -. Escolha aqui a identificação da imagem, o que você precisa para trocar.
. 2 Defina a fonte - Selecione o nome da imagem, o que você precisa para substituir com a imagem "gallery_main" ao clicar na miniatura.
3. Sempre verifique 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 "efeito Aparecer / Desaparecer", 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: Os 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

Confira a demonstração aqui!