Selecciona un objeto y elige Call JavaScript del
menú Add Behavior del panel Behaviors.
Última actualización el
27 abr. 2021
Usa este tema para entender cómo aplicar comportamientos JavaScript integrados en Adobe Dreamweaver.
Uso de comportamientos incorporados
Los comportamientos incluidos con Dreamweaver se han escrito para funcionar en navegadores modernos. Los comportamientos no producen resultados en los navegadores antiguos.
Nota
Las acciones de Dreamweaver se han escrito cuidadosamente para funcionar en tantos navegadores como sea posible. Si quitas código de una acción de Dreamweaver manualmente, o lo reemplazas con tu propio código, puedes perder la compatibilidad entre exploradores.
Aunque las acciones de Dreamweaver fueron escritas para maximizar la compatibilidad entre exploradores, algunos exploradores no admiten JavaScript en absoluto, y muchas personas que navegan por la web mantienen JavaScript desactivado en sus exploradores.Para obtener mejores resultados en plataformas múltiples, proporciona interfaces alternativas incluidas en etiquetas <noscript> para que las personas sin JavaScript puedan usar tu sitio.
Aplicación del comportamiento Llamar JavaScript
El comportamiento Call JavaScript ejecuta una función personalizada o línea de código JavaScript cuando ocurre un evento. (Puedes escribir el script tú mismo, o puedes usar código proporcionado por varias bibliotecas JavaScript disponibles gratuitamente en la web).
Escriba el JavaScript exacto que se ejecutará o escriba el nombre de una función.
Por ejemplo, para crear un botón Atrás, podría escribir if (history.length > 0){history.back()}. Si has encapsulado tu código en una función, escribe solo el nombre de la función (por ejemplo, hGoBack()).
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplicación del comportamiento Cambiar propiedad
Usa el comportamiento Change Property para cambiar el valor de una de las propiedades de un objeto (por ejemplo, el color de fondo de un div o la acción de un formulario).
Nota
Usa este comportamiento solo si estás muy familiarizado con HTML y JavaScript.
Selecciona un objeto y elige Change Property del
menú Add Behavior del panel Behaviors.
En el menú Type Of Element, seleccione un tipo de elemento para mostrar todos los elementos identificados de ese tipo.
Seleccione un elemento en el menú ID de elemento.
Seleccione una propiedad del menú Propiedad o introduzca el nombre de la propiedad en el cuadro.
Introduzca el nuevo valor para la nueva propiedad en el campo Nuevo Valor.
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplicación del comportamiento Comprobar complemento
Utilice el comportamiento Check Plugin para redirigir a los visitantes a diferentes páginas en función de si tienen instalado el complemento especificado.Por ejemplo, podrías querer que los visitantes vayan a una página si tienen Shockwave y otra página si no lo tienen.
Nota
No puedes detectar plug‑ins específicos en Internet Explorer usando JavaScript. Sin embargo, seleccionar Flash o Director agregará el código VBScript apropiado a tu página para detectar esos plug‑ins en Internet Explorer en Windows. La detección de complementos es imposible con Internet Explorer en Mac OS.
Selecciona un objeto y elige Check Plugin del
menú Add Behavior del panel Behaviors.
Selecciona un plug‑in del menú Plugin, o haz clic en Enter
y escribe el nombre exacto del plug‑in en la caja adyacente.
Debe usar el nombre exacto del complemento como se especifica en negrita en la página Acerca de los complementos de Netscape Navigator. (En Windows, seleccione el comando Ayuda > Acerca de los complementos de Navigator; en Mac OS, seleccione Acerca de los complementos en el menú Apple.)
En el cuadro Si se encuentra, ir a URL, indique una URL para los visitantes que tengan el complemento.
Si especifica una URL remota, debe incluir el prefijo http:// en la dirección. Si deja el campo en blanco, los visitantes permanecerán en la misma página.
En el cuadro En caso contrario, ir a URL, indique una URL alternativa para los visitantes que no tengan el complemento.Si deja el campo
en blanco, los visitantes permanecerán en la misma página.
Especifique qué debe hacerse si la detección de complementos no es posible.
Por defecto, cuando la detección es imposible, el visitante es enviado a
la URL listada en el cuadro En caso contrario. Para enviar al visitante
a la primera URL (Si se encuentra), seleccione la opción Ir siempre a la primera
URL si la detección no es posible. When seleccionada, esta opción efectivamente
significa "asumir que el visitante tiene el complemento, a menos que el explorador indique explícitamente
que el complemento no está presente". En general, seleccione esta
opción si el contenido del complemento es integral a su página; si no, déjela
sin seleccionar.
Nota
Esta opción se aplica solo a Internet Explorer; Netscape Navigator siempre puede detectar complementos.
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplicación del comportamiento Arrastrar elemento PA
El comportamiento Arrastrar elemento AP permite al visitante arrastrar un elemento posicionado absolutamente (AP). Utiliza este comportamiento para crear rompecabezas, controles reguladores y otros elementos de interfaz movibles.
Puede especificar en qué dirección el visitante puede arrastrar el elemento AP (horizontalmente, verticalmente o en cualquier dirección), un objetivo al que el visitante debe arrastrar el elemento AP, si se debe ajustar el elemento AP al objetivo si el elemento AP está dentro de un cierto número de píxeles del objetivo, qué hacer cuando el elemento AP toque el objetivo, y más.
Como el comportamiento Arrastrar elemento AP debe llamarse antes de que el visitante pueda arrastrar el elemento AP, debes adjuntar Arrastrar elemento AP al objeto body (con el evento onLoad).
Seleccione Insertar > Objetos de diseño >
AP Div o haga clic en el botón Dibujar AP Div en el panel Insertar y dibuje
un AP Div en la vista Diseño de la ventana Documento.
Haga clic en <body> en el selector de etiquetas
en la esquina inferior izquierda de la ventana Documento.
Seleccione Arrastrar elemento AP en el menú Agregar comportamiento del
panel Comportamientos.
Si Arrastrar elemento AP no está disponible, probablemente tenga un elemento AP seleccionado.
En el menú emergente Elemento PA, seleccione el elemento PA.
Seleccione Restringido o Sin restricciones en el
menú emergente Movimiento.
El movimiento sin restricciones es apropiado para rompecabezas y otros juegos de arrastrar y soltar. Para controles reguladores y elementos móviles como cajones de archivos, cortinas y minipersianas, seleccione movimiento restringido.
Para movimiento restringido, introduzca valores (en píxeles) en
los cuadros Arriba, Abajo, Izquierda y Derecha.
Los valores son relativos a la posición inicial del elemento AP. Para restringir el movimiento dentro de una región rectangular, introduzca valores positivos en los cuatro cuadros. Para permitir solo movimiento vertical, introduce valores positivos para Arriba y Abajo y 0 para Izquierda y Derecha. Para permitir solo movimiento horizontal, introduce valores positivos para Izquierda y Derecha y 0 para Arriba y Abajo.
Introduce valores (en píxeles) para el Target de colocación en los cuadros Izquierda
y Arriba.
El Target de colocación es el lugar al que quieres que el visitante arrastre el elemento AP. Se considera que un elemento AP ha llegado al destino de colocación cuando sus coordenadas izquierda y superior coinciden con los valores que introduce en los cuadros Izquierda y Superior.Los valores son relativos a la esquina superior izquierda de la ventana del explorador. Haz clic en Obtener posición actual para rellenar automáticamente los cuadros de texto con la posición actual del elemento AP.
Introduce un valor (en píxeles) en el cuadro Ajustar si está dentro para
determinar lo cerca que debe estar el visitante del Target de colocación antes
de que el elemento AP se ajuste al target.
Los valores más grandes facilitan al visitante encontrar el Target de colocación.
Para rompecabezas simples y manipulación de paisajes, puedes detenerte aquí.Para definir el manipulador de arrastre para el elemento AP, realizar el seguimiento del
movimiento del elemento AP mientras se arrastra, y activar
una acción cuando se coloca el elemento AP, haz clic en la pestaña Avanzado.
Para especificar que el visitante debe hacer clic en un área particular
del elemento AP para arrastrar el elemento AP, selecciona Área dentro del elemento
del menú Manipulador de arrastre; luego introduce las coordenadas izquierda y superior
y la anchura y altura del manipulador de arrastre.
Esta opción es útil cuando la imagen dentro del elemento AP contiene un elemento que sugiere arrastrar, como una barra de título o el tirador de un cajón. No configures esta opción si quieres que el visitante pueda hacer clic en cualquier lugar del elemento AP para arrastrarlo.
Elija las opciones Al arrastrar que desee utilizar:
Seleccione Traer elemento al frente si el elemento AP debe moverse al frente del orden de apilado mientras se está arrastrando.Si seleccionas esta opción, usa el menú emergente para seleccionar si dejar el elemento AP al frente o restaurarlo a su posición original en el orden de apilado.
Introduzca código JavaScript o un nombre de función (por ejemplo, monitorAPelement()) en el cuadro Llamar JavaScript para ejecutar repetidamente el código o la función mientras se arrastra el elemento AP.Por ejemplo, podrías escribir una función que monitorice las coordenadas del elemento AP y muestre sugerencias como "te estás acercando" o "no estás ni cerca del objetivo de destino" en un cuadro de texto.
Introduce código JavaScript o un nombre de función (por ejemplo, evaluateAPelementPos()) en el segundo cuadro Llamar JavaScript para ejecutar el código o la función cuando se suelte el elemento AP.Selecciona Solo si está ajustado si JavaScript
solo debe ejecutarse si el elemento AP ha alcanzado el objetivo de colocación.
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Recopilación de información sobre el elemento AP desplazable
Cuando adjuntas el comportamiento Arrastrar elemento AP a un objeto, Dreamweaver inserta la función MM_dragLayer() en la sección head de tu documento.(La función conserva la convención de nomenclatura antigua para elementos AP [es decir, «Layer»] para que las capas creadas en versiones anteriores de Dreamweaver sigan siendo editables.)Además de registrar el elemento AP como arrastrable, esta función define tres propiedades para cada elemento AP arrastrable: MM_LEFTRIGHT, MM_UPDOWN y MM_SNAPPED, que puedes usar en tus propias funciones JavaScript para determinar la posición horizontal relativa del elemento AP, la posición vertical relativa del elemento AP y si el elemento AP ha alcanzado el destino de colocación.
Nota
La información proporcionada aquí está dirigida solo a programadores de JavaScript experimentados.
Por ejemplo, la siguiente función muestra el valor de la propiedad MM_UPDOWN (la posición vertical actual del elemento AP) en un campo de formulario llamado curPosField.(Los campos de formulario son útiles para mostrar información actualizada continuamente porque son dinámicos, es decir, puedes cambiar su contenido después de que la página haya terminado de cargarse.)
function getPos(layerId){
var layerRef = document.getElementById(layerId);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
En lugar de mostrar los valores de MM_UPDOWN o MM_LEFTRIGHT en un campo de formulario, podrías usar esos valores de otras maneras.Por ejemplo, podrías escribir una función que muestre un mensaje en el campo de formulario dependiendo de lo cerca que esté el valor de la zona de colocación, o podrías llamar a otra función para mostrar u ocultar un elemento AP dependiendo del valor.
Es especialmente útil leer la propiedad MM_SNAPPED cuando tienes varios elementos AP en la página, todos los cuales deben llegar a sus objetivos antes de que el visitante pueda avanzar a la siguiente página o tarea. Por ejemplo, podrías escribir una función para contar cuántos elementos AP tienen un valor MM_SNAPPED de true y llamarla cada vez que se coloque un elemento AP.Cuando el recuento de elementos colocados alcance el número deseado, podrías enviar al visitante a la siguiente página o mostrar un mensaje de felicitación.
Aplicación del comportamiento Ir a URL
El comportamiento Ir a URL abre una nueva página en la ventana actual o en el marco especificado. Este comportamiento es útil para cambiar el contenido de dos o más marcos con un clic.
Selecciona un objeto y elige Ir a URL del
menú Agregar comportamiento del panel Comportamientos.
Elija un destino para el URL en la lista Abrir en.
La lista Abrir en enumera automáticamente los nombres de todos los marcos en el conjunto de marcos actual así como la ventana principal. Si no hay marcos, la ventana principal es la única opción.
Nota
Este comportamiento puede producir resultados inesperados si algún marco se llama top, blank, self o parent. Los navegadores a veces confunden estos nombres con nombres de destino reservados.
Haz clic en Examinar para seleccionar un documento a abrir, o introduce la
ruta y el nombre de archivo del documento en el cuadro URL.
Repetir los pasos 2 y 3 para abrir documentos adicionales en otros marcos.
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplicación del comportamiento Menú de salto
Cuando creas un menú de salto usando Insertar > Formulario > Menú de salto, Dreamweaver crea un objeto de menú y adjunta el comportamiento Menú de salto (o Ir a menú de salto) a él. Generalmente no es necesario adjuntar el comportamiento Menú de salto a un objeto manualmente.
Puedes editar un menú de salto existente de dos maneras:
Puedes editar y reorganizar elementos de menú, cambiar los archivos a los que saltar, y cambiar la ventana en la que esos archivos se abren, haciendo doble clic en un comportamiento Menú de salto existente en el panel Comportamientos.
Puedes editar los elementos del menú tal como editarías elementos en cualquier menú, seleccionando el menú y usando el botón Valores de lista en el inspector de Propiedades.
Crea un objeto de menú de salto si no hay uno ya
en tu documento.
Seleccionar el objeto y elegir Menú de salto en el menú Agregar comportamiento del panel Comportamientos.
Realizar los cambios que desee en el cuadro de diálogo Menú de salto y luego hacer clic en Aceptar.
Aplicación del comportamiento Menú de salto Ir
El comportamiento Ir del menú de salto está estrechamente asociado con el comportamiento Menú de salto; Ir del menú de salto permite asociar un botón Ir con un menú de salto.(Antes de usar este comportamiento, debe existir un menú de salto en el documento.) Al hacer clic en el botón Ir se abre el enlace seleccionado en el menú de salto. Un menú de salto normalmente no necesita un botón Ir; seleccionar un elemento del menú de salto generalmente hace que se cargue una URL sin necesidad de más acciones del usuario. Pero si el visitante selecciona el mismo elemento que ya está elegido en el menú de salto, no se produce el salto.En general, eso no importa, pero si el menú de salto aparece en un marco, y los elementos del menú de salto vinculan a páginas en otros marcos, un botón Ir suele ser útil, para permitir a los visitantes volver a seleccionar un elemento que ya está seleccionado en el menú de salto.
Nota
Cuando utiliza un botón Ir con un menú de salto, el botón Ir se convierte en el único mecanismo que "lleva" al usuario a la URL asociada con la selección en el menú.Al seleccionar un elemento del menú de salto ya no se redirige automáticamente al usuario a otra página o marco.
Selecciona un objeto para usar como botón Ir (generalmente
una imagen de botón), y elige Ir a menú de salto en el menú Agregar comportamiento
del panel Comportamientos.
En el menú Elegir menú de salto, selecciona un menú para que el botón Ir
active y haz clic en Aceptar.
Aplicación del comportamiento Abrir ventana del navegador
Usar el comportamiento Abrir ventana del explorador para abrir una página en una nueva ventana.Puedes especificar las propiedades de la nueva ventana, incluyendo su tamaño, atributos (si es redimensionable, tiene una barra de menú, y demás), y nombre. Por ejemplo, puedes usar este comportamiento para abrir una imagen más grande en una ventana independiente cuando el visitante hace clic en una miniatura; con este comportamiento, puedes hacer que la nueva ventana tenga el tamaño exacto de la imagen.
Si no especificas atributos para la ventana, se abre con el tamaño y los atributos de la ventana desde la cual se abrió. Especificar cualquier atributo para la ventana automáticamente desactiva todos los demás atributos que no estén activados explícitamente. Por ejemplo, si no estableces atributos para la ventana, podría abrirse a 1024 x 768 píxeles y tener una barra de navegación (mostrando los botones Atrás, Adelante, Inicio y recargar), barra de herramientas de ubicación (mostrando la URL), barra de estado (mostrando mensajes de estado, en la parte inferior), y barra de menú (mostrando los menús Archivo, Edición, Ver y otros). Si estableces explícitamente la anchura a 640 y la altura a 480 y no estableces otros atributos, la ventana se abre a 640 x 480 píxeles, sin barras de herramientas.
Selecciona un objeto y elige Abrir ventana del explorador
en el menú Agregar comportamiento del panel Comportamientos.
Haz clic en Examinar para seleccionar un archivo, o introduce la URL que quieres
mostrar.
Establece las opciones para la anchura y altura de la ventana (en píxeles)
y para la incorporación de varias barras de herramientas, barras de desplazamiento, controladores de redimensionamiento,
y similares. Asigna un nombre a la ventana (no uses espacios ni
caracteres especiales) si quieres que sea el destino de enlaces o
quieres controlarla con JavaScript.
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplicación del comportamiento Mensaje emergente
El comportamiento Mensaje emergente muestra una alerta de JavaScript con el mensaje que especifiques. Debido a que las alertas de JavaScript solo tienen un botón (Aceptar), usa este comportamiento para dar información al usuario en lugar de presentar una opción.
Puedes incrustar cualquier llamada de función JavaScript válida, propiedad, variable global, o otra expresión en el texto. Para incrustar una expresión JavaScript, colócala entre llaves ({}). Para mostrar una llave, precédela con una barra diagonal inversa (\{).
Ejemplo:
La URL de esta página es {window.location}, y hoy es {new Date()}.
Nota
El explorador controla la apariencia de la alerta. Si deseas más control sobre la apariencia, considera usar el comportamiento Abrir ventana del explorador.
Selecciona un objeto y elige Mensaje emergente del
menú Añadir comportamiento del panel Comportamientos.
Introduzca el mensaje en el cuadro Mensaje.
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplicación del comportamiento Carga previa de imágenes
El comportamiento Precargar imágenes reduce el tiempo de visualización al almacenar en caché imágenes que no se muestran cuando la página aparece por primera vez (por ejemplo, imágenes que se intercambiarán con comportamientos o scripts).
Nota
El comportamiento Intercambiar imagen precarga automáticamente todas las imágenes resaltadas cuando seleccionas la opción Precargar imágenes en el cuadro de diálogo Intercambiar imagen, por lo que no necesitas añadir manualmente Precargar imágenes al usar Intercambiar imagen.
Selecciona un objeto y elige Precargar imágenes del
menú Añadir comportamiento del panel Comportamientos.
Haz clic en Examinar para seleccionar un archivo de imagen, o introduce la ruta
y el nombre de archivo de una imagen en el cuadro Image Source File.
Haz clic en el botón Más (+) en la parte superior del cuadro de diálogo
para añadir la imagen a la lista Precargar imágenes.
Repite los pasos 2 y 3 para todas las imágenes restantes que
desees precargar en la página actual.
Para eliminar una imagen de la lista Precargar imágenes, selecciónala
y haz clic en el botón Menos (–).
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplicación del comportamiento Definir texto de marco
El comportamiento Definir texto de marco te permite establecer dinámicamente el texto de un marco, reemplazando el contenido y el formato de un marco con el contenido que especifiques. El contenido puede incluir cualquier código HTML válido. Utilice este comportamiento para mostrar información de forma dinámica.
Aunque el comportamiento Establecer texto de marco reemplaza el formato de un marco, puedes seleccionar Conservar color de fondo para conservar los atributos de color de fondo y texto de la página.
Puedes incrustar cualquier llamada de función JavaScript válida, propiedad, variable global, o otra expresión en el texto. Para incrustar una expresión JavaScript, colócala entre llaves ({}). Para mostrar una llave, precédela con una barra diagonal inversa (\{).
Ejemplo:
La URL de esta página es {window.location}, y hoy es {new Date()}.
Selecciona un objeto y elige Definir texto >
Definir texto de marco del menú Añadir comportamiento del panel Comportamientos.
En el cuadro de diálogo Definir texto de marco, selecciona el marco de destino
del menú Marco.
Haz clic en el botón Obtener HTML actual para copiar el contenido actual
de la sección cuerpo del marco de destino.
Escriba un mensaje en el cuadro de texto Nuevo HTML.
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplica el comportamiento Definir texto de contenedor
El comportamiento Establecer texto del contenedor reemplaza el contenido y el formato de un contenedor existente (es decir, cualquier elemento que pueda contener texto u otros elementos) en una página con el contenido que especifiques.Dicho contenido puede incluir cualquier código HTML válido.
Puedes incrustar cualquier llamada de función de JavaScript válida, propiedad, variable global o cualquier otra expresión en el texto. Para incrustar una expresión de JavaScript, colócala entre llaves ({}). Para mostrar una llave, antepóngale una barra diagonal inversa (\{).
Ejemplo:
La URL de esta página es {window.location}, y hoy es {new Date()}.
Seleccione un objeto y seleccione Definir texto >
Definir texto de contenedor en el menú Agregar comportamiento del panel
Comportamientos.
En el cuadro de diálogo Definir texto del contenedor, usa el menú Contenedor
para seleccionar el elemento de destino.
Escriba el nuevo texto o HTML en el cuadro Nuevo HTML.
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplicar el comportamiento Definir texto de la barra de estado
El comportamiento Definir texto de la barra de estado muestra un mensaje en la barra de estado situada en la esquina inferior izquierda de la ventana del explorador. Por ejemplo, puedes usar este comportamiento para describir el destino de un enlace en la barra de estado en lugar de mostrar la URL asociada con él. Los visitantes a menudo ignoran o pasan por alto los mensajes en la barra de estado (y no todos los exploradores proporcionan compatibilidad completa para establecer el texto de la barra de estado); si tu mensaje es importante, considera mostrarlo como un mensaje emergente o como el texto de un elemento PA.
Nota
Si usas el comportamiento Definir texto de la barra de estado en Dreamweaver, no se garantiza que el texto de la barra de estado en el explorador cambie porque algunos exploradores requieren ajustes especiales al cambiar el texto de la barra de estado. Firefox, por ejemplo, requiere que cambies una opción avanzada que permita a JavaScript cambiar el texto de la barra de estado. Para más información, consulte la documentación del navegador.
Puedes incrustar cualquier llamada de función JavaScript válida, propiedad, variable global, u otra expresión en el texto. Para incrustar una expresión JavaScript, colócala entre llaves ({}).Para mostrar una llave, precedela con una barra invertida (\{).
Ejemplo:
La URL de esta página es {window.location}, y hoy es {new Date()}.
Selecciona un objeto y elige Establecer Texto >
Establecer Texto De Barra De Estado en el menú Agregar Comportamiento del panel
Behaviors.
En el cuadro de diálogo Definir texto de la barra de estado, escriba el mensaje
en el cuadro Mensaje.
Escriba un mensaje corto. El explorador trunca el mensaje si no cabe en la barra de estado.
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplicar el comportamiento Definir texto del campo de texto
El comportamiento Definir texto del campo de texto reemplaza el contenido del campo de texto de un formulario con el contenido que especifique.
Puede incrustar cualquier llamada de función de JavaScript válida, propiedad, variable global u otra expresión en el texto. Para incrustar una expresión de JavaScript, colócala entre llaves ({}).Para que aparezca una llave, antepóngale una barra invertida (\{).
Ejemplo:
La URL de esta página es {window.location}, y hoy es {new Date()}.
Creación de un campo de texto con nombre
Selecciona Insertar > Formulario >
Campo de texto.
Si Dreamweaver te solicita agregar una etiqueta de formulario, haz clic en Sí.
En el inspector de propiedades, introduzca un nombre para el campo de texto.
Asegúrate de que el nombre sea único en la Página (no uses el mismo nombre
para múltiples elementos en la misma Página, incluso si están en diferentes
formularios).
Aplicación de Definir texto de campo de texto
Selecciona un campo de texto y elige Definir texto >
Definir texto del campo en el menú Agregar comportamiento del panel Comportamientos.
Selecciona el campo de texto de destino del menú Campo de texto
y introduce tu nuevo texto.
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplicación del comportamiento Mostrar-Ocultar elementos
El comportamiento expandir-contraer elementos muestra, oculta, o Restaura la Visibilidad predeterminada de uno o más elementos de Página. Este comportamiento es útil para mostrar información cuando el Usuario interactúa con la Página. Por ejemplo, cuando el Usuario mueve el puntero sobre una imagen de una planta, podrías mostrar un elemento de Página que proporcione detalles sobre la temporada de crecimiento y región de la planta, cuánto sol necesita, qué tamaño puede alcanzar, y así sucesivamente. El comportamiento solo muestra u oculta el elemento pertinente: no quita realmente el elemento del flujo de la página cuando está oculto.
Selecciona un objeto y selecciona expandir-contraer Elementos
del menú Agregar comportamiento del panel Comportamientos.
Si expandir-contraer Elementos no está disponible, probablemente tengas un elemento AP seleccionado. Debido a que los elementos AP no aceptan eventos en ambos exploradores 4.0, debes seleccionar un objeto diferente—como la etiqueta <body> o un vincular (<a>) etiqueta.
De la lista Elementos, selecciona el elemento que deseas
mostrar u ocultar y haz clic en expandir, contraer, o Restaurar (que Restaura la
Visibilidad predeterminada).
Repite el paso 2 para todos los elementos restantes cuya Visibilidad
desees cambiar. (Puedes cambiar la visibilidad de múltiples elementos con un solo comportamiento.)
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Este comportamiento ha quedado obsoleto a partir de Dreamweaver CS5.
Aplicación del comportamiento Intercambiar imagen
El comportamiento Intercambiar imagen intercambia una imagen por otra cambiando el atributo src de la etiqueta <img>. Usa este comportamiento para crear efectos de transferir botones y otros efectos de imagen (incluyendo intercambiar más de una imagen a la vez). Insertar una imagen de transferir automáticamente agrega un comportamiento Intercambiar imagen a tu Página.
Nota
Debido a que solo el atributo src se ve afectado por este comportamiento, deberías intercambiar una imagen que tenga las mismas dimensiones (altura y Anchura) que la original. De lo contrario, la imagen que intercambies se reducirá o expandirá para ajustarse a las dimensiones de la imagen original.
También hay un comportamiento Restaurar intercambio de imagen, que Restaura el último conjunto de imágenes intercambiadas a sus archivos fuente anteriores. Este comportamiento se agrega automáticamente cada vez que vinculas el comportamiento Intercambiar imagen a un objeto; si dejas la opción Restaurar seleccionada mientras vinculas Intercambiar imagen, nunca deberías necesitar seleccionar el comportamiento Restaurar intercambio de imagen manualmente.
Selecciona Insertar > Imagen o haz clic en el
botón Imagen en el panel Insertar para insertar una imagen.
En el inspector de Propiedades, introduce un nombre para la imagen en el cuadro de texto del extremo izquierdo.
No es obligatorio nombrar las imágenes; se nombran automáticamente cuando adjuntas el comportamiento a un objeto. Sin embargo, es más fácil distinguir las imágenes en el cuadro de diálogo Intercambiar imagen si nombras todas las imágenes de antemano.
Repita los pasos 1 y 2 para insertar más imágenes.
Selecciona un objeto (generalmente la imagen que vas a
intercambiar) y elige Intercambiar imagen del menú Añadir comportamiento del panel
Comportamientos.
De la lista Imágenes, selecciona la imagen cuya fuente quieres
cambiar.
Haz clic en Examinar para seleccionar el nuevo archivo de imagen, o introduce la
ruta y el nombre del archivo de la nueva imagen en el cuadro Establecer fuente en.
Repite los pasos 5 y 6 para cualquier imagen adicional que quieras
cambiar. Usa la misma acción Intercambiar imagen para todas las imágenes que
quieras cambiar a la vez; de lo contrario, la acción correspondiente Restaurar
intercambio de imagen no las restaurará todas.
Seleccione la opción Precargar imágenes para almacenar en caché las nuevas imágenes cuando se cargue la página.
Esto evita retrasos de descarga cuando sea el momento de que aparezcan las imágenes.
Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.
Aplicación del comportamiento Validar formulario
El comportamiento Validar formulario comprueba el contenido de campos de texto especificados para asegurarse de que el usuario ha introducido el tipo correcto de datos. Asocie este comportamiento a campos de texto individuales con el evento onBlur para validar los campos mientras el usuario rellena el formulario, o asócielo al formulario con el evento onSubmit para evaluar varios campos de texto a la vez cuando el usuario haga clic en el botón Enviar.Adjuntar este comportamiento a un formulario evita el envío de formularios con datos no válidos.
Selecciona Insertar > Formulario o haz clic en el
botón Formulario en el panel Insertar para insertar un formulario.
Seleccione Insertar > Formulario > Campo de texto o haga clic en el botón Campo de texto del panel Insertar para insertar un campo de texto.
Repita este paso para insertar más campos de texto.
Seleccione un método de validación:
Para validar campos individuales mientras el usuario rellena el formulario, seleccione un campo de texto y seleccione Ventana > Comportamientos.
Para validar múltiples campos cuando el usuario envía el formulario, haga clic en la etiqueta <form> en el selector de etiquetas en la esquina inferior izquierda de la ventana Documento y seleccione Ventana > Comportamientos.
Seleccione Validar formulario en el menú Añadir comportamiento.
Siga uno de estos procedimientos:
Si estás validando campos individuales, selecciona el mismo campo que seleccionaste en la ventana Documento de la lista Campos.
Si estás validando múltiples campos, selecciona un campo de texto de la lista Campos.
Selecciona la opción Requerido si el campo debe contener
algún dato.
Seleccione una de las siguientes opciones de Aceptar:
Cualquier cosa
Comprueba que un campo requerido contenga datos; los datos pueden ser de cualquier tipo.
Dirección de correo electrónico
Comprueba que el campo contiene un símbolo arroba (@).
Número
Comprueba que el campo contiene solo números.
Número del
Comprueba que el campo contenga un número en un rango específico.
Si has elegido validar múltiples campos, repite
los pasos 6 y 7 para cualquier campo adicional que quieras validar.
Haga clic en OK.
Si estás validando múltiples campos cuando el usuario envía el formulario, el evento onSubmit aparece automáticamente en el menú Eventos.
Si estás validando campos individuales, comprueba que el
evento por defecto sea onBlur o onChange.
En caso contrario, seleccione uno de esos eventos.
Ambos eventos activan el comportamiento Validar formulario cuando el usuario se aleja del campo. La diferencia es que onBlur se produce tanto si el usuario ha escrito en el campo como si no, y onChange se produce solo si el usuario cambió el contenido del campo. Se prefiere el evento onBlur si el campo es obligatorio.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
