Este tema sirve para entender cómo aplicar comportamientos de JavaScript incorporados en Adobe Dreamweaver.

Uso de comportamientos incorporados

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.

Aplicación del comportamiento Llamar JavaScript

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.)

  1. Seleccione un objeto y elija Llamar JavaScript en el menú Añadir comportamiento del panel Comportamientos.
  2. Escriba el código JavaScript exacto que se ejecutará o 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 ha encapsulado el código en una función, escriba solamente el nombre de la función (por ejemplo, hGoBack()).

  3. Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.

Aplicación del comportamiento Cambiar propiedad

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.

  1. Seleccione un objeto y elija Cambiar propiedad en el menú Añadir comportamiento del panel Comportamientos.
  2. En el menú Tipo de elemento, elija un tipo de elemento para ver todos los elementos de dicho tipo que han sido identificados.
  3. Seleccione un elemento en el menú ID de elemento.
  4. Seleccione una propiedad en el menú Propiedad o introduzca el nombre correspondiente en el cuadro de texto.
  5. Introduzca el nuevo valor de la nueva propiedad en el campo Nuevo valor.
  6. Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.

Aplicación del comportamiento Comprobar complemento

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.

  1. Seleccione un objeto y elija Comprobar complemento en el menú Añadir comportamiento del panel Comportamientos.
  2. Seleccione un complemento en el menú Complementos o presione Intro y escriba el nombre exacto del complemento en el cuadro de texto contiguo.

    Deberá utilizar el nombre exacto del complemento tal como se especifica en negrita en la página Acerca de los complementos en Netscape Navigator. En Windows, seleccione Ayuda > Acerca de los complementos en Navigator; en Mac OS, elija Acerca de los complementos en el menú Apple.

  3. En el cuadro de texto Si se encuentra, ir a URL, especifique un URL para los visitantes que dispongan del complemento.

    Si especifica un URL remoto, deberá incluir el prefijo http:// en la dirección. Si deja en blanco este campo, los visitantes permanecerán en la misma página.

  4. En el cuadro De lo contrario, Ir a URL, especifique una URL alternativa para los visitantes que no dispongan del complemento. Si deja en blanco este campo, los visitantes permanecerán en la misma página.
  5. 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.

  6. Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.

Aplicación del comportamiento Arrastrar elemento PA

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).

  1. Seleccione Insertar > Objetos de diseño > Div PA o haga clic en el botón Dibujar Div PA del panel Insertar y dibuje una Div PA en la vista de Diseño de la ventana del documento.
  2. Haga clic en <body> en el selector de etiquetas, situado en la esquina inferior izquierda de la ventana de documento.
  3. Seleccione Arrastrar elemento PA en el menú Añadir comportamiento del panel Comportamientos.

    Si Arrastrar elemento PA no está disponible, es probable que tenga un elemento PA seleccionado.

  4. En el menú emergente Elemento PA, seleccione el elemento PA.
  5. Seleccione Restringido o Sin restricción en el menú emergente Movimiento.

    El movimiento no restringido es adecuado para puzzles y otros juegos de arrastrar y soltar. Para los controles deslizantes y los escenarios móviles, como cajones de archivos, cortinas y minipersianas, elija movimiento restringido.

  6. 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.

  7. 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.

  8. Introduzca un valor (en píxeles) en el campo Ajustar si a menos de para determinar a qué distancia del destino el visitante debe soltar el elemento PA para que ésta se ajuste al destino.

    Los valores altos facilitan al visitante la localización el destino para soltar la capa.

  9. Para obtener puzzles sencillos y manipulación de escenarios, puede detenerse aquí. Para definir el manejador de arrastre del elemento PA, controlar el movimiento del elemento PA mientras se arrastra y desencadenar una acción al soltar el elemento PA, haga clic en la ficha Avanzado.
  10. Para definir una zona determinada del elemento PA en la que el visitante debe hacer clic para arrastrarlo, elija Área dentro del elemento en el menú Arrastrar selector; luego introduzca las coordenadas izquierda y superior, así como los valores de ancho y alto del selector de arrastre.

    Esta opción resulta útil cuando la imagen contenida en el elemento PA incluye un elemento que sugiere la posibilidad de arrastrarla, como una barra de título o un asa de cajón. No establezca esta opción si desea que el visitante pueda hacer clic en cualquier lugar del elemento PA para arrastrarlo.

  11. Elija las opciones Al arrastrar que desee utilizar:
    • 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.

  12. 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.
  13. Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.

