Cómo hacer el texto ampliable en Dreamweaver

Texto extensible permite a los usuarios ver sólo cuando sea necesario.

 

EXPANDIBLE DREAMWEAVER

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

 

Abra Dreamweaver y haga clic en "Diseño". Seleccione "Insertar" y luego haga clic en "Objetos de diseño." Seleccione "etiqueta Div." Dreamweaver coloca un elemento div en la página. Valor de ID de la div es "div1." Un cuadro punteado aparece alrededor de la div. Escriba "Texto Toggle" dentro de la div.

 

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

 

Haga clic con el div nuevo, seleccione "Estilos CSS" y haga clic en "oculto". El div desaparecerá porque ha aplicado la clase oculta a la div.

 

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

 

Haga clic en la flecha desplegable a la izquierda de las palabras "Call JavaScript" y luego elija "onClick". Esto otorga un evento onClick al comportamiento.

 

Seleccione un espacio vacío debajo de la div, y haga clic en "Insertar". Seleccione la opción "Objetos de diseño" para reabrir la ventana "Insert Div Tag". Tipo "div2" en el cuadro de texto "ID" y, a continuación, haga clic en "Aceptar". Un nuevo div - cuyo ID es "div2" - aparece debajo de la div anterior. Escriba una frase corta en el nuevo div. Este texto aparecerá y desaparecerá cuando el usuario haga clic en la palabra "Text Toggle".

 

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

 

script type = "text / javascript"

 

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

 

toggleText function () {

 

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

 

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

 

var currentDisplay = div.style.display;

 

if (currentDisplay! = "block")

 

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 está oculta. De lo contrario, la función establece el valor de div2 a "bloquear".

 

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

 

Consejos y advertencias

En este ejemplo se utiliza la palabra "Text Toggle" en div1, el detonante que hace que el texto en div2 para ampliar. También puede reemplazar el texto en div1 con un botón que realiza la misma tarea. Muchos sitios web utilizan pequeños botones "Signo más" que causan texto en otro div para ampliar.