Galeria de Conteúdo Utilizando Camadas

Introdução

Quem nunca se deparou com a necessidade de criar uma pequena galeria de imagens, fotos, de vídeos… para inserir seu portfólio, fazer um pequeno catálogo? Desde os iniciantes ao de nível avançado, já passaram ou passarão por esta obrigação. E um dos recursos mais simples, porém, pouco explorado para tal fim no Dreamweaver e a aplicação de camadas. Para quem precisa de rapidez e não carece de dinamismo, atualizações automáticas, ou que nem saiba programar, esta é uma boa opção.

Pré-Requisitos

• Facilidade com o manuseio do Dreamweaver CS3
• Entendimento sobre o conceito de Camadas e DIV’s
• Entendimento conceitual sobre Behaviors (Comportamentos)

Objetivo

Criar uma galeria que receba conteúdos diversos, como: textos, imagens, animações em flash e vídeo utilizando camadas

Conceitos

Muitos alunos meus, iniciantes no Dreamweaver, têm uma certa dificuldade sobre o entendimento e funcionalidade das camadas e, a forma mais simples de passar tal conceito que encontrei foi associá-las a um caderno com folhas soltas onde, de acordo com a necessidade ou ordem de importância, podemos deslocá-las, umas sobre as outras, alterando sua ordem.

No Dreamweaver não é diferente e veremos o porquê agora.

Conteúdo

Para melhor entendimento de todo o processo, vamos dividi-lo em partes.

Parte 1: Montagem da Estrutura da Galeria – Conteúdo

Nossa galeria terá como base a seguinte estrutura:

Para montá-la vamos começar inserindo a camada responsável pelo conteúdo de texto. Para isso, acessaremos no painel Insert > Layout o ícone Draw AP Div…

Fig. 02: Painel Insert – Draw AP Div (Inserir > Camada)

… e com um clique na área de desenvolvimento, façamos um retângulo (clicando sobre a borda logo em seguida) e o configuremos com as seguintes características:

Fig. 03: Propriedades da Camada “Texto”

CSS-P Element: Nome que identificará a camada e a diferenciará das demais.
L: Distância do lado esquerdo | T: Distância do topo | W: Largura da camada | H: Altura da camada
Bg color: Cor de fundo da camada

Seguindo o mesmo procedimento, vamos criar mais três camadas com as mesmas características, alterando a penas seus nomes(Imagem, Flash e Vídeo respectivamente) e suas cores de fundo para melhor identificá-las adiante.

Após inserirmos as quatro camadas, teremos a seguinte visualização no painel CSS:

Fig. 04: Painel CSS de identificação das camadas

Name: Nome da camada
Z: Ordem de visualização

Vejamos, de acordo com o “Z“, como estão organizadas as camadas, caso tenhamos que desmembrá-las:

Fig. 05: Organização das camadas

Parte 2: Montagem da Estrutura da Galeria – Menu

As camadas que receberão seus respectivos conteúdos já estão prontas. O próximo passo é inserirmos uma nova camada que conterá o menu de acesso às outras camadas.

Se prestarmos bem atenção, perceberemos que as camadas desenvolvidas estão a 25 px do topo, que por sua vez, possuem uma altura de 300 px. Então, para que a camada com o menu saia perfeitamente abaixo das demais, e dando um espaço de 2 px para não ficar muito próximo, vejamos na imagem a seguir:

Fig. 06: Configuração da camada Menu

Vamos clicar dentro desta nova camada e inserir uma tabela com 1 linha e 4 colunas; com largura de 100%, para, em seguida, criarmos os devidos links para as camadas de conteúdo, como mostra a fig. 01 deste tutorial.

Parte 3: Utilizando Behaviors para Controlar a Exibição das Camadas

Behaviors nada mais é do que alguns “comportamentos” que o Dreamweaver oferece aos desenvolvedores com scripts pré-configurados e, o que usaremos agora, chama-se Show-Hide Elements (Exibir-Ocultar Elementos). Este comportamento nos dá o controle total sobre quais camadas serão exibidas e/ou ocultadas no momento em que o usuário clicar em algum link do menu.

Primeiramente, vamos selecionar a palavra Texto da camada menu e, através do painel Tag > Behaviors > “+” (sinal de mais), clicaremos em Show-Hide Elements.

Fig. 07: Behaviors

Na janela Show-Hide Elements temos todas as camadas que criamos e os botões responsáveis pelo controle de exibição das mesmas.

Fig. 08: Janela Show-Hide Elements

Elements: Nome de todas as camadas criadas na página
Botões: Show (Exibir) | Hide (Ocultar) | Default (Padrão)

Vamos entender a lógica desta janela.

Quando clicarmos no link Texto queremos que sejam exibidas as camadas Texto e Menu (clicar no nome e em seguida no botão Show). O restante deve ser ocultado (Clicar no nome e em seguida no botão Hide). Ao clicarmos no link Imagem, as camadas Imagem e Menu devem ser exibidas e o restante, ocultado. E assim sucessivamente.

Parte 4: Ajustes nas Camadas

Até aqui foi tudo tranquilo, sem dificuldades, não é verdade?!

Para alguns usuários, certamente a galeria já está funcionando ao clicar em seus links. Contudo, caso isso ainda não ocorreu ainda, vamos fazer alguns ajustes.

Acessando o Painel CSS > AP Elements, onde se encontram todas as camadas, existe na primeira coluna um “olho”. Este deve está aberto ou fechado para que os links funcionem. Caso queiramos que, ao entrar na galeria, o usuário já visualize a camada Flash aberta, devemos fazer a seguinte configuração, bastando clicar ao lado do nome da camada:

Fig. 09: Ajustes nas Camadas

Devemos ficar atentos à camada Menu. Como ela é responsável pela navegação da galeria, ela sempre deve estar visível.

Parte 5: Ajustes nos Comportamentos de Ocultação e Exibição

Ao clicarmos em qualquer link da galeria, visualizaremos, no painel Behaviors, o seguinte:

Fig. 10: Ajustes no Painel Behaviors

Temos duas colunas onde, na primeira, consiste a configuração do comportamento. Para que o Behaviors assuma a função de “clique”, precisamos alterar sua configuração para “OnClick“:

Fig. 11: Configuração do Behaviors para OnClick

Este procedimento deve ser efetuado em todos os links. Mas existe outro ajuste a ser feito, pois em alguns navegadores, a “mãosinha” do mouse não aparece quando estamos com ele sobre o link. Para isso acontecer, no Painel Properties > Link vamos inserir o caracter # em todas as camadas.

Fig. 12: Configuração do link

Considerações Finais

Pronto, pessoal!

Nossa galeria está completa. Agora basta inerirmos o devido conteúdo. Para isso, basta clicar, no Painel CSS > AP Elements, na camada desejada, e na área de desenvolvimento, dentro dela, inserir os devidos conteúdos. Vejamos o resultado abaixo:

Espero que tenham gostado.

Só para constar, este tutorial também está presente no site www.mxstudio.com.br, pois também sou colunista de lá.

Um abraço a todos.

Webtutoriais:E2B78B2D