Como criar texto expansível em Dreamweaver

Escrito por kevin lee | Traduzido por mariana ribeiro alves
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar texto expansível em Dreamweaver
O texto expansível se mostra aos usuarios só quando é necessário (Hemera Technologies/Photos.com/Getty Images)

Os desenvolvedores de sites profissionais muitas vezes dependem de comportamentos e eventos para criar muitas das páginas interativas que você vê na Internet. Um comportamento é uma ação que acontece em um objeto numa página da web. Um evento faz com que a ação aconteça. O programa Adobe Dreamweaver pode ajudá-lo a adicionar comportamentos úteis e eventos em suas próprias páginas da web. Anexando um evento "onClick" ao texto na sua página, você pode criar um texto expansível que apareça e desapareça quando for necessário.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o Dreamweaver e clique em "Design". Selecione "Inserir" e clique em "objetos de layout". Escolha "Div Tag". O Dreamweaver coloca um elemento "div" na página. O valor do ID do div é "div1". Uma caixa pontilhada aparece em volta do div. Digite "Texto Alternante" dentro do div.

  2. 2

    Clique com o botão direito no div, clique em "CSS Styles" e depois em "New". Digite "hidden" na caixa de texto "Selector Name" e, em seguida, selecione "OK". Clique em "Block", escolha "Display" e depois pressione "None". Essas ações criam uma nova classe CSS chamada "hidden". Essa classe tem um atributo de exibição cujo valor é "None". Clique em "OK".

    Clique com o botão direito no div novamente, selecione "CSS Styles" e clique em "hidden". O div desaparecerá porque você aplicará a classe "escondida" para o div.

  3. 3

    Pressione "Shift" e "F4" para abrir o painel Behaviors (comportamentos). Esse painel permite associar eventos e comportamentos com os elementos da página. Selecione a opção do símbolo de soma e clique em "Call JavaScript". Digite "ToggleText()" na caixa de texto "JavaScript" e clique em "OK". O Dreamweaver criará um novo comportamento para o elemento div. Esse comportamento é uma chamada para uma função JavaScript chamada "toggleText()".

  4. 4

    Clique na seta à esquerda das palavras "Call JavaScript" e escolha "onClick". Isso atribui um evento onClick para o comportamento.

  5. 5

    Selecione um espaço vazio abaixo do div e depois clique em "Insert". Escolha "Layout Objects" para reabrir a janela "Insert Div Tag". Digite "div2" na caixa de texto "ID" e clique em "OK". Um novo div - cujo ID é "div2" - aparecerá abaixo do div anterior. Digite uma frase curta no novo div. O texto aparecerá e desaparecerá quando os usuários clicarem nas palavras "Alternar Texto".

  6. 6

    Clique em "Code" para ver a janela de código e encontre o seguinte texto perto do topo da janela:

    <script type="text/javascript">

  7. 7

    Cole a seguinte função de JavaScript depois dessa linha de texto:

    function toggleText() { var div = document.getElementById("div2"); var text = document.getElementById("displayText"); var currentDisplay = div.style.display;

    if (currentDisplay != "block") div.style.display = "block"

    else div.style.display = "none"; }

    Esse código cria a função toggleText, que recupera uma referência ao elemento div2 e define seu atributo de exibição para "nenhum" se div2 estiver oculto. Caso contrário, a função definirá o valor div2 em "block".

  8. 8

    Clique no botão "Live View" para ver sua página da Web no modo Live View. As palavras "Alternar Texto" aparecerão. Clique nelas várias vezes. Ao fazer isso, a frase que você digitou na div2 se expandirá e contrairá.

Dicas & Advertências

  • Este exemplo usou as palavras "Alternar Texto" em div1, o gatilho que faz com que o texto em div2 se expanda. Você pode substituir o texto em div1 com um botão que execute a mesma tarefa. Muitos sites usam pequenos botões de símbolos de soma que fazem com que o texto em outro div se expanda.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível