1
Abra o Dreamveaver4 e o documento onde vai trabalhar com as layers de nosso exercício. Certifique-se de estar no modo de visualização "Design" (clique em View/ Design na barra de menus), e que a paleta Objetcs esteja disponível (se ainda não estiver visível, pressione as teclas CTRL+F2), e mantenha o ítem "Common" disponível. Abra também a paleta "Layers" pressionando as teclas SHIFT+F2. Veja o gráfico:

note que a tab Layers está selecionada e o ítem 'Prevent Overlaps' está ativado, o que irá evitar que uma layer fique sobre a outra - quando quiser sobrepor suas layers, desative esse ítem.

2
Nossa primeira ação será aprender a inserir e também a desenhar uma layer. Como inserir: coloque o ponto de inserção do mouse no local onde quer posicionar sua layer e, na barra de Menus, clique em Insert/ Layer. Imediatamente uma layer será inserida naquele ponto de sua página. Confira no gráfico como é isso, visualmente:

sua layer está inserida e ao lado dela foi colocado um objeto amarelo

3
Note que a layer do gráfico acima possui uma espécie de 'alça' no canto superior esquerdo - se clicar sobre ela e arrastar o mouse, poderá mudá-la de posição dentro de sua página. Dentro da layer está o ponto de inserção do mouse (canto superior esquerdo). Se quiser selecionar a layer basta clicar em qualquer uma de suas bordas e ela será selecionada, e ativará todos os ítens editáveis que lhe dizem respeito, na paleta "Properties". Veja a layer selecionada, e confira a paleta Properties, no gráfico abaixo:

a layer está selecionada

a paleta Properties reflete a seleção da layer e apresenta os ítens necessários e disponíveis para edição

4
Como este nosso trabalho não pretende ser um tratado sobre os assuntos que apresenta, mas apenas mostrar alguns de seus fundamentos mais simples e guiar o interessado em seus primeiros passos no uso de algumas ferramentas do Dreamweaver4, vamos proceder a uma análise bastante singela dos ítens da paleta Layer Properties. No campo "Layer ID" defina um nome para ela (em nosso gráfico: Layer3); os campos "L" e "T" definem a posição da layer a partir do canto esquerdo (L) e superior (T) da página em que se encontra (ou da layer em que ela esteja "aninhada", se for o caso) - se você arrastar a layer, mudando seu posicionamento na página, a paleta Properties refletirá a mudança, nesses dois campos - você poderá, se preferir, efetuar a mudança de posionamento da layer simplesmente editando esses campos diretamente na paleta Properties, sem precisar arrastar a layer manualmente - use, em "Tag" (que determina qual a 'tag' HTML que será usada), os ítens "DIV" ou "SPAN", recomendados para visualização nos Browsers IE - se usar os ítens "LAYER" ou "ILAYER" habilitará a visualização de sua layer no Netscape, mas somente a partir da versão 4; os campos "W" e "H" definem a largura (W) e altura (H) de sua layer, que poderão ser editados e modificados diretamente por esta paleta, sem que seja preciso fazê-lo manualmente, pelo método de clicar e arrastar algum dos cantos da layer - em nosso exemplo esses valores estão definidos em pixels, mas poderão ser definidos em percentuais (%), e outros comumente usados.

5
Analise o primeiro destaque no gráfico abaixo, para ver como funciona o ítem "Overflow" da paleta Layer Properties: ao clicar sobre a seta escura no lado direito do campo Overflow você verá o menu de opções para definir o que acontecerá com sua layer se o conteúdo que você colocar dentro dela exceder as dimensões que foram definidas em "W" e "H" - se você se decidir por "visible", a layer se expande conforme o conteúdo, e o exibe por inteiro quando a página for visualizada no Browser; se o ítem escolhido for "hidden", o conteúdo excessivo da layer não será mostrado além das dimensões definidas para ela; se escolher "scroll" sua layer apresentará uma barra de rolagem lateral vertical e/ou horizontal, dependendo do lado para o qual se dirige o excesso do conteúdo da layer; se a opção escolhida for "auto" a layer será visualizada com as dimensões que definiu para ela, mas poderá apresentar barras de rolagem quando isso for necessário para apresentar o conteúdo da layer, automáticamente.
Confira no gráfico abaixo, no segundo destaque, o "print" de uma layer com background 'white' (em página com fundo cinza), definida com as dimensões 230 x 100px com um conteúdo que excede essas dimensões e com o Overflow configurado para "auto":

note que a layer mantém o exato 'tamanho' que definiu para ela, mas apresenta a barra de rolagem lateral direita para disponibilizar o conteúdo que não cabe na janela por inteiro

6
Continuando nossa análise da paleta Properties: o campo "Z-Index" é utilizado para que se defina a ordem de colocação de cada layer, dentro do conjunto - assim sendo, a layer que carrega o "z-index 2" está acima do "z-index 1" e abaixo do "z-index 3", e assim por diante (mas não quer dizer que a layer com o "z-index 2" esteja 'sobre' a layer 1, encobrindo-a - apenas 'acima' dela, pela ordem de numeração na página) - você poderá escolher nomes com descrição mais significativa para suas layers, no sentido de identificá-las melhor. Os campos "BgImage" e "BgColor" definem uma imagem e uma cor de fundo para a layer.
Se quiser 'recortar' o conteúdo da layer, a partir de suas bordas, no que diz respeito à sua visualização no Browser, defina numerais para os campos em "Clip". Experimente para entender melhor.

7
E finalmente vamos analisar o ítem "Vis" da paleta Properties. Os ítens do menu definem a condição de 'visibilidade' ou 'invisibilidade' inicial de sua layer no Browser - ou seja, define o que vai acontecer com sua layer assim que alguém abre no browser a página em que ela se encontra. "Default" não define nada, mas é interpretado pela maioria dos Browsers como "herdeiro" (inherit) da layer 'mestre' (ou parent), se esta estiver aninhada; assim sendo, "Inherit" usa a mesma visibilidade definida em 'parent', ou 'mestre'; "Visible" mostra todo o conteúdo da layer independente de qualquer outra definição, estando ou não 'aninhada'; "Hidden", ao contrário, sempre torna invivisível o conteúdo da layer, independente de qualquer definição em 'parent'.
Confira o gráfico:

8
Ufa, quanta informação! Mas ainda não acabou... está faltando mostrar a você como fazer para "desenhar" uma layer, de forma personalizada: na paleta Objetcs, em Common, clique no ítem "Draw Layer" e, clicando com o botão esquedo do mouse sobre seu documento (e mantendo-o pressionado), arraste o mouse para a direita e para baixo para desenhar sua layer como queira.
Confira os gráficos:

desenhando layers

9
Ah! Só está faltando mostrar como fica a paleta "Layers"... mas não se assuste! Trataremos disso em nosso próximo tutorial. Imperdível!

Divirta-se!

Guacira Sampaio Rocha direitos reservados