Recopilación de información sobre el elemento AP desplazable

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.

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 resulta útil para cambiar el contenido de dos o más marcos con un solo clic.

  1. Seleccione un objeto y elija Ir a URL en el menú Añadir comportamiento del panel Comportamientos.
  2. Elija un destino para el URL en la lista Abrir en.

    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.

  3. Haga clic en Examinar para seleccionar el documento que desea abrir o introduzca la ruta y el nombre de archivo del documento en el cuadro de texto URL.
  4. Repita los pasos 2 y 3 para abrir más documentos en otros marcos.
  5. Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.

Aplicación del comportamiento Menú de salto

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.

  1. Cree un objeto de menú de salto si es que no hay todavía ninguno en el documento.
  2. Seleccione el objeto y elija Menú de salto en el menú Añadir comportamiento del panel Comportamientos.
  3. Lleve a cabo los cambios pertinentes en el cuadro de diálogo Menú de salto y luego haga clic en Aceptar.

Aplicación del comportamiento Menú de salto Ir

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.

  1. Seleccione un objeto para utilizarlo como botón Ir (generalmente una imagen de un botón) y elija Menú de salto Ir en el menú Añadir comportamiento del panel Comportamientos.
  2. En el menú Elegir menú de salto, elija un menú para que se active el botón Ir y haga clic en Aceptar.

Aplicación del comportamiento Abrir ventana del navegador

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.

  1. Seleccione un objeto y elija Abrir ventana del navegador en el menú Añadir comportamiento del panel Comportamientos.
  2. Haga clic en Examinar para seleccionar un archivo o introduzca el URL que desea ver.
  3. 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.
  4. 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 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.

  1. Seleccione un objeto y elija Mensaje emergente en el menú Añadir comportamiento del panel Comportamientos.
  2. Introduzca el mensaje en el cuadro Mensaje.
  3. Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.

Aplicación del comportamiento Carga previa de imágenes

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.

  1. Seleccione un objeto y elija Carga previa de imágenes en el menú Añadir comportamiento del panel Comportamientos.
  2. Haga clic en Examinar para seleccionar el archivo de imagen o introduzca la ruta y el nombre de archivo de una imagen en el cuadro Archivo de origen de imagen.
  3. Haga clic en el botón de signo más (+), situado en la parte superior del cuadro de diálogo, para añadir la imagen a la lista Carga previa de imágenes.
  4. Repita los pasos 2 y 3 para todas las imágenes restantes que desee cargar en la página actual.
  5. Para eliminar una imagen de la lista Carga previa de imágenes, selecciónela y haga clic en el botón de signo menos (–).
  6. 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 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()}.
  1. Seleccione un objeto y elija Definir texto > Definir texto de marco en el menú Añadir comportamiento del panel Comportamientos.
  2. En el cuadro de diálogo Definir texto de marco, seleccione el marco de destino del menú Marco.
  3. Haga clic en el botón Obtener HTML actual para copiar el contenido actual de la sección body del marco de destino.
  4. Escriba un mensaje en el cuadro de texto Nuevo HTML.
  5. Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.

Aplicación del comportamiento Definir texto de contenedor

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()}.
  1. Seleccione un objeto y elija Definir texto > Definir texto de contenedor en el menú Añadir comportamiento del panel Comportamientos.
  2. En el cuadro de diálogo Definir texto de contenedor, utilice el menú Contenedor para elegir el elemento de destino.
  3. Escriba el nuevo texto o HTML en el cuadro Nuevo HTML.
  4. Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.

Aplicación del comportamiento Establecer texto de la barra de estado

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()}.
  1. Seleccione un objeto y elija Definir texto > Establecer texto de la barra de estado en el menú Añadir comportamiento del panel Comportamientos.
  2. En el cuadro de diálogo Establecer texto de la barra de estado, escriba el mensaje en el cuadro Mensaje.

    Escriba un mensaje corto. El navegador cortará el mensaje si no cabe en la barra de estado.

  3. Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.

