Layers Possuem a intenção de substituir as tabelas na função de diagramação das páginas para a internet. Eles possuem uma idéia ótima e são totalmente.

Apresentação em tema: "Layers Possuem a intenção de substituir as tabelas na função de diagramação das páginas para a internet. Eles possuem uma idéia ótima e são totalmente."— Transcrição da apresentação:

1 Layers Possuem a intenção de substituir as tabelas na função de diagramação das páginas para a internet. Eles possuem uma idéia ótima e são totalmente configuráveis e também podem ser inseridos em qualquer lugar da página, sem depender de outros elementos. Para inserir uma layer em sua página basta clicar no ícone do layer na paleta de objetos e desenhar a layer pela página. Depois de inserir uma layer na página você pode modificar as suas propriedades selecionando ela. Para selecionar uma layer existem dois modos, o primeiro é clicando no quadrado que aparece no canto esquerdo superior quando o cursor está dentro da layer ou então clicando no ícone do layer que aparece no canto esquerdo superior da página.

2 Outra maneira de selecionar um layer é através da janela "Layers" onde basta selecionar a layer pelo o seu nome que a layer é selecionada na página, esta maneira é muito útil para selecionar layers invisíveis.

3 1. Layer ID, nesta opção você pode determinar o nome do layer, nota-se que o Dreamweaver já coloca um nome padrão no layer criado; 2. especifica a posição da camada em relação ao canto esquerdo da página; 3. especifica a posição da camada em relação ao canto superior da página; 4. especifica a largura da camada, esse valor será ignorado se o conteúdo da camada exceder o tamanho especificado; 5. especifica a altura da camada, esse valor será ignorado se o conteúdo da camada exceder o tamanho especificado; 6. Z-index, define a ordem dos layers, uma layer de número menor fica atrás da de número maior;

4 7. define a visibilidade inicial da layer (a qual pode ser modificada com um behavior), elas podem ser padrão, herdar, visível e oculta; 8. define uma imagem de fundo no layer; 9. define uma cor de fundo no layer; 10. Tag, define a tag a ser utilizada pelo layer, as opções DIV e SPAN criam layers CSS (Internet Explorer) e as opções LAYER e ILAYER criam layers para o Netscape; 11. Overflow (somente layers CSS), determina se aparece ou não barras de navegação dentro dos layers que os elementos são maiores que o próprio layer; 12. define a área visível de uma camada. Especifica valores que representam a distância, em pixels, dos limites da camadas.

5 Behaviors Os Behaviors são comportamentos (Behaviors = comportamentos em Inglês) que nos poupam muito tempo! Com ele, podemos por exemplo animar uma janela do Browser, controlar a timeline, abrir uma nova janela, colocar um som de fundo no site e assim por diante. Aprenderemos neste tutorial, a função de cada Behavior e quando utiliza-lo.

6 Clique em Windows e procure a opção behaviors.

7 Função das ações do painel Behaviors
- Animate Browser Window: Traduzindo para o português, seria algo como: "Animar Janela Browser". Você já viu aqueles sites em que a Janela é animada, começando pequena e se extendendo até seu tamanho normal?! Pois é exatamente isto que esta ação faz! - Call JavaScript: Caso você queira "chamar" algum JavaScript em seu site, basta clicar nesta ação e indicar ao Dreamweaver qual o código. - Change Property: caso você queira mudar a propriedade de algum objeto por exemplo. Entre as opções que podemos mudar estão: Layer (camada), Imagem, Formulário, Div e assim por diante - Check Browser: Checa qual o Browser do usuário. Nos dá a opção ainda de direcionarmos o usuário para um determinado site de acordo com a versão de seu Browser. Muito interessante!

8 Antes de começarmos a trabalhar com as ações, devemos estar atentos a algumas observações.
a opção "Show Eventos For" define em que navegadores a sua página vai ser vista corretamente.

9 - Check Plugin: Checa algum Plugin
- Check Plugin: Checa algum Plugin. Por exemplo, pode checar se o usuário possui o plugin do Flash. Caso tenha, vai para o site principal. Caso contrário, vai para o site de download do plugin. - Control Shockwave or Flash: serve para controlarmos um Schockwave por exemplo. É bastante interessante, dependendo do caso. - Drag Layer: esta opção é muito legal. Caso você possua uma camada em seu site, pode dar a opção do usuário arrasta-la para qualquer canto do site! Basta utilizar esta ação! - Go To URL: mais conhecido como redirecionamento. - Hide Pop-Up Menu: esconder o menu Pop-Up - Jump Menu: "pular" o Menu - Open Browser Window: serve para abrirmos uma nova Janela. Por exemplo, ao clicar na imagem, será aberta uma nova janela com uma versão maior da imagem.

10 - Pop-Up Message: Caso você queira inserir uma mensagem Pop-Up no site
- Pop-Up Message: Caso você queira inserir uma mensagem Pop-Up no site. São aquelas famosas -e irritantes na maioria dos casos- janelinhas de aviso! - PreLoad Images: caso você queira que as imagens sejam pré carregadas antes de exibir o site. - Set Nav Bar Image: setar a imagem da barra de navegação - Set Text: esta ação nos dá as opções: Set Text of Frame: Setar o texto do frame Set Text of Layer: Setar o texto da camada Set Text of Status Bar: Setar o texto da barra de Status Set Text of Text field: Setar texto de um campo de texto

11 - Show Pop-Up Menu: Mostrar o menu Pop-Up - Show-Hide Layers: Mostrar ou ocultar a(s) camada(s) - Swap Image: Trocar imagem. Se você quiser por exemplo, que ao usuário passar o mouse em cima de uma imagem ela seja trocada, utilize esta ação. - Swap Image Restore: Restaurar a troca de imagem.

12 Timeline: nos dá as opções para controlar a timeline: Go To Timeline Frame: Ir para o frame indicado da timeline Play Timeline: "tocar" ou começar a timeline Stop Timeline: parar a timeline - Validate Form: esta ação é muito útil e muitas pessoas desconhecem sua função e acabam programando tudo na mão! Ela serve para validarmos um formulário. Com ela, você indica quais campos serão obrigatórios, quais são numéricos, quais serão de e assim por diante!

13 Eventos Abaixo estão os eventos mais comuns e as respectivas explicações: OnMouseOver - ativa o evento quando o mouse passa por cima do elemento que possui esta ação OnMouseOut - ativa o evento quando o mouse passa por cima de qualquer parte da página que não faça parte do elemento que possui esta ação OnClick - ativa o evento quando o usuário dá um clique no elemento que possui esta ação OnDblClick - ativa o evento quando o usuário dá um duplo clique no elemento que possui esta ação OnLoad - ativa o evento quando a página é carregada OnUnload - ativa o evento quando o usuário sai da página

14