GALERIA DE IMAGENS NO DREAMWEAVER

Introdução

Olá a todos,
Nessa primeira parte do tutorial vamos fazer uma galeria de imagens pelo dreamweaver igual ao exemplo abaixo:

Pré-Requisitos

Macromedia Dreamweaver e uma familiaridade com o programa.

Objetivo

Mostrar ao leitor uma das diversas formas de se criar uma galeria de imagens através do Dreamweaver.

Conteúdo

Vamos começar a criar nossa galeria.
Primeiramente crie um novo arquivo (ctrl+N) e salve (ctrl+s) como galeria.html.
Escolha 6 imagens, deixe-as no tamanho 350 x 247px e faça uma miniatura delas de 40×40px.
Agora crie uma tabela com 2 linhas e na segunda linha 6 colunas, sua tabela deverá ficar assim:

Clique dentro da primeira linha, vá em Insert > Image Placeholder

ou

Abrirá a tela a seguir:

1. NAME = Coloque o nome da imagem base (a qual ao passar o mouse na imagem pequena irá aparecer a mesma ampliada).
2. WIDTH = Largura da imagem. / HEIGHT = Altura da imagem.
3. COLOR = Cor de fundo da imagem base.
4. ALTERNATE TEXT = Texto que aparece ao passar o mouse em cima da imagem.

Obs.: Todas as imagens terão de ter um tamanho padrão, no caso do nosso exemplo a imagem ampliada terá o tamanho 350×247px e a pequena 40X40px.
Insira as 6 miniaturas na segunda linha, uma em cada coluna.
Clique na primeira miniatura, vá em Window > Behaviors (Shift+F3), clique no sinal de mais conforma a imagem abaixo:

Clique em Swap Imagem, aparecerá a tela a seguir:

1. Em Images selecione nossa IMAGEM_BASE.
2. Em Set Source to clique em Browse e selecione a imagem ampliada que você criou para a primeira miniatura.
3. Deixe Preload Images e Restore Images onMouseOut selecionados.

Clique em Ok.
Repita o esse processo com as demais imagens.
Crie uma imagem padrão, que irá aparecer quando não tiver nenhuma imagem selecionada.
Selecione a imagem base vá em Src que fica nas propriedades da imagem e adicione a imagem que você criou.
Pronto! Nossa galeria está pronta!

Dica:
Agora vai uma dica para facilitar a edição das imagens.
De repente sua galeria de imagens é muito grande e pra você editar imagem por imagem fica muito demorado!
No Photoshop há uma opção chamada Actions que resolve esse problema de uma maneira muito fácil! Vamos lá.
Abra sua primeira imagem no Photoshop, vá em Window> Actions (alt+F9).
Na janela da Actions clique em Create New Set e coloque o nome da pasta que irá armazenar suas actions, igual a imagem a seguir:

Dê um OK.
Agora clique em Create new action e dê preencha conforme a imagem a seguir:

1. Em NAME coloque o nome da Action.
2. Em SET selecione o nome da pasta que irá armazenar essa action.

Clique em Record, repare que o Begin Recording ficou ativo:

A partir desse momento todas as modificações que você fizer será gravada para ser reutilizada em outras imagens.
Faça as alterações que você quiser como: mudar tamanho da imagem, cor, etc. Quando terminar de fazer todas as modificações que você irá aplicar a todas as outras imagens clique em Stop playing/recording.
Agora vamos aplicar essas alterações em todas as imagens da galeria.
Vá em File>Automate>Batch:

1. Em Set selecione o nome da pasta que criamos para armazenar as actions.
2. Em Action escolha a action que você acabou de criar.
3. Em Source selecione Folder.
4. Clique em Choose e escolha a pasta que está armazenada as fotos.

Em seguida clique em OK.
Pronto! Ele irá aplicar em todas as imagens a alteração que você fez.
Nesse caso ele abrirá todos os arquivos aplicando a action e você terá que salvar cada imagem por vez. Caso queira que ele aplique a action, salve e feche o arquivo selecione a opção Destination: Save and Close (lá em Batch), veja a imagem abaixo.

No caso da galeria você tem 2 arquivos distintos, um grande e um pequeno.Sendo assim você teria que salvar o pequeno um a um? Não! Você cria a action para a imagem pequena. Quando for aplicar essa action as imagens que anteriormente você aplicou para estabelecer um padrão de imagem ampliada, lá em File> Automate>Batch vá em:

1. Em Destination selecione Folder.
2. Clique em Choose… selecione a pasta onde estas imagens serão salvas
3. Em File Naming mostre com qual nome a imagem deve ser salva.(Observe o exemplo acima)

Após feito isso clique em OK e pronto! Ele aplicará a action da imagem em miniatura em todas as imagens, sem alterar a que você fez anteriormente.

Considerações Finais

Espero que tenham gostado.
No próximo tutorial irei mostrar como fazer a mesma galeria mas em ASP, de uma forma que não seja necessário linkar imagem por imagem. Pela programação ele lê quantas imagens há em uma pasta e monta a galeria automaticamente.

Até a próxima, Abraços.

Autora: Gisele C. Negreiros – Colunista do Portal MXSTUDIO

Qualquer dúvida envie um email para gisele@mxstudio.com.br ou acesse o nosso fórum .