Seleccionar un elemento en la página, como una imagen o un enlace.
Última actualización el
27/04/2021
Usa los comportamientos de JavaScript en Adobe Dreamweaver para colocar código JavaScript en documentos para que los visitantes puedan cambiar una página web o iniciar ciertas tareas.
Los comportamientos de Adobe Dreamweaver colocan código JavaScript en los documentos para que los visitantes puedan cambiar una página web de diversas formas o iniciar determinadas tareas. Un comportamiento es una combinación de un evento y una acción que desencadena ese evento. En el panel Comportamientos, un comportamiento se añade a una página especificando en primer lugar una acción y, a continuación, el evento que desencadena esa acción.
Nota
El código de comportamiento es código JavaScript del lado del cliente; es decir, se ejecuta en exploradores, no en servidores.
Los eventos son, en realidad, mensajes generados por los exploradores que indican que un visitante de tu página ha hecho algo.Por ejemplo, cuando un visitante mueve el puntero sobre un enlace, el explorador genera un evento onMouseOver para ese enlace; el explorador luego verifica si debe llamar a algún código JavaScript (especificado en la página que se está viendo) en respuesta.Se definen diferentes eventos para diferentes elementos de página; por ejemplo, en la mayoría de los navegadores onMouseOver y onClick son eventos asociados con enlaces, mientras que onLoad es un evento asociado con imágenes y con la sección body del documento.
Una acción es código JavaScript preescrito para realizar una tarea, como abrir una ventana del explorador, mostrar u ocultar un elemento AP, reproducir un sonido o detener una película de Adobe Shockwave.Las acciones proporcionadas con Dreamweaver ofrecen máxima compatibilidad entre exploradores.
Después de asignar un comportamiento a un elemento de página, el comportamiento llama a la acción (código JavaScript) asociada con un evento cada vez que ese evento ocurre para ese elemento.(Los eventos que puedes usar para activar una acción determinada varían de explorador a explorador.)Por ejemplo, si adjuntas la acción Mensaje emergente a un enlace y especificas que será activada por el evento onMouseOver, entonces tu mensaje aparece cada vez que alguien coloca el puntero sobre ese enlace.
Un solo evento puede activar varias acciones diferentes, y puedes especificar el orden en el que ocurren esas acciones.
Dreamweaver proporciona alrededor de dos docenas de acciones; se pueden encontrar acciones adicionales en el sitio web de Exchange en www.adobe.com/go/dreamweaver_exchange, así como en sitios de desarrolladores terceros.Puedes escribir tus propias acciones si tienes dominio de JavaScript.
Nota
Los términos comportamiento y acción son términos de Dreamweaver, no de HTML. Desde el punto de vista del explorador, una acción es igual que cualquier otra pieza de código JavaScript.
Introducción al panel Comportamientos
Usas el panel Comportamientos (Ventana > Comportamientos) para adjuntar comportamientos a elementos de página (más específicamente a etiquetas) y para modificar parámetros de comportamientos adjuntados previamente.
Los comportamientos que ya han sido adjuntados al elemento de página actualmente seleccionado aparecen en la lista de comportamientos (el área principal del panel), enumerados alfabéticamente por evento.Si varias acciones están enumeradas para el mismo evento, se ejecutarán en el orden en el que aparecen en la lista.Si no aparecen comportamientos en la lista de comportamientos, no se han adjuntado comportamientos al elemento actualmente seleccionado.
Las opciones del panel Comportamientos son las siguientes:
Mostrar eventos establecidos
Muestra solo aquellos eventos que han sido adjuntados al documento actual.Los eventos están organizados en las categorías del lado del cliente y del lado del servidor. Los eventos de cada categoría se enumeran en una lista desplegable. Mostrar eventos configurados es la vista predeterminada.
Mostrar todos los eventos
Muestra una lista alfabética de todos los eventos de una categoría determinada.
Añadir comportamiento (+)
Muestra un menú de acciones que se pueden adjuntar al elemento actualmente seleccionado.Cuando seleccionas una acción de esta lista, aparece un cuadro de diálogo en el que puedes especificar parámetros para la acción. Si todas las acciones están atenuadas, el elemento seleccionado no puede generar eventos.
Quitar evento (–)
Elimina la acción y el evento seleccionados de la lista de comportamientos.
Botones de flechas arriba y abajo
Mueve la acción seleccionada hacia arriba o hacia abajo en la lista de comportamientos para un evento particular.Solo puedes cambiar el orden de las acciones para un evento en particular; por ejemplo, puedes cambiar el orden en el que se producen varias acciones para el evento onLoad, pero todas las acciones onLoad permanecen juntas en la lista de comportamientos. Los botones de flecha están deshabilitados para las acciones que no se pueden mover hacia arriba o hacia abajo en la lista.
Eventos
Muestra un menú emergente, que solo es visible cuando se selecciona un evento, con todos los eventos que pueden desencadenar la acción (este menú aparece al hacer clic en el botón de flecha situado junto al nombre del evento seleccionado). Aparecerán distintos eventos dependiendo del objeto seleccionado. Si no aparecen los eventos esperados, asegúrese de que esté seleccionado la etiqueta o el elemento de página correcto. (Para seleccionar una etiqueta determinada, use el selector de etiquetas, que se encuentra en la esquina inferior izquierda de la ventana de documento).
Nota
Los nombres de eventos entre paréntesis solamente están disponibles para vínculos. Al seleccionar uno de estos nombres de eventos se añade automáticamente un vínculo nulo al elemento de la página seleccionado y se adjunta el comportamiento a ese vínculo en lugar de adjuntarse al elemento propiamente dicho. En código HTML, el vínculo nulo se especifica de la siguiente forma: href="javascript:;".
Eventos
Cada explorador proporciona un conjunto de eventos que puedes asociar con las acciones enumeradas en el menú Acciones (+) del panel Comportamientos. Cuando un visitante de tu página web interactúa con la página, por ejemplo, al hacer clic en una imagen, el explorador genera eventos; esos eventos se pueden usar para llamar a funciones JavaScript que realizan una acción. Dreamweaver proporciona muchas acciones comunes que puedes activar con estos eventos.
Para nombres y descripciones de los eventos proporcionados por cada explorador, consulta el Centro de soporte de Dreamweaver en www.adobe.com/go/dreamweaver_support.
Aparecen diferentes eventos en el menú Eventos según el objeto seleccionado. Para averiguar qué eventos admite un explorador determinado para un elemento de página determinado, inserta el elemento de página en tu documento y adjunta un comportamiento a él, luego mira el menú Eventos en el panel Comportamientos. (De forma predeterminada, los eventos se extraen de la lista de eventos HTML 4.01, y son compatibles con la mayoría de los exploradores modernos.) Los eventos pueden estar deshabilitados (atenuados) si los objetos relevantes aún no existen en la página o si el objeto seleccionado no puede recibir eventos. Si no aparecen los eventos esperados, asegúrese de que el objeto correcto esté seleccionado.
Si adjuntas un comportamiento a una imagen, algunos eventos (como onMouseOver) aparecen entre paréntesis. Estos eventos están disponibles solo para enlaces. Cuando seleccionas uno de ellos, Dreamweaver envuelve una etiqueta <a> alrededor de la imagen para definir un enlace nulo. El enlace nulo está representado por javascript:; en el cuadro Enlace del inspector de Propiedades. Puedes cambiar el valor del enlace si quieres convertirlo en un enlace real a otra página, pero si eliminas el enlace JavaScript sin reemplazarlo con otro enlace, eliminarás el comportamiento.
Para ver qué etiquetas puedes usar con un evento determinado en un explorador determinado, busca el evento en uno de los archivos de la carpeta Dreamweaver/Configuration/Behaviors/Events.
Aplicación de un comportamiento
Puedes adjuntar comportamientos a todo el documento (es decir, a la etiqueta <body>) o a enlaces, imágenes, elementos de formulario y varios otros elementos HTML.
El explorador de destino que selecciones determina qué eventos son compatibles para un elemento determinado.
Puedes especificar más de una acción para cada evento. Las acciones ocurren en el orden en que están enumeradas en la columna Acciones del panel Comportamientos, pero puedes cambiar ese orden.
Para adjuntar un comportamiento a toda la página, haz clic en la etiqueta <body> en el selector de etiquetas en la esquina inferior izquierda de la ventana Documento.
Seleccione Ventana > Comportamientos.
Haz clic en el botón Más (+) y selecciona una acción del
menú Añadir comportamiento.
No se pueden seleccionar las acciones que aparecen atenuadas en el menú. Pueden estar atenuadas porque un objeto requerido no existe en el documento actual. Por ejemplo, la acción Control Shockwave o SWF aparece atenuada si el documento no contiene archivos Shockwave o SWF.
Cuando seleccionas una acción, aparece un cuadro de diálogo que muestra parámetros e instrucciones para la acción.
Introduzca los parámetros de la acción y haga clic en Aceptar.
Todas las acciones proporcionadas con Dreamweaver funcionan con los navegadores modernos. Algunas acciones no funcionan en los navegadores antiguos, pero no provocan errores.
Nota
Los elementos de destino requieren un ID exclusivo. Por ejemplo, si desea aplicar a una imagen el comportamiento Intercambiar imagen, dicha imagen necesita un ID. Si no especifica un ID para el elemento, Dreamweaver lo especificará de forma automática.
El evento predeterminado para activar la acción aparece en la
columna Eventos. Si este no es el evento activador que deseas, selecciona
otro evento en el menú emergente Eventos. (Para abrir el menú Eventos,
selecciona un evento o acción en el panel Behaviors y haz clic en la
flecha negra que apunta hacia abajo que aparece entre el nombre del evento
y el nombre de la acción.)
Cambio o eliminación de un comportamiento
Después de adjuntar un comportamiento, puedes cambiar el evento que activa la acción, agregar o eliminar acciones y cambiar parámetros para las acciones.
Seleccione un objeto con un comportamiento adjunto.
Seleccione Ventana > Comportamientos.
Realice los cambios:
Para editar los parámetros de una acción, haz doble clic en su nombre, o selecciónala y presiona Intro (Windows) o Retorno (Macintosh); luego cambia los parámetros en el cuadro de diálogo y haz clic en Aceptar.
Para cambiar el orden de las acciones para un evento determinado, selecciona una acción y haz clic en la Flecha abajo hacia arriba o hacia abajo. Alternativamente, puedes seleccionar la acción y cortarla y pegarla en la ubicación deseada entre las otras acciones.
Para eliminar un comportamiento, selecciónalo y haz clic en el botón Menos (–) o presiona Suprimir.
Actualización de un comportamiento
Seleccionar un elemento que tenga el comportamiento asociado.
Elige Ventana > Behaviors y haz doble clic
en el comportamiento.
Realice los cambios y haga clic en Aceptar en el cuadro de diálogo del comportamiento.
Se actualizarán todas las apariciones del comportamiento en esa página. Si otras páginas de tu sitio tienen ese comportamiento, debes actualizarlas página por página.
Descargar e instalar comportamientos de terceros
Hay muchas extensiones disponibles en Exchange for Dreamweaver (www.adobe.com/go/dreamweaver_exchange).
Seleccione Ventana > Comportamientos y seleccione Obtener más comportamientos en el menú Agregar comportamiento.
Se abrirá su navegador principal y aparecerá el sitio Exchange.
Examine o busque los paquetes.
Descargue e instale el paquete de extensiones que desee.
Para obtener más información, consulta Agregar y administrar extensiones en Dreamweaver.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