Aplicación del comportamiento Definir texto de campo de texto

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()}.

Creación de un campo de texto con nombre

  1. Seleccione Insertar > Formulario > Campo de texto.

    Si Dreamweaver le pregunta si desea añadir una etiqueta de formulario, haga clic en Sí.

  2. En el inspector de propiedades, introduzca un nombre para el campo de texto. Asegúrese de que el nombre no se repite en la página (no utilice el mismo nombre para varios elementos de la misma página aunque se encuentren en formularios distintos).

Aplicación de Definir texto de campo de texto

  1. Seleccione un campo de texto y elija Definir texto > Definir texto de campo de texto en el menú Añadir comportamiento del panel Comportamientos.
  2. Seleccione el campo de texto de destino en el menú Campo de texto e introduzca el nuevo texto.
  3. Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.

Aplicación del comportamiento Mostrar-Ocultar elementos

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).

  1. 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>).

  2. En la lista Elementos, seleccione el elemento que desea mostrar u ocultar y haga clic en Mostrar, Ocultar o Restaurar (que restaura la visibilidad predeterminada).
  3. Repita el paso 2 para todos los elementos restantes cuya visibilidad desee cambiar. (Se puede cambiar la visibilidad de múltiples elementos con un solo comportamiento).
  4. Haga clic en Aceptar y compruebe si el evento predeterminado es correcto.

Este comportamiento ha dejado de utilizarse 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>. 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.

  1. Elija Insertar > Imagen o haga clic en el botón Imagen del panel Insertar para insertar una imagen.
  2. En el inspector de propiedades, introduzca un nombre para la imagen en el cuadro de texto situado más a la izquierda.

    No es imprescindible asignar nombre a las imágenes. Éstas reciben nombre automáticamente al adjuntar el comportamiento a un objeto. No obstante, resultará más fácil distinguir las imágenes en el cuadro de diálogo Intercambiar imagen si asigna nombre a todas las imágenes de antemano.

  3. Repita los pasos 1 y 2 para insertar más imágenes.
  4. Seleccione un objeto (normalmente, la imagen que va a intercambiar) y elija Intercambiar imagen del menú Añadir comportamiento del panel Comportamientos.
  5. Seleccione en la lista Imágenes la imagen cuyo origen desea cambiar.
  6. Haga clic en Examinar para seleccionar el archivo de la nueva imagen o introduzca la ruta y el nombre de archivo de la nueva imagen en el cuadro Definir origen como.
  7. Repita los pasos 5 y 6 para todas las demás imágenes que desee cambiar. Puede usar la misma acción Intercambiar imagen para todas las imágenes que desee cambiar a la vez; en caso contrario, la acción correspondiente Restaurar imagen intercambiada no las restaurará todas.
  8. Seleccione la opción Carga previa de imágenes para crear un caché para las nuevas imágenes cuando se cargue la página.

    Esto contribuye a evitar las demoras en la descarga cuando llega el momento de que aparezcan las imágenes.

  9. 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 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.

  1. Elija Insertar > Formulario, o haga clic en el botón Formulario del panel Insertar para insertar un formulario.
  2. Elija 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.

  3. Seleccione un método de validación:
    • 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.

  4. Seleccione Validar formulario en el menú Añadir comportamiento.
  5. Siga uno de estos procedimientos:
    • Si está validando campos individuales, seleccione el mismo campo que seleccionó en la ventana de documento en la lista de Campos.

    • Si está validando múltiples campos, seleccione un campo de texto en la lista de Campos.

  6. Seleccione la opción Obligatorio si el campo debe contener algún dato.
  7. Seleccione una de las siguientes opciones de Aceptar:

    Cualquier cosa

    Comprueba que un campo obligatorio contiene 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 contiene un número situado dentro de un rango determinado.

  8. Si ha elegido la validación de múltiples campos, repita los pasos 6 y 7 para cada uno de los campos que desee validar.
  9. Haga clic en Aceptar.

    Si está validando múltiples campos cuando el usuario envía el formulario, en el menú Eventos aparecerá automáticamente el evento onSubmit.

  10. 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.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea