En esta página
- Uso de comportamientos incorporados
- Aplicación del comportamiento Llamar JavaScript
- Aplicación del comportamiento Cambiar propiedad
- Aplicación del comportamiento Comprobar complemento
- Aplicación del comportamiento Arrastrar elemento PA
- Recopilación de información sobre el elemento AP desplazable
- Aplicación del comportamiento Ir a URL
- Aplicación del comportamiento Menú de salto
- Aplicación del comportamiento Menú de salto Ir
- Aplicación del comportamiento Abrir ventana del navegador
- Aplicación del comportamiento Mensaje emergente
- Aplicación del comportamiento Carga previa de imágenes
- Aplicación del comportamiento Definir texto de marco
- Aplicación del comportamiento Definir texto de contenedor
- Aplicación del comportamiento Establecer texto de la barra de estado
- Aplicación del comportamiento Definir texto de campo de texto
- Aplicación del comportamiento Mostrar-Ocultar elementos
- Aplicación del comportamiento Intercambiar imagen
- Aplicación del comportamiento Validar formulario
Los comportamientos incluidos con Dreamweaver se han escrito para que funcionen en los navegadores modernos. Los comportamientos no producen resultados en los navegadores antiguos.
Nota:
Las acciones de Dreamweaver se han desarrollado para funcionar en el mayor número posible de navegadores. Si elimina manualmente código de una acción de Dreamweaver o lo sustituye por su propio código, puede perderse la compatibilidad con múltiples navegadores.
Aunque las acciones de Dreamweaver se han escrito para maximizar la compatibilidad con los distintos navegadores, algunos navegadores no son compatibles con JavaScript y, además, muchos usuarios navegan por la web con JavaScript desactivado en sus navegadores. Para obtener la mejor compatibilidad en distintas plataformas, incorpore interfaces alternativas incluidas en etiquetas <noscript> para que las personas sin JavaScript puedan usar el sitio.
El comportamiento Llamar JavaScript ejecuta una función personalizada o línea de código JavaScript cuando se produce un evento. (Puede escribir el script usted mismo o usar el código que tiene a su disposición en diversas bibliotecas JavaScript de acceso gratuito en la Web.)
Utilice el comportamiento Cambiar propiedad para cambiar el valor de una de las propiedades de un objeto (por ejemplo, el color de fondo de una div o la acción de un formulario).
Nota:
Utilice este comportamiento solo si posee buenos conocimientos de HTML y JavaScript.
Use el comportamiento Comprobar complemento para remitir a los visitantes a distintas páginas dependiendo de si tienen instalado el complemento en cuestión. Por ejemplo, puede resultar conveniente que los visitantes vayan a una página si tienen Shockwave y a otra distinta si no lo tienen.
Nota:
No es posible detectar complementos específicos en Internet Explorer con JavaScript. No obstante, la selección de Flash o Director hará que se añada el código VBScript adecuado a la página para detectar los complementos en Internet Explorer en Windows. La detección de complementos es imposible con Internet Explorer en Mac OS.
-
Especifique qué debe hacerse si la detección de complementos no es posible. De forma predeterminada, cuando la detección resulta imposible, se envía al visitante al URL indicado en el cuadro De lo contrario. Para enviar al visitante a la primera URL (si se encuentra), seleccione la opción Ir siempre al primer URL si no es posible detectar. Cuando está seleccionada, esta opción hace que se dé por hecho que el visitante dispone del complemento, a no ser que el navegador indique explícitamente que el complemento no está presente. En general, seleccione esta opción si el contenido del complemento es parte integrante de la página; si no lo es, desactive esta opción.
Nota:
Esta opción afecta solo a Internet Explorer; Netscape Navigator siempre detecta los complementos.
El comportamiento Arrastrar elemento PA permite al visitante arrastrar un elemento con posición absoluta (PA). Use este comportamiento para crear puzzles, controles deslizantes y otros elementos móviles de interfaz.
Se puede especificar la dirección en la que el visitante puede arrastrar el elemento PA (en horizontal, vertical o en cualquier dirección), un destino hasta el que el visitante debe arrastrar el elemento PA, si el elemento PA debe ajustarse al destino cuando el elemento PA se encuentra a un cierto número de píxeles del destino y qué sucederá cuando el elemento PA llegue al destino, entre otras opciones.
Dado que la llamada al comportamiento Arrastrar elemento PA debe producirse antes de que el visitante pueda arrastrar el elemento PA, debe asociar Arrastrar elemento PA al objeto body (con el elemento onLoad).
-
-
Para movimiento restringido, introduzca valores (en píxeles) en los cuadros Arriba, Abajo, Derecha e Izquierda.
Los valores son relativos a la posición inicial del elemento PA. Para restringir el movimiento a una región rectangular, introduzca valores positivos en los cuatro cuadros. Para permitir solamente el movimiento vertical, introduzca valores positivos para Arriba y Abajo, y 0 para Izquierda y Derecha. Para permitir solo el movimiento horizontal, introduzca valores positivos para Izquierda y Derecha, y 0 para Arriba y Abajo.
-
Introduzca valores (en píxeles) en los cuadros Izquierdo y Superior para definir el destino de la capa.
El destino es el punto hasta el que el visitante debe arrastrar el elemento PA. Se considera que un elemento PA ha alcanzado el destino cuando sus coordenadas izquierda y superior coinciden con los valores introducidos en los cuadros Izquierdo y Superior. Los valores son relativos a la esquina superior izquierda de la ventana del navegador. Haga clic en la opción Obtener posición actual para rellenar automáticamente los campos con la posición actual del elemento PA.
-
Seleccione Traer el elemento al frente si el elemento PA debe desplazarse a la primera posición en el orden de apilamiento mientras se está arrastrando. Si selecciona esta opción, utilice el menú emergente para determinar si desea dejar el elemento PA en la primera posición o devolverlo a su posición original en el orden de apilamiento.
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 función mientras se esté arrastrando el elemento PA. Por ejemplo, podría escribir una función que controle las coordenadas del elemento PA y muestre mensajes y consejos como “ya está cerca” o “está lejísimos del destino donde soltar la capa” en un cuadro de texto.
-
Introduzca código JavaScript o un nombre de función (por ejemplo, evaluateAPelementPos()) en el segundo cuadro de texto Llamar JavaScript para ejecutar el código o la función cuando se suelte el elemento PA. Seleccione la opción solo si se ajusta cuando el código JavaScript deba ejecutarse solamente si el elemento PA ha alcanzado su destino.
Cuando se adjunta a un objeto el comportamiento Arrastrar elemento AP, Dreamweaver inserta la función MM_dragLayer() en la sección head del documento. (La función conserva la antigua denominación en inglés de los elementos PA [es decir “Layer”, capa] para que sea posible continuar editando las capas creadas en versiones anteriores de Dreamweaver). Además de registrar el elemento PA como desplazable, esta función define tres propiedades para cada elemento PA desplazable (MM_LEFTRIGHT, MM_UPDOWN y MM_SNAPPED) que usted puede usar en sus propias funciones JavaScript para determinar la posición horizontal relativa del elemento PA, la posición vertical relativa del elemento PA y si el elemento PA ha alcanzado el destino en el que debe soltarse.
Nota:
La información que se ofrece en esta sección está destinada exclusivamente a programadores expertos en JavaScript.
Por ejemplo, la siguiente función muestra el valor de la propiedad MM_UPDOWN (la posición vertical actual del elemento PA) en un campo de formulario llamado curPosField. (Los campos de formulario son útiles para mostrar información que se actualiza continuamente, ya que son dinámicos; es decir, se puede cambiar el contenido de los mismos una vez que la página ha 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 el valor de MM_UPDOWN o MM_LEFTRIGHT en un campo de formulario, puede utilizar dichos valores de muchas otras maneras. Por ejemplo, puede crear una función que presente un mensaje en el campo de formulario dependiendo de lo próximo que esté el valor de la zona donde debe soltarse la capa, o bien puede llamar otra función para que muestre u oculte un elemento PA dependiendo del valor.
Resulta especialmente útil leer la propiedad MM_SNAPPED cuando se tienen varios elementos PA en la página y todos ellos deben alcanzar sus objetivos antes de que el visitante pueda pasar a la siguiente página o tarea. Por ejemplo, puede crear una función para determinar cuántos elementos PA tienen un valor MM_SNAPPED igual a true (verdadero) y llamarla cada vez que se suelte un elemento PA. Cuando el recuento de capas ajustadas alcanza el número deseado, puede enviar al visitante a la página siguiente o presentarle un mensaje emergente de felicitación.
El comportamiento Ir a URL abre una nueva página en la ventana actual o en el marco especificado. Este comportamiento resulta útil para cambiar el contenido de dos o más marcos con un solo clic.
-
La lista Abrir en muestra automáticamente los nombres de todos los marcos del conjunto de marcos actual y de la ventana principal. Si no hay marcos, la ventana principal es la única opción posible.
Nota:
Este comportamiento puede dar lugar a resultados inesperados si hay algún marco que se llame top, blank, self o parent. Los navegadores a veces confunden estos nombres con nombres de destino reservados.
Al crear un menú de salto mediante Insertar > Formulario > Menú de salto, Dreamweaver crea un objeto de menú y le adjunta el comportamiento del Menú de salto (o Menú de salto Ir). Normalmente no es preciso adjuntar manualmente el comportamiento Menú de salto a un objeto.
Un menú de salto existente se puede editar de dos formas:
Se pueden editar y reorganizar los elementos del menú, cambiar los archivos a los que se salta y cambiar la ventana en la que esos archivos se abren haciendo doble clic en un comportamiento de Menú de salto existente en el panel Comportamientos.
Los elementos de este menú se editan igual que los de cualquier menú, es decir, seleccionando el menú y usando el botón Valores de lista del inspector de propiedades.
El comportamiento Menú de salto Ir está estrechamente relacionado con el comportamiento Menú de salto. Menú de salto Ir le permite asociar un botón Ir con un menú de salto. (Para utilizar este comportamiento debe existir ya un menú de salto en el documento). Al hacer clic en el botón Ir, se abre el vínculo seleccionado en el menú de salto. Los menús de salto generalmente no necesitan un botón Ir; al seleccionar un elemento de un menú de salto, normalmente se carga un URL sin necesidad de que el visitante lleve a cabo ninguna otra acción. No obstante, si el visitante selecciona el mismo elemento que se encuentra ya seleccionado en el menú de salto, el salto no se producirá. En general, eso no importa, pero si aparece el menú de salto en un marco y los elementos del menú de salto contienen vínculos con páginas de otros marcos, suele ser útil disponer de un botón Ir para permitir a los visitantes volver a elegir un elemento que ya esté seleccionado en el menú de salto.
Nota:
Cuando utilice un botón Ir con un menú de salto, el botón Ir se convertirá en el único mecanismo que permite al usuario “saltar” al URL asociado a la selección del menú. La selección de un elemento de menú en el menú de salto ya no redirigirá al usuario automáticamente a otra página o marco.
Use el comportamiento Abrir ventana del navegador para abrir una página en una nueva ventana. Se pueden especificar las propiedades de la nueva ventana, incluidos su tamaño, sus atributos (si se puede cambiar su tamaño, si tiene barra de menús, etc.) y su nombre. Por ejemplo, este comportamiento se puede usar para abrir una imagen más grande en otra ventana distinta cuando el visitante hace clic en una imagen en miniatura. Con este comportamiento, puede hacer que la nueva ventana tenga el mismo tamaño que la imagen.
Si no se especifican los atributos de la ventana, se abrirá con el mismo tamaño y los mismos atributos de la ventana desde la que se abrió. Al especificar algún atributo de la ventana, se desactivan automáticamente todos los demás atributos que no se activen explícitamente. Por ejemplo, si no se establecen los atributos de la ventana, puede abrirse con un tamaño de 1024 x 768 píxeles y tener barra de navegación (con los botones Atrás, Adelante, Inicio y Actualizar), barra de herramientas de ubicación (en la que se muestra el URL), barra de estado (en la que se muestran mensajes de estado, en la parte inferior) y barra de menús (en la que se muestran Archivo, Edición, Ver y otros menús). Si se establece explícitamente la anchura en 640 píxeles y la altura en 480 píxeles y no se establece ningún otro atributo, la ventana se abrirá con un tamaño de 640 x 480 píxeles y carecerá de barras de herramientas.
-
Establezca las opciones de anchura y altura de la ventana (en píxeles) y las relativas a las diversas barras de herramientas, barras de desplazamiento, manejadores de cambio de tamaño, etc. Asigne un nombre a la ventana (no utilice espacios ni caracteres especiales) si desea que sea el destino de vínculos o desea controlarla mediante JavaScript.
El comportamiento Mensaje emergente muestra una alerta de JavaScript con el mensaje que usted especifique. Dado que las alertas de JavaScript solo tienen un botón (Aceptar), utilice este comportamiento para proporcionar información al usuario y no para proponer una elección.
Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresión de función JavaScript válida. Para incrustar una expresión JavaScript, enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra invertida (\{).
Ejemplo:
The URL for this page is {window.location}, and today is {new Date()}.
Nota:
El navegador controla el aspecto de la alerta. Si desea tener un mayor control sobre el aspecto, puede usar el comportamiento Abrir ventana del navegador.
El comportamiento Carga previa de imágenes reduce el tiempo de visualización mediante la creación de un caché para las imágenes que no se muestran cuando aparece la página inicialmente (por ejemplo, las imágenes que se intercambiarán por comportamientos o scripts).
Nota:
El comportamiento Intercambiar imagen carga automáticamente todas las imágenes resaltadas cuando se selecciona la opción Carga previa de imágenes en el cuadro de diálogo Intercambiar imagen, por lo que no es necesario añadir manualmente la acción Carga previa de imágenes al usar Intercambiar imagen.
El comportamiento Definir texto de marco permite definir de forma dinámica el texto de un marco mediante la sustitución del contenido y el formato de un marco con el contenido que usted especifique. Dicho contenido puede incluir cualquier código HTML válido. Utilice este comportamiento para mostrar información de forma dinámica.
Aunque el comportamiento Definir texto de marco sustituye el formato de un marco, puede seleccionar Conservar color de fondo para conservar los atributos de color de fondo y de texto de la página.
Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresión de función JavaScript válida. Para incrustar una expresión JavaScript, enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra invertida (\{).
Ejemplo:
The URL for this page is {window.location}, and today is {new Date()}.
El comportamiento Definir texto de 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 usted especifique. Dicho contenido puede incluir cualquier código HTML válido.
Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresión de función JavaScript válida. Para incrustar una expresión JavaScript, enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra invertida (\{).
Ejemplo:
The URL for this page is {window.location}, and today is {new Date()}.
El comportamiento Establecer texto de la barra de estado muestra un mensaje en la barra de estado, situada en la esquina inferior izquierda de la ventana del navegador. Por ejemplo, puede usar este comportamiento para describir el destino de un vínculo en la barra de estado en lugar de mostrar el URL al que está asociado. A menudo los visitantes omiten o no advierten los mensajes de la barra de estado (además, no todos los navegadores proporcionan soporte completo para introducir texto en la barra de estado). Si el mensaje es importante, puede mostrarlo en forma de mensaje emergente o como texto de un elemento PA.
Nota:
Si utiliza el comportamiento Establecer texto de la barra de estado en Dreamweaver, no se garantiza que el texto de la barra de estado del navegador cambie, ya que algunos navegadores requieren ajustes especiales al cambiar el texto de la barra de estado. Firefox, por ejemplo, exige cambiar una opción avanzada que permite a JavaScript cambiar el texto de la barra de estado. Para más información, consulte la documentación del navegador.
Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresión de función JavaScript válida. Para incrustar una expresión JavaScript, enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra invertida (\{).
Ejemplo:
The URL for this page is {window.location}, and today is {new Date()}.
El comportamiento Definir texto de campo de texto sustituye el contenido del campo de texto de un formulario por el contenido que usted especifique.
Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresión de función JavaScript válida. Para incrustar una expresión JavaScript, enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra invertida (\{).
Ejemplo:
The URL for this page is {window.location}, and today is {new Date()}.
El comportamiento Mostrar-Ocultar elementos muestra, oculta o restaura la visibilidad predeterminada de uno o varios elementos de página. Este comportamiento resulta útil para mostrar información a medida que el usuario va interactuando con la página. Por ejemplo, cuando el usuario pasa el puntero por encima de la imagen de una planta, se puede mostrar un elemento de página que le ofrezca información sobre la época y región de crecimiento de la planta, las horas de sol que necesita, el tamaño que suele alcanzar, etc. El comportamiento solo muestra u oculta el elemento correspondiente (no elimina realmente el elemento del flujo de la página cuando está oculto).
-
Seleccione un objeto y elija Mostrar-Ocultar elementos del menú Añadir comportamiento del panel Comportamientos.
Si Mostrar-Ocultar elementos no está disponible, es probable que tenga un elemento PA seleccionado. Dado que los elementos PA no aceptan eventos en la versión 4.0 de ninguno de los dos navegadores, deberá seleccionar un objeto diferente, como por ejemplo la etiqueta <body> o un vínculo (una etiqueta <a>).
El comportamiento Intercambiar imagen intercambia una imagen por otra cambiando el atributo src de la etiqueta <img>. Use este comportamiento para crear sustituciones de botones y otros efectos de imágenes (incluido el intercambio de varias imágenes a la vez). Al insertar una imagen dinámica se añade automáticamente un comportamiento Intercambiar imagen a la página.
Nota:
Dado que solo el atributo src se ve afectado por este comportamiento, el intercambio debe hacerse con imágenes que tengan las mismas dimensiones (altura y anchura) que la imagen original. En caso contrario, la imagen que se intercambia se reducirá o ampliará para adaptarse a las dimensiones de la imagen original.
También existe un comportamiento denominado Restaurar imagen intercambiada que restaura el último conjunto de imágenes intercambiadas a sus archivos de origen anteriores. Este comportamiento se añade automáticamente siempre que se adjunta el comportamiento Intercambiar imagen a un objeto; si dejó seleccionada la opción Restaurar al adjuntar Intercambiar imagen, no tendrá que seleccionar manualmente el comportamiento Restaurar imagen intercambiada.
El comportamiento Validar formulario comprueba el contenido de los campos de texto especificados para asegurarse de que el usuario ha introducido el tipo correcto de datos. Adjunte este comportamiento a campos de texto individuales con el evento onBlur para validar los campos conforme el usuario vaya rellenando el formulario, o adjúntela al formulario con el evento onSubmit para evaluar varios campos de texto cuando el usuario haga clic en el botón Enviar. Al adjuntar este comportamiento a un formulario se evita el envío de formularios con datos no válidos.
-
Para validar campos individuales conforme el usuario va rellenándolos en el formulario, seleccione un campo de texto y elija 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, situado en la esquina inferior izquierda de la ventana de documento y elija Ventana > Comportamientos.
-
Si está validando campos individuales, compruebe que el evento predeterminado sea onBlur u onChange. En caso contrario, seleccione uno de esos eventos.
Cualquiera de estos dos eventos desencadena el comportamiento Validar formulario cuando el usuario abandona el campo. La diferencia estriba en que onBlur tiene lugar independientemente de que el usuario haya escrito algo en el campo, mientras que onChange solo tiene lugar si el usuario ha cambiado el contenido del campo. El evento onBlur es preferible si el campo es obligatorio.
Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.