Feeds
Newsletter
Galeria de imagens
Vamos criar um efeito muito interessante neste artigo. Será uma "Galeria de Imagens" completa. Ele é conquistado com o auxílio de extensões do Dreamweaver (comportamentos). Behavior P7 Return False Fix by P7, tipo Command, versão 1.5, download aqui e Behavior Show Pic by P7, tipo Suite, versão 2.0.0, download aqui. Ambas free, baixadas no site: www.projectseven.com.
Vamos então criá-lo. Após baixar e instalar seus Behaviors pelo Extension Manager, crie um arquivo para inserirmos nossa Galeria de Imagens. Chamarei meu arquivo de exemplo.htm. Nesse arquivo exemplo.htm inseriremos o título de nossa Galeria:
<body>
<h1>Rio de Janeiro</h1>
Após, pela visuzalização Code ou Split, logo abaixo de <h1>Rio de Janeiro</h1>, vamos inserir uma tag <div>. Menu Insert > Layout Objects > Div Tag ou Tab Layout > Insert Div Tag.
Figura 01 - insert div tag
Configure essa <div> da seguinte maneira:
Figura 02 - configurando a div
ID: RJ e Insert: Before end of tag (antes do final da tag) <body>. Clique em "OK"
Seu Código HTML deve estar assim:
<body>
<h1>Rio de Janeiro</h1>
<div id="RJ">Content for id "RJ" Goes
Here</div>
</body>
Vamos criar um estilo para aplicara a essa <div>. Pelo Painel CSS Style, clique em New CSS Style e configure conforme figura abaixo:
Figura 03 - criando um estilo
Selector Type: Advanced; Define in: This document onlye e Selector: #RJ. Clique em OK.
Figura 04 - configurando o estilo
Na Category Positioning defina:
Type: absolute;
Width: 100px;
Z-index: 2;
Top: 100px;
Left: 15px.
Regra CSS:
#RJ {
position: absolute;
z-index: 2;
width: 100px;
left: 15px;
top: 100px;
}
Apague agora o parágrafo no interior dessa
<div> <p>Content for id "RJ"
Goes Here</p>
e vamos criar uma tabela (Menu Insert > Table) com 1 coluna,
9 linhas, largura (width) de 100, border ="0", cellspacing="1"
e cellpadding="0".
Figura 05 - criando a tabela
Nesse momento você precisa estar com todas as suas imagens prontas. Isso é, uma maior e outra menor. Eu inseri dentro de uma pasta imagens. imagem_full.jpg (maior) e imagem.jpg sua thumbnails (menor). Você precisará também de um spacer.gif download. Imagem com fundo transparente, tamanho 12 por 12.
Insira em cada célula da tabela uma imagem reduzida (thumbnails). Guarde a ordem de inserção. Ainda no arquivo exemplo.html, vá no Menu Insert > StudioVII > ShowPic Layer by VII. Iremos inserir nossas imagens grandes:
Figura 06 - insert showpic layer
Em "Full Size Image:"
- insira sua imagem maior (imagem_full.jpg);
Em "Shim Image:" - insira
o spacer.gif;
Em "Capition:" - você
insere o atributo "alt" de sua imagem bem como um Sub-título;
Em "Descriptive Text:"
- você insere a descrição de sua imagem;
Em "Position: Left" - posição
da camada a esquerda da página e "Top
" - posição da camada em relação
ao topo da página;
Em "Options:" - marque
somente: "Use Caption" e "Use Descriptive Text"
Você acabou de inserir sua primeira Camada:
Figura 07 - primeira camada
Note, ao selecionar a Layer, seu Painel Properties, foi criado a Layer: P7ShowPL1 com visibilidade = "hidden" (oculta).
Figura 08 - layer P7ShowPL1
Repita o mesmo processo para as demais figuras, respeitando a ordem que você inseriu os thumbnails na tabela, também com posicionamento Left = 150 e Top = 100. Note em seu Painel Layers:
Figura 09 - painel layers
Estamos quase terminando. Seria bem melhor que a imagem grande da primeira Layer inserida , P7ShowPL1 fosse mostrada quando a página for carregada. Para tal, selecione a tag <body> pelo Tag Inspector em seu arquivo exemplo.html.
Figura 10 - tag inspector
.... e pelo Painel Behavior, escolha: Studio VII > ShowPic by PVII.
Figura 11 - editando o behavior
Em "Image Path:", selecione a imagem full da primeira Layer e, em"Layer Name:", escolha: P7ShowPL1. Lembre-se de determinar a ação "onLoad".
Figura 12 - onLoad
Agora iremos carregar nossas layers ocultas a partir de seus respectivos thumbnails.
Selecione o primeiro thumbnails e, pelo Painel Properties, insira no campo "Link" # (tralha) e pelo Tag Inspector selecione <a>:
Figura 13 - configurado o thumbnails
Agora no Painel Behaviors > Studio VII > ShowPic by PVII.
Figura 14 - configurando o link
Em "Image Path" selecione as imagens full (maiores) e suas respectivas Layers. Em "Layer Name", insira o evento "onClick".
Figura 15 - onClick
Bem , terminamos. Só que a aparência de nossa galeria de imagem pode ser melhor, então, com CSS, vamos editá-la. No exemplo, inseri as seguintes regras para as tags <p> e <h1>:
p {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #666666;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
}
Espero que tenham gostado e, quem não conhece o RJ, venha conhecer descobrindo a cidade mais linda do mundo. Todas as figuras e seus respectivos textos usados nesse artigo foram copiados do site da RIOTUR: www.riodejaneiro-turismo.com.br. Faça o download de todos os arquivos e imagens usados nesse artigo.
Um abraço.
Interação
16 comentários
Marcus Soares Santos
06/10/2004 02h16
Não consegui
Olá, sou super leigo no assunto.
Segui os passos e quando chego em:
"Insira em cada célula da tabela uma imagem reduzida (thumbnails). Guarde a ordem de inserção. Ainda no arquivo exemplo.html, vá no Menu Insert > StudioVII > ShowPic Layer by VII. Iremos inserir nossas imagens grandes:
O Studio VII diz:
"You must have a valid Site defines!
Please define a Dreamweaver Site first"
Poderia me dar um help?
Obs. a página já está salva com o nome de exemplo.htm
Érika Tavares de Athayde Cerqu
06/10/2004 22h20
Sobre o Macromedia Dreamweaver Ultradev
Marcelo,
eu posso fazer este procedimento tb no Macromedia Dreanweaver Ultradev??
Jean Marcel
27/10/2004 16h43
Re: Não consegui
Ei Marcus Soares, vc tem que configurar o site antes.
Faz o seguinte:
Procure o tutorial (do Marcelo Oliveira mesmo) com o titulo: Definindo um Site como tecnologia servidor. do dia17.11.2003. Da uma lida e cria o seu. até mais
Rubson José Alves de Freitas
13/11/2004 14h57
Muito bom
o exemplo citado é muito bom, mas preciso fazer uma galeria utilizando um DB, de maneira que a cada ação seja catalogada no DB e exibida na galeria....
Joederli
01/02/2005 04h30
Ow me ajuda
eu nao to conseguindo achar oh:
"Insert Div Tag" o meu eh PT, ja procurei em tudo q eh canto so q nao acho ... ficaria agradecido se alguem ajuda-se .. valeww.
Leandro Zioli Ribeiro
04/02/2005 11h25
Cadê o DIV TAG???
Boa tarde Marcelo,
Parabéns pela sua coluna no IMasters. Minha dúvida é a seguinte, não encontro o DIV TAG, já vasculhei o dream weaver e não acho, me dê uma luz.
Obrigado
Leandro Zioli
Leandro Zioli Ribeiro
04/02/2005 11h53
Dúvidas
Marcelo,
Eu enviei uma dúvida agora pouco, mas não te informei a versão que trabalho. O meu DW é o MX 6.0 Ingles. O problema é a versão do DW ou é configuração.
Eva
04/03/2005 17h09
Também não achei a tag div
Gente, não achei também a tal da tag div. me ajudem por favor!
Renan Beznosai
31/03/2005 21h08
não achei a tag div!!
Alguém pode me ajudar também, não consegui achar a tag div, por favor me ajudem!! Meu Dreamweaver é MX 2004 BR...valew galera..
Paul
05/04/2005 21h38
e no Dreamweaver 4.0
e no Dreamweaver 4.0 como faco isso, é possivel
Paul
05/04/2005 21h46
as fotos nao aparecem
Fiz de outra forma, usando tabelas porem as fotos nao aparecem qndo vao pro site, as fotos nao aparecem, socorro sou leigo.
Weuler Gomes
17/12/2005 02h24
perfeito
tutorial extremamente detalhado e apesar da grande importância e do efeito, ficou perfeito. mto bom mesmo. valeu
Leonardo Yukio Shimoyama
03/01/2006 11h31
Marcelo, fico muito bom,mais pra gente esta colocando uma barra de relagem nas miniaturas com é que a gente pode esta fazendo pra isso estar acontencendo? me ajudo por favor
,valeu
Narciso de Oliveira
15/03/2006 22h05
DREAMWEAVER MX
Gostaria muito de fazer usar este efeito, mais trabalho com MX e ñ estou conseguindo.
Se porder me ajudar, ficarei muito grato.
Edson Arantes Junior
30/05/2006 19h39
Dreamweaver MX
achei mto interessante essa materia e queria aplicar no meu site, mas nao to conseguindo, como a maioria ai em cima, nao aparece o div tag, instalei certinho as extensoes, fui até no site ver se tinha uma versão recente, e nada. preciso de sua ajuda. pode mandar no meu email, mas vou retornar sempre aki ´ra ver se tem uma resposta!.. vlw
Renann Correa
02/10/2006 15h44
Interacao flash
Olá Muito boa a matéria! estou tendo problemas para fazer com que um botao flash execute a acao q as imagens thumbnails executam. alguem poderia direcionar algum caminho?/ desde jah agradeço!
iMasters
- Sobre o iMasters
- Política de privacidade
- Anuncie
- Feeds iMasters
- Fóruns iMasters
- Fale conosco
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.