Login:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Dreamweaver

Feed da seção Dreamweaver

Newsletter de Dreamweaver

Patrocínio:

Segunda-feira, 27/09/2004 - 14:21 - Por Marcelo Oliveira
Seções relacionadas:

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.

Resultado Final:

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
Figura 01 - insert div tag

Configure essa <div> da seguinte maneira:

figura 02 - configurando a div
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 - css style
Figura 03 - criando um estilo

Selector Type: Advanced; Define in: This document onlye e Selector: #RJ. Clique em OK.

figura 04 - configurando o estilo
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
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 - inserindo ShowPic Layer
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
Figura 07 - primeira camada

Note, ao selecionar a Layer, seu Painel Properties, foi criado a Layer: P7ShowPL1 com visibilidade = "hidden" (oculta).

figura 08 - layer
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
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
Figura 10 - tag inspector

.... e pelo Painel Behavior, escolha: Studio VII > ShowPic by PVII.

figura 11 - showpic
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
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 - configurando o thumbnails
Figura 13 - configurado o thumbnails

Agora no Painel Behaviors > Studio VII > ShowPic by PVII.

figura 14 - configurando o link
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
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.

Todos os artigos de Marcelo Oliveira

16 comentários publicados

  • 1. Não consegui

    Quarta-feira, 06/10/2004, por Marcus Soares Santos

    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 &gt; StudioVII &gt; 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

    Responder comentário

  • 2. Sobre o Macromedia Dreamweaver Ultradev

    Quarta-feira, 06/10/2004, por Érika Tavares de Athayde Cerqu

    Marcelo,
    eu posso fazer este procedimento tb no Macromedia Dreanweaver Ultradev??

    Responder comentário

  • 3. Re: Não consegui

    Quarta-feira, 27/10/2004, por Jean Marcel

    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

    Responder comentário

  • 4. Muito bom

    Sábado, 13/11/2004, por Rubson José Alves de Freitas

    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....

    Responder comentário

  • 5. Ow me ajuda

    Terça-feira, 01/02/2005, por Joederli

    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.

    Responder comentário

  • 6. Cadê o DIV TAG???

    Sexta-feira, 04/02/2005, por Leandro Zioli Ribeiro

    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

    Responder comentário

  • 7. Dúvidas

    Sexta-feira, 04/02/2005, por Leandro Zioli Ribeiro

    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.

    Responder comentário

  • 8. Também não achei a tag div

    Sexta-feira, 04/03/2005, por Eva

    Gente, não achei também a tal da tag div. me ajudem por favor!

    Responder comentário

  • 9. não achei a tag div!!

    Quinta-feira, 31/03/2005, por Renan Beznosai

    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..

    Responder comentário

  • 10. e no Dreamweaver 4.0

    Terça-feira, 05/04/2005, por Paul

    e no Dreamweaver 4.0 como faco isso, é possivel

    Responder comentário

  • 11. as fotos nao aparecem

    Terça-feira, 05/04/2005, por Paul

    Fiz de outra forma, usando tabelas porem as fotos nao aparecem qndo vao pro site, as fotos nao aparecem, socorro sou leigo.

    Responder comentário

  • 12. perfeito

    Sábado, 17/12/2005, por Weuler Gomes

    tutorial extremamente detalhado e apesar da grande importância e do efeito, ficou perfeito. mto bom mesmo. valeu

    Responder comentário

  • 13.

    Terça-feira, 03/01/2006, por Leonardo Yukio

    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

    Responder comentário

  • 14. DREAMWEAVER MX

    Quarta-feira, 15/03/2006, por Narciso de Oliveira

    Gostaria muito de fazer usar este efeito, mais trabalho com MX e ñ estou conseguindo.
    Se porder me ajudar, ficarei muito grato.

    Responder comentário

  • 15. Dreamweaver MX

    Terça-feira, 30/05/2006, por Edson Arantes Junior

    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

    Responder comentário

  • 16. Interacao flash

    Segunda-feira, 02/10/2006, por Renann Correa

    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!

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Marcelo Oliveira trabalha com Dreamweaver desde 1999, possui a formação Macromedia Dreamweaver Developer e coordena o DWMX.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.