Pessoal este meu primeiro tutorial no ComunidadeWEB e espero que todos gostem.

. Gostaria de aproveitar e deixar meu site para todos estarem conhecendo. http://www.jmprojeto.com/ Bem aqui vai estudo sobre camadas e comportamentos. Recursos muito interessantes e que se usado com criatividade poder deixar suas pginas muito mais atraentes. Camadas so escritas usando-se a tag <div></div>. Pode-se escrever tambm com a tag <span></span>. A Netscape desenvolveu duas tags adicionais para a utilizao em seu Navegador: 4.x <layer> e <ilayer>. A diferena entre as duas tags esta relacionada ao posicionamento: <layer>(posicionamento absoluto) e <ilayer>(posicionamento relativo). Hoje em dia os Navegadores Navigator 6.x no suportam mais essas tags e sim as tags <div> e <span>. As Camadas no DW so como uma rea onde podemos introduzir textos, tabelas, figuras, etc. Muita gente esta acostumada a trabalhar com tabelas para construir a estrutura de um site, mas as camadas tambm do um resultado muito positivo, pois so independentes e podemos coloc-las em qualquer posio da nossa pgina e ainda inserir os poderosos "Comportamentos" do DW. Primeiro copie a figura abaixo ou crie uma semelhante em um editor grfico de sua preferncia com tamanho 400 x 300 px e salve-a como "fundo.gif".

Alm da figura de fundo iremos trabalhar com mais 4 figuras de tamanho 295 x 195pxl. Crie as figuras ou salve as do exemplo. Pronto agora j temos o material necessrio para comearmos o nosso trabalho no DW. Ento mos a obra. Voc pode criar camadas de trs maneiras: 1. boto Desenhar Camada (painel Inserir > Categoria Layout) ; 2. inserir > camada ; 3. painel Estilo CSS. Aqui no caso iremos criar pelo "Menu>Inserir> Camada.

Abra o DW e clique no menu "inserir > Camada". Vamos alterar o nome da camada ("id da camada") para o nome "fundo". O nome de uma camada no poder conter caracteres especiais e nem espaos em branco, tambm no poder comear com um nmero. Faa as alteraes conforme figura abaixo. As opes "E e A", refere-se ao posicionamento da camada. "E =Vertical" e "A =Horizontal". A opo "L e U" refere-se ao tamanho da camada, "L =Largura" e "U =Altura". No altere ainda o ndice, na figura consta como 10, mas deixe com o padro por enquanto.

Detalhes das camadas:

Cor de Fundo: cor da camada. Imagem de Fundo: imagem de fundo da camada(obs: se a camada for maior que a imagem, a imagem disposta lado a lado). Corte: medidas para a regio exibvel da camada. Voc determina qual rea da camada ser exibida. Todos os valores de recorte so medidos a partir do canto superior esquerdo da camada(E, D, A, X). E: distncia medida a partir do ponto de origem esquerda. A: distncia medida a partir do ponto de origem na parte superior. L: medida horizontal da camada. U: medida vertical da camada.

Id. da camada: nome da camada para que a mesma possa ser referenciada por folhas de estilo ou funes Javascript. Os nomes so muito importantes ao se trabalhar com camadas. Cada camada deve ter um ID nico entre todos os objetos da pgina Web. O DW nomeia automaticamente as camadas como (layer1 , layer2 etc...) a medida que elas so criadas. Estouro: determina como textos ou imagens maiores que a camada devem ser tratadas ; visible - todo o texto ou imagem que "estoura" o tamanho da camada exibido e as configuraes de altura e largura estabelecidas para a camada so ignoradas . hidden - a parte do texto ou imagem que "estoura" as dimenses , no exibida scroll - adiciona barra de rolagem horizontal e vertical , independente do tamanho e volume co contedo e da medida da camada . auto - se o contedo da camada exceder os valores de largura e de altura, as barras de rolagem aparecem. Vi(visibilidade): determina como a camada exibida ; default - o navegador configura o atributo de visibilidade , inherit - configura a visibilidade com o mesmo valor da camada pai , visible - faz com que a camada e todo seu contedo sejam exibidos , hidden - torna invisvel a camada atual e todo seu contedo. detalhes: ao determinar sua visibilidade lembre-se que visualizando ou no uma camada ela continua a ocupar espao na pgina e demanda tempo de carregamento. ndice Z: ordem de empilhamento da camada em relao as outras camadas ; as camadas com o indice-z mais altos, so posicionadas acima das camadas com valores de indice-z mais baixos. Tag: <div> ou <span>. A lista drop-down contm as tags que podem ser associadas a uma camada. Por padro a camada escrita com a tag <div>. Dentro desta camada iremos colocar a figura "fundo.gif" e nesta figura iremos inserir quatro pontos ativos que iro receber os comportamentos.

