Trabalhando Com Camadas

1. Introdução

Na primeira parte deste módulo , iremos estudar a utilização de camadas em uma página web. O Dreamweaver permite criar, com facilidade, camadas na página e posicioná-las com precisão ,bem como animar uma série de imagens na linha de tempo. As camadas ajudam quando queremos que algo fique em lugar específico na página, por exemplo, queremos que uma imagem fique flutuando sobre a janela. A desvantagem de se utilizar camadas é a sua incompatibilidade com alguns navegadores, principalmente com os mais antigos.

Ainda neste módulo, você aprenderá como usar o Dreamweaver para atribuir comportamentos. É possível anexar comportamentos ao documento inteiro (ou seja, à tag body) ou aos links, às imagens, aos elementos de formulários ou a qualquer um dos vários elementos HTML. Os comportamentos são definidos mediante a ações adicionadas para um ou mais eventos.

Ao final deste módulo, você deverá ser capaz de :

 Criar e alterar camadas

 Criar animações com camadas e linhas de tempo

 Converter camadas em tabelas

 Aplicar comportamentos

2. Utilizando camadas

Para inserir uma camada, acesse Inserir>camada. Outra opção é Painel Inserir > Comuns>Desenhar camada.

Se a opção Elementos invisíveis estiver sendo exibida, aparecerá um marcador correspondente ao código da camada. Se não, entre em Exibir>Auxílios visuais>Elementos invisíveis.

Usando a opção desenhar camada, você pode desenhar várias camadas, desde que mantenha a tecla Control pressionada.

O Painel Camadas constitui um meio de gerenciar as camadas dos documentos. Para acessá-lo, entre em Janela> Outros > Camadas (ou F2).

A primeira camada criada está na parte inferior da lista, enquanto que a camada criada mais recentemente está no alto da lista.

Figura 1. Painel Camadas

Utilize o Painel Camadas para evitar sobreposições das camadas, alterar a visibilidade das camadas, aninhar ou empilhar camadas e selecionar uma ou mais camadas.

Para definir as características-padrão das camadas, utilize Editar > Preferências. Selecione Camadas, na lista de categorias. Faça as alterações necessárias.

Selecione uma ou mais camadas para manipulá-las ou alterar as suas propriedades. Para selecionar uma camada, clique em suas bordas ou selecione-a a partir do Painel Camadas. Para selecionar mais de uma camada, use a tecla SHIFT.

Para adicionar conteúdo (texto,objetos, links) à camada, é necessário colocar o ponto de inserção dentro dessa camada e adicionar , em seguida, os elementos.

Para redimensionar uma camada, basta arrastar suas alças.

Para alterar as propriedades de uma camada, selecione-a e faça as alterações no Inspector de Propriedades.

Figura 2. Propriedades de Camadas

Dê um nome à camada em Id.da camada. Informe a posição do canto superior esquerdo da camada (E – posição à esquerda, A – posição do topo da camada), a largura (L) e a altura (U). O Índice Z determina a ordem de empilhamento da camada. Em um navegador, as camadas com números mais elevados aparecem na frente daquelas com números menores.

Vis especifica se a camada estará inicialmente visível ou não. Escolha uma das seguintes opções:

 Default (Padrão) : se a visibilidade não for especificada, a maioria dos navegadores assumirá o valor Inherit.

 Inherit (Herdar) : utiliza a propriedade de visibilidade da camada-mãe.

 Visible (Visível) : exibe o conteúdo da camada, independentemente do valor da camada-mãe .

 Hidden (Oculto) oculta o conteúdo da camada, independentemente do valor da camada-mãe. Observe que as camadas ocultas criadas com a tag ilayer ocuparão o mesmo espaço, como se estivessem visíveis.

Informe a cor de fundo da camada e/ou a imagem de fundo.

Tag especifica a tag HTML utilizada para definir a camada – Div ou Span.

A propriedade Estouro (apenas div e span) controla como as camadas aparecerão em um navegador quando o conteúdo exceder o tamanho especificado da camada. Visível indica que o conteúdo adicional aparecerá na camada; na realidade, esta se alargará para acomodar o conteúdo. Oculta especifica que o conteúdo adicional não será exibido no navegador. Rolar especifica que o navegador adicionará barras de rolagem à camada, independentemente de sua necessidade. Autom. faz com que o navegador inclua barras de rolagem à camada, somente quando forem necessárias (ou seja, quando o conteúdo da camada exceder os seus limites).

Nota: A opção Estouro conta com um suporte irregular por parte dos navegadores.

O Corte define a área visível de uma camada. Especifique as coordenadas esquerda, superior, direita e inferior para definir um retângulo no espaço das coordenadas da camada (cuja origem parte do canto superior esquerdo). A camada será “cortada”, de maneira que apenas o retângulo especificado estará visível.

Nota: Embora a especificação das folhas de estilos em cascata (CSS) determine diferentes semânticas para cortar, o Dreamweaver interpretará cortar da mesma maneira que a maioria dos navegadores.

Aninhamento de camadas

Aninhar uma camada é colocá-la dentro de outra camada. O aninhamento é utilizado para agrupar as camadas. Uma camada aninhada se move com a sua camada-mãe e pode ser definida para herdar a visibilidade da mãe.

Figura 3. Camadas aninhadas

Para forçar o aninhamento automático das camadas ao desenhar uma camada dentro de outra, selecione a opção Aninhamento, nas preferências de camadas : Editar > Preferências> Camadas.