Mais uma vez a Macromedia sai na frente dos concorrentes e nos oferece uma ferramenta que é uma verdadeira "mão na roda" em quesito poupar tempo/agilizar nosso trabalho! Com os Behaviors, muitas funções que perderíamos um tempo significativo "escrevendo" o código já estão prontas!
Vejamos o que são Behaviors, quando e como utiliza-los:
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. Vamos lá?!
Bom, se você ainda não tem o painel de Behaviors aberto, proceda da seguinte forma:
Clique em Window e depois em Behaviors conforme indica a figura abaixo, ou simplesmente aperte Shift+F3. O Behavior está dentro do painel Design!
Vamos entender um pouco sobre o painel do Behavior e seus botões/funções. Analise a figura a seguir e depois veja o significado de cada uma das funções indicadas!
Perceba que na imagem acima existe um círculo branco. Ao clicarmos neste botão, ele nos mostrará as opções:
- Rename Panel Group: Renomear o painel. Caso você queira trocar o nome do painel Design por "Abacaxi" por exemplo, é esta função que deve utilizar.
- Maximize Panel Group: Caso queira maximizar o painel Design
- Close Panel Group: Caso queira fechar o painel.
Neste painel Design, temos 3 abas: CSS Styles, HTML Styles e Behaviors, que é o que estaremos utilizando! Perceba ainda que existe um "+". Ele serve para adicionarmos funções ao site/objeto. Eu circulei também a frase "<body> Actions". Ela está indicando que estaremos adicionando ações/funções ao "body" (ou corpo) da página!
Agora que você conhece o painel, que tal conhecer as ações/funções?! Ao clicar no "+" você encontrará um painel semelhante ao da imagem abaixo:
Adiante, veremos qual a função de cada ação deste painel! Porém, antes disso veremos algumas observações importantes e interessantes para podermos trabalhar melhor com o painel.
Observações
Antes de começarmos a trabalhar com as ações, devemos estar atentos a algumas observações. O painel de Behaviors ainda nos traz uma série de opções. Veremos algumas delas abaixo! No final do painel, temos a opção "Show Eventos For" conforme indica a figura abaixo:
Esta opção é interesante pelo seguinte: imagine que estamos trabalhano com o Browser IE 6.0 e sabemos que a maioria dos usuários de nosso site também utilizam o IE 6.0. Porém, os usuários que utilizam uma versão anterior não poderão utilizar/visualizar algumas ações que utilizarmos, pois o Browser não suporta. Pois bem, ao selecionar o IE 5.0 por exemplo, o Dreamweaver nos mostrará somente as ações que são compativeis com este Browser, evitando assim que utilizemos uma ação não suportada!
Logo abaixo de "Show Events For" você encontra:
Esta opção "Get More Behaviors" serve para fazermos downloads de novas ações para o nosso painel de Behaviors. Ao clicar nela, o Browser será aberto e direcionado para o site de Downloads da Macromedia.
Além disso, em algumas ações o Dreamweaver nos dá mais do que uma opção. Quando isto acontecer, será mostrado o símbolo ">" logo após o nome da ação. Basta parar o mouse em cima para ver quais são as opções, conforme indica a figura abaixo:
Quando você utilizar alguma ação, dependendo dela, você terá uma série de condições para que ela ocorra. Se por exemplo, você quiser que a Janela do Browser seja animada ao carregar, basta clicar na "setinha" e escolher a opção "onLoad". A figura abaixo nos dá uma idéia de como funciona:
Agora que já vimos algumas observações, podemos começar a trabalhar com as ações. A seguir veremos qual a função de cada uma delas. Vamos lá?!
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!
- 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.
- Play Sound: Caso você queira colocar um som de fundo 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
- 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.
- 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-mail e assim por diante!
Bom, é isso aí! Agora é só começar a utilizar os Behaviors e poupar muito tempo e trabalho. Aconselho que você teste um por um em sua casa/trabalho para que possa aprender ainda mais sobre cada um deles. ;)
Postagens
0 comentários:
Postar um comentário