Agora vamos inserir as demais camadas e nome-las como mostra a figura abaixo. Mantenha a mesma ordem da figura. As camadas sero inseridas dentro da camada "fundo". Dentro da camada "tentadora" vamos inserir a camada "texto" onde iremos inserir um texto com barra de rolagem, dentro de cada uma das camadas iremos inserir uma figura.

Observe a rea destacada pelo contorno vermelho. Clique sobre esta rea para definir se as camadas sero visveis ou no. No caso aqui deixe como na figura acima. As camadas "beleza" - "sexy" - "tentadora" - e "sensual", tero as mesmas propriedades em relao a tamanho e posio.

As camadas aqui foram nomeadas de acordo com o seu contedo, aqui neste trabalho temos cinco figuras e um texto, as figuras e o texto possuem os mesmos nomes das camadas, pois assim fica mais fcil de identific-las e saber o que nelas contem. A camada que contm o texto esta com as configuraes diferentes.

Observe na figura acima que o texto se estende para baixo, mas a Largura e altura esto configuradas como "L - 115px" e "U - 160", o estouro da camada esta configurado como auto, isso faz com que na camada seja inserida uma barra de rolagem caso o contedo nela inserida seja maior do que as suas configuraes. Agora vamos inserir os comportamentos. Os comportamentos do DW podem ser inseridos em figuras, textos, pontos ativos, nas pginas, etc. Cada comportamento pode ter vrios eventos. Os eventos definem quando o comportamento vai ser acionado. Aqui no caso usaremos o comportamento "Mostrar-ocutar as camadas" do IE - 5.0 com os eventos "onClick" que faz com que o evento seja acionado quando o usurio clicar com o mouse sobre o local que possua o comportamento. Para ver o painel de "Comportamentos" clique no Menu Janela> Comportamentos. No painel de

comportamento defina qual sero os eventos mostrados, para isso clique no boto que tem o sinal de "+" e escolha Mostrar os eventos de> IE - 5.0. Agora selecione o primeiro ponto ativo e clique novamente no sinal de "+" da janela de comportamentos. Escolha o comportamento "Mostrar-ocultar as camadas".

Cada ponto ativo receber os mesmo comportamentos e eventos. Lembre-se de selecionar o ponto ativo antes de adicionar os comportamentos. Ento o primeiro ponto ativo que esta sobre a palavra "Beleza" na figura de fundo receber as seguintes configuraes: layer "fundo" (Mostrar) - e layer "beleza" (Mostrar), o restante tudo (Ocultar). O segundo ponto ativo que esta sobre a palavra "Sensualidade" na figura de fundo receber as seguintes configuraes: layer "fundo" (Mostrar) - e layer "Sensualidade" (Mostrar), o restante tudo (Ocultar). O terceiro ponto ativo que esta sobre a palavra "Sexy" na figura de fundo receber as seguintes configuraes: layer "fundo" (Mostrar) - e layer "Sexy" (Mostrar), o restante tudo (Ocultar). O quarto ponto ativo que esta sobre a palavra "Tentadora" na figura de fundo receber as seguintes configuraes: layer "fundo" (Mostrar) - e layer "tentadora" (Mostrar) - layer "texto" (Mostrar) o restante tudo (Ocultar). Pronto, agora faa o teste veja o resultado do seu trabalho. OBS. Alm de poder alterar/editar camadas com o "Inspetor de Propriedades", voc tambm pode usar o Painel Camadas. Atravs dele voc seleciona qualquer camada na pgina rapidamente, altera relacionamento, modifica sua visibilidade e ajusta sua ordem de empilhamento. Lembre-se que para realizar qualquer alterao em uma camada, tanto pelo Painel Camada quanto pelo Inspetor de Propriedade, voc primeiro tem que selecionar a camada.

Voc pode pelo Painel Camadas, aninhar e desaninhar camadas (criar camadas paifilho). Para aninhar uma camada dentro da outra: 1. Janela > Outros > Camadas. 2. Pressione Ctrl e clique no nome da camada a ser aninhada (filho) e arraste-a para a parte superior da outra camada (pai). 3. Aparecer um retngulo em torno do nome da camada pai, ento libere o mouse. 4. Para desaninhar uma camada aninhada, selecione a camada filha e arraste para uma nova posio no Painel Camadas. Voc tambm pode excluir uma camada pelo Painel Layer. Destaque a camada a ser removida e tecle delete. Bem, espero que tenham gostado pessoal. Veja tambm a coluna onde falo sobre janela Pop-up transparente.