Dreamweaver MX 2004 do zero(4)
Autor：Eve Cole
Data da Última Atualização：2009-05-31 21:02:51
O uso de camadas <BR> Uma camada é uma área de uma página web. Seu maior charme é que cada camada pode se sobrepor, e você pode decidir se cada camada fica visível. ao mesmo tempo, capacidade de personalizar relacionamentos hierárquicos entre camadas. Depois de dominar a tecnologia de camadas, você pode fornecer recursos poderosos de controle de página para páginas da web.
Criar camada
Para ilustrar a função da camada, primeiro criamos um efeito de exemplo simples conforme mostrado na Figura 1 (Figura 1).
Figura 1
O primeiro passo é criar uma nova página no Dreamweaver MX 2004 e executar o comando "Inserir→Objetos de camada→Camada". Neste momento, uma moldura retangular preta aparecerá na janela de edição, que é a camada inserida. Quando o mouse se move sobre a linha do quadro retangular, o mouse mudará para o formato de uma seta cruzada. Quando o mouse for clicado, 8 quadrados pretos sólidos aparecerão ao redor da linha do quadro e haverá um quadrado vazio no canto superior esquerdo, indicando. que esta camada esteja selecionada.
Dica: Use o mouse para arrastar o quadrado sólido para alterar o tamanho da camada e arraste o quadrado vazio no canto superior esquerdo para alterar a posição da camada.
A segunda etapa é clicar com o mouse na camada e inserir "China Computer Education News" e, em seguida, definir o texto como azul na janela do painel de propriedades.
A terceira etapa é clicar na borda da camada para selecionar a camada, executar o comando "Editar → Copiar" para copiar a camada atual, clicar com o mouse em outras áreas em branco da janela de edição e executar o comando "Editar → Colar" comando, para que na janela de edição apareça outra camada, mas atualmente elas se sobrepõem e você precisa mover a camada antes de poder ver as duas camadas.
O quarto passo é alterar a cor do texto de uma das camadas para preto e mover a posição da camada de forma que as posições das duas camadas difiram em alguns pixels, produzindo assim um efeito de sombra (Figura 2).
Figura 2
Após concluir as operações acima, pressione o botão “F12” para visualizar e você poderá ver o efeito mostrado na Figura 1 no navegador IE.
Camadas aninhadas
A chamada camada aninhada refere-se a uma camada criada em outra camada. Por exemplo, o que é mostrado na Figura 3 é uma camada aninhada típica (Figura 3). Na verdade, fazer esse tipo de camada aninhada é muito simples. Basta criar uma camada pai, clicar dentro da camada com o mouse e inserir uma camada novamente. No entanto, as camadas aninhadas não significam que a subcamada deva estar dentro da camada pai. Existe um relacionamento de herança entre elas.
Figura 3
A função da herança é manter a visibilidade da subcamada consistente com a da camada pai. Como muitos efeitos especiais dinâmicos da página da web são obtidos controlando a visibilidade da camada, quando a visibilidade da camada pai muda, a visibilidade da camada pai muda. a subcamada também muda. Além disso, o relacionamento de herança também pode manter inalterada a posição relativa da camada filho e da camada pai. Por exemplo, se arrastarmos a camada pai para movê-la, a camada filho também se moverá com ela. páginas da web.
Ordem Z da camada
Em comparação com as tabelas, a maior vantagem das camadas é que elas podem se sobrepor. Para indicar qual camada está no topo e qual está abaixo, deve ser definido um número de série para cada camada. O que isso significa é que além das coordenadas X e Y da tela, um eixo Z perpendicular à tela é adicionado artificialmente.
Como mostrado na Figura 4, as quatro camadas da área esquerda são obviamente diferentes das quatro camadas da área direita. Também é muito simples ajustar a ordem das camadas. Basta usar o mouse para clicar e posicioná-las na parte inferior. , meio e A camada superior servirá. No entanto, este método de operação parece um pouco problemático quando há muitas camadas e é inconveniente ajustar posteriormente, para que possamos fazer ajustes através do painel de camadas.
Figura 4
Primeiro execute o comando "Janela → Camadas" para ativar o painel de camadas. Neste momento, você pode ver a janela do painel mostrada na Figura 5 (Figura 5). mouse e arraste-o para cima ou para baixo Arraste e solte o mouse quando uma linha horizontal aparecer entre as duas camadas que deseja inserir, para que você possa alterar a "ordem Z" de cada camada.
Figura 5
Dica: Clique diretamente no valor da caixa “Z” para alterá-lo para o nível de camada desejado.
Crie tabelas usando camadas
Embora usar camadas para localizar elementos de páginas da web seja muito mais conveniente do que usar tabelas, apenas os navegadores IE 4.0 e superiores suportam a função de camada. Portanto, para permitir que amigos que usam navegadores mais antigos vejam o trabalho que você trabalhou tanto para criar. a melhor maneira é converter a camada em uma tabela.
O primeiro passo é marcar a caixa de seleção “Evitar sobreposições” na parte superior da janela mostrada na Figura 5, para que cada camada não possa se sobrepor, caso contrário haverá uma mensagem de aviso durante o processo de conversão.
O segundo passo é executar o comando "Modificar→Converter→Layers to Table". Neste momento, você pode ver a janela mostrada na Figura 6 (Figura 6). Na área "Layout da tabela", selecione "Mais preciso" e. “Usar GIFs Transparentes” respectivamente Duas opções, a primeira cria uma célula para cada camada através de conversão precisa para garantir que a distância entre cada célula preencherá a última linha da tabela convertida com uma imagem GIF transparente, o que garante que tudo; navegadores Todos têm a mesma aparência.
Figura 6
O terceiro passo é concluir a operação de conversão de camada em tabela após pressionar o botão “OK”.
Dica: O Dreamweaver MX 2004 também oferece a função de conversão de tabelas em camadas, e as etapas são semelhantes.
Se você quiser tornar suas próprias páginas da web coloridas, você deve dominar a tecnologia de camadas. Caso contrário, você encontrará muitas dificuldades ao criar páginas da web dinâmicas no futuro. Portanto, é recomendável que você estude a fundo a introdução acima para realmente. dominar a tecnologia de camadas.
