Añadir contenido dinámico a las páginas

Última actualización el 25 abr. 2024
Nota

La interfaz de usuario se ha simplificado en Dreamweaver y versiones posteriores. Como resultado, es posible que no encuentre algunas de las opciones que se describen en este artículo en Dreamweaver y versiones posteriores. Para obtener más información, consulte este artículo.

Acerca de la adición de contenido dinámico

Una vez que definas una o más fuentes de contenido dinámico, puedes usar las fuentes para agregar contenido dinámico en la página.Las fuentes de contenido pueden incluir una columna en un conjunto de registros, un valor enviado por un formulario HTML, el valor contenido en un objeto del servidor, u otros datos.

En Dreamweaver, puedes colocar contenido dinámico casi en cualquier lugar de una página web o su código fuente HTML. Puedes colocar contenido dinámico en el punto de inserción, reemplazar una cadena de texto, o insertarlo como un atributo HTML. Por ejemplo, el contenido dinámico puede definir el atributo src de una imagen, o el atributo value de un campo de formulario.

Puedes agregar contenido dinámico a una página seleccionando una fuente de contenido en el panel Vínculos. Dreamweaver inserta un script del lado del servidor en el código de la página que instruye al servidor a transferir los datos desde la fuente de contenido al código HTML de la página cuando la página es solicitada por un navegador.

A menudo hay más de una manera de hacer dinámico un elemento de página determinado. Por ejemplo, para hacer dinámica una imagen puedes usar el panel Vínculos, el Inspector de propiedades, o el comando Imagen en el menú Insertar.

De forma predeterminada, una página HTML solo puede mostrar registros de uno en uno. Para mostrar los otros registros en el conjunto de registros, puedes agregar un enlace para moverte por los registros uno a la vez, o puedes crear una zona repetida para mostrar más de un registro en una sola página.

Acerca del texto dinámico

El texto dinámico adopta cualquier formato de texto aplicado al texto existente o al punto de inserción. Por ejemplo, si un estilo de Hoja de estilos en cascada (CSS) afecta al texto seleccionado, el contenido dinámico que lo reemplaza también se ve afectado por el estilo. Puedes agregar o cambiar el formato de texto del contenido dinámico usando cualquiera de las herramientas de formato de texto de Dreamweaver.

También puede aplicar formato de datos al texto dinámico. Por ejemplo, si tus datos consisten en fechas, puedes especificar un formato de fecha particular como 04/17/00 para visitantes de EE. UU. o 17/04/00 para visitantes canadenses.

Convertir texto en dinámico

Puedes reemplazar texto existente con texto dinámico, o puedes colocar texto dinámico en un punto de inserción determinado en la página.

Añadir texto dinámico

En la vista Diseño, selecciona texto en la página, o haz clic donde quieras agregar texto dinámico.
En el panel Vínculos (Ventana > Vínculos), selecciona una fuente de contenido de la lista. Si seleccionas un conjunto de registros, especifica la columna que quieres en el conjunto de registros.

La fuente de contenido debe contener texto normal (texto ASCII). El texto normal también incluye HTML. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no satisfacen tus necesidades, haz clic en el botón Más (+) para definir una nueva fuente de contenido.

(Opcional) Seleccione un formato de datos para el texto.
Haga clic en Insertar o arrastre la fuente de contenido hasta la página.

Aparecerá un marcador de posición de contenido dinámico. (Si seleccionaste texto en la página, el marcador de posición reemplaza la selección de texto.) El marcador de posición para el contenido del conjunto de registros usa la sintaxis {RecordsetName.ColumnName}, donde Recordset es el nombre del conjunto de registros y ColumnName es el nombre de la columna que elegiste del conjunto de registros.

A veces, la longitud de los marcadores de posición para texto dinámico distorsiona el diseño de la página en la ventana del Documento. Puedes resolver el problema usando llaves vacías como marcadores de posición, como se describe en el siguiente tema.

Mostrar marcadores de posición para texto dinámico

Selecciona Edición > Preferencias > Elementos invisibles (Windows) o Dreamweaver > Preferencias > Elementos invisibles (Macintosh).
En el menú emergente Mostrar texto dinámico como, selecciona { }, y haz clic en Aceptar.

Convertir imágenes en contenido dinámico

Puede convertir las imágenes de la página en contenido dinámico. Por ejemplo, supón que diseñas una página para mostrar artículos en venta en una subasta benéfica. Cada página incluiría texto descriptivo y una foto de un artículo. El diseño general de la página permanecería igual para cada artículo, pero la foto (y el texto descriptivo) podría cambiar.

Con la página abierta en la vista Diseño (Ver > Diseño), coloca el punto de inserción donde quieras que aparezca la imagen en la página.
Seleccione Insertar > Imagen.

Aparecerá el cuadro de diálogo Seleccionar origen de imagen.

Haz clic en la opción Fuentes de datos (Windows) o en el botón Fuente de datos (Macintosh).

Aparecerá una lista de fuentes de contenido.

Seleccione una fuente de contenido de la lista y haga clic en Aceptar.

