Coluna Dreamweaver – Galeria de Conteúdo
Criação de uma Galeria com Conteúdo Diversificado (imagens, textos, flash e vídeo) Utilizando Camadas
Introdução
Quem nunca se deparou com a necessidade de criar uma pequena galeria de imagens, 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, oou 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
Fig. 01: Estrutura da galeria
Para monstá-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 difenciará 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 camadaSeguindo 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çãoVejamos, 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 fehcado 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 caractere # 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, iserir os devidos conteúdos. Vejamos o resultado abaixo:
Espero que tenham gostado.
Dúvidas, Críticas, Elogios ou Sugestões, acessem ou meu blog www.carloshps.com.br/blog ou o nosso fórum.
Um abraço a todos
Assinar:
Postar comentários (Atom)
Currently have 0 comentários: