Cómo Hacer texto expandible en Dreamweaver

Los desarrolladores web profesionales a menudo se basan en los comportamientos y eventos para crear muchas de las páginas interactivas que se ven en Internet. Un comportamiento es una acción que le sucede a un objeto en una página Web. Un evento hace que la acción ocurra. programa de Adobe Dreamweaver puede ayudarle a añadir comportamientos y eventos útiles para sus propias páginas web. Adjuntando un evento "onclick" al texto en su página, puede crear texto expandible que aparece y desaparece bajo demanda.

Instrucciones

1 Dreamweaver abierta y haga clic en "Diseño". Seleccione "Insertar" y luego haga clic en "Objetos de diseño." Seleccione la opción "Etiqueta Div." Dreamweaver coloca un elemento div en la página. El valor de ID de div es "div1." Un cuadro de puntos aparece alrededor de la div. Tipo "Activar texto" dentro del div.

2 Haga clic con el div, haga clic en "Estilos CSS," y luego en "Nuevo". Tipo "oculta" en el cuadro de texto "Nombre Selector", a continuación, seleccione "OK". Haga clic en "Bloquear", elegir la opción "Visualización" y, a continuación, pulse "Ninguno". Estas acciones crean una nueva clase CSS llamada "oculta". Esta clase tiene un atributo de visualización cuyo valor es "Ninguno". Haga clic en Aceptar."

Haga clic con el div de nuevo, seleccione "Estilos CSS" y haga clic en "oculta". El div va a desaparecer porque se aplica la Clase oculto a la div.

3 Pulse la tecla "Shift" y "F4" para abrir el panel Comportamientos. Este panel le permite asociar eventos y comportamientos con los elementos de página. Seleccione el "signo más", y haga clic en "Llamar JavaScript." Tipo "toggleText ()" en el cuadro de texto "JavaScript", a continuación, haga clic en "Aceptar". Dreamweaver crea un nuevo comportamiento para el elemento div. Este comportamiento es una llamada a una función JavaScript denominada "toggleText ()".

4 Haga clic en la flecha desplegable a la izquierda de las palabras "llamada de JavaScript," y luego elija "onclick". Esto otorga un evento de clic con el comportamiento.

5 Seleccione un espacio vacío debajo de la div, y luego haga clic en "Insertar". Elija "Objetos de disposición" para volver a abrir la ventana "Insertar etiqueta Div". Tipo "div2" en el cuadro de texto "ID" y haga clic en "Aceptar". Un nuevo div - cuyo ID es "div2" - aparece por debajo de la div anterior. Escriba una frase corta en el nuevo div. Este texto aparecerá y desaparecerá cuando los usuarios hacen clic las palabras "Activar texto."

6 Haga clic en "código" para ver la ventana de código, y encontrar el texto siguiente en la parte superior de la ventana:

<Script type = "text / javascript">

7 Pegar esta función JavaScript después de esa línea de texto:

funcionar toggleText () {

var div = document.getElementById ( "div2");

texto var = document.getElementById ( "displayText");

var = currentDisplay div.style.display;

si (currentDisplay! = "bloque")

div.style.display = "block"

más

div.style.display = "none";

}

Este código crea la función toggleText. La función recupera una referencia al elemento div2 y establece su atributo de visualización a "ninguno" si div2 es oculto. De lo contrario, la función establece el valor de div2 al "bloque".

8 Haga clic en el botón "Live View" para ver la página Web en el modo Live View. Las palabras "Texto Toggle" aparecen. Haga clic en las palabras varias veces. Mientras lo hace, la frase que escribió en div2 se expanda y se contraiga.

Consejos y advertencias

• Este ejemplo utiliza las palabras "texto Toggle" en div1, el detonante que hace que el texto en div2 se expanda. También puede sustituir el texto en div1 con un botón que realiza la misma tarea. Muchos sitios web utilizan pequeña "Signo más" botones que causan texto en otro div a expandirse.