NUNCA MAIS PASSE RAIVA POR NÃO CONSEGUIR RESOLVER UM PROBLEMA COM O EXCEL - GARANTIDO!

UNIVERSIDADE DO VBA - Domine o VBA no Excel Criando Sistemas Completos - Passo a Passo - CLIQUE AQUI

Você está em: PrincipalTutoriaisCarloscastro : Dreamweaver006
Quer receber novidades e e-books gratuitos?

FILTRO DE TUTORIAIS:


 

Usando camadas para exibir dicas de formulários

 

Vamos ver neste tutorial como mostrar dicas ao lado de campos de formulários quando estes estiverem selecionados, para isso vamos usar a paleta Behaviors do Dreamweaver, para que as camadas com as dicas só apareçam quando o campo do formulário estiver selecionado. Encare este tutorial como uma maneira de aprender a mostrar ou ocultar uma imagem ou texto a partir de eventos acionados pelo visitante da página.

 

Criando o formulário

 

1. Crie um novo arquivo em seu Dreamweaver.

 

2. Na barra Insert, clique na seta ao lado da palavra Common e escolha a opção Forms.

 

 

 

3. Dê um clique no botão que insere a tag <form></form>.

 

 

4. Aparecerá em sua área de desenho um retângulo pontilhado vermelho, tudo que estiver dentro deste local, está dentro da tab <form></form>.

 

5. Dentro da área do retângulo vermelho, escreva “Nome:” e pressione SHIFT+ENTER.

 

6. Dê um clique no botão que corresponde a caixa de texto.

 

 

7. Quando inserimos um objeto de formulário ele entra em nossa página selecionado, portanto, clique a direita da caixa de texto que você acabou de inserir e pressione ENTER para continuarmos nosso formulário.

 

8. Escreva “Mensagem:” e pressione SHIFT+ENTER.

 

9. Insira uma outra caixa de texto e pressione ENTER.

 

10. Insira um botão de formulário, este botão será o enviar.

 

 

11. Com o botão selecionado configure-o como Submit (Enviar) usando a barra Properties.

 

 

12. O formulário deve ter a aparência abaixo:

 

 

Desenhando as camadas

 

1. Na barra Insert, clique na seta ao lado de Forms e escolha Layout.

 

 

2. Clique no botão Draw Layers, e desenhe um retângulo ao lado da caixa de texto do nome.

 

 

3. Clique na linha de borda desta camada que você acabou de desenhar e altere seu nome para “nome” usando a paleta Properties.

 

 

4. Escreva dentro da camada “Escreva seu nome completo”.

 

 

5. Desenhe outra camada ao lado da caixa mensagem, e, como no item 3 altere seu nome para “mensagem”.

 

6. Salve o arquivo e visualize no browser para verificar como estamos.

 

 

7. Mas este não é o objetivo, nós queremos:

 

a) Quando a página for carregada não apareça nenhuma camada.

 

b) Quando a caixa de texto receber o foco mostra a camada correspondente.

 

c) Quando a caixa de texto perder o foco esconde a camada.

 

8. Para conseguir isto iremos usar a paleta Behaviors.

 

9. O primeiro passo será fazer com que as camadas não apareçam quando a página for carregada.

 

10. Selecione a representação da tag <body>, ela está acima da paleta Properties.

 

 

11. Clique no menu Window/Behaviors.

 

12. Clique no sinal “+” da paleta Behaviors e escolha “Show-Hide Layers”.

 

 

13. Clique no nome da camada “nome” e clique no botão Hide. Clique na camada “mensagem” e clique no botão Hide e OK.

 

 

14. Verifique se o evento relacionado a esta ação é o “onLoad”, nem sempre o Dreamweaver oferece o evento que queremos, se não estivesse correto poderíamos alterar o evento usando a paleta Behaviors.

 

15. Salve o arquivo e visualize no browser, agora as camadas não aparecem mais.

 

 

16. Dê um clique na caixa de texto nome, para selecioná-la. Clique no sinal “+” da paleta Behaviors e escolha “Show-Hide Layers”.

 

17. Clique no nome da camada “nome” e clique no botão “Show” e OK, o evento relacionado deve ser o “onFocus”.

 

 

18. Mantenha a caixa de texto “nome” selecionada e clique no sinal “+” da paleta Behaviors.

 

19. Clique nome da camada “nome” e clique no botão “Hide” e OK.

 

20. O Evento relacionado deve ser o “onBlur

 

Quando a caixa de texto receber o foco, a camada com a dica de preenchimento aparece, ao perder o foco, a camada desaparece.

 

21. Dê um clique na caixa de texto mensagem, para selecioná-la. Clique no sinal “+” da paleta Behaviors e escolha “Show-Hide Layers”.

 

22. Clique no nome da camada “mensagem” e clique no botão “Show” e OK, o evento relacionado deve ser o “onFocus”.

 

 

23. Mantenha a caixa de texto “mensagem” selecionada e clique no sinal “+” da paleta Behaviors.

 

24. Clique nome da camada “mensagem” e clique no botão “Hide” e OK.

 

25. O Evento relacionado deve ser o “onBlur”.

 

26. Salve e experimente no seu browser.

 

Quer receber novidades e e-books gratuitos?

 
 

Contato: Telefone: (51) 3717-3796 | E-mail: webmaster@juliobattisti.com.br | Whatsapp: (51) 99627-3434

Júlio Battisti Livros e Cursos Ltda | CNPJ: 08.916.484/0001-25 | Rua Vereador Ivo Cláudio Weigel, 537 - Universitário, Santa Cruz do Sul/RS, CEP: 96816-208

Todos os direitos reservados, Júlio Battisti 2001-2024 ®

LIVRO: MACROS E PROGRAMAÇÃO VBA NO EXCEL 2016 - CURSO COMPLETO E PRÁTICO

DOMINE A PROGRAMAÇÃO VBA NO EXCEL - 878 PÁGINAS - CLIQUE AQUI