La fuente de contenido debe ser un conjunto de registros que contenga las rutas a los archivos de imagen. Dependiendo de la estructura de archivos de tu sitio, las rutas pueden ser absolutas, relativas al documento o relativas a la raíz.

Nota

Dreamweaver actualmente no admite imágenes binarias almacenadas en una base de datos.

Si no aparecen conjuntos de registros en la lista, o si los conjuntos de registros disponibles no satisfacen tus necesidades, define un nuevo conjunto de registros.

Convertir atributos HTML en contenido dinámico

Puedes cambiar dinámicamente la apariencia de una página vinculando atributos HTML a datos. Por ejemplo, puedes cambiar la imagen de fondo de una tabla vinculando el atributo background de la tabla a un campo en un conjunto de registros.

Puedes vincular atributos HTML con el panel Vínculos o con el inspector de propiedades.

Hacer dinámicos los atributos HTML con el panel Vínculos

Abrir el panel Vínculos eligiendo Ventana > Vínculos.
Asegúrate de que el panel Vínculos muestre la fuente de datos que quieres usar.

La fuente de contenido debe contener datos apropiados para el atributo HTML que quieres vincular. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no satisfacen tus necesidades, haz clic en el botón Más (+) para definir una nueva fuente de datos.

En la vista de Diseño, seleccione un objeto HTML.

Por ejemplo, para seleccionar una tabla HTML, haga clic dentro de la tabla y haga clic en la etiqueta <table> en el selector de etiquetas en la parte inferior izquierda de la ventana Documento.

En el panel Vínculos, selecciona una fuente de contenido de tu lista.
En el cuadro Vincular a, seleccione un atributo HTML del menú emergente.
Haga clic en Vincular.

La próxima vez que la página se ejecute en el servidor de aplicaciones, el valor de la fuente de datos se asignará al atributo HTML.

Hacer dinámicos los atributos HTML con el inspector de propiedades

En la vista Diseño, seleccione un objeto HTML y abra el inspector de propiedades (Ventana > Propiedades).

Por ejemplo, para seleccionar una tabla HTML, haga clic dentro de la tabla y haga clic en la etiqueta <table> en el selector de etiquetas en la parte inferior izquierda de la ventana de documento.

La forma de vincular una fuente de contenido dinámico al atributo HTML depende de dónde esté ubicada.
  • Si el atributo que quieres vincular tiene un icono de carpeta junto a él en el inspector de Propiedad, haz clic en el icono de carpeta para abrir un cuadro de diálogo de selección de archivos; luego haz clic en la opción Fuente de datos para mostrar una lista de fuentes de datos.

  • Si el atributo que quieres vincular no tiene un icono de carpeta junto a él, haz clic en la pestaña Lista (la inferior de las dos pestañas) en el lado izquierdo del inspector.

    Aparece la vista de lista del inspector de propiedades.

  • Si el atributo que quieres vincular no aparece en la vista Lista, haz clic en el botón Más (+); luego introduce el nombre del atributo o haz clic en el botón de flecha pequeña y selecciona el atributo del menú emergente.

Para hacer dinámico el Valor del atributo, haz clic en el atributo; luego haz clic en el icono de rayo o en el icono de carpeta al final de la fila del atributo.

Si hiciste clic en el icono de rayo, aparece una lista de fuentes de datos.

Si hiciste clic en el icono de carpeta, aparece un cuadro de diálogo de selección de archivos. Seleccione la opción Fuentes de datos para ver una lista de fuentes de contenido.

Seleccione una fuente de contenido de la lista de fuentes de contenido y haga clic en Aceptar.

La fuente de contenido debe contener datos apropiados para el atributo HTML que quieres vincular. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no satisfacen tus necesidades, define una nueva fuente de contenido.

La próxima vez que la página se ejecute en el servidor de aplicaciones, el valor de la fuente de datos se asignará al atributo HTML.

Hacer dinámicos los parámetros de ActiveX, Flash y otros objetos

Puedes hacer dinámicos los parámetros de los applets Java y complementos, así como los parámetros de objetos ActiveX, Flash, Shockwave, Director y Generator.

Antes de comenzar, asegúrate de que los campos de tu conjunto de registros contengan datos apropiados para los parámetros de objeto que quieres vincular.

En la vista Diseño, selecciona un objeto en la página y abre el inspector de Propiedad (Ventana > Propiedades).
Haga clic en el botón Parámetros.
Si tu parámetro no aparece en la lista, haz clic en el botón Más (+) e introduce un nombre de parámetro en la columna Parámetro.
Haz clic en la columna Valor del parámetro, y luego haz clic en el icono de rayo para especificar un Valor dinámico.

Aparecerá una lista de fuentes de datos.

Seleccione una fuente de datos de la lista y haga clic en Aceptar.

La fuente de datos debe contener datos apropiados para el parámetro de objeto que quieres vincular. Si no aparecen fuentes de datos en la lista, o si las fuentes de datos disponibles no satisfacen tus necesidades, define una nueva fuente de datos.